/*
 * Yalcin Norton – Haupt-Stylesheet (Mobile First).
 *
 * Design-Tokens aus dem Figma-Design "Yalcin / DT".
 */

/* ------------------------------------------------------------------
 * Webfonts (self-hosted)
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Tanker';
	src: url('../fonts/Tanker-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Epilogue';
	src: url('../fonts/Epilogue-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
 * Design-Tokens
 * ------------------------------------------------------------------ */

:root {
	--yn-color-cream: #f5f0e8;
	--yn-color-ink: #0f0f0f;
	--yn-color-red: #a81919;
	--yn-color-red-dark: #871414;
	--yn-color-muted: #707070;

	--yn-font-display: 'Tanker', 'Arial Narrow', Impact, sans-serif;
	--yn-font-body: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--yn-radius: 16px;
	--yn-gutter: 20px;
}

/* ------------------------------------------------------------------
 * Basis
 * ------------------------------------------------------------------ */

body {
	background-color: var(--yn-color-cream);
	color: var(--yn-color-ink);
	font-family: var(--yn-font-body);
}

/* ------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */

.yn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border-radius: var(--yn-radius);
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
	font-family: var(--yn-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.yn-button:hover,
.yn-button:focus-visible {
	background-color: var(--yn-color-red-dark);
	color: var(--yn-color-cream);
}

.yn-button:focus-visible {
	outline: 2px solid var(--yn-color-cream);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Header / Navigation
 * ------------------------------------------------------------------ */

.yn-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px var(--yn-gutter);
	transition: background-color 0.25s ease;
}

.yn-header--scrolled {
	background-color: rgba(15, 15, 15, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/*
 * Wichtig: Im geöffneten Zustand keinen backdrop-filter auf dem Header —
 * er würde den Header zum Containing Block für das fixed positionierte
 * Menü-Overlay machen und es auf Header-Höhe beschneiden.
 */
.yn-header.is-open {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Header-Logo: erscheint erst, wenn das Hero-Logo angedockt hat
   (bzw. auf Unterseiten ohne Hero immer). */
.yn-header__logo {
	position: absolute;
	top: 50%;
	/* An der Inhaltskante ausrichten (wie Container/Footer). */
	left: max(var(--yn-gutter), calc((100% - 1280px) / 2));
	display: block;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.yn-header__logo img {
	display: block;
	width: 72px;
	height: 35px;
}

.yn-header--docked .yn-header__logo,
body:not(.home) .yn-header__logo {
	opacity: 1;
	visibility: visible;
}

.yn-header__logo:focus-visible {
	outline: 2px solid var(--yn-color-cream);
	outline-offset: 4px;
}

/* Burger-Button (nur mobil sichtbar) */
.yn-header__toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.yn-header__toggle:focus-visible {
	outline: 2px solid var(--yn-color-cream);
	outline-offset: 2px;
}

.yn-header__toggle-bar,
.yn-header__toggle-bar::before,
.yn-header__toggle-bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--yn-color-cream);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.yn-header__toggle-bar {
	position: relative;
}

.yn-header__toggle-bar::before,
.yn-header__toggle-bar::after {
	content: '';
	position: absolute;
	left: 0;
}

.yn-header__toggle-bar::before {
	top: -7px;
}

.yn-header__toggle-bar::after {
	top: 7px;
}

.yn-header.is-open .yn-header__toggle-bar {
	background-color: transparent;
}

.yn-header.is-open .yn-header__toggle-bar::before {
	transform: translateY(7px) rotate(45deg);
}

.yn-header.is-open .yn-header__toggle-bar::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobiles Menü: Vollbild-Overlay */
.yn-nav {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(15, 15, 15, 0.96);
}

.yn-header.is-open .yn-nav {
	display: flex;
}

.yn-nav__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yn-nav__list a {
	display: inline-block;
	color: var(--yn-color-cream);
	font-family: var(--yn-font-display);
	font-size: 32px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.yn-nav__list a:hover,
.yn-nav__list a:focus-visible {
	opacity: 0.75;
}

.yn-nav__list a:focus-visible {
	outline: 2px solid var(--yn-color-cream);
	outline-offset: 4px;
}

body.yn-menu-open {
	overflow: hidden;
}

/* Bei offenem Menü fliegendes Hero-Logo verstecken (läge sonst über dem Overlay). */
body.yn-menu-open .yn-hero__logo {
	visibility: hidden;
}

/* Desktop-Navigation */
@media (min-width: 1024px) {
	.yn-header {
		display: block;
		padding: 0;
	}

	.yn-header__toggle {
		display: none;
	}

	.yn-nav {
		position: static;
		display: block;
		background: none;
	}

	.yn-nav__list {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		padding: 24px 0;
	}
}

/* ------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */

.yn-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	padding: 96px var(--yn-gutter) 48px;
	background-color: var(--yn-color-red);
}

.yn-hero picture {
	display: contents; /* Wrapper darf im Flex-Layout keinen Platz einnehmen. */
}

.yn-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.yn-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.yn-hero__logo {
	position: relative;
	z-index: 1001; /* Beim Andocken über der Navbar (z-index 1000). */
	width: min(494px, 86vw);
	height: auto;
	transform-origin: top left;
	will-change: transform;
}

.yn-hero__logo.is-docked {
	visibility: hidden;
}

.yn-hero__actions {
	display: flex;
	gap: 8px;
}

@media (min-width: 1024px) {
	.yn-hero {
		padding-bottom: 76px;
	}
}

/* ------------------------------------------------------------------
 * Section-Grundgerüst
 * ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

[id] {
	scroll-margin-top: 96px;
}

.yn-container {
	max-width: 1320px; /* 1280px Inhalt + 2×20px Gutter */
	margin-inline: auto;
	padding-inline: var(--yn-gutter);
}

.yn-section {
	padding-block: 32px;
}

.yn-eyebrow {
	margin: 0;
	font-family: var(--yn-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--yn-color-red);
}

.yn-eyebrow--ink {
	color: var(--yn-color-ink);
}

.yn-heading {
	margin: 0;
	font-family: var(--yn-font-display);
	font-size: clamp(34px, 6vw, 56px);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	/* Kadence färbt Überschriften global ein — Section-Farbe gewinnt. */
	color: inherit;
}

.yn-heading--red {
	color: var(--yn-color-red);
}

.yn-section-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.yn-section-title--center {
	align-items: center;
	text-align: center;
}

.yn-copy {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.5;
}

.yn-copy p {
	margin: 0;
}

.yn-copy p + p {
	margin-top: 24px;
}

/* ------------------------------------------------------------------
 * Intro (rotes Band)
 * ------------------------------------------------------------------ */

.yn-intro {
	padding: 64px var(--yn-gutter);
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
	text-align: center;
}

.yn-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1062px;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.yn-intro {
		padding-block: 80px;
	}
}

/* ------------------------------------------------------------------
 * Über mich (50/50 auf Schwarz)
 * ------------------------------------------------------------------ */

.yn-about {
	display: flex;
	flex-direction: column;
	background-color: var(--yn-color-ink);
	color: var(--yn-color-cream);
}

.yn-about__image {
	display: block;
	width: 100%;
	height: auto;
}

.yn-about__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px var(--yn-gutter) 64px;
}

@media (min-width: 1024px) {
	.yn-about {
		flex-direction: row;
		align-items: center;
	}

	.yn-about__image {
		width: min(708px, 50%);
		flex-shrink: 0;
		align-self: stretch;
		object-fit: cover;
	}

	.yn-about__body {
		justify-content: center;
		padding: 64px 80px;
	}
}

/* ------------------------------------------------------------------
 * Social Media
 * ------------------------------------------------------------------ */

.yn-social__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 24px;
}

