/**
 * Simply Croatia – Startseite (Relaunch)
 *
 * Einzige Stildatei der neuen Startseite. Aufbau:
 *   1. Schriften   2. Tokens   3. Basis   4. Seitenrahmen (Header, Suche, Footer)
 *   5. Gemeinsame Bausteine   6. Bereiche in Seitenreihenfolge   7. Bewegung
 *
 * Regeln: kein !important, keine Patch-Dateien, responsive Regeln stehen bei ihrer Komponente.
 * Ausnahmen für Fremd-Markup (WordPress-Core) sind direkt an der Regel begründet.
 */

/* 1. Schriften (selbst gehostet, SIL Open Font License) ------------------------------ */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/literata-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/literata-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Literata";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/literata-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Literata";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/literata-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ---------------------------------------------------------------------------- */

.sc-front-shell,
.sc-front {
	/* Farbe: Kalkstein & Tiefsee */
	--sc-paper: #f7f8f5;        /* kühles Kalksteinweiß */
	--sc-white: #ffffff;
	--sc-seaglass: #dcebe8;     /* Meerglas: helle Bereiche */
	--sc-lagoon: #bfe2da;       /* Lagune: kräftigere helle Fläche (Hör mal hin) */
	--sc-ink: #0e3a3b;          /* Adria-Petrol: Schrift und tiefe Bereiche */
	--sc-ink-soft: #3d5e5e;     /* Sekundärtext auf hellem Grund */
	--sc-on-deep: #f7f8f5;
	--sc-on-deep-soft: #b9d3cf;
	--sc-oleander: #b3305b;     /* einziger Akzent, sparsam */
	--sc-oleander-light: #f3a9c1;
	--sc-line: rgba(14, 58, 59, 0.16);
	--sc-shade: 8, 32, 33;      /* RGB für Bildverläufe */

	/* Schrift */
	--sc-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--sc-font-text: "Literata", Georgia, "Times New Roman", serif;
	--sc-text-body: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	--sc-text-small: 0.9375rem;
	--sc-text-label: 0.8125rem;

	/* Raum */
	--sc-max: 90rem;
	--sc-gutter: clamp(1rem, 4vw, 3.5rem);
	--sc-inline: max(var(--sc-gutter), calc((100% - var(--sc-max)) / 2));
	/* Ausgleich für randlose Bilder innerhalb einer Sektion (Bezug Viewport, nicht Elternbreite). */
	--sc-bleed: calc(max(var(--sc-gutter), calc((100vw - var(--sc-max)) / 2)) * -1);
	--sc-gap: clamp(1rem, 2vw, 2rem);
	--sc-space-s: clamp(1.25rem, 2.5vw, 2rem);
	--sc-space-m: clamp(2rem, 4vw, 3.5rem);
	--sc-space-l: clamp(4rem, 8vw, 8rem);
	--sc-space-xl: clamp(5rem, 12vw, 11rem);
	--sc-header: 4.5rem;


	/* Form: die Bucht, eine Rundung unten links (Knöpfe; Bilder nutzen größere Radien direkt an der Regel) */
	--sc-bay-button: 0 0 0 1.125rem;

	/* Bewegung */
	--sc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sc-duration: 700ms;
}

@media (max-width: 47.99em) {
	.sc-front-shell,
	.sc-front {
		--sc-header: 4rem;
	}
}

/* 3. Basis ----------------------------------------------------------------------------- */

body.sc-front-shell {
	margin: 0;
	background: var(--sc-paper);
	color: var(--sc-ink);
	font-family: var(--sc-font-text);
	font-size: var(--sc-text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

.sc-front-shell *,
.sc-front-shell *::before,
.sc-front-shell *::after {
	box-sizing: border-box;
}

.sc-front-shell ::selection {
	background: var(--sc-seaglass);
	color: var(--sc-ink);
}

.sc-front :is(h1, h2, h3, p, figure, ul, ol) {
	margin: 0;
}

/* WordPress setzt in Gruppen mit Flow-Layout 24px Abstand zwischen Kindern. Abstände regeln hier die Komponenten. */
.sc-front,
.sc-front.is-layout-flow > *,
.sc-front .is-layout-flow > * {
	margin-block: 0;
}

.sc-front :is(h1, h2, h3) {
	font-family: var(--sc-font-display);
	font-weight: 650;
	font-stretch: 88%;
	line-height: 1;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: inherit;
}

.sc-front p {
	text-wrap: pretty;
}

.sc-front img {
	display: block;
	max-width: 100%;
}

.sc-front a,
.sc-front-shell .sc-site-header a,
.sc-front-shell .sc-site-footer a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sc-front-shell :focus-visible {
	outline: 2px solid var(--sc-oleander);
	outline-offset: 3px;
}

.sc-front-shell .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sc-front-shell .sc-skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	transform: translateY(-200%);
}

.sc-front-shell .sc-skip-link:focus {
	transform: none;
}

.sc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* 4. Seitenrahmen ---------------------------------------------------------------------- */

/* Header: liegt reduziert über dem Hero, wird nach dem Hero zur ruhigen Leiste. */
.sc-site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--sc-white);
	transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.sc-site-header.is-solid,
.sc-site-header.is-open {
	background: var(--sc-paper);
	color: var(--sc-ink);
	box-shadow: 0 1px 0 var(--sc-line);
}

.sc-site-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	min-height: var(--sc-header);
	padding-inline: var(--sc-inline);
}

/* Logo 1B: Wortmarke in Versalien, schmal und kräftig; der Claim steht nur im Footer. */
.sc-wordmark {
	font-family: var(--sc-font-display);
	font-weight: 750;
	font-stretch: 78%;
	letter-spacing: -0.005em;
	line-height: 0.9;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-site-header__brand {
	font-size: 1.375rem;
	text-decoration: none;
}

.sc-site-nav {
	margin-inline-start: auto;
}

.sc-site-nav__list {
	display: flex;
	gap: clamp(1rem, 1.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-site-nav__list a {
	display: block;
	padding-block: 0.5rem;
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 500;
	font-stretch: 92%;
	white-space: nowrap;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 85% / 0 1px;
	transition: background-size 350ms var(--sc-ease-out), transform 250ms var(--sc-ease-out);
}

.sc-site-nav__list a:hover {
	transform: translateY(-2px);
}

.sc-site-nav__list a:hover,
.sc-site-nav__list .current-menu-item > a {
	background-size: 100% 1px;
}

.sc-site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sc-site-nav + .sc-site-header__actions {
	padding-inline-start: clamp(0.5rem, 1.5vw, 1.25rem);
	border-inline-start: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.sc-site-header__actions:only-of-type,
.sc-site-header__brand + .sc-site-header__actions {
	margin-inline-start: auto;
}

.sc-front-shell .sc-site-header__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--sc-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.sc-front-shell .sc-site-header__action:hover span {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.sc-front-shell .sc-site-header__menu-toggle {
	display: none;
}

/* Acht Menüpunkte brauchen gut 1300 Pixel; darunter öffnet „Menü“ die Navigation. */
@media (max-width: 84.99em) {
	.sc-front-shell .sc-site-header__menu-toggle {
		display: inline-flex;
	}

	.sc-site-nav {
		position: fixed;
		inset: var(--sc-header) 0 0;
		display: none;
		padding: var(--sc-space-s) var(--sc-inline) var(--sc-space-m);
		background: var(--sc-paper);
		color: var(--sc-ink);
		overflow-y: auto;
	}

	.sc-site-header.is-menu .sc-site-nav {
		display: block;
	}

	.sc-site-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.sc-site-nav__list li {
		border-bottom: 1px solid var(--sc-line);
	}

	.sc-site-nav__list a {
		padding-block: 1rem;
		font-size: clamp(1.5rem, 6vw, 2rem);
		font-weight: 600;
		font-stretch: 88%;
		background: none;
	}

	.sc-site-nav + .sc-site-header__actions {
		margin-inline-start: auto;
		padding-inline-start: 0;
		border: 0;
	}
}

@media (max-width: 26.24em) {
	.sc-front-shell .sc-site-header__action {
		padding-inline: 0.5rem;
		letter-spacing: 0.08em;
	}
}

/* Suche: ruhiges Feld unter der Leiste, kein Portal-Interface. */
.sc-site-search {
	padding: var(--sc-space-s) var(--sc-inline) var(--sc-space-m);
	background: var(--sc-paper);
	color: var(--sc-ink);
	border-top: 1px solid var(--sc-line);
}

.sc-site-search[hidden] {
	display: none;
}

.sc-site-search__label {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-ink-soft);
}

/* Bezugsrahmen für die Vorschläge beim Tippen, so breit wie die Eingabezeile. */
.sc-site-search__form {
	position: relative;
	max-width: 48rem;
}

.sc-site-search__row {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	max-width: 48rem;
	border-bottom: 2px solid var(--sc-ink);
}

.sc-front-shell .sc-site-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 500;
	box-shadow: none;
}

.sc-front-shell .sc-site-search__input::placeholder {
	color: var(--sc-ink-soft);
	opacity: 0.7;
}

.sc-front-shell .sc-site-search__input:focus {
	outline: none;
}

.sc-site-search__row:focus-within {
	border-color: var(--sc-oleander);
}

.sc-front-shell .sc-site-search__submit {
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Footer: ruhiger Abspann mit Marke, zwei Linkspalten und Rechtlichem. */
.sc-site-footer {
	padding: var(--sc-space-l) var(--sc-inline) var(--sc-space-m);
	background: var(--sc-paper);
	color: var(--sc-ink);
	border-top: 1px solid var(--sc-line);
}

.sc-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sc-space-m) var(--sc-gap);
	align-items: start;
}

.sc-site-footer p {
	margin: 0;
}

.sc-site-footer__intro {
	display: grid;
	justify-items: start;
	gap: var(--sc-space-s);
}

.sc-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1;
}

.sc-logo__claim {
	font-family: var(--sc-font-text);
	font-style: italic;
	font-weight: 450;
	font-size: 0.42em;
	color: var(--sc-oleander);
}

.sc-site-footer__statement {
	max-width: 34ch;
	color: var(--sc-ink-soft);
}

.sc-site-footer__heading {
	margin: 0 0 0.5rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-oleander);
}

.sc-site-footer__list,
.sc-site-footer__social,
.sc-site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sc-font-display);
	line-height: 1.3;
}

.sc-site-footer__social {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sc-line);
}

/* Text beginnt oben statt mittig in der Klickfläche: Ein zweizeiliger Eintrag in der einen Spalte
   steht so auf derselben Höhe wie der einzeilige daneben. */
.sc-site-footer__list a,
.sc-site-footer__social a,
.sc-site-footer__links a {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.4rem;
	padding-block: 0.6rem;
	text-decoration: none;
}

.sc-site-footer__list a:hover,
.sc-site-footer__social a:hover,
.sc-site-footer__links a:hover {
	text-decoration: underline;
}

.sc-site-footer__base {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem var(--sc-gap);
	padding-top: var(--sc-space-s);
	border-top: 1px solid var(--sc-line);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

.sc-site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

@media (max-width: 47.99em) {
	.sc-site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.sc-site-footer__intro {
		grid-column: 1 / -1;
	}
}

/* Newsletter-Seite: unten nur Copyright, Impressum und Datenschutz (templates/front-page.php). */
.sc-site-footer--landing {
	padding-block: var(--sc-space-s);
}

.sc-site-footer--landing .sc-site-footer__base {
	padding-top: 0;
	border-top: 0;
}

/* 5. Gemeinsame Bausteine -------------------------------------------------------------- */

.sc-section {
	padding: var(--sc-space-l) var(--sc-inline);
}

.sc-front .sc-section__title {
	margin-bottom: var(--sc-space-m);
	font-size: clamp(2.5rem, 6.5vw, 6.25rem);
	font-weight: 700;
	font-stretch: 78%;
	line-height: 0.9;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* Formatkennung (Simply Croatia Moment, Auf ein Wort, Hör mal hin, Post aus Kroatien):
   Kennung in Oleander mit einer kurzen Linie – wie eine Rubrik im Magazin. */
.sc-front .sc-label {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--sc-font-display);
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	font-weight: 700;
	font-stretch: 88%;
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-oleander);
}

.sc-front .sc-label::after {
	content: "";
	flex: none;
	width: 2.5em;
	height: 2px;
	background: currentColor;
}

.sc-stretched-link {
	text-decoration: none;
}

.sc-stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sc-media-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sc-seaglass);
}

/* Bilder bis an den Rand: Neben den negativen Rändern steht immer auch die Breite (Spalte plus Ränder).
   Safari streckt Rasterelemente mit Seitenverhältnis nicht von selbst über die Spalte, und Bildblöcke
   tragen je nach Theme max-width: 100%; ohne feste Breite endete das Bild rechts vor dem Rand. */

/* Bilder in festen Proportionen: 3:2 (quer) und 4:5 (hoch). */
.sc-front .sc-ratio-wide,
.sc-front .sc-ratio-tall {
	overflow: hidden;
}

/* Redaktionshinweise erscheinen nur im Editor. */
.sc-front-shell .sc-editor-hint {
	display: none;
}

.sc-front .sc-editor-hint {
	padding: 1rem;
	border: 1px dashed var(--sc-ink-soft);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
}

/* Leere Medienplätze aus der Vorlage bleiben im Frontend unsichtbar. */
.sc-front-shell .wp-block-image:not(:has(img[src])),
.sc-front-shell .wp-block-video:not(:has(video)),
.sc-front-shell .wp-block-gallery:not(:has(img)) {
	display: none;
}

