/* core.css */
*,
*::before,
*::after {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

html {
	min-height: 100%;
	padding: 0;
	font-size: var(--font-root);
	font-family: var(--font-body);
	background-color: hsl(195, 90%, 80%);
	color-scheme: light dark;
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizeLegibility;
}

body {
	padding-top: 1px;
	min-height: 100vh;
	height: 100%;
	width: 100%;
	margin: 0;
	text-rendering: optimizeSpeed;
	scrollbar-gutter: stable both-edges;
}

dialog {
	background: inherit;
	color: inherit;
}

body,
main,
section,
article,
footer,
header,
aside,
div,
nav,
figure,
[role=figure] {
	position: relative;
}

.page-head {
	isolation: isolate;
	padding-bottom: 1px;
	margin-inline: auto;
}

body > .page-head {
	max-width: 120rem;
}
main > .page-head {
	padding-top: var(--spacing);
	width: 65%;
}

#site-bar-wrapper {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 42;
	max-width: 120rem;
	min-height: var(--site-bar-height, 0px);
	@media (min-width:640px) {
		padding-top: 0;
	}
}

.page-section,
.section-head {
	padding-top: 1px;
}

.page-main, 
.page-foot,
.breadcrumbs {
	max-width: var(--max-content-width);
	margin-inline: auto;
}

/* Document */
p,
ul,
ol,
dl,
address,
blockquote {
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	margin-block: 0 var(--sizem-2);
	line-height: var(--font-lineheight-3);
}

li > ul,
li > ol {
	margin-bottom: 0;
}

ul {
	padding-left: 2ch;
}

ol {
	padding-left: 3ch;
}

:is(ol, ul, dl).spread :is(li, dd) {
	margin-bottom: var(--font-lineheight-3);
}

:is(p, li, dd, address, blockquote) + :is(p, ul, ol, dl) {
	margin-top: var(--font-lineheight-3);
}

p, li, dd, address, blockquote, caption, figcaption,
:is(h4,.h4, h5,.h5, h6,.h6),
:where(h1,.h1, h2,.h2, h3,.h3) :is(i, b, u, strong, em),
.text-hyphens,
:where([class*=-title]) {
	-webkit-hyphens: auto;
	hyphens: auto;
}
:is([class*=-title]) > :is(i, b, u, strong, em) {
	-webkit-hyphens: none;
	hyphens: none;
}

dt {
	font-weight: var(--font-weight-bold);
}

details > summary:not([role]) {
  list-style-type: none;
}

/* colour box */
blockquote.box {
	margin-inline: auto;
	padding: var(--size-1) var(--size-2);
	isolation: isolate;
	width: min(92%, 82ch);
	@media (width > 42em) {
		width: min(80%, 82ch);
	}
	.box-title {
		padding-block: 0;
	}
}

