/************************************************************************************
*
* Theme Name: 		 WP Theme für Kathrin Schiller
* Theme URI:		 https://www.kathrin-schiller.com
* Description: 		 Website mit WordPress und Block Theme
* Author:			 COR Design
* Author URI:		 https://www.cor-design.de
* Version:			 1.0
* License:           COR Design
* License URI:       https://www.cor-design.de
*
************************************************************************************/

@charset "UTF-8";

/************************************************************************************
*
* Webfonts
*
************************************************************************************/
@font-face {
	font-family: "Oranienbaum";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./webfonts/oranienbaum-v15-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "PT Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./webfonts/pt-sans-v17-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "PT Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("./webfonts/pt-sans-v17-latin-700.woff2") format("woff2");
}

:root {
	--ff-headline: "Oranienbaum", serif;
	--fs-h1: clamp(2.5rem, 2.108rem + 3.092vw, 4.5rem);
	--fs-h2: clamp(2.3328rem, 1.8704rem + 2.3118vw, 3.6621rem);
	--fs-h3: clamp(1.944rem, 1.6012rem + 1.7142vw, 2.9297rem);

	--ff-base: "PT Sans", sans-serif;

	--fs-xs: 0.875rem;
	--fs-sm: 1rem;
	--fs-base: 1.125rem;
	--fs-md: 1.5rem;
	--fs-lg: 1.75rem;
	--fs-xl: 2rem;
	--fs-xxl: 3rem;

	--fw-normal: 400;
	--fw-bold: 700;

	--clr-base-100: #ddd9d2;
	--clr-base-300: #6510fc;
	--clr-base-900: #514E48;

	--clr-accent-200: #ccff3f;
	--clr-accent-400: #6510fc;
	--clr-accent-600: #c7c1b5;
	--clr-accent-800: #837D76;

	--box-shadow: 0 1px 4px rgba(48, 44, 41, 0.1);

	--space-0: 0px;
	--space-5: clamp(0.4rem, 0.25rem + 0.4vw, 0.75rem);
	--space-10: clamp(0.75rem, 0.5rem + 0.9vw, 1.5rem);
	--space-20: clamp(1.5rem, 1rem + 1.8vw, 3rem);
	--space-30: clamp(2rem, 1.5rem + 2.5vw, 4rem);
	--space-40: clamp(4rem, 3rem + 5vw, 8rem);
	--space-50: clamp(8rem, 5rem + 7vw, 13rem);

	--gap-10: 1em;
	--gap-20: 2em;
	--gap-30: 3em;

	--border-radius: 0.5em;

	--button-bg-color: ;
	--button-border-color: ;

	--z-index-10: 10;
	--z-index-20: 20;
	--z-index-30: 30;
	--z-index-40: 40;
}

.layout {
	padding: env(safe-area-inset-top) env(safe-area-inset-right)
		env(safe-area-inset-bottom) env(safe-area-inset-left);
	overflow: clip;
}

/* Globaler Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Basis-Stile für HTML und Body */
html {
	min-height: 100%;
	position: relative;
	scroll-behavior: smooth;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	overflow-x: clip;
}

body {
	font-family: var(--ff-base, system-ui, sans-serif);
	font-kerning: normal;
	font-synthesis: none;
	font-display: optional;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga" 1, "kern" 1;
	line-height: 1.5;
	min-height: 100vh;
	background-color: var(--clr-base-100);
	color: var(--clr-base-900);
}

/* Vermeidung von Standard-Margen für Flexibilität */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ff-headline, serif);
	font-weight: var(--fw-headline, 400);
	line-height: 1.4;
	text-wrap: balance;
	max-inline-size: 60ch;
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	color: var(--clr-base-300);
}

h1 {
	font-size: var(--fs-h1);
}
h2 {
	font-size: var(--fs-h2);
}
h3 {
	font-size: var(--fs-h3);
}