/* Knöpfe: gefüllt für Hauptaktionen, als Textlink mit Pfeil für Weiterführendes. */
.sc-front .sc-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.75rem;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 250ms var(--sc-ease-out);
}

.sc-front .sc-button .wp-block-button__link:hover {
	background: var(--sc-oleander);
}

.sc-front .sc-link-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-weight: 600;
	text-decoration: none;
}

.sc-front .sc-link-button .wp-block-button__link::after {
	content: "→";
	transition: transform 300ms var(--sc-ease-out);
}

.sc-front .sc-link-button .wp-block-button__link:hover::after {
	transform: translateX(0.3em);
}

/* Seiteneinstieg für Seiten ohne Hero (Kroatienkarte, Quiz): Kennung, H1, kurzer Text. */
.sc-intro {
	padding-top: calc(var(--sc-header) + var(--sc-space-m));
	padding-bottom: var(--sc-space-m);
}

/* Vor der Karte: Titel und Text nebeneinander, damit die Karte früh im Blick ist. */
@media (min-width: 64em) {
	.sc-intro:has(+ .sc-regions) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--sc-gap);
		align-items: end;
	}

	.sc-intro:has(+ .sc-regions) > * {
		grid-column: 1 / span 7;
	}

	.sc-front .sc-intro:has(+ .sc-regions) .sc-intro__text {
		grid-column: 8 / span 5;
		grid-row: 1 / span 2;
		align-self: end;
		font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	}
}

.sc-front .sc-intro__title {
	max-width: 16ch;
	font-size: clamp(2.75rem, 7vw, 6.5rem);
	font-weight: 750;
	font-stretch: 78%;
	line-height: 0.92;
	letter-spacing: -0.02em;
}

.sc-front .sc-intro__text {
	max-width: 40ch;
	margin-top: var(--sc-space-s);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.45;
	color: var(--sc-ink-soft);
}

/* Auf der Quizseite teilen sich Einstieg und Quiz eine Fläche; die Kroatien-Silhouette
   liegt als ruhiges Markenelement rechts daneben (Master-Prompt, Abschnitt 31). Sind drei Bilder
   gewählt (Küste, Inseln, Landesinneres), stehen sie als kleine Collage dort; die Silhouette wird dann
   zur vierten Kachel, ein Kartenblatt wie beim Quiz-Ergebnis. */
.sc-intro:has(+ .sc-quizapp) {
	background: var(--sc-seaglass) url("../map/kroatien-silhouette.svg") no-repeat right var(--sc-inline) bottom 0 / min(38vw, 34rem) auto;
}

.sc-intro:has(+ .sc-quizapp):has(.sc-intro__collage img[src]) {
	background-image: none;
}

.sc-intro__collage::after {
	content: "";
	background: var(--sc-paper) url("../map/kroatien-silhouette.svg") no-repeat center / 72% auto;
	border-radius: 0 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.sc-intro__collage:not(:has(img[src])) {
	display: none;
}

.sc-front .sc-intro__collage figure {
	margin: 0;
	overflow: hidden;
}

.sc-front .sc-intro__collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 64em) {
	.sc-intro:has(+ .sc-quizapp):has(.sc-intro__collage img[src]) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--sc-gap);
		align-items: start;
	}

	.sc-intro:has(+ .sc-quizapp):has(.sc-intro__collage img[src]) > * {
		grid-column: 1 / span 6;
	}

	.sc-intro:has(+ .sc-quizapp):has(.sc-intro__collage img[src]) > .sc-intro__collage {
		grid-column: 8 / -1;
		grid-row: 1 / span 3;
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-template-rows: repeat(6, minmax(0, 1fr));
		aspect-ratio: 1 / 1;
	}

	.sc-front .sc-intro__collage .sc-intro__photo-1 {
		grid-area: 1 / 1 / 5 / 5;
	}

	.sc-front .sc-intro__collage .sc-intro__photo-2 {
		grid-area: 2 / 5 / 5 / 7;
		margin-left: var(--sc-gap);
	}

	.sc-front .sc-intro__collage .sc-intro__photo-3 {
		grid-area: 5 / 3 / 7 / 7;
		margin: var(--sc-gap) 0 0 var(--sc-gap);
	}

	/* Das Kartenblatt füllt die Ecke unten links, bündig mit dem großen Bild darüber. */
	.sc-intro__collage::after {
		grid-area: 5 / 1 / 7 / 3;
		margin-top: var(--sc-gap);
	}
}

@media (max-width: 63.99em) {
	.sc-intro:has(+ .sc-quizapp) {
		background-image: none;
	}

	.sc-intro__collage {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	/* Abstand zum Text darüber; .sc-front, weil die Flow-Regel oben sonst die Ränder auf null setzt. */
	.sc-front .sc-intro__collage {
		margin-top: var(--sc-space-m);
	}

	.sc-front .sc-intro__collage figure {
		aspect-ratio: 1 / 1;
	}

	.sc-intro__collage::after {
		display: none;
	}
}

.sc-intro + .sc-quizapp {
	padding-top: 0;
}

/* Ohne Hero liegt der Header von Anfang an als ruhige Leiste über dem Inhalt. */
.sc-front-shell:not(:has([data-sc-hero])) .sc-site-header {
	background: var(--sc-paper);
	color: var(--sc-ink);
	box-shadow: 0 1px 0 var(--sc-line);
}

/* 6. Bereiche --------------------------------------------------------------------------- */

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

.sc-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--sc-ink);
	color: var(--sc-white);
	isolation: isolate;
}

.sc-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sc-hero__poster,
.sc-hero__poster img,
.sc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(var(--sc-shade), 0.38) 0%, rgba(var(--sc-shade), 0) 24%),
		linear-gradient(20deg, rgba(var(--sc-shade), calc(var(--sc-hero-overlay, 0.4) + 0.25)) 0%, rgba(var(--sc-shade), calc(var(--sc-hero-overlay, 0.4) * 0.45)) 38%, rgba(var(--sc-shade), 0) 68%);
}

.sc-hero__content {
	padding: calc(var(--sc-header) + var(--sc-space-m)) var(--sc-inline) clamp(3.5rem, 11vh, 7rem);
}

.sc-hero__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
}

.sc-hero__copy > .sc-hero__title,
.sc-hero__copy > .sc-hero__tagline {
	flex-basis: 100%;
}

.sc-front .sc-hero__greeting {
	font-family: var(--sc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 650;
	font-stretch: 88%;
}

.sc-front .sc-hero__title {
	margin-top: 0.5rem;
	font-size: clamp(3.75rem, 10.5vw, 8.5rem);
	font-weight: 700;
	font-stretch: 82%;
	line-height: 0.88;
	letter-spacing: -0.035em;
}

/* Übersetzung: dieselbe Schrift wie der Gruß, nur leichter und etwas zurückgenommen. */
.sc-front .sc-hero__translation {
	font-family: var(--sc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 300;
	font-stretch: 88%;
	line-height: 1.3;
	opacity: 0.72;
}

.sc-front .sc-hero__tagline {
	max-width: 34ch;
	margin-top: clamp(2.25rem, 6vh, 3.75rem);
	font-family: var(--sc-font-display);
	font-size: clamp(1.25rem, 2.1vw, 1.875rem);
	font-weight: 550;
	line-height: 1.35;
}

/* Lesbarkeit über hellen Szenen (Dubrovnik, Pag): weicher Schatten statt Kasten. */
.sc-front .sc-hero__copy {
	text-shadow: 0 1px 2px rgba(var(--sc-shade), 0.35), 0 2px 24px rgba(var(--sc-shade), 0.45);
}

/* Fünf feine Striche neben dem Pause-Knopf, nur im Hochformat (Handy): ein Strich je Ort im Video. */
.sc-hero__scenes {
	display: none;
}

@media (max-aspect-ratio: 4/5) {
	.sc-hero__scenes {
		position: absolute;
		left: var(--sc-inline);
		right: calc(var(--sc-inline) + 2.75rem + 1rem);
		bottom: calc(clamp(1.25rem, 4vh, 2.5rem) + 1.375rem - 1px);
		display: flex;
		gap: 0.375rem;
		z-index: 1;
		pointer-events: none;
	}

	.sc-hero__scene {
		position: relative;
		flex: 1;
		height: 2px;
		overflow: hidden;
		border-radius: 1px;
		background: rgba(255, 255, 255, 0.32);
	}

	.sc-hero__scene::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--sc-white);
		transform: scaleX(var(--sc-fill, 0));
		transform-origin: left;
	}
}

.sc-front-shell .sc-hero__toggle {
	position: absolute;
	right: var(--sc-inline);
	bottom: clamp(1.25rem, 4vh, 2.5rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(var(--sc-shade), 0.2);
	color: var(--sc-white);
	cursor: pointer;
	transition: background-color 200ms ease, transform 160ms var(--sc-ease-out);
}

.sc-front-shell .sc-hero__toggle:hover {
	background: rgba(var(--sc-shade), 0.45);
}

.sc-front-shell .sc-hero__toggle:active {
	transform: scale(0.94);
}

.sc-hero__toggle .sc-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.sc-hero__toggle-play,
.sc-hero__toggle[aria-pressed="true"] .sc-hero__toggle-pause {
	display: none;
}

.sc-hero__toggle[aria-pressed="true"] .sc-hero__toggle-play {
	display: contents;
}

/* 6.2 Einstieg ------------------------------------------------------------------------- */

.sc-opening {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: center;
	padding-block: var(--sc-space-l);
	background: var(--sc-seaglass);
}

.sc-opening__copy {
	grid-column: 2 / span 6;
}

.sc-front .sc-opening__text {
	font-size: clamp(1.375rem, 2.3vw, 2rem);
	line-height: 1.4;
	font-weight: 400;
}

.sc-front .sc-opening__image {
	grid-column: 9 / span 4;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sc-front .sc-opening__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-opening:not(:has(.sc-opening__image img[src])) .sc-opening__copy {
	grid-column: 2 / span 8;
}

@media (max-width: 47.99em) {
	.sc-opening {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
		padding-block: var(--sc-space-l);
	}

	.sc-opening__copy,
	.sc-opening:not(:has(.sc-opening__image img[src])) .sc-opening__copy,
	.sc-front .sc-opening__image {
		grid-column: 1;
	}

	/* Auf dem Handy bis an beide Ränder, wie alle übrigen Bilder der Startseite. */
	.sc-front .sc-opening__image {
		width: calc(100% + 2 * var(--sc-gutter));
		max-width: none;
		margin-inline: calc(var(--sc-gutter) * -1);
		aspect-ratio: 3 / 2;
	}
}

/* 6.3 Lesenswert ----------------------------------------------------------------------- */
/* Aufmacher links bis an den Rand, zweiter Beitrag rechts daneben in ähnlicher Höhe.
   Beide: Bild oben, Text darunter. Auf dem Handy gleich groß untereinander. */

.sc-reading {
	padding-block: 0 var(--sc-space-l);
	background: var(--sc-seaglass);
}

.sc-picks--pair {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: start;
}

.sc-story {
	position: relative;
}

.sc-story--lead {
	grid-column: 1 / 9;
}

.sc-story--second {
	grid-column: 9 / -1;
}

.sc-story__media {
	overflow: hidden;
	background: var(--sc-seaglass);
}

.sc-front .sc-story--lead .sc-story__media {
	aspect-ratio: 3 / 2;
	margin-inline-start: var(--sc-bleed);
}

.sc-story--second .sc-story__media {
	aspect-ratio: 4 / 5;
}

.sc-front .sc-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--sc-ease-out);
}

.sc-story:hover .sc-story__media img {
	transform: scale(1.05);
}

.sc-story__body {
	display: grid;
	gap: 0.75rem;
	padding-top: 1.25rem;
	max-width: 42rem;
}

/* Meta-Zeile: Neu · Kategorie · Lesezeit */
.sc-front .sc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-ink-soft);
}

.sc-meta__category {
	color: var(--sc-oleander);
}

.sc-meta__new {
	padding: 0.2rem 0.45rem 0.15rem;
	background: var(--sc-oleander);
	color: var(--sc-white);
	letter-spacing: 0.12em;
}

.sc-season .sc-meta {
	grid-area: meta;
	color: var(--sc-ink-soft);
}

.sc-front .sc-story__title {
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
	line-height: 1;
}

.sc-front .sc-story--second .sc-story__title {
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.05;
}

.sc-story__title a {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 400ms var(--sc-ease-out);
}

.sc-story:hover .sc-story__title a {
	background-size: 100% 1px;
}

.sc-front .sc-story__excerpt {
	color: var(--sc-ink-soft);
}

@media (max-width: 47.99em) {
	.sc-picks--pair {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
	}

	.sc-story--lead,
	.sc-story--second {
		grid-column: 1;
	}

	.sc-front .sc-story--lead .sc-story__media,
	.sc-front .sc-story--second .sc-story__media {
		aspect-ratio: 3 / 2;
		margin-inline: calc(var(--sc-gutter) * -1);
	}

	.sc-front .sc-story__title,
	.sc-front .sc-story--second .sc-story__title {
		font-size: clamp(1.625rem, 7vw, 2rem);
	}
}

/* 6.4 Simply Croatia Moment ------------------------------------------------------------ */
/* Das Bild führt. Kennung und kurze Bildzeile liegen als kleines Blatt unten links auf dem Bild. */

