/*
 * Standard – dersven.de
 * Farben, Hell/Dunkel und Bausteine für alle Seiten und Projekte.
 * Nur Variablen und Klassen, keine Regeln für nackte Elemente.
 */

:root {
	color-scheme: light dark;

	--clr-text: light-dark(#1b1b1b, #fafaf7);
	--clr-text-muted: light-dark(#6e6e73, #9a9a96);
	--clr-background: light-dark(#fafaf7, #1b1b1b);
	--clr-surface: light-dark(#ffffff, #262624);
	--clr-gray-border: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
	--clr-gray-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
	--clr-stripe: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.04));
	--clr-primary: light-dark(rgb(0, 145, 0), rgb(72, 196, 88));
	--clr-primary-accent: light-dark(rgb(0, 100, 0), rgb(120, 214, 132));
	--clr-primary-light: light-dark(rgba(0, 145, 0, 0.14), rgba(72, 196, 88, 0.16));
	--clr-on-primary: light-dark(#ffffff, #1b1b1b);
	--clr-error: #ff263d;
	--clr-error-light: rgba(255, 38, 61, 0.14);

	--radius: 2px;
	--radius-pill: 999px;
	--feld-hoehe: 44px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

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


/* Buttons: .button (Rahmen grün), .button-primary (grün gefüllt), .button-neutral (Textfarbe) */

.button,
.button-primary,
.button-neutral {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--feld-hoehe);
	padding: 0 1.25rem;
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: var(--clr-primary);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--clr-primary);
	border-radius: var(--radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover {
	color: var(--clr-on-primary);
	background: var(--clr-primary);
}

.button-primary {
	color: var(--clr-on-primary);
	background: var(--clr-primary);
}

.button-primary:hover {
	color: var(--clr-on-primary);
	background: var(--clr-primary-accent);
	border-color: var(--clr-primary-accent);
}

.button-neutral {
	color: var(--clr-text);
	border-color: var(--clr-text);
}

.button-neutral:hover {
	color: var(--clr-background);
	background: var(--clr-text);
}

:is(.button, .button-primary, .button-neutral):disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.button-klein {
	min-height: 32px;
	padding: 0 0.75rem;
	font-size: 0.8125rem;
}

.button-gross {
	min-height: 52px;
	padding: 0 1.75rem;
	font-size: 1.25rem;
}


/* Pills für Filter und Tabs: <button class="pill" aria-pressed="true"> */

.pill {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 0;
	padding: 0 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pill:hover {
	color: var(--clr-primary);
}

.pill:is([aria-pressed="true"], [aria-selected="true"], [aria-current]) {
	color: var(--clr-background);
	background: var(--clr-text);
	border-color: var(--clr-text);
}


/*
 * Segment: Einzelauswahl, grün; .segment-neutral in Textfarbe
 * <div class="segment"><label><input type="radio" name="a" checked>Eins</label><label><input type="radio" name="a">Zwei</label></div>
 * oder <div class="segment"><button aria-pressed="true">Eins</button>…</div>
 */

.segment {
	--segment: var(--clr-primary);
	--segment-auf: var(--clr-on-primary);
	display: inline-flex;
	max-width: 100%;
	color: var(--segment);
	border: 1px solid var(--segment);
	border-radius: var(--radius);
	overflow: hidden;
}

.segment-neutral {
	--segment: var(--clr-text);
	--segment-auf: var(--clr-background);
}

.segment > :is(label, button) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 32px;
	margin: 0;
	padding: 0 0.85rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.segment > :is(label, button) + :is(label, button) {
	border-left: 1px solid var(--segment);
}

.segment input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.segment > :hover {
	background: var(--clr-gray-bg);
}

.segment > :is(label:has(input:checked), [aria-checked="true"], [aria-pressed="true"]) {
	color: var(--segment-auf);
	background: var(--segment);
}

.segment > :is(label:has(input:focus-visible), button:focus-visible) {
	outline: 2px solid var(--clr-primary);
	outline-offset: -4px;
}


/* Regler: <input type="range" class="regler"> */

.regler {
	width: 7.5rem;
	height: 1rem;
	margin: 0;
	color: inherit;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.regler::-webkit-slider-runnable-track { height: 1px; background: currentColor; }
.regler::-moz-range-track { height: 1px; background: currentColor; }
.regler::-moz-range-progress { height: 1px; background: currentColor; }

.regler::-webkit-slider-thumb {
	width: 0.8rem;
	height: 0.8rem;
	margin-top: calc(-0.4rem + 0.5px);
	border: 0;
	border-radius: 50%;
	background: var(--clr-text);
	-webkit-appearance: none;
	appearance: none;
}

.regler::-moz-range-thumb {
	width: 0.8rem;
	height: 0.8rem;
	border: 0;
	border-radius: 50%;
	background: var(--clr-text);
}

.regler:hover::-webkit-slider-thumb { background: var(--clr-primary); }
.regler:hover::-moz-range-thumb { background: var(--clr-primary); }

.regler:focus-visible {
	outline: 2px solid var(--clr-primary);
	outline-offset: 4px;
}


/* Schrift */

.versal {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* Feld nur mit Linie: <input class="feld-linie"> */

.feld-linie {
	padding-left: 0;
	padding-right: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}

.feld-linie:focus {
	outline: none;
	border-bottom-color: var(--clr-primary);
	box-shadow: 0 1px 0 var(--clr-primary);
}


/* Toast: <div class="toast" role="status">, sichtbar mit .sichtbar; .toast-oben für oben */

.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 200;
	max-width: calc(100% - 32px);
	padding: 0.625rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--clr-background);
	background: var(--clr-text);
	border-radius: var(--radius);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.sichtbar {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.toast-oben {
	top: calc(16px + env(safe-area-inset-top));
	bottom: auto;
	transform: translate(-50%, -8px);
}

.toast-oben.sichtbar {
	transform: translate(-50%, 0);
}

.toast-erfolg {
	color: var(--clr-on-primary);
	background: var(--clr-primary);
}

.toast-fehler {
	color: #ffffff;
	background: var(--clr-error);
}


/*
 * Hell/Dunkel-Schalter
 * <button class="theme-schalter" onclick="themeWechseln()"> mit <svg class="symbol-mond"> und <svg class="symbol-sonne">
 * Variante Kontrast: <button class="theme-schalter theme-schalter-kontrast" onclick="themeWechseln()"> mit einem Quadrat-Symbol
 * Icon-Knopf allgemein: <button class="icon-knopf" aria-label="…"><svg class="icon">…</svg></button>
 */

.icon-knopf,
.theme-schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--feld-hoehe);
	height: var(--feld-hoehe);
	margin: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.icon-knopf:hover,
.theme-schalter:hover {
	opacity: 0.6;
}

.icon-knopf .icon {
	width: 20px;
	height: 20px;
}

.theme-schalter svg {
	width: 22px;
	height: 22px;
}

.theme-schalter-kontrast svg {
	width: 16px;
	height: 16px;
}

.theme-schalter .symbol-sonne,
:root[data-theme="dark"] .theme-schalter .symbol-mond {
	display: none;
}

:root[data-theme="dark"] .theme-schalter .symbol-sonne {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-schalter .symbol-mond { display: none; }
	:root:not([data-theme="light"]) .theme-schalter .symbol-sonne { display: block; }
}


/*
 * Glas-Panel: das Panel selbst ist aus Glas, der Hintergrund wird nur abgedunkelt
 * <div class="sheet"><div class="backdrop"></div><section class="panel">…</section></div>
 * <dialog class="panel">…</dialog>
 * Fenster, mobil als Blatt von unten: <dialog class="panel blatt">…</dialog>
 */
.backdrop {
	position: absolute;
	inset: 0;
}

.backdrop,
dialog.panel::backdrop {
	background: rgba(0, 0, 0, 0.28);
}

.panel {
	background: var(--clr-surface);
	border: 1px solid var(--clr-gray-border);
	border-radius: var(--radius);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.panel {
		background: color-mix(in srgb, var(--clr-surface) 55%, transparent);
		-webkit-backdrop-filter: blur(28px) saturate(1.6);
		backdrop-filter: blur(28px) saturate(1.6);
	}
}

dialog.blatt {
	width: min(30rem, calc(100% - 32px));
	max-height: calc(100dvh - 48px);
	padding: 24px;
	color: var(--clr-text);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 560px) {
	dialog.blatt {
		width: 100%;
		max-width: none;
		margin: auto 0 0;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 0;
		max-height: calc(100dvh - 32px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	dialog.blatt[open] { animation: panel-auf .28s cubic-bezier(.2, .9, .25, 1); }
	dialog.panel[open]::backdrop { animation: blende-auf .2s ease-out; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
	dialog.blatt[open] { animation: blatt-auf .34s cubic-bezier(.2, .9, .25, 1); }
}

@keyframes panel-auf { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes blatt-auf { from { transform: translateY(100%); } }
@keyframes blende-auf { from { opacity: 0; } }


/*
 * Symbole: Form klappt beim Drüberfahren zu Inhalt auf und schiebt die folgenden weg
 * <span class="symbole">
 *   <span class="symbol-aktion"><span class="symbol" aria-hidden="true"></span><span class="symbol-inhalt"><a href="#">Teilen</a></span></span>
 *   <span class="symbol-aktion symbol-kreis">…</span>
 *   <span class="symbol-aktion symbol-dreieck">…</span>
 * </span>
 */

.symbole {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.symbol-aktion {
	display: inline-flex;
	align-items: center;
}

.symbol {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background: currentColor;
	transition: flex-basis 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

.symbol-kreis > .symbol { border-radius: 50%; }
.symbol-dreieck > .symbol { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.symbol-inhalt {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 6px;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.25s ease, opacity 0.2s ease;
}

.symbol-aktion:is(:hover, :focus-within) > .symbol {
	flex-basis: 0;
	width: 0;
	opacity: 0;
}

.symbol-aktion:is(:hover, :focus-within) > .symbol-inhalt {
	max-width: 220px;
	opacity: 1;
	color: var(--clr-primary);
}

.symbol-inhalt a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.symbol-inhalt a:focus-visible {
	outline-offset: -2px;
}


/* Icons: Linien-SVG in Textgröße, <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"> */

.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}


@media (prefers-reduced-motion: reduce) {
	.button,
	.button-primary,
	.button-neutral,
	.pill,
	.segment > *,
	.symbol,
	.symbol-inhalt,
	.toast {
		transition: none;
	}
}