p,
ul,
figcaption {
	font-family: var(--ff-base);
	font-weight: var(--fw-normal);
	font-size: var(--fs-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Links und Button-Stile */

a {
	outline: none;
	text-decoration: none;
	cursor: pointer;
	color: currentColor;
}

a:hover,
a:focus-visible {
	color: var(--clr-accent-400);
}

/* Standard Schriftarten für Formulare */
input,
button,
textarea,
select {
	font: inherit;
}

textarea:not([rows]) {
	min-height: 10rem;
}

/* Bild, Video und Medien */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
	font-style: italic;
	border: 0;
	image-rendering: -webkit-optimize-contrast;
}

/* Scroll Margin für ankerbasierte Navigation */
:target {
	scroll-margin-block: 1em;
}

:where(h1, h2, h3) > a {
	color: currentColor;

	&:hover,
	&:focus-visible {
		color: var(--clr-accent-200);
		text-decoration: underline;
	}
}

:where(ul, ol)[role="list"] {
	list-style: none;
}

:where(ul, ol) {
	list-style: none;
	padding: 0;
	margin: 0;
}

:where(h1, h2, h3) > a {
	color: currentColor;

	&:hover,
	&:focus-visible {
		color: var(--clr-accent-200);
		text-decoration: underline;
	}
}

/* Resize Responsive Stopper */

.resize-stopper * {
	transition: none !important;
	animation: none !important;
}

/* Accessibility Style */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: clip;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-links--link {
	background-color: var(--theme-color-600);
	border-radius: 0.25em;
	color: var(--theme-color-100);
	font-family: var(--preset-ff-base);
	font-size: var(--preset-fs-100);
	font-weight: var(--preset-fw-400);
	padding: 0.5em;
	position: absolute;
	top: 0.25em;
	left: 1em;
	transform: translateY(-320%);
	transition: transform 325ms ease-in;
	z-index: var(--z-index-40);

	&:hover,
	&:focus-visible {
		outline: 1px dashed var(--theme-color-100);
		outline-offset: 2px;
		transform: translateY(0%);
	}
}

/* Utility Base */

.section {
	--max-width: 100%;
	width: min(var(--max-width));
	position: relative;
}

.section--default {
}

.section--highlight {
	background-color: var(--clr-accent-800);
	padding-block: 10vh;
	padding-block: 10svh;
}

.section-wide {
	--max-width: 100%;
	--container-spacing-inline: 1rem;
	margin-inline: auto;
	width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
}
.section-wide--100 {
	--max-width: 48rem;
}
.section-wide--200 {
	--max-width: 60rem;
}
.section-wide--300 {
	--max-width: 80rem;
}

.space-top--0 {
	padding-top: var(--space-0);
}
.space-top--10 {
	padding-top: var(--space-10);
}
.space-top--20 {
	padding-top: var(--space-20);
}
.space-top--30 {
	padding-top: var(--space-30);
}
.space-top--40 {
	padding-top: var(--space-40);
}
.space-top--50 {
	padding-top: var(--space-50);
}

.space-bottom--0 {
	padding-bottom: var(--space-0);
}
.space-bottom--10 {
	padding-bottom: var(--space-10);
}
.space-bottom--20 {
	padding-bottom: var(--space-20);
}
.space-bottom--30 {
	padding-bottom: var(--space-30);
}
.space-bottom--40 {
	padding-bottom: var(--space-40);
}
.space-bottom--50 {
	padding-bottom: var(--space-50);
}

/* Button */

.button {
	min-width: 240px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	position: relative;
	font-family: var(--ff-sm);
	font-size: var(--fs-base);
	line-height: 1;
	padding: 0.75em 0.5em;
	cursor: pointer;
}

.button-default {
	background-color: var(--clr-accent-400);
	color: var(--clr-base-100);

	&:hover {
		background-color: var(--clr-accent-200);
		color: var(--clr-base-900);
	}

	&:focus-visible {
		outline: 1px dashed currentColor;
		outline-offset: 2px;
	}
}

.button-outline {
	border: 2px solid var(--clr-accent-200);
	border-radius: 100vw;
	color: var(--clr-accent-400);

	&:hover {
		background-color: var(--clr-accent-200);
		color: var(--clr-base-900);
	}

	&:focus-visible {
		outline: 1px dashed currentColor;
		outline-offset: 2px;
	}
}

.header-navigation .button-cta {
    margin-inline-start: 1.5rem;
}

.header-navigation .button-cta .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;

    background-color: var(--clr-base-300);
    color: #fff;
    border-radius: 100vw;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.header-navigation .button-cta .nav-link:hover {
    background-color: #f5f5f5;
    color: var(--clr-base-300);
}

.header-navigation .button-cta .nav-link:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 2px;
}