.sc-moment {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.sc-front .sc-moment__image {
	height: min(92vh, 60vw);
	min-height: 28rem;
	overflow: hidden;
}

.sc-front .sc-moment .sc-moment__image img {
	width: 100%;
	height: 112%;
	object-fit: cover;
	transform: translate3d(0, var(--sc-parallax, 0px), 0);
	will-change: transform;
}

.sc-moment__caption {
	position: absolute;
	left: var(--sc-inline);
	bottom: clamp(1.5rem, 5vh, 3.5rem);
	display: grid;
	gap: 1rem;
	max-width: min(38rem, calc(100% - 2 * var(--sc-gutter)));
	padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
	background: var(--sc-paper);
	border-radius: 0 0 0 clamp(2.5rem, 6vw, 5rem);
}

.sc-front .sc-moment__text {
	font-family: var(--sc-font-text);
	font-size: clamp(1.25rem, 1.9vw, 1.75rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--sc-ink);
}

/* Handy: Die Kennung steht wie bei „Auf ein Wort“ und „Hör mal hin“ über dem Bild, damit der Moment
   als eigene Rubrik beginnt und nicht wie ein weiterer Beitrag wirkt; die Bildzeile folgt darunter. */
@media (max-width: 47.99em) {
	.sc-moment {
		display: grid;
		row-gap: var(--sc-space-s);
		padding-block: var(--sc-space-l);
		background: var(--sc-paper);
	}

	.sc-moment__caption {
		display: contents;
	}

	.sc-front .sc-moment .sc-label {
		order: -1;
		margin-inline: var(--sc-gutter);
	}

	.sc-front .sc-moment__image {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	/* Querformat-Motive (z. B. Zlatni Rat von oben) in ihrem eigenen Format, ohne Zuschnitt und ohne Parallaxe. */
	.sc-front .sc-moment--wide .sc-moment__image {
		aspect-ratio: auto;
	}

	.sc-front .sc-moment--wide .sc-moment__image img {
		height: auto;
		transform: none;
	}

	.sc-front .sc-moment__text {
		margin-inline: var(--sc-gutter);
		font-size: 1.1875rem;
	}
}

/* 6.5 Themen entdecken ------------------------------------------------------------------ */
/* Zwei Themen je Reihe, alle gleich groß und querformatig; die sechste Kachel führt zu allen Beiträgen und zur Suche. */

.sc-topics-section {
	background: var(--sc-ink);
	color: var(--sc-on-deep);
}

.sc-topics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem) var(--sc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-topic__link {
	display: grid;
	gap: 1rem;
	text-decoration: none;
}

.sc-topic__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.08);
	transition: border-radius 800ms var(--sc-ease-out);
}

.sc-topic__link:hover .sc-topic__media,
.sc-topic__link:focus-visible .sc-topic__media {
	border-radius: 0 0 0 clamp(3rem, 6vw, 6rem);
}

.sc-front .sc-topic__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1200ms var(--sc-ease-out);
}

.sc-topic__link:hover .sc-topic__media img {
	transform: scale(1.05);
}

.sc-topic__text {
	display: grid;
	gap: 0.5rem;
}

/* Teaser aus der Kategoriebeschreibung: auf dem Desktop beim Darüberfahren, sonst sichtbar. */
.sc-topic__teaser {
	max-width: 44ch;
	font-family: var(--sc-font-text);
	font-size: var(--sc-text-small);
	line-height: 1.45;
	color: var(--sc-on-deep-soft);
}

@media (max-width: 47.99em) {
	.sc-topic__teaser {
		display: none;
	}
}

@media (hover: hover) and (min-width: 48em) {
	.sc-topic__teaser {
		opacity: 0;
		transform: translateY(0.4rem);
		transition: opacity 400ms ease, transform 600ms var(--sc-ease-out);
	}

	.sc-topic__link:hover .sc-topic__teaser,
	.sc-topic__link:focus-visible .sc-topic__teaser {
		opacity: 1;
		transform: none;
	}
}

.sc-topic__name {
	font-family: var(--sc-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	font-weight: 700;
	font-stretch: 80%;
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.sc-topic__name::after {
	content: " →";
	display: inline-block;
	font-weight: 400;
	opacity: 0;
	transform: translateX(-0.4em);
	transition: opacity 300ms ease, transform 400ms var(--sc-ease-out);
}

.sc-topic__link:hover .sc-topic__name::after,
.sc-topic__link:focus-visible .sc-topic__name::after {
	opacity: 1;
	transform: none;
}

/* Kachel „Alle Beiträge“: helle Lagunenfläche auf Petrol, mit Suchfeld; so hoch wie die Nachbarbilder. */
.sc-topic--all {
	display: flex;
	align-self: start;
	aspect-ratio: 16 / 9;
}

.sc-topic__all {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--sc-lagoon);
	color: var(--sc-ink);
	transition: border-radius 800ms var(--sc-ease-out);
}

/* Auf der Magazinseite steht nur der Sprung zur Liste in der Kachel: unten, wie die Themennamen. */
.sc-topic__all-link:only-child {
	margin-top: auto;
}

.sc-topic__all:hover {
	border-radius: 0 0 0 clamp(3rem, 6vw, 6rem);
}

.sc-topic__all-link {
	display: grid;
	gap: 0.5rem;
	text-decoration: none;
}

.sc-topic__all-title {
	font-family: var(--sc-font-display);
	font-size: clamp(2rem, 4vw, 3.75rem);
	font-weight: 700;
	font-stretch: 78%;
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.sc-topic__all-title::after {
	content: " →";
	display: inline-block;
	font-weight: 400;
	transition: transform 400ms var(--sc-ease-out);
}

.sc-topic__all-link:hover .sc-topic__all-title::after {
	transform: translateX(0.25em);
}

.sc-topic__all-meta {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

.sc-front .sc-topic__latest {
	display: grid;
	gap: 0.25rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

.sc-topic__latest a {
	font-weight: 650;
	color: var(--sc-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sc-topic__search {
	position: relative; /* hält das unsichtbare Label in der Kachel, sonst verbreitert es die Seite */
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--sc-ink);
}

.sc-front-shell .sc-topic__search input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 1.125rem;
	box-shadow: none;
}

.sc-front-shell .sc-topic__search input::placeholder {
	color: var(--sc-ink-soft);
}

.sc-front-shell .sc-topic__search input:focus {
	outline: none;
}

.sc-topic__search:focus-within {
	border-color: var(--sc-oleander);
}

.sc-front-shell .sc-topic__search button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-ink);
	cursor: pointer;
}

/* Mobile: zwei Spalten, alle sechs Kacheln sofort sichtbar. */
@media (max-width: 47.99em) {
	.sc-topics {
		gap: 1.5rem 0.75rem;
	}

	.sc-topic__media {
		aspect-ratio: 1 / 1;
	}

	.sc-topic__name {
		font-size: 1.125rem;
	}

	.sc-topic__name::after {
		content: none;
	}

	.sc-topic--all {
		aspect-ratio: 1 / 1;
	}

	.sc-topic__all {
		padding: 1rem;
		gap: 0.75rem;
	}

	.sc-topic__all-meta,
	.sc-front .sc-topic__latest {
		display: none;
	}

	.sc-topic__all-title {
		font-size: 1.5rem;
	}
}

/* 6.5a Quiz-Hinweis ---------------------------------------------------------------------- */
/* Zweiter, spielerischer Einstieg nach den Themen. Erscheint erst mit verlinktem Knopf. */

.sc-quiz {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: center;
	background: var(--sc-paper);
}

.sc-front .sc-quiz__image {
	grid-column: 1 / span 6;
	width: calc(100% - var(--sc-bleed));
	max-width: none;
	margin-inline-start: var(--sc-bleed);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sc-front .sc-quiz__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-quiz__copy {
	grid-column: 8 / span 5;
	display: grid;
	justify-items: start;
	gap: 1.25rem;
}

.sc-quiz:not(:has(.sc-quiz__image img[src])) .sc-quiz__copy {
	grid-column: 1 / span 8;
}

.sc-front .sc-quiz__title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 0.98;
}

.sc-front .sc-quiz__text {
	max-width: 36ch;
	color: var(--sc-ink-soft);
}

@media (max-width: 47.99em) {
	.sc-quiz {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
	}

	.sc-front .sc-quiz__image,
	.sc-quiz__copy,
	.sc-quiz:not(:has(.sc-quiz__image img[src])) .sc-quiz__copy {
		grid-column: 1;
	}

	.sc-front .sc-quiz__image {
		width: calc(100% - 2 * var(--sc-bleed));
		margin-inline: var(--sc-bleed);
		aspect-ratio: 3 / 2;
	}
}

/* 6.6 Auf ein Wort ---------------------------------------------------------------------- */

.sc-word {
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	grid-template-areas:
		"label label"
		"term  text";
	gap: var(--sc-space-s) var(--sc-space-m);
	align-items: center;
	padding-block: var(--sc-space-xl);
	background: var(--sc-seaglass);
}

.sc-word .sc-label {
	grid-area: label;
}

.sc-word__head {
	grid-area: term;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1rem, 3vw, 2.5rem);
}

.sc-front .sc-word__term {
	font-family: var(--sc-font-display);
	font-size: clamp(5rem, 17vw, 15rem);
	font-weight: 750;
	color: var(--sc-oleander);
	font-stretch: 75%;
	line-height: 0.8;
	letter-spacing: -0.04em;
}

/* Aussprache anhören: ruhiger Knopf neben dem Wort, Ton nur nach Klick. */
.sc-front-shell .sc-word__say,
.sc-front .sc-word__say {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0 1.1rem 0 0.9rem;
	border: 1.5px solid var(--sc-oleander);
	border-radius: 999px;
	background: transparent;
	color: var(--sc-oleander);
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 650;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, transform 160ms var(--sc-ease-out);
}

.sc-front .sc-word__say:hover,
.sc-front .sc-word__say[aria-pressed="true"] {
	background: var(--sc-oleander);
	color: var(--sc-white);
}

.sc-front .sc-word__say:active {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: no-preference) {
	.sc-front .sc-word__say[aria-pressed="true"] .sc-icon {
		animation: sc-say 900ms ease-in-out infinite alternate;
	}
}

@keyframes sc-say {
	to {
		transform: scale(1.18);
	}
}

.sc-word__body {
	grid-area: text;
	display: grid;
	justify-items: start;
	gap: 1.25rem;
}

.sc-front .sc-word__text {
	max-width: 28ch;
	font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
	line-height: 1.45;
}

/* Weiter zum passenden Artikel, wie die übrigen Textlinks mit Pfeil. */
.sc-front .sc-word__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	border-bottom: 1px solid currentColor;
	font-family: var(--sc-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.sc-front .sc-word__more::after {
	content: "→";
	transition: transform 300ms var(--sc-ease-out);
}

.sc-front .sc-word__more:hover::after {
	transform: translateX(0.3em);
}

@media (max-width: 47.99em) {
	.sc-word {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"label"
			"term"
			"text";
	}

	.sc-front .sc-word__term {
		font-size: clamp(5rem, 27vw, 9rem);
	}
}

/* 6.7 Saisonaler Einzelartikel --------------------------------------------------------- */
/* Bildgeführt: breites Bild über die volle Breite, darunter Titel und kurze Information. */

.sc-season-section {
	padding-top: 0;
}

.sc-season {
	position: relative;
	display: grid;
	gap: var(--sc-space-s);
}

.sc-front .sc-season__media {
	overflow: hidden;
	width: calc(100% - 2 * var(--sc-bleed));
	max-width: none;
	height: min(78vh, 46vw);
	min-height: 22rem;
	margin-inline: var(--sc-bleed);
	background: var(--sc-seaglass);
}

.sc-front .sc-season__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1400ms var(--sc-ease-out);
}

.sc-season:hover .sc-season__media img {
	transform: scale(1.02);
}

.sc-season__body {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas:
		"meta  meta"
		"title excerpt"
		"title more";
	gap: 1rem var(--sc-space-m);
	align-items: start;
}

.sc-front .sc-season__title {
	grid-area: title;
	font-size: clamp(2.25rem, 5vw, 4.75rem);
	line-height: 0.95;
}

.sc-front .sc-season__excerpt {
	grid-area: excerpt;
	color: var(--sc-ink-soft);
}

.sc-front .sc-season__more {
	grid-area: more;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sc-font-display);
	font-weight: 600;
	color: var(--sc-oleander);
}

.sc-season__more .sc-icon {
	transition: transform 300ms var(--sc-ease-out);
}

.sc-season:hover .sc-season__more .sc-icon {
	transform: translateX(0.3em);
}

@media (max-width: 56.24em) {
	.sc-front .sc-season__media {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
		width: calc(100% + 2 * var(--sc-gutter));
		margin-inline: calc(var(--sc-gutter) * -1);
	}

	.sc-season__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"meta"
			"title"
			"excerpt"
			"more";
	}
}

/* 6.8 Hör mal hin ----------------------------------------------------------------------- */

.sc-sound {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sc-space-m);
	align-items: center;
	padding: var(--sc-space-l) 0 var(--sc-space-l) var(--sc-inline);
	background: var(--sc-lagoon);
	overflow: hidden;
}

.sc-sound__copy {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.sc-front .sc-sound__title {
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
}

.sc-front-shell .sc-sound__play,
.sc-front .sc-sound__play {
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-template-areas: "icon time";
	column-gap: 1.1rem;
	align-items: center;
	margin-top: var(--sc-space-s);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-ink);
	text-align: left;
	cursor: pointer;
}

.sc-sound__icon {
	grid-area: icon;
	position: relative;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	transition: transform 160ms var(--sc-ease-out), background-color 200ms ease;
}

.sc-sound__icon .sc-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.sc-sound__play:hover .sc-sound__icon {
	background: var(--sc-oleander);
}

.sc-sound__play:active .sc-sound__icon {
	transform: scale(0.95);
}

