/* Design-Tokens (colors, spacing, typography) laden als eigene Sheets vor dieser Datei.
   Markenregeln: zweifarbig Navy/Ivory, eckige Kanten, Haarlinien, flache Flächen. */

@layer reset, base, layout, components;

/* weiche Übergänge zwischen den Seiten, ohne JS */
@view-transition {
	navigation: auto;
}

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

	body,
	h1,
	h2,
	h3,
	p,
	figure,
	ul {
		margin: 0;
	}

	img,
	picture,
	video {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		@view-transition {
			navigation: none;
		}
	}
}

@layer base {
	html {
		background: var(--surface-tint);
		-webkit-text-size-adjust: none;
		scroll-behavior: smooth;
	}

	/* Sprungziele nicht unter den fixierten Kopfbereich rutschen lassen */
	[id] {
		scroll-margin-block-start: clamp(6rem, 12vi, 8rem);
	}

	body {
		background: var(--surface-tint);
		font-family: var(--font-sans);
		font-weight: var(--weight-light);
		font-size: var(--text-base);
		color: var(--text-body);
		letter-spacing: var(--tracking-body);
		line-height: var(--leading-body);
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}

	a {
		color: var(--link);
		text-decoration: none;
		border-bottom: 1px solid var(--navy-300);
	}

	a:hover {
		color: var(--link-hover);
		border-bottom-color: var(--navy-500);
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-display);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-display);
		line-height: var(--leading-tight);
		color: var(--text-strong);
		text-wrap: balance;
	}

	h1 { font-size: clamp(var(--text-2xl), 5vi + 1rem, var(--text-4xl)); }
	h2 { font-size: clamp(var(--text-lg), 2.2vi + 0.4rem, var(--text-2xl)); }
	h3 { font-size: clamp(var(--text-lg), 1.5vi + 0.5rem, var(--text-xl)); }

	/* Display-Headlines etwas enger sperren als die Labels */
	h1, h2 { letter-spacing: 0.02em; }

	p {
		text-wrap: pretty;
		max-inline-size: 65ch;
	}

	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}
}

@layer layout {
	.container {
		inline-size: min(100% - 2 * var(--space-5), var(--container));
		margin-inline: auto;
	}

	/* Abschnitte: wechselnde Flächen, großzügige Luft */
	.section {
		padding-block: clamp(var(--space-8), 10vi, var(--space-10));
		background: var(--surface-tint);
	}

	.section--warm  { background: var(--ivory-300); }
	.section--white { background: var(--white); }

	.section--dark {
		background: var(--surface-dark);
		color: var(--text-inverse);
	}

	.section--dark :is(h1, h2, h3) { color: var(--ivory-100); }
	.section--dark a { color: var(--ivory-300); border-bottom-color: var(--navy-400); }
	.section--dark a:hover { color: var(--white); border-bottom-color: var(--ivory-300); }

	/* Abschnitt mit abgedunkeltem Hintergrundbild (Navy-Filter wie auf der LP) */
	.section--image {
		position: relative;
		isolation: isolate;
		color: var(--ivory-100);
	}

	.section--image > picture {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.section--image > picture img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.section--image::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--navy-800) 72%, transparent);
	}

	.section--image :is(h1, h2, h3) { color: var(--ivory-100); }

	.section__inner {
		display: grid;
		gap: var(--space-5);
		justify-items: start;
	}

	/* Steht der Text allein (kein Zweispalter), wird er zentriert */
	.section > .container.section__inner {
		justify-items: center;
		text-align: center;
	}

	.section__inner--center {
		justify-items: center;
		text-align: center;
	}

	/* Ausnahme für Rechtstexte: linksbündig lesbar */
	.section > .container.section__inner--start {
		justify-items: start;
		text-align: start;
	}

	/* Mobil durchgehend linksbündig — der Wechsel zwischen zentrierten und
	   linksbündigen Abschnitten wirkt auf schmalen Schirmen unruhig.
	   Startseite und Portfolio-Übersicht bleiben bewusst komplett zentriert. */
	@media (max-width: 899px) {
		/* Der Kontaktblock bleibt als Klammer zentriert, wie Hero und Kopfbereich */
		body:not(.seite-start):not(.seite-portfolio) :is(
			.section:not(.section--cta) > .container.section__inner,
			.section:not(.section--cta) .section__inner--center
		) {
			justify-items: start;
			text-align: start;
		}
	}

	/* Zweispalter: Text + Bild bzw. Text + Bulletpoints */
	.split {
		display: grid;
		gap: clamp(var(--space-6), 6vi, var(--space-9));
		align-items: center;
	}

	@media (min-width: 900px) {
		/* Reihenfolge folgt dem Markup: Text mit Headline links, Liste/Bild rechts */
		.split { grid-template-columns: 1fr 1fr; }

		/* Ausnahme: Bild links, Text rechts */
		.split--media-first > :first-child { order: 1; }

		/* Hochformat-Porträt schmaler halten, sonst wird der Abschnitt unverhältnismäßig hoch */
		.split > picture { display: block; }

		.portrait {
			max-inline-size: 360px;
			margin-inline: auto;
		}

		/* Bild füllt exakt die Höhe der Textspalte.
		   Das img liegt absolut, damit seine Eigenhöhe die Zeile nicht aufbläht
		   (sonst zieht ein Hochformat den Abschnitt auseinander). */
		.split--stretch { align-items: stretch; }

		.split--stretch > picture {
			display: block;
			position: relative;
			block-size: 100%;
			min-block-size: 100%;
		}

		.split--stretch > picture img {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}
}