.button-cta .nav-link {
	display: flex;
	align-items: center;
	border-radius: 100vw;
	padding: 0.75rem 1.25rem;
	background-color: var(--clr-base-300);
	color: #fff;
}


body.menu-open {
	overflow: hidden;
}

/* HEADER */

.site-header {
	width: 100%;
	position: sticky;
	top: 0;
	left: 0;
	background-color: var(--clr-accent-600);
	z-index: var(--z-index-30);
	padding-block: 1em;
	box-shadow: var(--box-shadow);
}

.site-header > * {
	display: flex;
	justify-content: space-between;
	align-items: center;
	--max-width: 80rem;
	--container--spacing-inline: 1em;
	width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
	margin-inline: auto;
}

.header-logo svg {
	width: 100%;
	max-width: 160px;
	height: auto;
}

/* ========== BASE ========== */

.site-header--nav {
	position: relative;
}

.header-navigation a:not([class]) {
	color: var(--clr-base-300);
	padding-block: 0.5rem;
}

.mobile-nav {
	display: none;
}

/* ========== SUBMENU ========== */

.submenu {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-3px);
	transition: all 500ms ease;
}

.submenu > * {
	overflow: hidden;
}

.submenu.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

/* ========== NAV ITEM ========== */

.nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.nav-link {
	color: var(--clr-base-300);
	text-decoration: none;
}

.mobile-nav--toggle {
	position: fixed;
	right: 1rem;
	top: 1rem;
	z-index: 1001;
	width: 48px;
	height: 48px;
	background: var(--clr-base-300);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* Linien */
.mobile-nav--toggle::before,
.mobile-nav--toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	background: var(--clr-base-100);
	transform: translateX(-50%);
	transition: transform 250ms ease;
}

.mobile-nav--toggle::before {
	top: 18px;
}

.mobile-nav--toggle::after {
	top: 26px;
}

/* X Zustand */
.mobile-nav--toggle[aria-expanded="true"]::before {
	transform: translateX(-50%) rotate(45deg);
	top: 22px;
}

.mobile-nav--toggle[aria-expanded="true"]::after {
	transform: translateX(-50%) rotate(-45deg);
	top: 22px;
}

/* ========== TOGGLE BUTTON ========== */

.submenu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: var(--clr-base-300);
}

/*
.submenu-toggle__icon {
	transition: transform 300ms ease;
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
	transform: rotate(180deg);
}*/

.submenu-toggle__icon svg {
	width: 20px;
    height: 20px;
    object-fit: contain;
    padding: .2rem;
}

.submenu-toggle__icon {
	display: flex;
	align-items: center;
	transform: translateY(-3px);
}

@media (min-width: 44.5em) {
	.submenu-toggle__icon {
		display: none;
	}
}


/* ========== DESKTOP ========== */

@media (min-width: 44.5em) {
	.header-navigation {
		display: flex;
        align-items: center;
		gap: 2rem;
	}

	.has-submenu {
		position: relative;
	}

	.submenu {
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--clr-accent-600);
		padding: 1rem;
		min-width: 160px;
		box-shadow: var(--box-shadow);
	}

	.has-submenu:hover .submenu,
	.has-submenu:focus-within .submenu {
		grid-template-rows: 1fr;
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 44.5em) {
	.button-cta {
		margin-top: 2rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(0,0,0,0.08);
	}
    
    .header-navigation .button-cta {
      margin-inline-start: 0rem;
    }
    
}