/* Während der Wiedergabe: zwei ruhige Kreise wie Wellen im Hafenbecken. */
.sc-sound__icon::before,
.sc-sound__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--sc-ink);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.sc-sound__play[aria-pressed="true"] .sc-sound__icon::before,
	.sc-sound__play[aria-pressed="true"] .sc-sound__icon::after {
		animation: sc-ripple 2.8s var(--sc-ease-out) infinite;
	}

	.sc-sound__play[aria-pressed="true"] .sc-sound__icon::after {
		animation-delay: 1.4s;
	}

	.sc-sound.is-playing .sc-sound__image img {
		transform: scale(1.06);
	}
}

@keyframes sc-ripple {
	from {
		opacity: 0.45;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

.sc-sound__icon-pause,
.sc-sound__play[aria-pressed="true"] .sc-sound__icon-play {
	display: none;
}

.sc-sound__play[aria-pressed="true"] .sc-sound__icon-pause {
	display: contents;
}

.sc-sound__time {
	grid-area: time;
	min-height: 1.4em;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	font-variant-numeric: tabular-nums;
	color: var(--sc-ink-soft);
}

.sc-sound__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sc-front .sc-sound__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 14s linear;
}

@media (max-width: 56.24em) {
	.sc-sound {
		grid-template-columns: minmax(0, 1fr);
		padding-right: var(--sc-inline);
	}

	.sc-front .sc-sound__image {
		order: -1;
		aspect-ratio: 4 / 5;
		width: calc(100% + 2 * var(--sc-gutter));
		max-width: none;
		margin-inline: calc(var(--sc-gutter) * -1);
	}
}

/* 6.9 Social Media ---------------------------------------------------------------------- */
/* Ruhig: die Plattform-Links einmal neben der Überschrift, darunter eine gleichmäßige Reihe
   aus Clips (Instagram, TikTok) und Pins (Pinterest), eckig wie alle Bilder der Seite.
   Die Core-Galerie setzt Breiten mit :not(#individual-image); die ID-Klammer in den Selektoren
   ist nötig, um das ohne !important zu übersteuern. */

.sc-social {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title links"
		"row   row";
	column-gap: var(--sc-space-m);
	align-items: end;
	background: var(--sc-paper);
}

.sc-social .sc-section__title {
	grid-area: title;
}

.sc-front .sc-social__profiles.wp-block-social-links {
	grid-area: links;
	gap: 0.25rem 1.75rem;
	margin: 0 0 var(--sc-space-m);
	padding: 0;
}

.sc-social__grid {
	grid-area: row;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

/* Clips und Pins werden direkt zu Elementen der einen Reihe (nur im Frontend; im Editor bleiben die Blöcke bedienbar). */
.sc-front-shell .sc-social__channel,
.sc-front-shell .sc-social__clips,
.sc-front-shell .sc-front .sc-social__collage.wp-block-gallery.has-nested-images {
	display: contents;
}

.sc-front .sc-social__clip,
.sc-front .sc-social__collage.wp-block-gallery.has-nested-images figure.wp-block-image:not(#sc-collage) {
	width: auto;
	margin: 0;
	/* 2:3, das Format von Pinterest-Pins: Pins bleiben ganz lesbar, Reels (9:16) verlieren nur oben und unten etwas. */
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--sc-seaglass);
	transition: transform 500ms var(--sc-ease-out);
}

.sc-front .sc-social__clip:hover,
.sc-front .sc-social__collage.wp-block-gallery.has-nested-images figure.wp-block-image:hover:not(#sc-collage) {
	transform: translateY(-0.4rem);
}

.sc-front .sc-social__clip video,
.sc-front .sc-social__collage.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-front .sc-social__collage.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	display: none;
}

/* Abspielfläche über dem ganzen Clip; das Symbol verschwindet, solange der Clip läuft. */
.sc-front .sc-social__clip {
	position: relative;
}

.sc-front .sc-social__play,
.sc-front .sc-social__play:is(:hover, :focus) {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-ink);
	cursor: pointer;
}

.sc-social__play-icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding-left: 0.2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sc-paper) 88%, transparent);
	box-shadow: 0 0.5rem 1.5rem rgba(var(--sc-shade), 0.25);
	transition: opacity 250ms var(--sc-ease-out), transform 250ms var(--sc-ease-out);
}

.sc-front .sc-social__play:focus-visible .sc-social__play-icon {
	outline: 3px solid var(--sc-oleander);
	outline-offset: 3px;
}

.sc-social__clip.is-playing .sc-social__play-icon {
	opacity: 0;
	transform: scale(0.85);
}

/* Höchstens fünf Elemente in der Reihe: mit Clips drei Pins, ohne Clips fünf Pins. */
.sc-social__grid:has(.sc-social__clip video) .sc-social__collage figure.wp-block-image:nth-child(n + 4),
.sc-social__grid:not(:has(.sc-social__clip video)) .sc-social__collage figure.wp-block-image:nth-child(n + 6) {
	display: none;
}

/* Profil-Links: Plattform-Icon und Name, Pfeil nach außen. Core-Markenfarben und -Größen werden ersetzt. */
.sc-front .sc-social__profiles.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--sc-ink);
	background: none;
}

.sc-front .sc-social__profiles .wp-social-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0;
	font-family: var(--sc-font-display);
	text-decoration: none;
}

.sc-front .sc-social__profiles.wp-block-social-links .wp-social-link .wp-block-social-link-label {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-weight: 700;
	font-stretch: 85%;
}

.sc-front .sc-social__profiles .wp-block-social-link-label::after {
	content: " ↗";
	display: inline-block;
	font-weight: 400;
	transition: transform 300ms var(--sc-ease-out);
}

.sc-front .sc-social__profiles .wp-social-link a:hover .wp-block-social-link-label::after {
	transform: translate(0.15em, -0.15em);
}

@media (max-width: 56.24em) {
	.sc-social {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"links"
			"row";
	}

	.sc-front .sc-social .sc-section__title {
		margin-bottom: 1rem;
	}

	/* Mobile: zwei Spalten, vier Elemente. */
	.sc-social__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-social__grid:has(.sc-social__clip video) .sc-social__collage figure.wp-block-image:nth-child(n + 3),
	.sc-social__grid:not(:has(.sc-social__clip video)) .sc-social__collage figure.wp-block-image:nth-child(n + 5) {
		display: none;
	}
}

/* 6.10 Bleib noch eine Weile … ---------------------------------------------------------- */

/* Social Media und „Bleib noch eine Weile …“ liegen auf derselben Fläche: ein Abstand zwischen beiden genügt. */
.sc-social + .sc-stay {
	padding-top: 0;
}

.sc-front .sc-stay__title {
	font-size: clamp(2.5rem, 7.5vw, 7rem);
}

.sc-places {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-gap);
	padding: 0;
	list-style: none;
}

.sc-place__link {
	display: grid;
	gap: 1rem;
	text-decoration: none;
}

.sc-place__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--sc-seaglass);
}

.sc-front .sc-place__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--sc-ease-out);
}

.sc-place__media {
	transition: transform 700ms var(--sc-ease-out), border-radius 700ms var(--sc-ease-out);
}

.sc-place__link:hover .sc-place__media {
	transform: translateY(-0.5rem);
	border-radius: 0 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

.sc-place__link:hover .sc-place__media img {
	transform: scale(1.05);
}

.sc-place__more {
	display: grid;
	gap: 0.35rem;
}

.sc-place__title {
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
}

@media (hover: hover) and (min-width: 48em) {
	.sc-place__more {
		opacity: 0;
		transform: translateY(0.4rem);
		transition: opacity 400ms ease, transform 600ms var(--sc-ease-out);
	}

	.sc-place__link:hover .sc-place__more,
	.sc-place__link:focus-visible .sc-place__more {
		opacity: 1;
		transform: none;
	}
}

.sc-place__label::after {
	content: " →";
	display: inline-block;
	font-style: normal;
	opacity: 0;
	transform: translateX(-0.4em);
	transition: opacity 300ms ease, transform 400ms var(--sc-ease-out);
}

.sc-place__link:hover .sc-place__label::after,
.sc-place__link:focus-visible .sc-place__label::after {
	opacity: 1;
	transform: none;
}

.sc-place__label {
	font-family: var(--sc-font-text);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-style: italic;
	line-height: 1.1;
}

@media (max-width: 47.99em) {
	.sc-places {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sc-space-m);
	}

	.sc-place__media {
		aspect-ratio: 3 / 2;
	}
}

/* Link zur Kroatienkarte unter den drei Orten; erscheint erst mit verlinktem Knopf. */
.sc-front .sc-stay__map {
	margin-top: var(--sc-space-m);
}

.sc-front .sc-opening__more {
	margin-top: var(--sc-space-s);
}

/* 6.11 Post aus Kroatien --------------------------------------------------------------- */

.sc-letter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sc-space-m);
	align-items: end;
	background: var(--sc-ink);
	color: var(--sc-on-deep);
}

.sc-letter .sc-label {
	color: var(--sc-oleander-light);
}

.sc-letter__copy {
	display: grid;
	gap: 1.25rem;
}

.sc-front .sc-letter__title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 0.98;
}

.sc-front .sc-letter__text {
	max-width: 36ch;
	color: var(--sc-on-deep-soft);
}

.sc-front .sc-letter__gift {
	max-width: 36ch;
	font-style: italic;
	color: var(--sc-oleander-light);
}

/* Das Formular sitzt auf einem schlichten Blatt: moderne Korrespondenz, keine Postkarte. */
.sc-letter__form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--sc-paper);
	color: var(--sc-ink);
}

.sc-letter__form:not(:has(> :not(.sc-editor-hint))) {
	display: none;
}

/* MailerLite-Einbettung: Überschrift und Text des Formulars kommen aus MailerLite selbst und würden die
   Texte daneben doppeln; sichtbar bleiben Feld, Zustimmung, Datenschutz-Link und Knopf.
   Drittanbieter-Override: MailerLite setzt seine Farben mit einer ID je Formular (#mlb2-…). Damit das Formular
   den Hintergrund der Formularfläche übernimmt statt eines zweiten Grautons, trägt der Selektor über
   :is(#sc-ml, …) dieselbe ID-Gewichtung; #sc-ml selbst gibt es nicht. */
.sc-front .sc-letter__form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent {
	display: none;
}

.sc-front-shell .sc-front .sc-letter__form :is(#sc-ml, .ml-form-embedContainer, .ml-form-embedWrapper, .ml-form-embedBody, .ml-form-formContent, .ml-form-embedPermissions, .ml-form-checkboxRow) {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.sc-front .sc-letter__form form {
	display: grid;
	gap: 1.25rem;
}

/* Zustimmung: Kästchen im Textfluss, damit Text, Feld und Knopf dieselbe linke Kante haben. */
.sc-front .sc-letter__form label {
	display: block;
	font-family: var(--sc-font-text);
	font-size: var(--sc-text-small);
	line-height: 1.45;
	color: var(--sc-ink-soft);
}

.sc-front .sc-letter__form input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 0.5rem 0 0;
	vertical-align: -0.2em;
	accent-color: var(--sc-ink);
}

.sc-front .sc-letter__form :is(input[type="email"], input[type="text"]) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 2px solid var(--sc-ink);
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 1.125rem;
}

.sc-front .sc-letter__form :is(button, input[type="submit"]) {
	margin-top: 0.75rem;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	justify-self: start;
}

.sc-front .sc-letter__form :is(button, input[type="submit"]):hover {
	background: var(--sc-oleander);
}

@media (max-width: 56.24em) {
	.sc-letter {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Handy: Das Formularblatt reicht bis an die Ränder, sein Inhalt steht bündig mit dem Text darüber. */
@media (max-width: 47.99em) {
	.sc-letter__form {
		margin-inline: calc(var(--sc-gutter) * -1);
		padding-inline: var(--sc-gutter);
	}
}

/* 6.11a Newsletter-Seite (Pinterest) ---------------------------------------------------- */
/* Eine Seite, ein Ziel. Flächenfolge: Petrol (Anmeldung) · Meerglas (Hörprobe) · Kalkstein (Inhalt, wer schreibt)
   · Petrol (zweites Formular). Bausteine von der Startseite; hier stehen nur die Abweichungen. */

.sc-landing__hero {
	align-items: center;
	padding-top: calc(var(--sc-header) + var(--sc-space-l));
}

.sc-front .sc-landing__title {
	max-width: 16ch;
	font-size: clamp(2.375rem, 5.2vw, 5rem);
	font-weight: 700;
	font-stretch: 80%;
	line-height: 0.95;
}

/* Handy: Das Formular soll ohne Scrollen in Sicht kommen. */
@media (max-width: 47.99em) {
	.sc-landing__hero {
		padding-top: calc(var(--sc-header) + var(--sc-space-s));
		padding-bottom: var(--sc-space-m);
		gap: var(--sc-space-s);
	}

	.sc-landing__hero .sc-letter__copy {
		gap: 0.875rem;
	}
}

/* Was in der Post steckt: drei Punkte, nummeriert wie Rubriken, ohne Kästen. */
.sc-landing-points {
	display: grid;
	gap: var(--sc-space-m);
	background: var(--sc-paper);
}

.sc-landing-points__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-space-m) var(--sc-gap);
	counter-reset: sc-point;
}

.sc-landing-points__item {
	display: grid;
	align-content: start;
	gap: 0.875rem;
	padding-top: var(--sc-space-s);
	border-top: 2px solid var(--sc-ink);
	counter-increment: sc-point;
}

.sc-landing-points__item::before {
	content: counter(sc-point, decimal-leading-zero);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sc-oleander);
}

.sc-front .sc-landing-points__title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 700;
	font-stretch: 80%;
}

.sc-front .sc-landing-points__text {
	max-width: 30ch;
	color: var(--sc-ink-soft);
}