.yn-social__buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.yn-social__tiles {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 var(--yn-gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--yn-gutter);
	-webkit-overflow-scrolling: touch;
}

.yn-social__tile {
	flex-shrink: 0;
	width: 220px;
	scroll-snap-align: start;
}

.yn-social__tile a {
	display: block;
}

.yn-social__tile img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 768px) {
	.yn-social__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.yn-social__tiles {
		gap: 24px;
		padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
		scroll-padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
	}

	.yn-social__tile {
		width: 302px;
	}
}

/* ------------------------------------------------------------------
 * Videos (horizontales Karussell)
 * ------------------------------------------------------------------ */

.yn-videos .yn-section-title {
	margin-bottom: 24px;
}

.yn-videos__strip {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 var(--yn-gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--yn-gutter);
	-webkit-overflow-scrolling: touch;
}

.yn-video-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
	width: min(85vw, 628px);
	scroll-snap-align: start;
}

.yn-video-card__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.yn-video-card__thumb--empty {
	background-color: var(--yn-color-ink);
}

/* Video-Facade: Thumbnail + Play-Button, Player lädt erst bei Klick. */
.yn-video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--yn-color-ink);
}

.yn-video-embed .yn-video-card__thumb {
	position: absolute;
	inset: 0;
	height: 100%;
}