/* ========== MOBILE ========== */

@media (max-width: 44.5em) {
	.mobile-nav {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.mobile-nav--toggle {
		position: fixed;
		right: 1rem;
		top: 1rem;
		z-index: 999;
	}

	.header-navigation {
		position: fixed;
		inset: 0 0 0 30%;
		transform: translateX(100%);
		transition: transform 400ms ease;
		background: var(--clr-base-100);
		padding: 6rem 2rem;
		display: flex;
		flex-direction: column;
		visibility: hidden;
		pointer-events: none;
		z-index: 200; /* höher */
	}

	.header-navigation.is-open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}
    
    .nav-link {
	padding-block-end: .5rem;
    }

	.submenu {
		display: none;
	}

	.submenu.is-open {
		display: block;
	}
    
    
}

/* ========== BACKDROP ========== */

.nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 300ms ease, visibility 300ms ease;
	z-index: 100;
}

.nav-backdrop.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (hover: none) {
}

.site-footer {
	position: relative;
	width: 100%;
	background-color: var(--clr-accent-600);
	padding-block: 5rem;
}

.footer-logo img {
	width: 118px;
	max-width: 100%;
	height: 200px;
	position: absolute;
	left: -2rem;
	top: calc(50% - 100px);
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
	--max-width: 80rem;
	--container--spacing-inline: 1em;
	width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
	margin: 0 auto;
	margin-inline: auto;
}

.footer-navigation__menu li a {
	color: var(--clr-base-300);
}

.footer-navigation__menu li a:hover {
	text-decoration-line: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-skip-ink: auto;
}
/* ── Header Banner ──────────────────────────────────────────── */
.header-banner {
	position: relative;
	min-height: 80vh;
	overflow: hidden;

	/* Performance */
	contain: layout paint;
}

/* Bild */
.header-banner__image {
	position: absolute;
	inset: 0;
}

.header-banner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	transform: scale(1);
	will-change: transform;
	backface-visibility: hidden;
}

/* ── Overlay / Content ───────────────────────── */
.header-banner__marquee {
	position: absolute;
	bottom: 2rem;
	left: 0;
	right: 0;
	overflow: hidden;
    z-index: 10;
}

.marquee-track {
	display: flex;
	gap: 2rem;
	white-space: nowrap;
	will-change: transform;
}

.marquee-track span {
	white-space: nowrap;
	font-family: var(--ff-headline);
	font-size: var(--fs-h2);
}


@media (min-width: 40rem) {
	/* Tablet */
}

@media (min-width: 60rem) {
	/* Desktop */
}

/* SECTION Heading */

.block-heading {
	position: relative;
}

.block-heading + .block-heading {
	margin-block-start: 5rem;
}

.block-heading > *:not(:last-child) {
	margin-block-end: 1rem;
}

h1.block-heading__headline span {
	display: block;
}

h1.block-heading__headline {
	font-size: var(--fs-h1);
}

h2.block-heading__headline span {
	display: block;
}

h2.block-heading__headline {
	font-size: var(--fs-h2);
}

h2.block-heading__subheadline span {
	display: block;
}

h3.block-heading__subheadline span {
	display: block;
}

h3.block-heading__subheadline {
	font-family: var(--ff-base);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--clr-accent-800);
}

h3.block-heading__subheadline> *:not(:last-child) {
	margin-block-end: .5rem;
}

.block-heading__wysiwyg > *:not(:last-child) {
	margin-block-end: .5rem;
}

.block-heading__wysiwyg p {
	max-width: 74ch;
	font-size: var(--fs-base);
}

.block-heading__wysiwyg p:not(:last-child) {
	margin-block-end: .5rem;
}

.block-heading__group {
	display: block;
	position: relative;
	margin-block-start: 2rem;
}