@media (max-width: 47.99em) {
	.sc-landing-points__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sc-space-s);
	}
}

/* Wer schreibt: Landschaftsbild bis an den linken Rand, daneben zwei Sätze. Ohne Bild steht nur der Text. */
.sc-landing-author {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: center;
	background: var(--sc-paper);
}

.sc-landing-points + .sc-landing-author {
	padding-top: 0;
}

.sc-front .sc-landing-author__image {
	grid-column: 1 / span 6;
	width: calc(100% - var(--sc-bleed));
	max-width: none;
	margin-inline-start: var(--sc-bleed);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.sc-front .sc-landing-author__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-landing-author__copy {
	grid-column: 8 / span 5;
	display: grid;
	justify-items: start;
	gap: 1.25rem;
}

.sc-landing-author:not(:has(.sc-landing-author__image img[src])) .sc-landing-author__copy {
	grid-column: 1 / span 8;
}

.sc-front .sc-landing-author__text {
	max-width: 34ch;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.45;
}

.sc-front .sc-landing-author__note {
	max-width: 40ch;
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

@media (max-width: 47.99em) {
	.sc-landing-author {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
	}

	.sc-front .sc-landing-author__image,
	.sc-landing-author__copy,
	.sc-landing-author:not(:has(.sc-landing-author__image img[src])) .sc-landing-author__copy {
		grid-column: 1;
	}

	.sc-front .sc-landing-author__image {
		width: calc(100% - 2 * var(--sc-bleed));
		margin-inline: var(--sc-bleed);
	}
}

/* Danke-Seite: ruhige Meerglas-Fläche mit kurzem Gruß. */
.sc-landing-thanks {
	padding-bottom: var(--sc-space-l);
	background: var(--sc-seaglass);
}

.sc-front .sc-landing-thanks__greeting {
	margin-top: var(--sc-space-s);
	font-style: italic;
	line-height: 1.45;
	color: var(--sc-ink-soft);
}

/* 6.12 Kroatienkarte ------------------------------------------------------------------- */
/* Karte links, bleibt beim Lesen stehen; rechts die Regionen. Auf dem Handy: Karte oben. */

.sc-regions {
	scroll-margin-top: calc(var(--sc-header) + var(--sc-space-s));
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: start;
	padding-top: 0;
}

.sc-regions__map {
	grid-column: 1 / span 6;
	position: sticky;
	top: calc(var(--sc-header) + var(--sc-space-s));
}

.sc-regions__list {
	grid-column: 8 / span 5;
}

.sc-map {
	display: block;
	width: 100%;
	max-height: calc(100vh - var(--sc-header) - 4rem);
	overflow: visible;
}

.sc-map__area {
	fill: var(--sc-lagoon);
	stroke: var(--sc-paper);
	stroke-width: 2;
	transition: fill 300ms var(--sc-ease-out);
}

.sc-map__label {
	font-family: var(--sc-font-display);
	font-size: 26px;
	font-weight: 700;
	font-stretch: 78%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	fill: var(--sc-ink);
	pointer-events: none;
	transition: fill 300ms var(--sc-ease-out);
}

a.sc-map__region {
	cursor: pointer;
	outline: none;
	text-decoration: none;
}

a.sc-map__region:is(:hover, .is-preview) .sc-map__area {
	fill: color-mix(in srgb, var(--sc-ink) 40%, var(--sc-lagoon));
}

/* Gewählte Region: dunkle Fläche, Name in Oleander – bei jeder Region gleich. */
.sc-map__region.is-active .sc-map__area {
	fill: var(--sc-ink);
}

a.sc-map__region:is(:hover, .is-preview) .sc-map__label--sea,
.sc-map__region.is-active .sc-map__label--sea {
	fill: var(--sc-oleander);
}

a.sc-map__region:is(:hover, .is-preview) .sc-map__label--land,
.sc-map__region.is-active .sc-map__label--land {
	fill: var(--sc-oleander-light);
}

.sc-map__region:focus-visible .sc-map__area {
	stroke: var(--sc-oleander);
	stroke-width: 4;
}

.sc-region {
	padding-block: var(--sc-space-m);
	border-top: 1px solid var(--sc-line);
	scroll-margin-top: calc(var(--sc-header) + var(--sc-space-s));
}

.sc-region:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Mit JavaScript steht neben bzw. unter der Karte immer genau eine Region. */
.sc-regions.is-enhanced .sc-region {
	padding-top: 0;
	border-top: 0;
}

.sc-region__back {
	display: none;
}

/* Übersicht, solange keine Region gewählt ist: die Regionen als ruhige Liste. */
.sc-front .sc-regions__overview ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sc-regions__overview li {
	border-top: 1px solid var(--sc-line);
}

.sc-front .sc-regions__overview a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.875rem;
	font-family: var(--sc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	font-stretch: 85%;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 250ms var(--sc-ease-out);
}

.sc-front .sc-regions__overview a::after {
	content: "→";
	font-weight: 400;
	transition: transform 300ms var(--sc-ease-out);
}

.sc-front .sc-regions__overview a:hover {
	color: var(--sc-oleander);
}

.sc-front .sc-regions__overview a:hover::after {
	transform: translateX(0.3em);
}

.sc-front .sc-region__title {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 700;
	font-stretch: 78%;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.sc-region__title:focus {
	outline: none;
}

.sc-front .sc-region__media {
	margin-top: var(--sc-space-s);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.sc-front .sc-region__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-front .sc-region__text {
	margin-top: var(--sc-space-s);
}

.sc-front .sc-region__label {
	margin-top: var(--sc-space-s);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-oleander);
}

.sc-front .sc-region__stories {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.sc-region__stories li {
	border-top: 1px solid var(--sc-line);
}

.sc-front .sc-region__stories a {
	display: grid;
	gap: 0.25rem;
	padding-block: 0.875rem;
	text-decoration: none;
}

.sc-region__story {
	font-family: var(--sc-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	transition: color 250ms var(--sc-ease-out);
}

.sc-region__stories a:hover .sc-region__story {
	color: var(--sc-oleander);
}

@media (max-width: 63.99em) {
	.sc-regions {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
	}

	.sc-regions__map,
	.sc-regions__list {
		grid-column: 1;
	}

	.sc-regions__map {
		position: static;
		max-width: 36rem;
		scroll-margin-top: var(--sc-header);
	}

	/* Auf dem Handy führt ein Knopf von der Region zurück zur Karte. */
	.sc-regions.is-enhanced .sc-region__back {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		margin-top: var(--sc-space-s);
		padding: 0;
		border: 0;
		border-bottom: 1px solid currentColor;
		background: none;
		color: var(--sc-ink);
		font-family: var(--sc-font-display);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
	}

	.sc-region__back::before {
		content: "↑";
		margin-right: 0.5rem;
	}
}

@media (max-width: 47.99em) {
	.sc-map__label {
		font-size: 36px;
	}
}

/* 6.13 Quiz -------------------------------------------------------------------------------- */
/* Eine Frage pro Bildschirm, große Antwortflächen, ruhiger Fortschritt; kein Spielelook. */

.sc-quizapp {
	background: var(--sc-seaglass);
}

/* Das Ergebnis steht als eigener Bereich auf Papier, deutlich getrennt vom Quiz-Einstieg darüber. */
.sc-intro + .sc-quizapp.is-result,
.sc-quizapp.is-result {
	padding-top: var(--sc-space-l);
	background: var(--sc-paper);
}

/* Fragen bleiben schmal; das Ergebnis mit Bild nutzt die volle Inhaltsbreite wie die übrigen Bereiche. */
.sc-quizapp.is-result .sc-quizapp__stage {
	max-width: none;
}

.sc-quizapp__stage {
	max-width: 60rem;
	min-height: 28rem;
	outline: none;
}

/* Vor dem Start nur der Knopf: keine reservierte Höhe (sie verhindert erst zwischen den Fragen das Springen). */
.sc-quizapp__stage:has(> .sc-quizapp__start:not([hidden])) {
	min-height: 0;
}

.sc-quizapp__start {
	display: inline-flex;
	align-items: center;
	min-height: 3.5rem;
	padding: 0 2rem;
	border: 0;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 250ms var(--sc-ease-out);
}

.sc-quizapp__start:hover {
	background: var(--sc-oleander);
}

.sc-quizapp__progress {
	height: 3px;
	margin-bottom: var(--sc-space-s);
	background: var(--sc-line);
}

.sc-quizapp__progress::after {
	content: "";
	display: block;
	width: calc(var(--sc-progress, 0) * 100%);
	height: 100%;
	background: var(--sc-ink);
	transition: width 500ms var(--sc-ease-out);
}

.sc-front .sc-quizapp__step {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-ink-soft);
}

.sc-front .sc-quizapp__question {
	margin: 0.75rem 0 var(--sc-space-m);
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	font-weight: 750;
	font-stretch: 78%;
	line-height: 0.98;
	letter-spacing: -0.015em;
	outline: none;
}

.sc-front .sc-quizapp__answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .sc-front: Das Theme (GeneratePress) färbt Knöpfe bei button:hover und button:focus dunkelgrau; auf dem
   iPhone bliebe dieser Zustand nach dem Tippen an der Antwort hängen, die danach an derselben Stelle steht. */
.sc-front .sc-quizapp__answer,
.sc-front .sc-quizapp__answer:is(:hover, :focus) {
	display: grid;
	gap: 0.375rem;
	width: 100%;
	height: 100%;
	min-height: 5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--sc-line);
	background: var(--sc-paper);
	color: var(--sc-ink);
	font-family: var(--sc-font-text);
	font-size: 1.125rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: border-color 250ms var(--sc-ease-out), transform 250ms var(--sc-ease-out), background-color 250ms var(--sc-ease-out);
}

/* Nur mit Maus: Auf dem Handy bliebe der Zustand nach dem Tippen an der Antwort darunter hängen. */
@media (hover: hover) {
	.sc-front .sc-quizapp__answer:hover {
		border-color: var(--sc-ink);
		transform: translateY(-2px);
	}
}

.sc-front .sc-quizapp__answer[aria-pressed="true"] {
	border-color: var(--sc-ink);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
}

.sc-quizapp__answer-note {
	font-size: var(--sc-text-small);
	font-style: italic;
	line-height: 1.45;
	opacity: 0.8;
}

/* .sc-front: Das Theme (GeneratePress) färbt Knöpfe bei button:hover und button:focus dunkelgrau. */
.sc-front .sc-quizapp__back,
.sc-front .sc-quizapp__secondary {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: none;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sc-front .sc-quizapp__back {
	margin-top: var(--sc-space-m);
}

.sc-quizapp__back::before {
	content: "←";
	margin-right: 0.5rem;
}

.sc-quizapp__result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sc-space-m);
	align-items: start;
}

.sc-front .sc-quizapp__result-title {
	margin-top: 0.75rem;
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 750;
	font-stretch: 78%;
	line-height: 0.92;
	letter-spacing: -0.02em;
	outline: none;
}

.sc-front .sc-quizapp__result-text {
	max-width: 40ch;
	margin-top: var(--sc-space-s);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.5;
}

/* Einladung unter einem geteilten Ergebnis, darunter der Knopf zum eigenen Quiz. */
.sc-front .sc-quizapp__invite {
	margin-top: var(--sc-space-m);
	font-family: var(--sc-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 650;
	line-height: 1.15;
	color: var(--sc-oleander);
}

.sc-front .sc-quizapp__invite + .sc-quizapp__actions {
	margin-top: var(--sc-space-s);
}

.sc-quizapp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: var(--sc-space-m);
}

.sc-front .sc-quizapp__cta {
	display: inline-flex;
	align-items: center;
	min-height: 3.25rem;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--sc-bay-button);
	cursor: pointer;
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 250ms var(--sc-ease-out);
}

.sc-front .sc-quizapp__cta:hover {
	background: var(--sc-oleander);
}

/* Hinweis aufs Dalmatien-Quiz unter dalmatinischen Ergebnissen. */
.sc-front .sc-quizapp__dalmatia {
	margin-top: var(--sc-space-s);
	font-family: var(--sc-font-display);
	font-size: 1.125rem;
	font-weight: 600;
}

.sc-front .sc-quizapp__dalmatia a {
	color: var(--sc-oleander);
}

.sc-quizapp__dalmatia a::after {
	content: " →";
}

/* Name der Region, rechts daneben klein die Kroatienkarte mit der markierten Region (frei, nicht auf dem Foto). */
.sc-quizapp__result-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sc-space-s);
	max-width: 36rem;
}

.sc-quizapp__result-head .sc-quizapp__result-title {
	min-width: 0;
}

.sc-quizapp__result-locator {
	flex: none;
	width: clamp(4.5rem, 6vw, 6rem);
}

.sc-quizapp__result-locator svg {
	display: block;
	width: 100%;
	height: auto;
}

.sc-quizapp__result-locator .sc-map__label {
	display: none;
}

/* In der kleinen Lagekarte wäre die dunkle Fläche der großen Karte zu schwer: ein ruhiges, mittleres Petrol. */
.sc-quizapp__result-locator .sc-map__region.is-active .sc-map__area {
	fill: color-mix(in srgb, var(--sc-ink) 55%, var(--sc-lagoon));
}