blockquote.box {
	--outline-color: color-mix(in oklab, var(--color-title), #fff 70%);
	border: var(--outline-width) solid transparent;
	border-radius: var(--size-1);
	background-image:
			radial-gradient(circle at 80% 80%, var(--color-surface), #fff), 
			linear-gradient(135deg, var(--color-surface), var(--outline-color));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

	.box-title {
		color: var(--color-title, inherit);
	}

	&:not(.-kontur) {
		background: none;
		box-shadow: 0 0 .2ex var(--color-title);
	}
}

/* $layout == 'disclosure' */

details.faq-item {
	summary {
		display: grid;
		user-select: none;
		grid-template-columns: 1.25em 1fr;
		grid-template-areas: "img txt";
	}
	summary span {
		grid-area: txt;
		padding: var(--size-1) var(--size-2);
	}
	summary::before {
		grid-area: img;
		padding: var(--size-1) var(--size-2);
		content: '\027A4';
		font-size: 1em;
		transform-origin: 1em 1em;
    transition: transform 200ms ease-out;
	}
	&[open] summary::before {
		transform: rotate(90deg);
	}
}

details.faq-item {
	outline: 1px solid var(--color-title);
	border-radius: 3px;
	summary {
		background-color: var(--color-surface);
	}
}
.faq-item .item {
	background-color: color(from var(--color-surface) srgb r g b / 0.35);
}

@media (min-width:36em) {
	.faq-item {
		width: min(65ch, 80%);
	}
}

.faq-item dd {
	line-height: 1.42;
}
.faq-item .item {
	padding: var(--size-1) var(--size-2);
}
.faq-item.-ghost dt {
	padding-inline: var(--space-inside);
}

a,
a[class],
u, ins, abbr ,
article a:visited {
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2ex;
	text-decoration-skip-ink: auto;
}

u, 
ins, 
abbr {
	text-decoration: underline;
}

:any-link:focus:not([class]) {
	text-decoration-color: transparent;
}

:any-link,
:any-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

:any-link:focus:not([class]) {
	outline: 1px solid currentColor;
	outline-offset: 1px;
	border-radius: 2px;
}

:any-link > :is(u, i) {
	font: inherit;
	display: inline-block;
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
}

main :any-link.ext,
main :any-link[rel*="noref"],
main :any-link:not([href*="@/page"]) {
	cursor: alias;
}

:is(p, li, blockquote) :is(code, kbd, tt, samp) {
	font-family: var(--font-mono);
	font-size: var(--sizex-5);
	line-height: 1;
	font-kerning: auto;
	outline: 1px dotted currentColor;
	border-radius: 2px;
	padding: 0px 2px;
	display: inline-block;
	color: var(--primary-300);
}

:is(pre, xmp) {
	text-align: left;
	padding: var(--sizex-2);
	font-size: var(--sizex-3);
	font-family: Fira Code, var(--font-mono);
}

:is(code, kbd, tt, samp) {
	font-variant-ligatures: no-contextual;
	letter-spacing: -0.1ex;
}

address {
	font-style: normal;
	page-break-inside: avoid;
	break-inside: avoid;
}

bdo,
.nobr {
	white-space: nowrap;
}

/* layout.headings */
:is(h1,.h1, h2,.h2, h3,.h3) {
	font-variant-ligatures: common-ligatures contextual;
	text-wrap: balance;
}

:is(h1,.h1, h2,.h2, h3,.h3,
    h4,.h4, h5,.h5, h6,.h6) {
	margin-block: 0 1ex;
	line-height: 1.165;
	padding-block: 0.5px;
}

header :is(h1,.h1, h2,.h2, h3,.h3) {
	--spacing: var(--sizex-2);
}

h1, .h1 {
	font-family: var(--font-display);
	font-size: var(--font-size-5);
}

figure.-hero .card-title,
h2, .h2 {
	font-family: var(--font-display);
	font-size: var(--font-size-4);
}

h3, .h3 {
	font-family: var(--font-title);
	font-size: var(--font-size-3);
}

h4, .h4 {
	font-family: var(--font-title);
	font-size: var(--font-size-2);
}

h5, .h5,
h6, .h6 {
	font-family: var(--font-body);
	font-size: var(--font-size-1);
}

caption,
[class*=-title] {
	max-width: revert;
	/* padding-block: 1ex; */
}

caption > :is(i, u, samp, em),
[class*=-title] > :is(i, u, samp, em) {
	font-style: inherit;
	font-weight: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

[class*=-title]:first-letter {
	text-transform: capitalize;
}

small {
	--not-small: 1.142857%;
	font-size: var(--font-size-0);
}

.stack    {--gutter:var(--spacer)}
.stack-xs {--gutter:var(--size-1)}
.stack-sm {--gutter:var(--size-2)}
.stack-md {--gutter:var(--size-3)}
.stack-lg {--gutter:var(--size-5)}
.stack-xl {--gutter:var(--size-7)}
:is(.stack, [class*="stack-"])[class] {
	> *:first-child,
	> * + *:not(:last-child) {
		margin-bottom: var(--gutter);
	}
}

/* utilities.spaces 
	margin	--spacer	--space-outside
	padding --spacing --space-inside
*/
.ws-xs {
	--spacer: var(--size-1) !important;
	--spacing: var(--size-1) !important;
}
.ws-sm {
	--spacer: var(--size-2) !important;
	--spacing: var(--size-2) !important;
}
.ws-md {
	--spacer: var(--size-3) !important;
	--spacing: var(--size-3) !important;
}
.ws-lg {
	--spacer: var(--size-5) !important;
	--spacing: var(--size-5) !important;
}
.ws-xl {
	--spacer: var(--size-7) !important;
	--spacing: var(--size-7) !important;
}

.pt-xs { padding-top: var(--size-1)}
.pt-sm { padding-top: var(--size-2)}
.pt-md { padding-top: var(--size-3)}
.pt-lg { padding-top: var(--size-5)}
.pt-xl { padding-top: var(--size-7)}

.pb-xs { padding-bottom: var(--size-1)}
.pb-sm { padding-bottom: var(--size-2)}
.pb-md { padding-bottom: var(--size-3)}
.pb-lg { padding-bottom: var(--size-5)}
.pb-xl { padding-bottom: var(--size-7)}

.pl-xs { padding-left: var(--size-1)}
.pl-sm { padding-left: var(--size-2)}
.pl-md { padding-left: var(--size-3)}
.pl-lg { padding-left: var(--size-5)}
.pl-xl { padding-left: var(--size-7)}

.pr-xs { padding-right: var(--size-1)}
.pr-sm { padding-right: var(--size-2)}
.pr-md { padding-right: var(--size-3)}
.pr-lg { padding-right: var(--size-5)}
.pr-xl { padding-right: var(--size-7)}

.p-i		{ padding-inline: var(--spacing)}
.p-xs-i { --space-inside: var(--size-1)}
.p-sm-i { --space-inside: var(--size-2)}
.p-md-i { --space-inside: var(--size-3)}
.p-lg-i { --space-inside: var(--size-5)}
.p-xl-i { --space-inside: var(--size-7)}
:is(#i, .p-xs-i,.p-sm-i,.p-md-i,.p-lg-i,.p-xl-i) {
	--space-inside-pull: calc(-1 * var(--space-inside));
	--space-inside-start: var(--space-inside);
	--space-inside-end: var(--space-inside);
}
main :is(#i, .p-xs-i,.p-sm-i,.p-md-i,.p-lg-i,.p-xl-i) {
	padding-inline: var(--space-inside);
}

.p-b		{ padding-block: var(--spacing)}
.p-xs-b {--spacing: var(--size-1)}
.p-sm-b {--spacing: var(--size-2)}
.p-md-b {--spacing: var(--size-3)}
.p-lg-b {--spacing: var(--size-5)}
.p-xl-b {--spacing: var(--size-7)}
:is(#i, .p-xs-b,.p-sm-b,.p-md-b,.p-lg-b,.p-xl-b) {
	--space-pull: calc(-1 * var(--spacing));
	--space-start: var(--spacing);
	--space-end: var(--spacing);
}
main :is(#i, .p-xs-b,.p-sm-b,.p-md-b,.p-lg-b,.p-xl-b) {
	padding-block: var(--space-end);
}

.p-xs {--spacing: var(--size-1)}
.p-sm {--spacing: var(--size-2)}
.p-md {--spacing: var(--size-3)}
.p-lg {--spacing: var(--size-5)}
.p-xl {--spacing: var(--size-7)}

.p-rem {--spacing: 1rem}
.p-em {--spacing: 1em}
.p-ex {--spacing: 1ex}
.p-ch {--spacing: 1ch}
:is(#i, .p-xs,.p-sm,.p-md,.p-lg,.p-xl, .p-rem,.p-em,.p-ex,.p-ch) {
	--space-pull: calc(-1 * var(--spacing));
	--space-start: var(--spacing);
	--space-end: var(--spacing);
	--space-inside: var(--spacing);
	--space-inside-pull: calc(-1 * var(--space-inside));
	--space-inside-start: var(--space-inside);
	--space-inside-end: var(--space-inside);
}
main :is(#i, .p-xs,.p-sm,.p-md,.p-lg,.p-xl, .p-rem,.p-em,.p-ex,.p-ch) {
	padding-block: var(--space-inside);
	padding-inline: var(--space-inside);
}

:is(#i, .pt-0, .pb-0, .pl-0, .pr-0, .p-i-0, .p-b-0) {--spacing: 0}
main :is(#i, [class].pt-0) {padding-top:var(--spacing)}
main :is(#i, [class].pb-0) {padding-bottom:var(--spacing)}
main :is(#i, [class].pl-0) {padding-left:var(--spacing)}
main :is(#i, [class].pr-0) {padding-right:var(--spacing)}
main :is(#i, [class].p-i-0) {padding-inline:var(--spacing)}
main :is(#i, [class].p-b-0) {padding-block:var(--spacing)}

.mt-xs {margin-top: var(--size-1)}
.mt-sm {margin-top: var(--size-2)}
.mt-md {margin-top: var(--size-3)}
.mt-lg {margin-top: var(--size-5)}
.mt-xl {margin-top: var(--size-7)}

.mb-xs {margin-bottom: var(--size-1)}
.mb-sm {margin-bottom: var(--size-2)}
.mb-md {margin-bottom: var(--size-3)}
.mb-lg {margin-bottom: var(--size-5)}
.mb-xl {margin-bottom: var(--size-7)}

.ml-xs {margin-left: var(--size-1)}
.ml-sm {margin-left: var(--size-2)}
.ml-md {margin-left: var(--size-3)}
.ml-lg {margin-left: var(--size-5)}
.ml-xl {margin-left: var(--size-7)}

.mr-xs {margin-right: var(--size-1)}
.mr-sm {margin-right: var(--size-2)}
.mr-md {margin-right: var(--size-3)}
.mr-lg {margin-right: var(--size-5)}
.mr-xl {margin-right: var(--size-7)}

.m-xs-i {--spacer-inline: var(--size-1)}
.m-sm-i {--spacer-inline: var(--size-2)}
.m-md-i {--spacer-inline: var(--size-3)}
.m-lg-i {--spacer-inline: var(--size-5)}
.m-xl-i {--spacer-inline: var(--size-7)}
.m-i {
	margin-inline: var(--spacing);
}
.m-i-auto {
	margin-inline: auto;
}
:is(#i, .m-xs-i,.m-sm-i,.m-md-i,.m-lg-i,.m-xl-i) {
	--spacer-inline-pull: calc(-1 * var(--spacer-inline));
	--spacer-inline-start: var(--spacer-inline);
	--spacer-inline-end: var(--spacer-inline);
}
main :is(#i, .m-xs-i,.m-sm-i,.m-md-i,.m-lg-i,.m-xl-i) {
	margin-left: var(--spacer-inline-start);
	margin-right: var(--spacer-inline-end);
}

.m-xs-b {--spacer: var(--size-1)}
.m-sm-b {--spacer: var(--size-2)}
.m-md-b {--spacer: var(--size-3)}
.m-lg-b {--spacer: var(--size-5)}
.m-xl-b {--spacer: var(--size-7)}
:is(#i, .m-xs-b,.m-sm-b,.m-md-b,.m-lg-b,.m-xl-b) {
	--spacer-pull: calc(-1 * var(--spacer));
	--spacer-start: var(--spacer);
	--spacer-end: var(--spacer);
}
:is(#i, .m-xs-b,.m-sm-b,.m-md-b,.m-lg-b,.m-xl-b) {
	margin-top: var(--spacer-start);
	margin-bottom: var(--spacer-end);
}

.m-b {margin-block: var(--spacer, var(--spacing))}
.m-b-auto {margin-block: auto}

.m-xs {--spacer: var(--size-1)}
.m-sm {--spacer: var(--size-2)}
.m-md {--spacer: var(--size-3)}
.m-lg {--spacer: var(--size-5)}
.m-xl {--spacer: var(--size-7)}
main :is(#i, .m-xs,.m-sm,.m-md,.m-lg,.m-xl) {
	margin-block: var(--spacer);
	margin-inline: var(--spacer-inline);
}

.m-rem {--spacer: 1rem}
.m-em {--spacer: 1em}
.m-ex {--spacer: 1ex}
.m-ch {--spacer: 1ch}
:is(#i, .m-rem,.m-em,.m-ex,.m-ch) {
	--spacer-pull: calc(-1 * var(--spacer));
	--spacer-start: var(--spacer);
	--spacer-end: var(--spacer);
	--spacer-inline: var(--spacer);
	--space-inline-pull: calc(-1 * var(--spacer));
	--space-inline-start: var(--spacer);
	--space-inline-end: var(--spacer);
}
:is(#i, .m-rem,.m-em,.m-ex,.m-ch) {
	margin-block: var(--spacer);
	margin-inline: var(--spacer-inline);
}

:is(#i, .mt-0,.mb-0,.ml-0,.mr-0,.m-i-0,.m-b-0) {--spacer:0;}
:is(#i, [class].mt-0) {margin-top:var(--spacer)}
:is(#i, [class].mb-0) {margin-bottom:var(--spacer)}
:is(#i, [class].ml-0) {margin-left:var(--spacer)}
:is(#i, [class].mr-0) {margin-right:var(--spacer)}
:is(#i, [class].m-i-0) {margin-inline:var(--spacer)}
:is(#i, [class].m-b-0) {margin-block:var(--spacer)}
.m-pull-b {margin-block: var(--spacer-pull)}
.m-pull-i {margin-inline: var(--space-inline-pull)}


/* Modifier Bildformat AspectRatio Galore */
.-square {
	--aspect: 1/1;
	--ratio: 100;
	--factor: 1;
}
.-landscape {
	--aspect: 4/3;
	--ratio: 75;
	--factor: 1.333;
}
.-portrait {
	--aspect: 3/4;
	--ratio: 133.333;
	--factor: 0.75;
}
.-widescreen {
	--aspect: 16/9;
	--ratio: 56.25;
	--factor: 1.778;
}
.-ultrawide {
	--aspect: 1.85/1;
	--ratio: 54.05;
	--factor: 1.85;
}
.-golden {
	--aspect: 1.618/1;
	--ratio: 61.80;
	--factor: 1.618;
}
.-double {
	--aspect: 2/1;
	--ratio: 50;
	--factor: 2;
}
[data-aspect] > :is(figure,img,svg,video) {
	aspect-ratio: var(--aspect);
	height: 100%;
	max-height: 100%;
}

/* Skip/Show visibility by @media 
	data-skip hide below max-width
	data-show show above min-width
*/
@media (max-width: 23.249em) {[data-skip=xxs] {display: none !important}}
@media (max-width: 29.999em) {[data-skip=xs] {display: none !important}}
@media (max-width: 35.999em) {[data-skip=sm] {display: none !important}}
@media (max-width: 39.999em) {[data-skip=smd] {display: none !important}}
@media (max-width: 49.999em) {[data-skip=md] {display: none !important}}
@media (max-width: 63.999em) {[data-skip=lg] {display: none !important}}
@media (max-width: 79.999em) {[data-skip=xl] {display: none !important}}
@media (max-width: 89.999em) {[data-skip=xxl] {display: none !important}}

@media (min-width: 23.25em) {[data-show=xxs] {display: none !important}}
@media (min-width: 30em) {[data-show=xs] {display: none !important}}
@media (min-width: 36em) {[data-show=sm] {display: none !important}}
@media (min-width: 40em) {[data-show=smd] {display: none !important}}
@media (min-width: 50em) {[data-show=md] {display: none !important}}
@media (min-width: 64em) {[data-show=lg] {display: none !important}}
@media (min-width: 80em) {[data-show=xl] {display: none !important}}
@media (min-width: 90em) {[data-show=xxl] {display: none !important}}

.width-fit {
	max-width: 100% !important;
}

.width-full {
	width: 100% !important;
}

.height-fit {
	max-height: 100% !important;
}

.height-full {
	height: 100% !important;
}

.min-width-0 {
	min-width: 0 !important;
}


/* layout.grid */
[class*="grid"] {
	> * {min-width:0}
	&.-inline {display: grid-inline}
	&.-dense {grid-auto-flow: dense}
	&.-dense-rows {grid-auto-flow: dense row}
	&.-dense-cols {grid-auto-flow: dense column}
}

.grid,
[class*="grid"] {
	--_gb: var(--gap-block, var(--gap, var(--gutter, 0px)));
	--_gi: var(--gap-inline, var(--gap, var(--gutter, 0px)));
	gap: var(--_gb) var(--_gi);
	grid-template-columns: var(--column-layout, auto);
	grid-template-rows: var(--row-layout, auto);
	grid-template-areas: var(--area-layout, auto);

	--grid-full-area: 1 / 1 / -1 / -1;
	--grid-full-row: auto / 1 / auto / -1;
	--grid-full-col: 1 / auto / -1 / auto;
	--grid-ram-item: calc(var(--col-item, 0px) - var(--_gi));
	--grid-ram:      repeat(auto-fit, minmax(min(var(--grid-ram-item), 100%), 1fr));
	--grid-ram-flex: repeat(auto-fit, minmax(min(var(--col-item, 0px), 100%), 1fr));
	--grid-holy-grail: "h h h" auto "f b b" 1fr "f b b" auto / var(--column-layout, [L] auto [C] 1fr auto [R]);
}

.grid {display: grid;}
@media (max-width: 23.249em) {
	.grid-xxs-below {display:grid}
	.flex-xxs-below {display:flex}
}
@media (max-width: 29.999em) {
	.grid-xs-below {display:grid}
	.flex-xs-below {display:flex}
}
@media (max-width: 35.999em) {
	.grid-sm-below {display:grid}
	.flex-sm-below {display:flex}
}
@media (max-width: 39.999em) {
	.grid-smd-below {display:grid}
	.flex-smd-below {display:flex}
}
@media (max-width: 49.999em) {
	.grid-md-below {display:grid}
	.flex-md-below {display:flex}
}
@media (max-width: 63.999em) {
	.grid-lg-below {display:grid}
	.flex-lg-below {display:flex}
}
@media (max-width: 79.999em) {
	.grid-xl-below {display:grid}
	.flex-xl-below {display:flex}
}
@media (max-width: 89.999em) {
	.grid-xxl-below {display:grid}
	.flex-xxl-below {display:flex}
}
@media (max-width: 95.999em) {
	.grid-xxxl-below {display:grid}
	.flex-xxxl-below {display:flex}
}

@media (min-width: 23.25em) {
	.grid-xxs {display:grid}
	.flex-xxs {display:flex}
}
@media (min-width: 30em) {
	.grid-xs {display:grid}
	.flex-xs {display:flex}
}
@media (min-width: 36em) {
	.grid-sm {display:grid}
	.flex-sm {display:flex}
}
@media (min-width: 40em) {
	.grid-smd {display:grid}
	.flex-smd {display:flex}
}
@media (min-width: 50em) {
	.grid-md {display:grid}
	.flex-md {display:flex}
}
@media (min-width: 64em) {
	.grid-lg {display:grid}
	.flex-lg {display:flex}
}
@media (min-width: 80em) {
	.grid-xl {display:grid}
	.flex-xl {display:flex}
}
@media (min-width: 90em) {
	.grid-xxl {display:grid}
	.flex-xxl {display:flex}
}
@media (min-width: 96em) {
	.grid-xxxl {display:grid}
	.flex-xxxl {display:flex}
}

[class*=grid] :is(img,svg,video) {
	&.-top    {align-self: start}
	&.-middle {align-self: center}
	&.-bottom {align-self: last baseline}
	&.-right  {justify-self: end}
	&.-center {justify-self: center}
	&.-left   {justify-self: start}
}

.full-area {
	grid-area: var(--grid-full-area);
}

.any-area {
	grid-column: var(--cols, auto);
	grid-row: var(--rows, auto);
}

.align-middle {
	vertical-align: middle;
	align-self: center;
}

.align-top {
	vertical-align: top;
	align-self: start;
}

.align-bottom {
	vertical-align: bottom;
	align-self: end;
}

.align-text-top {
	vertical-align: text-top;
	align-self: self-start;
}

.align-text-bottom {
	vertical-align: text-bottom;
	align-self: self-end;
}

.align-baseline {
	vertical-align: baseline;
	align-self: baseline;
}

.text-xs {font-size: var(--font-size-00)}
.text-sm {font-size: var(--font-size-0)}
.text-md {font-size: var(--font-size-1)}
.text-lg {font-size: var(--font-size-2)}
.text-xl {font-size: var(--font-size-3)}
.text-xxl {font-size: var(--font-size-4)}
:is(.text-xs,.text-sm,.text-md,.text-lg,.text-xxl) {
	font-kerning: auto;
}
.text-smaller {font-size: smaller}
.text-larger {font-size: larger}

p > small:only-child,
p.text-sm {
	line-height: var(--font-lineheight-1);
}

.text-upper[class],
.text-uppercase[class] {
	text-transform: uppercase;
	letter-spacing: var(--font-letterspacing-2);
}

.text-bold[class] {
	font-weight: var(--font-weight-bold);
}

.text-italic[class] {
	font-style: italic;
}

.text-normal[class] {
	font-weight: var(--font-weight-normal);
	font-style: normal;
}

.text-mono[class] {
	font-family: var(--font-mono);
	font-size: var(--font-size-mono);
}

.text-display[class] {
	font-family: var(--font-display);
}

.text-center[class] {
  text-align: center;
  margin-inline: auto;
  max-width: max(75%, 80ch)
}

.text-start[class],
.text-left[class] {
	text-align: left;
}

.text-end[class],
.text-right[class] {
	text-align: right;
}

.text-justify[class] {
	text-align: justify;
}

.text-truncate {
	max-width: var(--text-len);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* content.embedded */
audio,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

main iframe {
	max-width: var(--max-content-width, 100%) !important;
	border-style: none;
	width: 100%;
  min-height: 70vh;
  margin-inline: auto;
}

main :is(figure,[role=figure]) {
	margin: 0;
	padding: 0;
}

main :is(img) {
	border-style: none;
	height: auto;
	max-width: 100%;
}

main :is(img,svg,figure,[role=img],[role=figure]) {
	page-break-inside: avoid;
	break-inside: avoid;
}

main img:before {
	content: "Fehler beim Laden des Bildes";
}

main svg:not([fill]) {
	fill: var(--icon-fill, currentColor);
}
main svg:not([stroke]) {
	stroke: var(--icon-stroke, currentColor);
}
main svg:not(:root) {
	overflow: hidden;
}
main svg[tabindex]:is(:active,:focus,:focus-within) {
	outline: none;
}

main :is(img,svg,video) {
	object-position: var(--hero-pos, var(--align-block) var(--align-inline, center));
	&.-top {
		--align-block: top;
	}
	&.-middle {
		--align-block: center;
	}
	&.-bottom {
		--align-block: bottom;
	}
	&.-left {
		--align-inline: left;
	}
	&.-right {
		--align-inline: right;
	}
}

main :is(img,svg,video).-center,
main :is(.-widescreen,.-ultrawide) :is(img,svg,video).-top, 
main :is(.-widescreen,.-ultrawide) :is(img,svg,video).-bottom {
	--align-block: center;
	--align-inline: center;
}

@media (prefers-contrast: more) {
	svg {
		--icon-stroke-width: 3px;
	}
}
.cover,
.contain {
	overflow: clip;
}

.cover > :is(img,svg) {
	min-height: 100%;
	width: auto;
	object-fit: cover;
}

.contain > :is(img,svg) {
	min-width: 100%;
	height: auto;
	object-fit: contain;
}

.hero-image :is(img,svg,video) {
	position: absolute;
	object-fit: none;
}
.page-title {
	margin-left: max(1rem, var(--space-inside));
	margin-block: 0;
}
.page-intro {
	text-wrap: balance;
	margin-right: max(1rem, var(--space-inside));
	:last-child {
		margin-bottom: unset;
	}
}

.hero-image {
	--area-layout: "sb sb" "nw ne" "sw se";
	--column-layout: [L] 1fr [C] 1fr [R];
	--row-layout: 
		calc(var(--site-bar-height) + var(--spacer))
		[T upper-start] var(--upper-size, 1fr) 
		[M upper-end lower-start] var(--lower-size, auto) 
		[B lower-end];
	place-items: center;
	.page-title {
		grid-area: T / L / B / R;
	}
}
.hero-image[data-intro] {
	--gap-inline: var(--space-inside);
	.page-title {
		grid-area: T / L / B / C;
	}
	.page-intro {
		grid-area: T / C / B / R;
	}
}

.hero-image.-center, 
.-ultrawide .hero-image:is(.-top, .-bottom) {
	--align-block: center;
	--align-inline: center;
}


/* Accessibility & User interactions */
 [aria-busy=true] {
	cursor: progress;
}

[aria-busy=true]:not(input, select, textarea)::before {
	content: "";
	display: inline-block;
	width: var(--sizem-6);
	height: var(--sizem-6);
	border: var(--sizex-2) solid #2c90a8;
	filter: opacity(0.85);
	mix-blend-mode: luminosity;
	border-radius: var(--sizem-6);
	border-right-color: transparent;
	vertical-align: text-bottom;
	vertical-align: -0.125em;
	animation: spinner 1.35s linear infinite;
}
[aria-busy=true]:not(input, select, textarea):empty {
	text-align: center;
}

:is(a,button,input)[aria-busy=true] {
	pointer-events: none;
	touch-action: none;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}
.hidden,
[hidden] {
	display: none !important;
}

.invisible[class] {
	transition: visibility 1s ease-in, opacity 1s ease-in;
	visibility: hidden;
	opacity: 0;
}

.sr-only {
	grid-column: 1/1;
	grid-row: 1/1;
	left: -100vw;
	position: absolute;
	max-width: 1px;
	max-height: 1px;
	padding: 0;
	overflow: hidden;
	border: none;
}
.sr-only.focusable:is(:active,:focus,:focus-within) {
	all: revert;
	position: absolute;
}

[id=skip-links]:focus-within {
	background-color: var(--surface-10);
	color: var(--color-0);
	top: 2ch;
	left: 2ch;
	padding: 1ex;
	font-size: 2rem;
	z-index: 27;
}
[id=skip-links]:focus-within * {
	display: unset;
}

[aria-controls] {
	cursor: pointer;
}

:disabled,
[aria-disabled=true] {
	filter: saturate(0.2) grayscale(0.4);
	cursor: not-allowed;
	user-select: none;
}

[aria-hidden=false][hidden] {
	display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
	clip: rect(0, 0, 0, 0);
	position: absolute;
}

[aria-hidden=true] {
	user-select: none;
}

a[href],
area,
button,
select,
summary,
input:where([type=radio], [type=checkbox], [type=range], [type=color], [type=color]),
label[for],
[data-interactive]:hover {
	cursor: var(--cursor, pointer);
	touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*:not([aria-busy=true]),
	*:not([aria-busy=true])::before,
	*:not([aria-busy=true])::after {
		background-attachment: initial !important;
		animation-duration: 0.1ms !important;
		animation-delay: -1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fade-target {
	to {
		background-size: 0 50%;
		background-position: -65%;
		border-color: transparent;
	}
}
@keyframes pulse-out {
	50% {
		transform: scale(1.1, 1.1);
	}
}
@keyframes pulse {
	50% {
		transform: scale(0.9, 0.9);
	}
}

.inverted {
	max-width: fit-content;
	background-image: none;
	box-shadow: var(--shadow-2);
	line-height: var(--sizem-6);
	border-radius: 3px;
}
.inverted:only-child {
	padding: var(--sizex-1) var(--sizex-3);
}


@supports (box-decoration-break: clone) or (-webkit-box-decoration-break: clone) {
	.inverted:has(.inverted) {
		background-color: transparent;
	}
	:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, p).inverted > :is(a, span, b),
	:where(a, span, b, p).inverted {
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		letter-spacing: -0.032ch;
		display: inline;
		padding: calc(0.25 * var(--spacer)) calc(1.25 * var(--space-inside));
	}
}

mark,
:is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target:first-line {
	border-radius: 0.1rem;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	margin-inline: -0.2em;
	padding-inline: 0.2em;
}

mark {
	background-size: 100% 100%;
	background: transparent var(--marker-background) no-repeat left;
}


.line-clamp {
  max-width: calc(100% - 2ch);
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;
}

.block-clamp {
  overflow: var(--scroll, clip);
  display: -webkit-box !important;
  -webkit-line-clamp: var(--lines, 2);
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}


@media (prefers-reduced-motion:no-preference) {
	:is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target {
		background: transparent var(--marker-background) no-repeat left;
		background-size: 100%;
		animation: 0s 2s ease-in 1 forwards fade-target;
	}
}

@media (prefers-reduced-motion:reduce) {
	:is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target {
		margin-left: -.5rem;
		padding-left: .25rem;
		border-left: .25rem solid hsl(var(--mark-background-hue), 90%, 50%);
		animation: 3s 2s ease-in 1 forwards fade-target;
		background: unset;
	}
}


:is(main, section, article) [data-usefx] {
	--_tfx: scale 650ms ease-out, opacity 650ms ease-out, filter 650ms ease-out;
	position: var(--parent-relative, relative);
}
:is(main, section, article) [data-usefx]::after {
	transition-property: opacity, scale, transform;
	transition-timing-function: ease-out;
	transition-duration: 250ms;
}
:is(main, section, article) [data-usefx~=scale-in] {
	scale: 0.995;
}
:is(main, section, article) [data-usefx~=scale-in]:where(:hover, :focus-within) {
	scale: 1;
	transition: var(--_tfx);
}
:is(main, section, article) [data-usefx~=ken-burns] :where(img, svg) {
	scale: 1;
	filter: saturate(75%);
	transition: scale 660ms ease-in-out;
}
:is(main, section, article) [data-usefx~=ken-burns]:hover :where(img, svg) {
	scale: 1.05;
	filter: saturate(1);
	transition: scale 2700ms 650ms ease-out;
}
:is(main, section, article) [data-usefx~=hover-shadow]::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	opacity: 0;
	box-shadow: var(--shadow-3);
}
:is(main, section, article) [data-usefx~=hover-shadow]:hover::after {
	opacity: 1;
}