.block-heading__group > *:not(:last-child) {
	margin-block-end: 1rem;
}

.block-heading__group-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 2rem;
}

.block-heading__group-item p {
	color: var(--clr-base-300);
}

/* SECTION Sector */
.block-sector {
	position: relative;
	margin-block-start: 2.5rem;
	margin-block-start: 5rem;
}

.block-sector > *:not(:last-child) {
	margin-block-end: 1rem;
}

.block-sector__icon {
	overflow: hidden;
}

.block-sector__icon-inline {
	margin-block-end: 1rem;
}

.block-sector__icon-inline svg {
	width: 64px;
	max-width: 100%;
	height: auto;
	display: block;
}

.block-sector__subheadline {
	font-family: var(--ff-base);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
}

.block-sector__text p {
	max-width: 74ch;
	font-size: var(--fs-base);
}

.block-sector__text p:not(:last-child) {
	margin-block-end: .5rem;
}

.block-blockqoute {
	display: flex;
	justify-content: center;
	align-items: center;
}

.block-blockqoute__inline svg {
	width: 64px;
	max-width: 100%;
	height: auto;
	display: block;
}

.block-switcher {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
	--threshold: 30rem;
}

.block-switcher > * {
	flex-grow: 1;
	flex-basis: calc((var(--threshold) - 100%) * 999);
}

.block-switcher__figure {
    position: relative;
}

.block-switcher__figure img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.block-switcher__text p {
	font-family: var(--ff-base);
	color: var(--clr-accent-800);
}

/* Desktop */
.block-switcher__gif {
    position: absolute;
    top: 0;
    right: -50%;
    width: clamp(180px, 25vw, 420px);
    z-index: 10;
    pointer-events: none;
}

.block-switcher__gif img {
    display: block;
    width: 80%;
    height: auto;
}

/* Mobile */
@media (max-width: 768px) {

    .block-switcher__gif {
        top: -0.5rem;
        right: -10%;
        width: 160px;
    }

}

/* ── Strike ─────────────────────── */

/* Mobile first */
.featured-items .strike-wrapper {
	position: relative;
	display: block;
	width: fit-content;
	white-space: nowrap;
	font-family: var(--ff-headline);
	color: var(--clr-accent-200);
	font-size: clamp(2.2rem, 3.6vw, var(--fs-h1));
}

@media (min-width: 48rem) {
	.featured-items .strike-wrapper {
		font-size: clamp(5.75rem, 15.5vw, var(--fs-h1));
	}
}

.featured-items .strike {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0%;
	height: 4px;
	background-color: var(--clr-base-300);
	transform: translateY(-50%);
}

@media (min-width: 48rem) {
	.featured-items .strike {
		height: 6px;
	}
}

.block-content {
	position: relative;
}

.block-content__image {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.block-content__deco {
	background-image: url("images/decorative/website-k-05052026.svg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 260px;
	height: 440px;
	position: absolute;
	left: 0;
	bottom: 0;
}

@media (max-width: 36rem) {
	.block-content__deco {
		width: 180px;
		height: 304px;
		left: 0;
		bottom: 0;
	}
}

.block-heading + .teaser-cards {
	margin-block-start: 2rem;
}

.teaser-cards {
	display: grid;
	gap: var(--gap-10);
	margin: 0;
	padding: 0;
	list-style: none;
	--minimum: 24rem;
}
@supports (width: min(24em, 100%)) {
	.teaser-cards {
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(var(--minimum), 100%), 1fr)
		);
	}
}
.teaser-cards__item {
	padding: 1em;
	border-radius: var(--border-radius);
	background-color: var(--clr-accent-600);
	display: flex;
	flex-direction: column;
	min-height: 100%;
	gap: var(--gap-1);
    border-left: 3px solid var(--clr-accent-200);
}

.teaser-cards__item-link {
    position: relative;
}

.teaser-cards__item-link > *:not(:last-child) {
	margin-block-end: 0.5rem;
}