/* Bild der Region im Querformat: Die Regionsbilder sind quer, ein Hochformat ließe nur einen schmalen Streifen übrig. */
.sc-front .sc-quizapp__result-photo {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.sc-front .sc-quizapp__result-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-quizapp__result-map .sc-map__label {
	display: none;
}

.sc-quizapp__result-map .is-active .sc-map__label {
	display: block;
}

@media (max-width: 47.99em) {
	.sc-front .sc-quizapp__answers,
	.sc-quizapp__result {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Handy: Knopf zur Karte über die ganze Breite, Beschriftung mittig in einer Zeile. */
	.sc-front .sc-quizapp__cta {
		justify-content: center;
		width: 100%;
		padding-inline: 1rem;
		font-size: 0.875rem;
		letter-spacing: 0.04em;
		text-align: center;
	}

	.sc-quizapp__result-map {
		order: -1;
		max-width: 20rem;
	}

	.sc-quizapp__result-media {
		order: -1;
	}
}

/* 6.13a Dalmatien-Quiz ----------------------------------------------------------------- */
/* Baut auf dem Quiz auf (.sc-quizapp); neu sind die Bildkacheln in Frage 6 und das freiwillige Mail-Feld. */

/* Frage 6: Fotos im Hochformat 4:5, Text darunter; auf dem Handy zwei Kacheln nebeneinander. */
.sc-front .sc-dquiz__tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sc-front .sc-dquiz__tiles .sc-quizapp__answer {
	align-content: start;
	padding: 0 0 1rem;
	overflow: hidden;
}

.sc-front .sc-dquiz__tiles .sc-quizapp__answer-text {
	padding-inline: 1rem;
	font-size: 1rem;
}

.sc-dquiz__photo {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sc-dquiz__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--sc-ease-out);
}

@media (hover: hover) {
	.sc-front .sc-dquiz__tiles .sc-quizapp__answer:hover .sc-dquiz__photo img {
		transform: scale(1.04);
	}
}

/* Gleichstand: der zweite Typ als kurzer Absatz unter dem ersten. */
.sc-front .sc-dquiz__also {
	max-width: 40ch;
	margin-top: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* Ergebnis per Mail: rechts neben dem Ergebnis auf Meerglas, mit der Bucht unten links. */
.sc-dquiz__mail {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 0 0 0 clamp(2rem, 4vw, 3.5rem);
	background: var(--sc-seaglass);
}

.sc-front .sc-dquiz__mail-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 750;
	font-stretch: 78%;
	line-height: 1;
}

.sc-front .sc-dquiz__mail-text {
	max-width: 40ch;
	margin-top: 0.75rem;
	line-height: 1.55;
}

.sc-dquiz__form {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.sc-front .sc-dquiz__field label {
	display: block;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-ink-soft);
}

/* Wie im Newsletter-Formular: nur eine Linie unter dem Feld. */
.sc-front .sc-dquiz__field input {
	width: 100%;
	min-height: 3rem;
	padding: 0.5rem 0;
	border: 0;
	border-bottom: 2px solid var(--sc-ink);
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 1.125rem;
}

.sc-front .sc-dquiz__field input:focus-visible {
	outline: 2px solid var(--sc-oleander);
	outline-offset: 4px;
}

.sc-dquiz__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.sc-front .sc-dquiz__consent {
	font-size: var(--sc-text-small);
	line-height: 1.5;
}

.sc-front .sc-dquiz__consent input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 0.375rem 0 0;
	vertical-align: -0.2em;
	accent-color: var(--sc-ink);
}

.sc-front .sc-dquiz__consent a {
	color: var(--sc-ink);
}

.sc-front .sc-dquiz__form .sc-quizapp__cta {
	justify-self: start;
}

.sc-front .sc-dquiz__status:empty {
	display: none;
}

.sc-front .sc-dquiz__status {
	font-size: var(--sc-text-small);
	color: var(--sc-oleander);
}

.sc-front .sc-dquiz__done {
	margin-top: 1.5rem;
	font-family: var(--sc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 650;
	line-height: 1.3;
	outline: none;
}

@media (max-width: 47.99em) {
	.sc-front .sc-dquiz__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-front .sc-dquiz__form .sc-quizapp__cta {
		justify-self: stretch;
	}
}

/* 6.14 Magazin -------------------------------------------------------------------------- */
/* Kopf mit H1, Einleitung und Suche; der Titel bleibt bewusst zurückhaltend (Master-Prompt, Abschnitt 29). */

.sc-intro--magazine {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	row-gap: var(--sc-space-s);
	align-items: end;
}

.sc-front .sc-intro--magazine .sc-intro__title {
	grid-column: 1 / span 6;
	grid-row: 1 / span 2;
	align-self: start;
	font-size: clamp(2.5rem, 5.5vw, 5rem);
}

.sc-front .sc-intro--magazine .sc-intro__text {
	grid-column: 8 / span 5;
	margin-top: 0;
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}

.sc-intro--magazine .sc-magazine-search {
	grid-column: 8 / span 5;
}

/* Suche: schlichte Linie wie in der Kopfzeile, kein Kasten und kein Schatten. */
.sc-front .sc-magazine-search {
	position: relative;
	margin: 0;
}

.sc-front .sc-magazine-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	border: 0;
	border-bottom: 2px solid var(--sc-ink);
	padding: 0;
}

.sc-front .sc-magazine-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 3.25rem;
	padding: 0.5rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 1.25rem;
}

.sc-front .sc-magazine-search .wp-block-search__input:focus {
	outline: none;
}

.sc-front .sc-magazine-search .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--sc-oleander);
}

.sc-front .sc-magazine-search .wp-block-search__button {
	margin: 0;
	padding: 0 0 0 1rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sc-ink);
	font-family: var(--sc-font-display);
	font-size: 0.875rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Vorschläge beim Tippen, direkt unter dem Suchfeld. */
.sc-suggest {
	position: absolute;
	inset: calc(100% + 0.25rem) 0 auto;
	z-index: 20;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--sc-white);
	box-shadow: 0 1rem 2.5rem rgba(var(--sc-shade), 0.14);
}

.sc-front-shell .sc-suggest a {
	display: block;
	padding: 0.625rem 1rem;
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.sc-front-shell .sc-suggest a:is(:hover, [aria-selected="true"]) {
	background: var(--sc-seaglass);
}

.sc-suggest__all {
	border-top: 1px solid var(--sc-line);
}

.sc-front-shell .sc-suggest__all a {
	font-size: var(--sc-text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-oleander);
}

/* Suchergebnisse: passende eigene Seiten (Quiz, Karte …) als Links unter dem Suchfeld. */
.sc-search-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.sc-front-shell .sc-search-pages a {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-white);
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: 650;
	text-decoration: none;
}

.sc-front-shell .sc-search-pages a:hover {
	background: var(--sc-oleander);
}

@media (max-width: 63.99em) {
	.sc-intro--magazine {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-front .sc-intro--magazine .sc-intro__title,
	.sc-front .sc-intro--magazine .sc-intro__text,
	.sc-intro--magazine .sc-magazine-search {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Ausgewählte Einblicke: ein großer Aufmacher bis an den Rand, zwei kleinere Beiträge daneben. */
.sc-insights {
	padding-top: var(--sc-space-l);
	background: var(--sc-seaglass);
}

.sc-picks--lead {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	align-items: start;
}

.sc-picks__side {
	grid-column: 9 / -1;
	display: grid;
	gap: var(--sc-space-m);
}

.sc-front .sc-story--small .sc-story__media {
	aspect-ratio: 3 / 2;
}

.sc-front .sc-story--small .sc-story__body {
	padding-top: 1rem;
}

.sc-front .sc-story--small .sc-story__title {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	line-height: 1.1;
}

@media (max-width: 47.99em) {
	.sc-picks--lead {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sc-space-m);
	}

	.sc-picks--lead .sc-story--lead,
	.sc-picks__side {
		grid-column: 1;
	}

	.sc-front .sc-picks--lead .sc-story--lead .sc-story__media {
		margin-inline: calc(var(--sc-gutter) * -1);
	}
}

/* Karte und Quiz als zwei ruhige Wege ins Magazin. */
.sc-discover {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sc-gap);
}

.sc-discover__item {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 1rem;
	min-height: 17rem;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--sc-seaglass);
}

.sc-discover__item--map {
	padding-inline-end: clamp(8rem, 16vw, 14rem);
	background: var(--sc-seaglass) url("../map/kroatien-silhouette.svg") no-repeat right clamp(1rem, 2.5vw, 2.25rem) center / clamp(7rem, 13vw, 11rem) auto;
}

.sc-front .sc-discover__title {
	max-width: 18ch;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: 750;
	font-stretch: 78%;
	line-height: 1;
	letter-spacing: -0.01em;
}

.sc-front .sc-discover__text {
	max-width: 34ch;
	color: var(--sc-ink-soft);
}

.sc-discover__item .wp-block-buttons {
	margin-top: auto;
}

@media (max-width: 47.99em) {
	.sc-discover {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-discover__item {
		min-height: 0;
	}
}

/* Alle Beiträge: Themenfilter, der neueste Beitrag der Seite größer, darunter ruhige Zeilen. */
.sc-archive {
	scroll-margin-top: var(--sc-header);
}

.sc-front .sc-archive .sc-section__title {
	scroll-margin-top: calc(var(--sc-header) + var(--sc-space-s));
}

.sc-postlist {
	outline: none;
	transition: opacity 250ms ease;
}

.sc-postlist.is-loading {
	opacity: 0.45;
}

.sc-front .sc-postlist__filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 var(--sc-space-m);
	padding: 0;
	list-style: none;
}

.sc-front .sc-postlist__filter a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	border-bottom: 2px solid transparent;
	font-family: var(--sc-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 250ms var(--sc-ease-out), color 250ms var(--sc-ease-out);
}

.sc-front .sc-postlist__filter a:hover {
	color: var(--sc-oleander);
}

.sc-front .sc-postlist__filter a[aria-current="true"] {
	border-bottom-color: var(--sc-oleander);
	color: var(--sc-oleander);
}

.sc-front .sc-postlist__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-entry {
	position: relative;
	padding-block: var(--sc-space-s);
	border-top: 1px solid var(--sc-line);
}

.sc-entry__inner {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: var(--sc-gap);
	align-items: start;
}

.sc-front .sc-entry__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sc-seaglass);
}

.sc-front .sc-entry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--sc-ease-out);
}

.sc-entry:hover .sc-entry__media img {
	transform: scale(1.05);
}

.sc-entry__body {
	display: grid;
	gap: 0.5rem;
	max-width: 44rem;
}

.sc-front .sc-entry__title {
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	line-height: 1.1;
}

.sc-entry__title a {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 400ms var(--sc-ease-out);
}

.sc-entry:hover .sc-entry__title a {
	background-size: 100% 1px;
}

.sc-front .sc-entry__excerpt {
	color: var(--sc-ink-soft);
}

.sc-front .sc-entry__date {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	color: var(--sc-ink-soft);
}

/* Der neueste Beitrag jeder Seite: großes Bild, daneben der Text. */
.sc-entry--lead {
	padding-top: 0;
	border-top: 0;
}

.sc-entry--lead .sc-entry__inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
}

.sc-front .sc-entry--lead .sc-entry__title {
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
	line-height: 1;
}

/* Große Bildschirme: der erste Beitrag über die volle Breite, die übrigen in Zweierreihen. */
@media (min-width: 64em) {
	.sc-front .sc-postlist__items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sc-space-m);
	}

	.sc-entry--lead {
		grid-column: 1 / -1;
		padding-bottom: var(--sc-space-m);
	}

	.sc-entry:not(.sc-entry--lead) .sc-entry__inner {
		grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	}

	.sc-front .sc-entry:not(.sc-entry--lead) .sc-entry__title {
		font-size: clamp(1.25rem, 1.5vw, 1.5rem);
	}

	.sc-front .sc-entry:not(.sc-entry--lead) .sc-entry__excerpt {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

.sc-front .sc-postlist__empty {
	padding-block: var(--sc-space-m);
	color: var(--sc-ink-soft);
}

.sc-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-top: var(--sc-space-m);
	padding-top: var(--sc-space-s);
	border-top: 1px solid var(--sc-line);
	font-family: var(--sc-font-display);
}