.yn-video-embed__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background-color: rgba(15, 15, 15, 0.2);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.yn-video-embed__play:hover,
.yn-video-embed__play:focus-visible {
	background-color: rgba(15, 15, 15, 0.45);
}

.yn-video-embed__play:focus-visible {
	outline: 2px solid var(--yn-color-cream);
	outline-offset: -4px;
}

.yn-video-embed__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--yn-radius);
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
	transition: background-color 0.2s ease;
}

.yn-video-embed__play:hover .yn-video-embed__icon {
	background-color: var(--yn-color-red-dark);
}

.yn-video-embed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.yn-video-card__link {
	display: block;
	transition: opacity 0.2s ease;
}

.yn-video-card__link:hover,
.yn-video-card__link:focus-visible {
	opacity: 0.85;
}

.yn-video-card__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.yn-video-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: inherit;
}

.yn-video-card__title a {
	color: inherit;
	text-decoration: none;
}

.yn-video-card__title a:hover,
.yn-video-card__title a:focus-visible {
	text-decoration: underline;
}

.yn-video-card__meta {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

.yn-carousel__controls {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	padding-inline: var(--yn-gutter);
}

/* Ohne Überlauf (z. B. nur ein Video): Inhalt zentrieren, Controls ausblenden.
   Bei Überlauf bleibt flex-start, sonst würde der linke Rand abgeschnitten. */
.yn-carousel--static .yn-strip {
	justify-content: center;
}

.yn-carousel--static .yn-carousel__controls {
	display: none;
}

.yn-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 0;
	border-radius: var(--yn-radius);
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.yn-carousel__button:hover:not(:disabled),
.yn-carousel__button:focus-visible {
	background-color: var(--yn-color-red-dark);
}

.yn-carousel__button:focus-visible {
	outline: 2px solid var(--yn-color-red);
	outline-offset: 2px;
}

.yn-carousel__button:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (min-width: 768px) {
	.yn-videos__strip {
		gap: 24px;
		padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
		scroll-padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
	}
}

/* ------------------------------------------------------------------
 * Logo Wall („Bekannt aus")
 * ------------------------------------------------------------------ */

.yn-logowall__heading {
	font-size: 32px;
	text-align: center;
}

.yn-logowall__carousel {
	margin-top: 16px;
}

.yn-logowall__list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0 var(--yn-gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--yn-gutter);
	-webkit-overflow-scrolling: touch;
}

/* Einheitlicher Slot: jedes Logo bekommt dieselbe Box und wird proportional
   eingepasst — unabhängig von Seitenverhältnis und Originalgröße. */
.yn-logowall__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 48px;
	scroll-snap-align: start;
}

.yn-logowall__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: opacity 0.2s ease;
}

.yn-logowall__link:hover,
.yn-logowall__link:focus-visible {
	opacity: 0.7;
}

.yn-logowall__link:focus-visible {
	outline: 2px solid var(--yn-color-red);
	outline-offset: 4px;
}

/* Bild füllt den Slot und wird proportional eingepasst (object-fit: contain).
   Dadurch erscheinen auch kleine Logos in derselben optischen Größe wie große. */