.teaser-cards__item-headline {
	font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}

.teaser-cards__item ul {
	font-size: var(--fs-base);
	line-height: 2rem;
}

.block-footer {
	position: relative;
	--max-width: 48rem;
	--container-spacing-inline: 1rem;
	margin-inline: auto;
	width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
}

.block-footer__inner {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.block-footer__inner > * {
	margin-block-start: 2rem;
}

/* ==============================
   BLOCK ABOUT LIST
============================== */

.block-about__heading-list {
	display: flex;
	justify-content: center;
	gap: var(--gap-20);
}

.block-about__heading-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
}

.block-about__heading-list li {
	position: relative;
	padding: 1.4rem 0 1.4rem 1.2rem;
	font-size: var(--fs-base);
	text-align: left;
	color: var(--clr-primary-900);
}

/* horizontale Trennlinie */
.block-about__heading-list li:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* vertikale Akzentlinie links */
.block-about__heading-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	width: 3px;
	height: 55%;
	background: var(--clr-accent-200);
	border-radius: 2px;
}

/* ==============================
	 MOBILE
  ============================== */

@media (max-width: 900px) {
	.block-about__heading-list {
		flex-direction: column;
		gap: 0;
	}
}

.speaker-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	max-width: 100%;
	margin-inline: auto;
	padding: 4rem 0;
}

.speaker-grid__image {
	margin: 0;
}