.sc-front .sc-pager__pages {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-front .sc-pager__pages :is(a, span) {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.sc-front .sc-pager__pages a:hover {
	color: var(--sc-oleander);
}

.sc-pager__pages [aria-current="page"] {
	background: var(--sc-ink);
	color: var(--sc-on-deep);
}

.sc-front .sc-pager__step {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.sc-pager__step--newer::before {
	content: "←";
}

.sc-pager__step--older::after {
	content: "→";
}

@media (max-width: 47.99em) {
	.sc-entry__inner {
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		gap: 1rem;
	}

	.sc-front .sc-entry__title {
		font-size: 1.1875rem;
	}

	.sc-front .sc-entry:not(.sc-entry--lead) :is(.sc-entry__excerpt, .sc-meta__sep, .sc-meta__time) {
		display: none;
	}

	.sc-entry--lead .sc-entry__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-front .sc-entry--lead .sc-entry__media {
		width: calc(100% + 2 * var(--sc-gutter));
		max-width: none;
		margin-inline: calc(var(--sc-gutter) * -1);
	}

	.sc-front .sc-entry--lead .sc-entry__title {
		font-size: clamp(1.625rem, 7vw, 2rem);
	}
}

/* 6.15 Was Simply Croatia erzählt ------------------------------------------------------- */
/* Der bestehende Text in neuer Ordnung: der Einstieg groß, daneben das Bild im Hochformat bis zum
   rechten Rand, darunter ruhige Lesebreite. „Wer hinter Simply Croatia steht“ auf Meerglas, Überschrift links. */

.sc-about {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	row-gap: var(--sc-space-m);
}

.sc-about > * {
	grid-column: 1 / -1;
}

.sc-front .sc-about__statement {
	grid-column: 1 / span 8;
	display: grid;
	gap: 0.3em;
	font-family: var(--sc-font-display);
	font-size: clamp(2rem, 4.4vw, 4rem);
	font-weight: 650;
	font-stretch: 85%;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.sc-front .sc-about__accent {
	color: var(--sc-oleander);
}

.sc-about__body {
	grid-column: 1 / span 7;
	display: grid;
	gap: 1.25em;
}

/* Das Bild begleitet den Text: Es bleibt beim Lesen stehen, bis der Einstiegstext zu Ende ist. */
.sc-front .sc-about__image {
	grid-column: 9 / -1;
	grid-row: 1 / span 2;
	align-self: start;
	position: sticky;
	top: calc(var(--sc-header) + var(--sc-space-s));
	width: calc(100% - var(--sc-bleed));
	max-width: none;
	/* Oberkante auf Höhe der Großbuchstaben von „Kroatien wirkt …“ (ca. 0,2 der Schriftgröße unter der Zeilenoberkante). */
	margin: calc(clamp(2rem, 4.4vw, 4rem) * 0.2) var(--sc-bleed) 0 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sc-front .sc-about__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-front .sc-about__body p {
	max-width: 38em;
	font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
	line-height: 1.65;
}

.sc-about--person {
	background: var(--sc-seaglass);
}

.sc-front .sc-about__title {
	grid-column: 1 / span 4;
	align-self: start;
	position: sticky;
	top: calc(var(--sc-header) + var(--sc-space-s));
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	font-weight: 700;
	font-stretch: 78%;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.sc-about--person .sc-about__body {
	grid-column: 6 / span 7;
}

.sc-front .sc-about__body .sc-about__lead {
	font-family: var(--sc-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 650;
	line-height: 1.2;
	color: var(--sc-oleander);
}

/* Hinweis zu Preisen und Fahrplänen: ein ruhiges Blatt, kein Erzähltext. */
.sc-front .sc-about__body .sc-about__note {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--sc-paper);
	border-radius: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--sc-text-body);
	line-height: 1.55;
	color: var(--sc-ink-soft);
}

.sc-front .sc-about__contact a {
	color: var(--sc-oleander);
	text-underline-offset: 0.2em;
}

.sc-front .sc-about__body .sc-about__credit {
	margin-top: var(--sc-space-s);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	color: var(--sc-ink-soft);
}

@media (max-width: 63.99em) {
	.sc-front .sc-about__statement,
	.sc-about__body,
	.sc-about--person .sc-about__body,
	.sc-front .sc-about__title,
	.sc-front .sc-about__image {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.sc-front .sc-about__title,
	.sc-front .sc-about__image {
		position: static;
	}

	.sc-front .sc-about__image {
		width: calc(100% + 2 * var(--sc-gutter));
		margin-inline: calc(var(--sc-gutter) * -1);
	}
}

/* 6.16 Kontakt ------------------------------------------------------------------------- */
/* Einladung und Formular links, das Bild rechts daneben. Auf dem Handy: Einladung, Formular, Bild.
   Das Formular stammt aus einem Formular-Plugin; die Regeln gelten für seine üblichen Feldtypen,
   Feldgestaltung wie beim Newsletter (Linie statt Kasten). */

.sc-contact {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sc-gap);
	row-gap: var(--sc-space-m);
	align-items: start;
	padding-bottom: var(--sc-space-l);
}

.sc-contact > * {
	grid-column: 1 / -1;
}

.sc-contact__form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--sc-seaglass);
	border-radius: 0 0 0 clamp(2rem, 5vw, 4rem);
}

.sc-front .sc-contact__form form {
	display: grid;
	gap: 1.5rem;
}

.sc-front .sc-contact__form form p {
	margin: 0;
}

.sc-front .sc-contact__form label {
	display: block;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sc-ink);
}

.sc-front .sc-contact__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 2px solid var(--sc-ink);
	border-radius: 0;
	background: transparent;
	color: var(--sc-ink);
	font-family: var(--sc-font-text);
	font-size: 1.125rem;
}

.sc-front .sc-contact__form textarea {
	min-height: 9rem;
	resize: vertical;
}

.sc-front .sc-contact__form :is(input, select, textarea):focus-visible {
	outline: none;
	border-bottom-color: var(--sc-oleander);
	box-shadow: 0 1px 0 var(--sc-oleander);
}

.sc-front .sc-contact__form :is(button, input[type="submit"]) {
	min-height: 3rem;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	justify-self: start;
	transition: background-color 250ms var(--sc-ease-out);
}

.sc-front .sc-contact__form :is(button, input[type="submit"]):hover {
	background: var(--sc-oleander);
}

/* Contact Form 7: Hinweise bei fehlenden Angaben und nach dem Absenden in den Farben der Seite
   statt im Blau und Rot des Plugins; der Ladekreis steht neben dem Knopf. */
.sc-front .sc-contact__form .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-oleander);
}

.sc-front .sc-contact__form .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--sc-ink);
	background: var(--sc-paper);
	font-size: var(--sc-text-small);
}

.sc-front .sc-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.sc-front .sc-contact__form .wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--sc-oleander);
}

.sc-front .sc-contact__form .wpcf7-spinner {
	vertical-align: middle;
}

.sc-front .sc-contact__privacy {
	margin-top: 1.5rem;
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

.sc-front .sc-contact__privacy a {
	text-underline-offset: 0.2em;
}

.sc-front .sc-contact__image {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sc-front .sc-contact__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-front .sc-contact__credit {
	margin-top: 0.75rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-label);
	color: var(--sc-ink-soft);
}

@media (min-width: 64em) {
	.sc-contact__intro,
	.sc-contact__form {
		grid-column: 1 / span 6;
	}

	/* Das Bild reicht von der Überschrift bis zur Unterkante des Formulars; die Bildquelle hängt darunter. */
	.sc-contact__media {
		grid-column: 8 / -1;
		grid-row: 1 / span 2;
		align-self: stretch;
		position: relative;
		display: flex;
		flex-direction: column;
		margin-right: var(--sc-bleed);
	}

	.sc-front .sc-contact__media .sc-contact__image {
		flex: 1;
		aspect-ratio: auto;
		min-height: 24rem;
	}

	.sc-front .sc-contact__credit {
		position: absolute;
		top: 100%;
		left: 0;
		padding-right: var(--sc-inline);
	}
}

@media (max-width: 47.99em) {
	.sc-contact__form {
		margin-inline: calc(var(--sc-gutter) * -1);
		padding-inline: var(--sc-gutter);
	}
}

/* 6.17 Impressum und Datenschutz ------------------------------------------------------- */
/* Der Inhalt bleibt, wie er im Editor steht; hier nur ruhige Lesebreite und klare Zwischenüberschriften. */

.sc-legal {
	padding-bottom: var(--sc-space-l);
}

/* Lange Wörter wie „Verbraucherstreitbeilegung/Universalschlichtungsstelle“ dürfen umbrechen. */
.sc-legal__content {
	max-width: 42rem;
	margin-top: var(--sc-space-m);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.sc-front .sc-legal__content > * + * {
	margin-top: 1.25em;
}

.sc-front .sc-legal__content :is(p, li) {
	line-height: 1.6;
}

.sc-front .sc-legal__content :is(h2, h3, h4) {
	margin-top: 2.25em;
	font-family: var(--sc-font-display);
	font-weight: 700;
	line-height: 1.15;
}

.sc-front .sc-legal__content h2 {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.sc-front .sc-legal__content :is(h3, h4) {
	font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
}

/* Fett gesetzte Zeilen im Fließtext (z. B. „Verantwortlich für den Inhalt …“) wirken wie kleine Überschriften. */
.sc-front .sc-legal__content strong {
	font-family: var(--sc-font-display);
	font-weight: 700;
}

.sc-front .sc-legal__content :is(ul, ol) {
	padding-left: 1.25em;
}

/* Tabellen (etwa Cookie-Übersichten) bleiben auf dem Handy seitlich scrollbar, statt die Seite zu verbreitern. */
.sc-front .sc-legal__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--sc-text-small);
}

.sc-front .sc-legal__content :is(th, td) {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--sc-line);
	text-align: left;
	vertical-align: top;
	overflow-wrap: normal;
}

.sc-front .sc-legal__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.sc-front .sc-legal__content a:hover {
	color: var(--sc-oleander);
}

/* 6.18 Artikel -------------------------------------------------------------------------- */
/* „Je länger gelesen wird, desto ruhiger wird Simply Croatia.“ Titel und Bild großzügig,
   der Text in einer ruhigen Lesespalte; der Inhalt selbst bleibt, wie er im Editor steht. */

.sc-article__head {
	padding-top: calc(var(--sc-header) + var(--sc-space-m));
	padding-bottom: var(--sc-space-m);
}

.sc-front .sc-article__head .sc-meta a {
	text-decoration: none;
}

.sc-front .sc-article__title {
	margin-top: 1rem;
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	font-weight: 700;
	font-stretch: 80%;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.sc-front .sc-article__date {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-top: var(--sc-space-s);
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

/* Das Beitragsbild steht etwas breiter als Kopf und Text, ebenfalls mittig. */
.sc-front .sc-article__media {
	margin: 0 max(var(--sc-gutter), calc((100% - 72rem) / 2));
}

.sc-front .sc-article__media img {
	width: 100%;
	height: auto;
	max-height: 85vh;
	object-fit: cover;
}

/* Lesespalte: etwa 70 Zeichen, mittig; Kopf und Text stehen in derselben Spalte. */
.sc-article__body {
	padding: var(--sc-space-l) var(--sc-inline);
}

.sc-front .sc-article__head > *,
.sc-front .sc-article__body > *,
.sc-front .sc-article__comments > * {
	max-width: 42rem;
	margin-inline: auto;
}

.sc-front .sc-article__body > * + * {
	margin-top: 1.25em;
}

.sc-front .sc-article__body :is(p, li) {
	font-size: clamp(1.125rem, 0.35vw + 1rem, 1.25rem);
	line-height: 1.7;
}

.sc-front .sc-article__body p:empty {
	display: none;
}

.sc-front .sc-article__body h2 {
	margin-top: 2.2em;
	font-size: clamp(1.75rem, 2.6vw, 2.375rem);
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.sc-front .sc-article__body :is(h3, h4) {
	margin-top: 1.8em;
	font-size: clamp(1.3125rem, 1.6vw, 1.5rem);
	font-weight: 650;
	line-height: 1.2;
}

.sc-front .sc-article__body :is(h2, h3, h4) + * {
	margin-top: 0.75em;
}

.sc-front .sc-article__body :is(ul, ol) {
	padding-left: 1.25em;
}

.sc-front .sc-article__body li + li {
	margin-top: 0.4em;
}

.sc-front .sc-article__body li::marker {
	color: var(--sc-oleander);
}

.sc-front .sc-article__body a {
	color: var(--sc-oleander);
	text-decoration: none;
}

.sc-front .sc-article__body a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sc-front .sc-article__body strong {
	font-weight: 650;
}

/* Kleine Hinweise im Text (z. B. Affiliate-Hinweis, Bildquelle). */
.sc-front .sc-article__body .has-small-font-size {
	font-size: var(--sc-text-small);
	line-height: 1.5;
	color: var(--sc-ink-soft);
}

/* Bilder im Text dürfen etwas breiter als die Lesespalte sein. */
.sc-front .sc-article__body > .wp-block-image {
	max-width: 56rem;
	margin-block: var(--sc-space-m);
}

.sc-front .sc-article__body .wp-block-image img {
	width: 100%;
	height: auto;
}

.sc-front .sc-article__body figcaption {
	margin-top: 0.6rem;
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-small);
	color: var(--sc-ink-soft);
}

.sc-front .sc-article__body blockquote {
	margin-block: var(--sc-space-m);
	padding-left: 1.25rem;
	border-left: 3px solid var(--sc-oleander);
	font-style: italic;
}

/* Tabellen: ruhige Linien, auf dem Handy seitlich wischbar. */
.sc-front .sc-article__body > .wp-block-table {
	max-width: 56rem;
	overflow-x: auto;
}

.sc-front .sc-article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sc-text-small);
}

.sc-front .sc-article__body :is(th, td) {
	padding: 0.7rem 0.8rem;
	border: 0;
	border-bottom: 1px solid var(--sc-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

.sc-front .sc-article__body th,
.sc-front .sc-article__body thead td {
	font-family: var(--sc-font-display);
	font-weight: 650;
	background: var(--sc-seaglass);
}

.sc-front .sc-article__body .wp-block-spacer {
	max-height: var(--sc-space-m);
}

/* Weiterlesen: drei Beiträge aus demselben Thema. */
.sc-related {
	background: var(--sc-seaglass);
}

.sc-front .sc-related__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-gap);
	margin: var(--sc-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.sc-card {
	position: relative;
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

.sc-front .sc-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.sc-front .sc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--sc-ease-out);
}

.sc-card:hover .sc-card__media img {
	transform: scale(1.05);
}

.sc-front .sc-card__title {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 650;
	line-height: 1.15;
}

.sc-front .sc-related__all {
	margin-top: var(--sc-space-m);
	font-family: var(--sc-font-display);
	font-weight: 600;
}

.sc-front .sc-related__all a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.sc-front .sc-related__all a::after {
	content: " →";
}

/* Kommentare (Formular des Themes): Lesebreite wie der Text, Formularfelder im Stil der Seite. */
.sc-front .sc-article__comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 2px solid var(--sc-ink);
	background: transparent;
	font: inherit;
}

.sc-front .sc-article__comments :is(input[type="submit"], button) {
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--sc-bay-button);
	background: var(--sc-ink);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-display);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 63.99em) {
	.sc-front .sc-related__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 47.99em) {
	.sc-front .sc-article__media {
		margin-inline: 0;
	}
}