.yn-logowall__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 768px) {
	.yn-logowall__list {
		gap: 40px;
		padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
		scroll-padding-inline: max(var(--yn-gutter), calc((100% - 1280px) / 2));
	}

	.yn-logowall__item {
		width: 193px;
		height: 66px;
	}
}

/* ------------------------------------------------------------------
 * Tourdaten / Events
 * ------------------------------------------------------------------ */

.yn-events .yn-section-title {
	margin-bottom: 24px;
}

.yn-events__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yn-event {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 24px;
	border-bottom: 1px solid var(--yn-color-ink);
}

.yn-event:first-child {
	padding-top: 0;
}

.yn-event__date {
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-transform: uppercase;
}

.yn-event__day {
	font-family: var(--yn-font-display);
	font-size: 22px;
	line-height: 1;
	color: var(--yn-color-red);
}

.yn-event__meta {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.yn-event__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.yn-event__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: inherit;
}

.yn-event__venue {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

@media (min-width: 768px) {
	.yn-event {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	.yn-event__date {
		width: 193px;
		flex-shrink: 0;
	}

	.yn-event__info {
		flex: 1;
	}
}

/* ------------------------------------------------------------------
 * Newsletter (schwarzes Band)
 * ------------------------------------------------------------------ */

.yn-newsletter {
	margin-top: 32px;
	padding: 64px var(--yn-gutter);
	background-color: var(--yn-color-ink);
	color: var(--yn-color-cream);
}

.yn-newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 844px;
	margin-inline: auto;
	text-align: center;
}

.yn-newsletter__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.yn-newsletter__text {
	margin: 0;
}

.yn-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

@media (min-width: 768px) {
	.yn-newsletter {
		padding-block: 80px;
	}

	.yn-newsletter__form {
		flex-direction: row;
	}

	.yn-newsletter__input {
		flex: 1;
	}
}

/* ------------------------------------------------------------------
 * Formular-Elemente
 * ------------------------------------------------------------------ */

/* Felder gemäß Figma: Creme-Fläche, Radius 16, 43px hoch, Text 15px/#707070.
   Selektoren mit Element-Anteil, damit sie Kadences input[type=…]-Regeln schlagen. */
input.yn-input,
textarea.yn-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 43px;
	padding: 13px 24px;
	border: 1px solid var(--yn-color-muted);
	border-radius: var(--yn-radius);
	background-color: var(--yn-color-cream);
	box-shadow: none;
	color: var(--yn-color-ink);
	font-family: var(--yn-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

input.yn-input::placeholder,
textarea.yn-input::placeholder {
	/* #5f5f5f statt #707070: 5,2:1 auf Creme, erfüllt WCAG AA (4,5:1). */
	color: #5f5f5f;
	opacity: 1;
}

input.yn-input:focus,
textarea.yn-input:focus {
	border-color: var(--yn-color-muted);
	outline: 2px solid var(--yn-color-red);
	outline-offset: 1px;
	box-shadow: none;
}

/* Newsletter-Feld hat im Design keinen Rahmen. */
.yn-newsletter input.yn-input {
	border: 0;
}

.yn-button:where(button) {
	border: 0;
	cursor: pointer;
}

/* Honeypot: visuell und für Screenreader ausgeblendet, für Bots vorhanden. */
.yn-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.yn-notice {
	margin: 0;
	padding: 14px 24px;
	border-radius: var(--yn-radius);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.yn-notice--success {
	background-color: var(--yn-color-ink);
	color: var(--yn-color-cream);
}

.yn-notice--error {
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
}

/* ------------------------------------------------------------------
 * Kontakt
 * ------------------------------------------------------------------ */

.yn-contact__grid {
	display: grid;
	gap: 40px;
}

.yn-contact__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.yn-contact__mail {
	font-weight: 700;
	color: var(--yn-color-red);
	text-decoration: underline;
}

.yn-contact__mail:hover,
.yn-contact__mail:focus-visible {
	color: var(--yn-color-red-dark);
}

.yn-contact__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.yn-contact__row {
	display: grid;
	gap: 24px;
	width: 100%;
}

.yn-field {
	width: 100%;
}

textarea.yn-contact__textarea {
	height: auto;
	min-height: 200px;
	padding-block: 16px;
	line-height: 1.4;
	resize: vertical;
}

@media (min-width: 768px) {
	.yn-contact__row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.yn-contact__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

/* ------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.yn-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding: 24px var(--yn-gutter);
	background-color: var(--yn-color-ink);
	color: var(--yn-color-cream);
}

.yn-footer__logo-link {
	display: block;
}

.yn-footer__logo-link img {
	display: block;
}

.yn-footer__copy {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

.yn-footer__nav {
	display: flex;
	gap: 16px;
}

.yn-footer__nav a {
	/* Padding vergrößert die Touch-Fläche auf ~40px Höhe,
	   negativer Margin hält das Layout optisch unverändert. */
	padding: 12px 4px;
	margin: -12px -4px;
	color: var(--yn-color-cream);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	text-decoration: none;
}

.yn-footer__nav a:hover,
.yn-footer__nav a:focus-visible {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.yn-footer {
		flex-direction: row;
		justify-content: space-between;
	}

	.yn-footer__logo-link,
	.yn-footer__nav {
		width: 193px;
	}

	.yn-footer__nav {
		justify-content: flex-end;
	}
}

/* ------------------------------------------------------------------
 * Scroll-to-Top-Button
 * ------------------------------------------------------------------ */

.yn-scrolltop {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900; /* Unter Header (1000) und Menü-Overlay. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 0;
	border-radius: var(--yn-radius);
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.yn-scrolltop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.yn-scrolltop:hover,
.yn-scrolltop:focus-visible {
	background-color: var(--yn-color-red-dark);
}

.yn-scrolltop:focus-visible {
	outline: 2px solid var(--yn-color-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.yn-scrolltop {
		transform: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}
}

@media (min-width: 768px) {
	.yn-scrolltop {
		right: 24px;
		bottom: 24px;
	}
}

/* ------------------------------------------------------------------
 * Statische Seiten (Impressum, Datenschutz, …)
 * ------------------------------------------------------------------ */

/* Außerhalb der Startseite gibt es keinen Hero — Header immer dunkel. */
body:not(.home) .yn-header {
	background-color: var(--yn-color-ink);
}

.yn-page {
	padding: 152px 0 64px;
}

.yn-page__inner {
	max-width: 884px; /* 844px Inhalt + 2×20px Gutter */
}

.yn-page__title {
	margin-bottom: 40px;
	overflow-wrap: break-word;
}

.yn-page__content h2,
.yn-page__content h3 {
	margin: 40px 0 12px;
	font-family: var(--yn-font-body);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: inherit;
}

.yn-page__content h2 {
	font-size: 24px;
}

.yn-page__content h3 {
	font-size: 18px;
}

.yn-page__content h2:first-child {
	margin-top: 0;
}

.yn-page__content p {
	margin: 0 0 16px;
}

.yn-page__content p + p {
	margin-top: 0;
}

.yn-page__content ul,
.yn-page__content ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.yn-page__content a {
	color: var(--yn-color-red);
}

.yn-page__content a:hover,
.yn-page__content a:focus-visible {
	color: var(--yn-color-red-dark);
}

/* ------------------------------------------------------------------
 * Horizontale Scrollbalken ausblenden
 *
 * Die Strips bleiben scroll- und wischbar; nur die Leiste wird versteckt.
 * Die Navigation erfolgt sichtbar über die Pfeil-Buttons des Karussells.
 * ------------------------------------------------------------------ */

.yn-strip,
.yn-social__tiles,
.yn-videos__strip,
.yn-logowall__list {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* alte Edge/IE */
}

.yn-strip::-webkit-scrollbar,
.yn-social__tiles::-webkit-scrollbar,
.yn-videos__strip::-webkit-scrollbar,
.yn-logowall__list::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
	width: 0;
	height: 0;
}

/* ------------------------------------------------------------------
 * Newsletter-Formular (Brevo)
 *
 * ACHTUNG – die folgenden Regeln sind funktional, nicht dekorativ.
 * Das Brevo-Script blendet Meldungen ein, indem es Klassen toggelt;
 * ohne diese Regeln wären Fehler- und Erfolgsmeldung dauerhaft sichtbar.
 * Nicht entfernen:
 *   .sib-form-message-panel / --active   (Meldungen)
 *   .entry__error / .entry_errored       (Feldfehler)
 *   .input--hidden                       (Honeypot)
 *   .input_replaced                      (echte Checkbox, visuell ersetzt)
 *   .sib-hide-loader-icon                (Lade-Spinner)
 *   .sib-form-block__button-disabled     (Button während des Sendens)
 * ------------------------------------------------------------------ */

.yn-newsletter-form {
	width: 100%;
	max-width: 540px;
	margin-inline: auto;
	text-align: left;
}

.yn-newsletter-form__container,
.sib-form-container {
	width: 100%;
}

#sib-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --- Meldungen (funktional: display wird per Klasse gesteuert) --- */

.sib-form-message-panel {
	display: none;
	margin-bottom: 16px;
	padding: 16px 24px;
	border-radius: var(--yn-radius);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.sib-form-message-panel--active {
	display: block;
}

.sib-form-message-panel__text {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.sib-notification__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.yn-newsletter-form__panel--error {
	background-color: var(--yn-color-red);
	color: var(--yn-color-cream);
}

.yn-newsletter-form__panel--success {
	background-color: var(--yn-color-cream);
	color: var(--yn-color-ink);
}

/* --- Hinweistext im Formular --- */

.yn-newsletter-form__note {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	opacity: 0.85;
}

.yn-newsletter-form__note p {
	margin: 0;
}

/* --- Felder (nutzen .yn-input aus dem Theme) --- */

.sib-input .form__entry,
.sib-optin .form__entry {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.entry__field {
	width: 100%;
}

/* Feldfehler: standardmäßig aus, das Script blendet sie ein. */
.entry__error {
	display: none;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #ff8a8a; /* heller als --yn-color-red, damit es auf Ink lesbar bleibt */
}

.form__entry.entry_errored .entry__error {
	display: block;
}

.entry__specification {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0.7;
}

/* Honeypot – muss unsichtbar bleiben. */
.input--hidden {
	display: none !important;
}

/* --- Opt-in-Checkbox --- */

.yn-newsletter-form__optin {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

/* Die echte Checkbox bleibt bedienbar, wird aber visuell ersetzt. */
.input_replaced {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	z-index: -1;
}

.yn-newsletter-form .checkbox_tick_positive {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1px solid var(--yn-color-cream);
	border-radius: 6px;
	background-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.input_replaced:checked + .checkbox_tick_positive {
	border-color: var(--yn-color-red);
	background-color: var(--yn-color-red);
}

.input_replaced:checked + .checkbox_tick_positive::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--yn-color-cream);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.input_replaced:focus-visible + .checkbox_tick_positive {
	outline: 2px solid var(--yn-color-red);
	outline-offset: 2px;
}

.yn-newsletter-form__optin-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.entry__label_optin::after {
	content: ' *';
}

/* --- Absende-Button (nutzt .yn-button aus dem Theme) --- */

.yn-newsletter-form__submit {
	margin-top: 8px;
}

.yn-newsletter-form__submit .yn-button {
	gap: 8px;
	width: 100%;
}

.sib-form-block__button-disabled {
	opacity: 0.5;
	cursor: default;
}

/* Lade-Spinner: startet versteckt, das Script blendet ihn beim Senden ein. */
.sib-hide-loader-icon {
	display: none;
}

.progress-indicator__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	animation: yn-spin 1.3s cubic-bezier(0.46, 0.35, 0.39, 0.85) infinite;
}

@keyframes yn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.progress-indicator__icon {
		animation-duration: 3s;
	}
}

/* Cloudflare Turnstile: das Widget bringt eigenes Styling mit,
   hier nur die Einbettung in den Formularfluss. */
.yn-turnstile {
	min-height: 65px;
}