.speaker-grid__image img {
	display: block;
	max-width: 100%;
    width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

/* Linker vertikaler Text */

.speaker-grid__label {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: clamp(2rem, 5vw, 5rem);
    font-family: var(--ff-headline, serif);
    color: var(--clr-base-300);
	line-height: 1;
}

/* Großes Bild links */

.speaker-grid__image--main {
	grid-column: 2 / 6;
	grid-row: 1 / 3;

	aspect-ratio: 4 / 5;
}

/* Portrait rechts */

.speaker-grid__image--portrait {
	grid-column: 7 / 11;
	grid-row: 1 / 3;

	aspect-ratio: 3 / 4.2;

	margin-top: 2rem;
}

/* Unteres Detailbild */

.speaker-grid__image--detail {
	grid-column: 3 / 7;
	grid-row: 3;

	aspect-ratio: 16 / 10;

	margin-top: -2rem;
}

/* Titel */

.speaker-grid__title {
	grid-column: 7 / 12;
	grid-row: 1;

	font-size: clamp(3rem, 7vw, 7rem);
	line-height: 0.9;

	align-self: start;
}

@media (max-width: 48rem) {
	.speaker-grid {
		grid-template-columns: 1fr;
	}

	.speaker-grid__label,
	.speaker-grid__title,
	.speaker-grid__image--main,
	.speaker-grid__image--portrait,
	.speaker-grid__image--detail {
		grid-column: auto;
		grid-row: auto;
	}

	.speaker-grid__label {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.speaker-grid__image--detail {
		margin-top: 0;
	}
}


.block-video {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.block-video--source {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--clr-base-900);
	overflow: hidden;
}

.block-video--source video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.block-video--caption {
	font-size: 1;
	color: var(--clr-base-900);
	line-height: 1.4;
}
/* 2.2 Hover & Pointer Handling */

@media (hover: none), (pointer: coarse) {
	/* Keine Hover-Effekte auf Touch-Geräten */
	a:hover,
	button:hover {
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
}

/* 2.4 Kontrastmodus (Accessibility Boost) */

@media (prefers-contrast: more) {
}

/* 2.5 Dark Mode (optional kombinierbar) */

@media (prefers-color-scheme: dark) {
	:root {
	}
}

/* 2.6 High DPI (Retina, moderne Geräte) */

@media (min-resolution: 2dppx) {
	/* Beispiel: Schärfere Icons verwenden */
}

/* 2.7 Zukunftssicherer Fallback für alte Browser */

@supports not (overflow: clip) {
	.layout {
		overflow: hidden;
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
}

/* WordPress Blocks-Editor */

.block-contains {
	position: relative;
}

.block-contains > * {
	margin-block-end: 1rem;
}

.block-contains__heading h1 {
	font-size: var(--fs-h1);
}

.block-contains__main > * {
	margin-block-end: 1rem;
}

.block-contains__main h2,
h3,
h4 {
	font-family: var(--ff-base);
	color: var(--clr-base-900);
}

.block-contains__main h2 {
	font-size: var(--fs-lg);
}

.block-contains__main h3,
h4 {
	font-size: var(--fs-md);
}

h2.wp-block-heading {
	font-size: var(--fs-step-3);
}
h3.wp-block-heading {
	font-size: var(--fs-step-2);
	margin-block-start: 1.75rem;
}
h4.wp-block-heading {
	font-size: var(--fs-step-1);
	margin-block-start: 1.75rem;
}
hr.wp-block-separator {
	margin-block: 1.5rem;
	border: none;
	border-block-start: 1px solid var(--clr-accent-600);
}

.wp-block-list.has-list-style {
	line-height: 2rem;
	list-style-type: disc;
	list-style-position: outside;
	padding-inline-start: 1.5rem;
}
.wp-block-list.has-list-style li::marker {
	color: var(--accent-clr-600);
}

p.link-underline a,
ul.link-underline a,
ol.link-underline a {
	color: var(--accent-clr-600);
	font-weight: var(--fw-medium);
	text-decoration-line: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-skip-ink: auto;
	transition: color 0.3s ease;
}

/* ==========================================================
   WPForms
========================================================== */

.wpforms-container {
	width: 100%;
}

.wpforms-form {
	display: grid;
	gap: var(--space-20);
}

/* ==========================================================
   Labels
========================================================== */

/* ==========================================================
   Fieldset Reset
========================================================== */

.wpforms-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-field-label-inline {
	font-family: var(--ff-base);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	color: var(--clr-base-900);
}

/* ==========================================================
   Inputs
========================================================== */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: var(--space-10);

	font-family: var(--ff-base);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--clr-base-900);

	background-color: transparent;

	border: 1px solid var(--clr-base-900);
	border-radius: var(--border-radius);

	appearance: none;
	transition:
		border-color 0.3s ease,
		background-color 0.3s ease;
}

/* ==========================================================
   Textarea
========================================================== */

.wpforms-form textarea {
	min-height: 12rem;
	resize: vertical;
}

/* ==========================================================
   Focus
========================================================== */

.wpforms-form input:focus,
.wpforms-form textarea:focus {
	outline: none;
	border-color: var(--clr-accent-400);
	background-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================
   Checkbox
========================================================== */

.wpforms-form input[type="checkbox"] {
	inline-size: 1.1rem;
	block-size: 1.1rem;
    margin-right: .5rem;
	accent-color: var(--clr-accent-400);
}

/* ==========================================================
   Button
========================================================== */

.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 3.25rem;
	padding-inline: var(--space-20);

	font-family: var(--ff-base);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;

	color: var(--clr-base-100);
	background-color: var(--clr-accent-400);

	border: 1px solid var(--clr-accent-400);
	border-radius: var(--border-radius);

	cursor: pointer;

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;
}

.wpforms-submit:hover,
.wpforms-submit:focus-visible {
	background-color: transparent;
	color: var(--clr-accent-400);
}

/* ==========================================================
   Field Spacing
========================================================== */

.wpforms-field {
	margin: 0;
	padding: 0;
}

/* ==========================================================
   Name Field Grid
========================================================== */

.wpforms-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

@media (min-width: 48rem) {

	.wpforms-field-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================
   Errors
========================================================== */

.wpforms-error {
	font-size: var(--fs-xs);
	color: #d63638;
}

/* ==========================================================
   Honeypot ausblenden Sicherheit
========================================================== */

.wpforms-field[data-field-id="5"] {
	display: none !important;
}