@layer components {
	/* ---------- Kopfbereich (sticky) ---------- */
	.site-header {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		padding: var(--space-5) clamp(var(--space-5), 4vi, var(--space-8));
		/* heller Grundton, damit Fokusringe (currentColor) nicht dunkel auf dunkel liegen */
		color: var(--ivory-100);
		transition: background var(--dur-slow) var(--ease-brand), padding var(--dur-slow) var(--ease-brand), box-shadow var(--dur-slow) var(--ease-brand);
	}

	/* Sobald der Hero verlassen ist: Navy-Grund, damit die helle Navigation lesbar bleibt.
	   Grund + Blur liegen bewusst auf einem Pseudoelement: stünde backdrop-filter am
	   Header selbst, würde er zum Containing Block und das fixierte Menü-Overlay
	   wäre auf die Header-Fläche eingesperrt (iOS Safari). */
	.site-header.is-scrolled {
		padding-block: var(--space-3);
		box-shadow: 0 1px 0 color-mix(in srgb, var(--ivory-500) 12%, transparent);
	}

	.site-header.is-scrolled::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--navy-900) 92%, transparent);
		backdrop-filter: blur(8px);
	}

	.site-header.is-scrolled .site-header__logo img {
		inline-size: clamp(130px, 13vi, 180px);
	}

	.site-header__logo {
		border-bottom: 0;
	}

	/* Fokusring dezent und in Markenfarbe statt dunklem Kasten */
	.site-header__logo:focus-visible {
		outline: 1px solid color-mix(in srgb, var(--ivory-300) 60%, transparent);
		outline-offset: 8px;
	}

	.site-header__logo img {
		inline-size: clamp(150px, 16vi, 210px);
	}

	/* Menü und Sprachumschalter in einer Zeile, Umschalter ganz rechts */
	.site-nav {
		display: flex;
		align-items: center;
		gap: clamp(var(--space-5), 3vi, var(--space-8));
	}

	.site-nav ul {
		list-style: none;
		padding: 0;
		display: flex;
		gap: clamp(var(--space-4), 2.5vi, var(--space-6));
	}

	.site-nav a,
	.site-lang a {
		font-size: var(--text-xs);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--ivory-300);
		border-bottom: 1px solid transparent;
		padding-block: var(--space-1);
	}

	.site-nav a:hover,
	.site-lang a:hover {
		color: var(--white);
		border-bottom-color: var(--ivory-300);
	}

	.site-nav a[aria-current="page"] {
		color: var(--white);
		border-bottom-color: var(--white);
	}

	/* Sprachumschalter: durch eine Haarlinie vom Menü getrennt */
	.site-lang {
		display: flex;
		align-items: center;
		gap: 0.45em;
		padding-inline-start: clamp(var(--space-4), 2vi, var(--space-6));
		border-inline-start: 1px solid color-mix(in srgb, var(--ivory-300) 28%, transparent);
	}

	/* inaktive Sprache gedämpft, aktive weiß mit Unterstrich */
	.site-lang a {
		color: color-mix(in srgb, var(--ivory-300) 50%, transparent);
	}

	.site-lang a[aria-current="true"] {
		color: var(--white);
		border-bottom-color: var(--white);
	}

	.site-lang span[aria-hidden] {
		color: color-mix(in srgb, var(--ivory-500) 45%, transparent);
	}

	.site-header__toggle {
		display: none;
	}

	@media (max-width: 799px) {
		.site-header__toggle {
			display: grid;
			gap: 6px;
			padding: var(--space-3);
			background: none;
			border: 0;
			cursor: pointer;
			z-index: 12;
		}

		.site-header__toggle span {
			display: block;
			inline-size: 26px;
			block-size: 1px;
			background: var(--ivory-100);
			transition: transform var(--dur-fast) var(--ease-brand), opacity var(--dur-fast);
		}

		.site-header__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
		.site-header__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

		.site-nav {
			position: fixed;
			inset: 0;
			z-index: 11;
			display: grid;
			place-items: center;
			background: var(--navy-800);
			opacity: 0;
			visibility: hidden;
			transition: opacity var(--dur-slow) var(--ease-brand), visibility var(--dur-slow);
		}

		.site-nav.is-open {
			opacity: 1;
			visibility: visible;
		}

		.site-nav ul {
			flex-direction: column;
			align-items: center;
			gap: var(--space-6);
		}

		.site-nav a {
			font-size: var(--text-base);
		}

		/* Im Overlay: Umschalter ohne Trennstrich, unter dem Menü */
		.site-lang {
			border-inline-start: 0;
			padding-inline-start: 0;
		}

		.site-lang a {
			font-size: var(--text-base);
		}
	}

	/* ---------- Heros ---------- */
	.hero {
		position: relative;
		isolation: isolate;
		display: grid;
		place-items: center;
		text-align: center;
		min-block-size: 100svb;
		padding: calc(var(--space-9)) var(--space-5) var(--space-8);
		color: var(--ivory-100);
	}

	.hero--band {
		min-block-size: max(52svb, 420px);
		background: var(--surface-dark);
	}

	.hero > picture,
	.hero > video {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.hero > picture img,
	.hero > video {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.hero--image::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--navy-800) 55%, transparent);
	}

	.hero h1 {
		color: var(--ivory-100);
		font-size: clamp(var(--text-xl), 3.2vi + 0.75rem, var(--text-3xl));
		max-inline-size: 24ch;
		margin-inline: auto;
	}

	/* Startseite: Hintergrundvideo ins Dunkelblau ziehen statt es grau zu entsättigen.
	   Ergebnis gemessen bei hsl(207, 40%, 26%) — Markennavy liegt bei hsl(210, 21%, 19%). */
	.hero--home > video {
		filter: brightness(0.62) saturate(0.95);
	}

	.hero--home.hero--image::before {
		background: color-mix(in srgb, #16324f 74%, transparent);
	}

	/* Startseite: längere Headline, deshalb etwas kleiner gesetzt.
	   Zeilenbreite wie im Rest der Seite, damit der Header nicht so hoch wird. */
	.hero--home h1 {
		font-size: clamp(var(--text-xl), 3vi + 0.7rem, 45px);
		max-inline-size: min(100%, var(--container));
	}

	/* Auf schmalen Schirmen die erzwungenen Zeilenumbrüche aufheben,
	   damit der Text natürlich (ausbalanciert) umbricht statt abgehackt */
	@media (max-width: 560px) {
		.hero--home h1 br { display: none; }
	}

	.hero--home .hero__sub {
		max-inline-size: 65ch;
	}

	.hero__eyebrow {
		font-size: var(--text-sm);
		font-weight: var(--weight-light);
		text-transform: uppercase;
		letter-spacing: var(--tracking-label);
		/* Sperrung läuft hinter dem letzten Zeichen nach: Einzug gleicht das optisch aus */
		text-indent: var(--tracking-label);
		color: var(--ivory-300);
		margin-block-end: var(--space-4);
		margin-inline: auto;
	}

	.hero__sub {
		font-size: var(--text-base);
		font-weight: var(--weight-light);
		color: var(--ivory-200);
		max-inline-size: 46ch;
		margin-block-start: var(--space-5);
		margin-inline: auto;
	}

	.hero__rule {
		border: 0;
		border-top: 1px solid var(--ivory-500);
		inline-size: min(100%, 16rem);
		margin: var(--space-5) auto 0;
		opacity: 0.7;
	}

	/* Lockup wie im Logo: Label sitzt UNTER der Linie */
	.hero__rule + .hero__eyebrow {
		margin-block: var(--space-4) 0;
	}

	/* Eyebrow über Abschnittstiteln */
	.eyebrow {
		font-size: var(--text-sm);
		font-weight: var(--weight-light);
		text-transform: uppercase;
		letter-spacing: var(--tracking-label);
		color: var(--text-muted);
	}

	.section--dark .eyebrow,
	.section--image .eyebrow,
	.section--cta .eyebrow {
		color: var(--navy-300);
	}

	/* ---------- Buttons ---------- */
	.button {
		display: inline-block;
		padding: var(--space-3) var(--space-6);
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--ivory-100);
		background: var(--navy-700);
		border: 1px solid var(--navy-700);
		border-radius: var(--radius-none);
		transition: background var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand);
	}

	.button:hover {
		background: var(--navy-500);
		border-color: var(--navy-500);
		color: var(--white);
	}

	.button--inverse {
		background: transparent;
		border-color: var(--ivory-100);
		color: var(--ivory-100);
	}

	.button--inverse:hover {
		background: var(--ivory-100);
		border-color: var(--ivory-100);
		color: var(--navy-800);
	}

	.button--ghost {
		background: transparent;
		border-color: transparent;
		color: var(--navy-700);
		padding-inline: 0;
		border-bottom: 1px solid var(--navy-300);
	}

	.button--ghost:hover {
		background: transparent;
		color: var(--navy-500);
		border-bottom-color: var(--navy-500);
	}

	/* ---------- Hotel-Kacheln ---------- */
	.tiles {
		display: grid;
		gap: var(--space-5);
		inline-size: 100%;
	}

	@media (min-width: 800px) {
		.tiles { grid-template-columns: repeat(3, 1fr); }
	}

	.tile {
		position: relative;
		isolation: isolate;
		display: grid;
		align-content: end;
		gap: var(--space-2);
		min-block-size: clamp(320px, 46svb, 460px);
		padding: var(--space-6);
		border-bottom: 0;
		color: var(--ivory-100);
		overflow: hidden;
	}

	.tile picture {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.tile picture img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform var(--dur-slow) var(--ease-brand), filter var(--dur-slow) var(--ease-brand);
	}

	/* Grundzustand (Portfolio): Farben unverfälscht, aber kräftiger Verlauf nach unten
	   plus leichte Grundabdunklung, damit der weiße Hotelname überall lesbar bleibt */
	.tile::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(to top, color-mix(in srgb, var(--navy-900) 85%, transparent), transparent 62%),
			color-mix(in srgb, var(--navy-900) 18%, transparent);
		transition: background var(--dur-slow) var(--ease-brand);
	}

	.tile:hover picture img {
		transform: scale(1.04);
	}

	.tile__name {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-display);
		line-height: var(--leading-snug);
		color: var(--ivory-100);
	}

	.tile__sub {
		font-size: var(--text-xs);
		font-weight: var(--weight-light);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--ivory-300);
	}

	/* ---------- Faktenliste (Das Wesentliche) ---------- */
	.fakten {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 0;
		inline-size: 100%;
	}

	.fakten li {
		padding-block: var(--space-3);
		/* Linie aus der Textfarbe abgeleitet: auf hellem Grund dunkel, auf dunklem hell */
		border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		font-weight: var(--weight-light);
		line-height: 1.45;
	}

	.fakten li:first-child {
		padding-block-start: 0;
	}

	/* ---------- Galerie: einheitliches Raster, Bilder identisch beschnitten ---------- */
	.galerie {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: repeat(2, 1fr);
	}

	.galerie img {
		inline-size: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	/* ---------- CTA-Abschnitt (überall identisch) ---------- */
	.section--cta {
		background: var(--surface-dark);
		color: var(--text-inverse);
		text-align: center;
	}

	.section--cta .section__inner {
		justify-items: center;
	}

	.section--cta h2 {
		color: var(--ivory-100);
	}

	.section--cta .button {
		margin-block-start: var(--space-3);
	}

	/* Standard: dunkel für helle Abschnitte */
	.cta-signatur {
		font-size: var(--text-sm);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--text-strong);
	}

	.cta-signatur span {
		display: block;
		margin-block-start: var(--space-1);
		font-weight: var(--weight-light);
		letter-spacing: var(--tracking-label);
		font-size: var(--text-xs);
		color: var(--text-muted);
	}

	/* Im dunklen Kontakt-Block hell */
	.section--cta .cta-signatur { color: var(--ivory-200); }
	.section--cta .cta-signatur span { color: var(--navy-300); }

	/* ---------- Formular ---------- */
	.form {
		display: grid;
		gap: var(--space-5);
		inline-size: 100%;
		max-inline-size: 640px;
		/* Formulare bleiben linksbündig, auch in zentrierten Abschnitten */
		text-align: start;
	}

	.form label {
		display: grid;
		gap: var(--space-2);
		font-size: var(--text-xs);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--text-muted);
	}

	.form :is(input, textarea) {
		font: inherit;
		font-weight: var(--weight-light);
		letter-spacing: var(--tracking-body);
		color: var(--text-body);
		background: var(--white);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-none);
		padding: var(--space-3) var(--space-4);
	}

	.form :is(input, textarea):focus-visible {
		outline: none;
		border-color: var(--navy-700);
	}

	.form textarea {
		min-block-size: 10rem;
		resize: vertical;
	}

	/* Honeypot: für Menschen unsichtbar */
	.form .field--website {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.form__hinweis {
		font-size: var(--text-sm);
		color: var(--text-faint);
	}

	.form__meldung {
		padding: var(--space-4);
		border: 1px solid var(--success);
		color: var(--success);
		font-weight: var(--weight-regular);
	}

	.form__meldung--fehler {
		border-color: var(--danger);
		color: var(--danger);
	}

	/* ---------- Kontaktliste ---------- */
	.kontaktliste {
		list-style: none;
		padding: 0;
		display: grid;
		gap: var(--space-4);
	}

	.kontaktliste li {
		display: grid;
		gap: var(--space-1);
	}

	/* Ausnahme: ohne Unterstrich – als Block über die ganze Spalte sah er aus wie ein leeres Eingabefeld */
	.kontaktliste a {
		justify-self: start;
		border-bottom: 0;
	}

	.kontaktliste a:hover {
		color: var(--link-hover);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.kontaktliste .eyebrow {
		font-size: var(--text-xs);
	}

	/* ---------- Fußbereich ---------- */
	.site-footer {
		background: var(--navy-900);
		color: var(--navy-300);
		padding-block: var(--space-8);
		text-align: center;
	}

	.site-footer__inner {
		display: grid;
		gap: var(--space-5);
		justify-items: center;
	}

	.site-footer__logo {
		/* gleiche Größe wie das Logo im Kopfbereich */
		inline-size: clamp(150px, 16vi, 210px);
		opacity: 0.85;
	}

	.site-footer a {
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--navy-300);
		border-bottom-color: transparent;
	}

	.site-footer a:hover {
		color: var(--ivory-300);
		border-bottom-color: var(--navy-400);
	}

	.site-footer span[aria-hidden] {
		margin-inline: var(--space-2);
		color: var(--navy-500);
	}
}