/* 6.18a Anmeldebox im Artikel ------------------------------------------------------------ */
/* Der Baustein „Post aus Kroatien“ (6.11) mitten im Text, z. B. für das Fritule-Rezept im Weihnachtsartikel.
   Etwas breiter als die Lesespalte wie Bilder; Abstände und Überschrift im Maß des Artikels.
   Die Regeln für Überschriften im Text (6.18) gelten hier nicht, die Box ordnet ihren Inhalt selbst. */
.sc-front .sc-article__body > .sc-letter {
	max-width: 56rem;
	margin-block: var(--sc-space-m);
	padding: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	scroll-margin-top: calc(var(--sc-header) + 1rem);
}

.sc-front .sc-article__body .sc-letter__copy > * {
	margin: 0;
}

.sc-front .sc-article__body .sc-letter__title {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.08;
}

/* Handy: Das Formularblatt bleibt als helles Blatt in der Box stehen, statt bis an den Rand zu reichen. */
@media (max-width: 47.99em) {
	.sc-front .sc-article__body .sc-letter__form {
		margin-inline: 0;
		padding-inline: 1.25rem;
	}
}

/* 6.19 Sprachführer zum Anhören ----------------------------------------------------------- */
/* Wörterliste nach Kapiteln: links der Abspielknopf, dann Wort und Aussprache, rechts Bedeutung und Tipp. */

.sc-phrasebook-intro {
	padding-bottom: var(--sc-space-m);
}

.sc-phrasebook__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0 var(--sc-inline) var(--sc-space-s);
}

.sc-front .sc-phrasebook__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1.5px solid var(--sc-ink);
	border-radius: 999px;
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.sc-front .sc-phrasebook__nav a:hover {
	background: var(--sc-ink);
	color: var(--sc-paper);
}

/* Sprungziele der QR-Codes: Abschnitt beginnt unter der festen Kopfzeile, die Kapitelüberschrift bleibt sichtbar. */
.sc-phrasebook__chapter,
.sc-phrasebook__key {
	scroll-margin-top: var(--sc-header);
}

.sc-phrasebook__chapter {
	padding-top: var(--sc-space-m);
	padding-bottom: var(--sc-space-m);
}

.sc-phrasebook__chapter:nth-of-type(even) {
	background: var(--sc-seaglass);
}

.sc-front .sc-phrasebook__title {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-bottom: var(--sc-space-s);
	font-family: var(--sc-font-display);
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	font-weight: 700;
	font-stretch: 80%;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sc-phrasebook__num {
	color: var(--sc-oleander);
}

.sc-phrasebook__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-phrase {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 0.75rem clamp(1rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--sc-ink) 18%, transparent);
}

.sc-phrase:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 18%, transparent);
}

.sc-phrase__say {
	display: inline-flex;
}

.sc-front-shell .sc-phrase__play,
.sc-front .sc-phrase__play {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1.5px solid var(--sc-oleander);
	border-radius: 50%;
	background: transparent;
	color: var(--sc-oleander);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--sc-ease-out);
}

/* GeneratePress färbt button:hover/:focus dunkel (Spezifität 0,1,1); daher mit .sc-front-Präfix. */
.sc-front .sc-phrase__play:is(:hover, :focus-visible),
.sc-front .sc-phrase__play[aria-pressed="true"] {
	background: var(--sc-oleander);
	color: var(--sc-white);
}

.sc-front .sc-phrase__play:active {
	transform: scale(0.94);
}

.sc-phrase__play .sc-icon {
	width: 1.35rem;
	height: 1.35rem;
}

@media (prefers-reduced-motion: no-preference) {
	.sc-front .sc-phrase__play[aria-pressed="true"] .sc-icon {
		animation: sc-say 900ms ease-in-out infinite alternate;
	}
}

.sc-front .sc-phrase__word {
	font-family: var(--sc-font-display);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1;
	color: var(--sc-ink);
}

.sc-front .sc-phrase__pron {
	margin-top: 0.35rem;
	font-family: var(--sc-font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--sc-ink-soft);
}

.sc-phrase__body {
	display: grid;
	gap: 0.4rem;
}

.sc-front .sc-phrase__meaning {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
}

.sc-front .sc-phrase__tip {
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sc-ink-soft);
}

.sc-phrase__extras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.35rem;
}

/* Knopf mittig zur Zeile; Wendung und Bedeutung stehen als Text auf einer gemeinsamen Grundlinie. */
.sc-phrase__extra {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.sc-phrase__extra-text {
	font-family: var(--sc-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.sc-front .sc-phrase__extra-meaning {
	margin-left: 0.3rem;
	font-family: var(--sc-font-text);
	font-weight: 400;
	color: var(--sc-ink-soft);
}

.sc-front .sc-phrase__say.is-small .sc-phrase__play {
	width: 2.25rem;
	height: 2.25rem;
}

.sc-front .sc-phrase__say.is-small .sc-icon {
	width: 1rem;
	height: 1rem;
}

.sc-phrasebook__closing {
	padding-top: var(--sc-space-m);
	padding-bottom: 0;
}

.sc-phrase.is-closing {
	border: 0;
}

.sc-front .sc-phrase.is-closing .sc-phrase__word {
	font-size: clamp(3rem, 8vw, 6rem);
	color: var(--sc-oleander);
}

.sc-phrasebook__key {
	padding-top: var(--sc-space-m);
}

.sc-phrasebook__letters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem var(--sc-gap);
	margin: 0;
}

.sc-phrasebook__letters div {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: baseline;
}

.sc-front .sc-phrasebook__letters dt {
	font-family: var(--sc-font-display);
	font-size: 1.625rem;
	line-height: 1;
	font-weight: 700;
	color: var(--sc-oleander);
}

.sc-phrasebook__letters dd {
	margin: 0;
	line-height: 1.45;
}

.sc-phrasebook__example {
	display: block;
	font-family: var(--sc-font-display);
	font-weight: 600;
	color: var(--sc-ink-soft);
}

.sc-phrasebook-outro {
	padding-top: var(--sc-space-m);
}

.sc-front .sc-phrasebook-outro p {
	max-width: 60ch;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.55;
}

/* Gegen den Fluss-Reset `.sc-front .is-layout-flow > *` am Dateianfang: Text, Knopf und Gruß bekommen Luft. */
.sc-front .sc-phrasebook-outro > * + * {
	margin-top: 1.25rem;
}

.sc-front .sc-phrasebook-outro > .sc-phrasebook-outro__action {
	margin-block: 1.75rem 2.5rem;
}

@media (max-width: 47.99em) {
	/* Alle Kapitel auf einen Blick: kleinere Knöpfe, die umbrechen, statt einer Reihe zum Wischen. */
	.sc-phrasebook__nav {
		gap: 0.5rem;
	}

	.sc-front .sc-phrasebook__nav a {
		min-height: 2.5rem;
		padding: 0 0.85rem;
		font-size: 0.875rem;
	}

	.sc-phrase {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.sc-phrase__body {
		grid-column: 2;
	}
}

/* 6.20 Cookie-Hinweis (Complianz) ------------------------------------------------------- */
/* Drittanbieter-Override: Complianz färbt sein Banner über eigene Variablen (--cmplz_…), die es auf :root setzt.
   Auf dem Banner selbst neu gesetzt, übernimmt es Farben, Schriften und die Bucht der Seite; Inhalt und
   Einstellungen bleiben in Complianz. */
.sc-front-shell .cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--sc-paper);
	--cmplz_banner_border_color: var(--sc-line);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 0 0 0 2rem;
	--cmplz_text_color: var(--sc-ink);
	--cmplz_hyperlink_color: var(--sc-ink);
	--cmplz_text_line_height: 1.5;
	--cmplz_text_font_size: 0.9375rem;
	--cmplz_link_font_size: 0.875rem;
	--cmplz_button_border_radius: 0 0 0 1.125rem;
	--cmplz_button_font_size: 0.875rem;
	--cmplz_button_accept_background_color: var(--sc-ink);
	--cmplz_button_accept_border_color: var(--sc-ink);
	--cmplz_button_accept_text_color: var(--sc-on-deep);
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: var(--sc-ink);
	--cmplz_button_deny_text_color: var(--sc-ink);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--sc-line);
	--cmplz_button_settings_text_color: var(--sc-ink);
	--cmplz_slider_active_color: var(--sc-ink);
	--cmplz_slider_inactive_color: var(--sc-line);
	--cmplz_slider_bullet_color: var(--sc-paper);
	box-shadow: 0 1.5rem 3rem rgba(var(--sc-shade), 0.18);
	font-family: var(--sc-font-text);
	color: var(--sc-ink);
}

/* Drittanbieter-Override: Titel und Knöpfe in der Display-Schrift der Seite statt der Theme-Schrift. */
.sc-front-shell .cmplz-cookiebanner :is(.cmplz-title, .cmplz-btn) {
	font-family: var(--sc-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Drittanbieter-Override: Complianz beschneidet das Logo auf sein festes Feld; die Wortmarke bleibt ganz sichtbar. */
.sc-front-shell .cmplz-cookiebanner .cmplz-logo img {
	width: auto;
	max-width: 11rem;
	height: auto;
	object-fit: contain;
}

.sc-front-shell .cmplz-cookiebanner .cmplz-btn:focus-visible,
.sc-front-shell .cmplz-cookiebanner a:focus-visible {
	outline: 2px solid var(--sc-oleander);
	outline-offset: 2px;
}

/* 7. Bewegung --------------------------------------------------------------------------- */
/*
 * Leicht und sinnvoll: Einblendungen beim Scrollen, lebendige Hover-Zustände,
 * ein langsamer Moment-Parallax und ein „pomalo“, das sich Zeit lässt.
 * Ausgangszustand ist immer sichtbar; ohne JS oder bei „Bewegung reduzieren“ entfällt alles.
 */

@media (prefers-reduced-motion: no-preference) {
	.sc-js .sc-hero__copy > * {
		animation: sc-rise 1100ms var(--sc-ease-out) both;
	}

	.sc-js .sc-hero__copy > :nth-child(2) {
		animation-delay: 120ms;
	}

	.sc-js .sc-hero__copy > :nth-child(3) {
		animation-delay: 260ms;
	}

	/* Quiz: jede neue Frage und das Ergebnis gleiten ruhig herein. */
	.sc-quizapp.is-entering .sc-quizapp__stage > :not(.sc-quizapp__answers),
	.sc-quizapp.is-entering .sc-quizapp__answers li {
		animation: sc-rise 600ms var(--sc-ease-out) both;
	}

	.sc-quizapp.is-entering .sc-quizapp__answers li:nth-child(2) { animation-delay: 60ms; }
	.sc-quizapp.is-entering .sc-quizapp__answers li:nth-child(3) { animation-delay: 120ms; }
	.sc-quizapp.is-entering .sc-quizapp__answers li:nth-child(4) { animation-delay: 180ms; }

	.sc-regions.is-enhanced .sc-region:not([hidden]) {
		animation: sc-rise 500ms var(--sc-ease-out) both;
	}

	/* Überschriften und Kennungen steigen beim Hineinscrollen auf. */
	.sc-js [data-sc-reveal="rise"] {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 700ms ease, transform 900ms var(--sc-ease-out);
		transition-delay: var(--sc-delay, 0ms);
	}

	/* Bilder öffnen sich von unten. */
	.sc-js [data-sc-reveal="unmask"] {
		clip-path: inset(14% 0 0 0);
		opacity: 0.001;
		transition: clip-path 1100ms var(--sc-ease-out), opacity 500ms ease;
		transition-delay: var(--sc-delay, 0ms);
	}

	.sc-js [data-sc-reveal].is-in {
		opacity: 1;
		transform: none;
		clip-path: inset(0);
	}

	/* pomalo: die Buchstaben rücken langsam zusammen. */
	.sc-js .sc-word__term[data-sc-reveal] {
		letter-spacing: 0.12em;
		transition: letter-spacing 2600ms var(--sc-ease-out), opacity 900ms ease;
	}

	.sc-js .sc-word__term[data-sc-reveal].is-in {
		letter-spacing: -0.04em;
	}

	/* Saisonbild zoomt beim Hineinscrollen sanft zurück. */
	.sc-js .sc-season__media[data-sc-reveal] img {
		transform: scale(1.1);
		transition: transform 2400ms var(--sc-ease-out);
	}

	.sc-js .sc-season__media[data-sc-reveal].is-in img {
		transform: none;
	}

	/* Menüpunkte im mobilen Menü erscheinen nacheinander. */
	.sc-site-header.is-menu .sc-site-nav__list li {
		animation: sc-rise 600ms var(--sc-ease-out) both;
	}

	.sc-site-header.is-menu .sc-site-nav__list li:nth-child(2) { animation-delay: 50ms; }
	.sc-site-header.is-menu .sc-site-nav__list li:nth-child(3) { animation-delay: 100ms; }
	.sc-site-header.is-menu .sc-site-nav__list li:nth-child(4) { animation-delay: 150ms; }
	.sc-site-header.is-menu .sc-site-nav__list li:nth-child(5) { animation-delay: 200ms; }
	.sc-site-header.is-menu .sc-site-nav__list li:nth-child(n + 6) { animation-delay: 250ms; }

	/* Header weicht beim Weiterlesen nach oben aus und kommt beim Zurückscrollen wieder. */
	.sc-site-header {
		transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 450ms var(--sc-ease-out);
	}

	.sc-site-header.is-hidden:not(.is-open) {
		transform: translateY(-100%);
	}
}

@keyframes sc-rise {
	from {
		opacity: 0;
		transform: translateY(0.6em);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}