/*
Theme Name: Sternzeit
Theme URI: https://sternzeit.ergebnisreich.de/
Author: Thomas Reinsch
Description: Blocktheme für Sternzeit – Café, Shisha und Cocktails am Kurt-Schumacher-Platz in Berlin-Reinickendorf. Getränkekarte aus Google Sheet, durchgehend geöffnet.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sternzeit
Tags: one-column, block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ---------------------------------------------------------------
   Schriften

   Montserrat für die Überschriften, Source Sans 3 für den Fließtext.
   Montserrat ist geometrisch gebaut, Source Sans humanistisch – dieser
   Unterschied lässt die Überschriften wirken, ohne dass eine dritte
   Schrift nötig wäre.

   Beide liegen als variable Schnitte in assets/fonts/ und werden von dort
   geladen, nicht von Google. Ein Aufruf bei Google würde die IP-Adresse
   jeder Besucherin an einen Dritten übertragen, und dafür gibt es keine
   Einwilligung.

   Eine Datei je Zeichensatz: "latin" deckt Deutsch ab, "latin-ext" die
   Zeichen darüber hinaus. Der Browser lädt nur, was er braucht.
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/montserrat-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: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Source Sans 3';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/source-sans-3-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------
   Grundlagen

   Die Farben kommen aus theme.json; hier stehen sie als Kurzform, damit
   die Regeln lesbar bleiben. Der zweite Wert ist der Rückfall für den
   Blockeditor, der die Variablen nicht immer mitliefert.
   --------------------------------------------------------------- */

:root {
	--sz-nacht: var(--wp--preset--color--nacht, #0B0B10);
	--sz-nacht-tief: var(--wp--preset--color--nacht-tief, #06060A);
	--sz-nacht-hoch: var(--wp--preset--color--nacht-hoch, #14141C);
	--sz-nacht-hoeher: var(--wp--preset--color--nacht-hoeher, #1C1C26);
	--sz-linie: var(--wp--preset--color--linie, #2A2A38);
	--sz-blau: var(--wp--preset--color--blau, #1A5FEF);
	--sz-blau-hell: var(--wp--preset--color--blau-hell, #6FA8FF);
	--sz-blau-tief: var(--wp--preset--color--blau-tief, #0449CA);
	--sz-magenta: var(--wp--preset--color--magenta, #FF2E9A);
	--sz-magenta-tief: var(--wp--preset--color--magenta-tief, #B4136B);
	--sz-text: var(--wp--preset--color--text, #F2EEE8);
	--sz-text-leise: var(--wp--preset--color--text-leise, #A8A2B4);
	--sz-weiss: var(--wp--preset--color--weiss, #FFFFFF);

	--sz-breite: 1280px;
	--sz-rand: clamp(1.25rem, 4vw, 2.5rem);
	--sz-radius: 12px;
	--sz-radius-klein: 8px;
	--sz-kopf: 70px;
	--sz-leiste: 60px;
	--sz-schnell: 64px;
}

/* Innenabstand und Rahmen zählen zur Breite. Ohne diese Zeile ist
   .sternzeit-breit um seinen Innenabstand zu breit und die Begrenzung
   auf 1280 px greift nicht. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Damit Sprungmarken nicht unter dem festen Kopfbereich landen. */
	scroll-padding-top: calc(var(--sz-kopf) + 0.75rem);
}

body {
	background: var(--sz-nacht);
	color: var(--sz-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Platz für die Leiste am unteren Rand auf schmalen Geräten. */
	padding-bottom: calc(var(--sz-schnell) + env(safe-area-inset-bottom, 0px));
}

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

picture {
	display: block;
}

/* Der Hauptbereich darf nicht einschnüren – die Abschnitte bringen ihre
   eigene Breitenbegrenzung mit (.sternzeit-breit). WordPress begrenzt an
   zwei Stellen: am <main> über has-global-padding und an jedem Kind über
   is-layout-constrained. */
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > main.wp-block-group > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

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

/* Ein sichtbarer Fokusrahmen, der auf dunklem Grund auch zu sehen ist. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sz-blau-hell);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   Bausteine
   --------------------------------------------------------------- */

.sternzeit-breit {
	max-width: var(--sz-breite);
	margin-inline: auto;
	padding-inline: var(--sz-rand);
}

.sternzeit-abschnitt {
	padding-block: clamp(3rem, 8vw, 5.5rem);
}

.sternzeit-abschnitt--eng {
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

/* Abschnitte mit eigenem Untergrund gliedern die Seite, ohne dass eine
   Trennlinie nötig wäre. */
.sternzeit-abschnitt--gehoben {
	background: var(--sz-nacht-hoch);
}

.sternzeit-abschnitt--kopf {
	padding-block: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem);
}

/* Die Augenbraue über der Überschrift: klein, gesperrt, in der Akzentfarbe.
   Sie ersetzt das Sinnbild, auf das dieses Theme bewusst verzichtet. */
.sternzeit-augenbraue {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sz-blau-hell);
}

.sternzeit-augenbraue--magenta {
	color: var(--sz-magenta);
}

.sternzeit-vorspann {
	font-size: var(--wp--preset--font-size--large, 1.1875rem);
	color: var(--sz-text-leise);
	max-width: 62ch;
}

.sternzeit-kleinkopf {
	margin: 2rem 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sz-text-leise);
}

.sternzeit-kopfzeile h2 {
	margin: 0 0 1rem;
}

.sternzeit-kopfzeile > div + p,
.sternzeit-kopfzeile > div + div {
	margin-top: 0;
}

.sternzeit-kopfzeile p:last-child {
	margin-bottom: 0;
}

/* Marke */

.sternzeit-marke {
	display: block;
	width: auto;
}

/* Die Wortmarke ist eine Neonschrift: der Schein gehört zum Bild und liegt
   als durchsichtiger Rand um die Buchstaben. Die sichtbare Schrift ist
   deshalb spürbar kleiner als der Kasten, in dem sie steht – die Höhe hier
   liegt entsprechend über dem, was man für ein Logo sonst ansetzen würde. */
.sternzeit-marke--kopf {
	height: 52px;
}

.sternzeit-marke--fuss {
	height: 48px;
}

/* Knöpfe */

.sternzeit-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--sz-radius-klein);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sternzeit-knopf--voll {
	background: var(--sz-blau);
	border-color: var(--sz-blau);
	color: var(--sz-weiss);
}

.sternzeit-knopf--voll:hover,
.sternzeit-knopf--voll:focus-visible {
	background: var(--sz-blau-hell);
	border-color: var(--sz-blau-hell);
	color: var(--sz-nacht);
}

.sternzeit-knopf--rand {
	background: transparent;
	border-color: var(--sz-linie);
	color: var(--sz-text);
}

.sternzeit-knopf--rand:hover,
.sternzeit-knopf--rand:focus-visible {
	border-color: var(--sz-blau-hell);
	color: var(--sz-blau-hell);
}

.sternzeit-knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.sternzeit-knopfreihe--mitte {
	justify-content: center;
}

.sternzeit-zeichen {
	flex: 0 0 auto;
}

/* Kurzangaben über den Betrieb, als Pillen unter den Knöpfen im Hero.
   Der grüne Punkt pulsiert nicht – eine blinkende Seite war im Briefing
   ausdrücklich nicht gewünscht. */
.sternzeit-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}

.sternzeit-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--sz-linie);
	border-radius: 999px;
	background: rgba(11, 11, 16, .55);
	backdrop-filter: blur(6px);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--sz-text);
}

/* Links etwas weniger Luft, weil der Punkt dort schon Abstand mitbringt. */
.sternzeit-chip--offen {
	padding-left: 0.7rem;
}

.sternzeit-chip__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3ED598;
	box-shadow: 0 0 0 3px rgba(62, 213, 152, .18);
}

.sternzeit-chips--fuss {
	margin-top: 0.75rem;
}

.sternzeit-chips--fuss .sternzeit-chip {
	background: transparent;
	backdrop-filter: none;
}

/* ---------------------------------------------------------------
   Kopfbereich

   Über dem Hero liegt er durchsichtig auf dem Bild, weiter unten bekommt
   er einen eigenen Untergrund. Den Umschlag setzt navigation.js.
   --------------------------------------------------------------- */

/*
 * Der Kopfbereich klebt am Fenster – aber kleben muss der Kasten, den
 * WordPress um den Vorlagenteil legt, nicht der Inhalt darin.
 *
 * WordPress rendert jeden Vorlagenteil als eigenes <div>. Ein sticky-Element
 * kann seinen Container nie verlassen: klebte nur die Hülle darin, wäre der
 * Kopfbereich nach seinen eigenen 77 px weggescrollt – und die Sprungleiste
 * der Karte hinge darunter über einem leeren Streifen, durch den der Inhalt
 * läuft. Genau das ist passiert, und in der Vorschau war es nicht zu sehen,
 * weil dort der Vorlagenteil-Kasten fehlte.
 */
.sternzeit-kopfteil {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Bleibt als Rückfall stehen, falls die Hülle einmal ohne Vorlagenteil
   ausgegeben wird – im Blockeditor etwa. */
.sternzeit-kopf-huelle {
	position: sticky;
	top: 0;
	z-index: 40;
	transition: background-color .2s ease, border-color .2s ease;
	border-bottom: 1px solid transparent;
}

.sternzeit-kopf-huelle--fest {
	background: rgba(11, 11, 16, .88);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--sz-linie);
}

/* Ohne Hero darunter: von Anfang an deckend, ohne Weichzeichner. */
.sternzeit-kopf-huelle--deckend,
.sternzeit-kopf-huelle--deckend.sternzeit-kopf-huelle--fest {
	background: var(--sz-nacht);
	backdrop-filter: none;
}

.sternzeit-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--sz-breite);
	min-height: var(--sz-kopf);
	margin-inline: auto;
	padding-inline: var(--sz-rand);
}

.sternzeit-kopf__marke {
	display: block;
	line-height: 0;
}

.sternzeit-kopf__schalter {
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--sz-text);
}

/* Drei Striche aus einem Element: der mittlere ist das Element selbst,
   die beiden anderen sind seine Pseudoelemente. */
.sternzeit-kopf__strich,
.sternzeit-kopf__strich::before,
.sternzeit-kopf__strich::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.sternzeit-kopf__strich {
	top: 21px;
}

.sternzeit-kopf__strich::before,
.sternzeit-kopf__strich::after {
	content: '';
	left: 0;
}

.sternzeit-kopf__strich::before {
	transform: translateY(-7px);
}

.sternzeit-kopf__strich::after {
	transform: translateY(7px);
}

.sternzeit-kopf[data-offen] .sternzeit-kopf__strich {
	background: transparent;
}

.sternzeit-kopf[data-offen] .sternzeit-kopf__strich::before {
	transform: rotate(45deg);
}

.sternzeit-kopf[data-offen] .sternzeit-kopf__strich::after {
	transform: rotate(-45deg);
}

.sternzeit-kopf__navigation {
	display: none;
}

.sternzeit-kopf[data-offen] .sternzeit-kopf__navigation {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0.5rem var(--sz-rand) 1.5rem;
	background: rgba(11, 11, 16, .97);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sz-linie);
}

.sternzeit-kopf__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sternzeit-kopf__liste a {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--sz-linie);
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--sz-text);
}

.sternzeit-kopf__liste a:hover {
	color: var(--sz-blau-hell);
}

.sternzeit-kopf__route {
	margin-top: 1.25rem;
	width: 100%;
}

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

.sternzeit-hero {
	position: relative;
	/* Der Kopfbereich klebt darüber – der Hero beginnt deshalb ganz oben. */
	margin-top: calc(-1 * var(--sz-kopf));
	padding: calc(var(--sz-kopf) + 3.5rem) 0 3rem;
	isolation: isolate;
}

.sternzeit-hero__bild,
.sternzeit-hero__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Zwei Verläufe: einer von unten für den Übergang in die Seite, einer von
   links für die Lesbarkeit des Textes. Ohne sie steht weiße Schrift stellen-
   weise auf hellen Flaschen. */
.sternzeit-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(11, 11, 16, .72) 0%, rgba(11, 11, 16, .35) 35%, rgba(11, 11, 16, .92) 100%),
		linear-gradient(90deg, rgba(11, 11, 16, .8) 0%, rgba(11, 11, 16, .35) 60%, rgba(11, 11, 16, .2) 100%);
}

.sternzeit-hero__inhalt {
	width: 100%;
	max-width: var(--sz-breite);
	margin-inline: auto;
	padding-inline: var(--sz-rand);
}

.sternzeit-hero__titel {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sternzeit-hero__name {
	font-size: var(--wp--preset--font-size--huge, clamp(2.5rem, 9vw, 4rem));
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sz-weiss);
	/* Ein Hauch Schein, mehr nicht: der Neoneffekt gehört auf das Logo,
	   nicht über die ganze Seite. */
	text-shadow: 0 0 28px rgba(26, 95, 239, .45);
}

.sternzeit-hero__zusatz {
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: clamp(1.0625rem, 4.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--sz-blau-hell);
}

.sternzeit-hero__ort {
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--sz-text-leise);
}

.sternzeit-hero__text {
	max-width: 34ch;
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--large, 1.1875rem);
	color: var(--sz-text);
}

.sternzeit-hero .sternzeit-knopf {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   Die drei Welten
   --------------------------------------------------------------- */

.sternzeit-welten {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sternzeit-welt__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sz-radius);
	text-decoration: none;
	isolation: isolate;
}

.sternzeit-welt__bild,
.sternzeit-welt__bild img {
	display: block;
	width: 100%;
	/* Hochformat, auch mobil. Die Motive sind hochkant aufgebaut; in einem
	   querformatigen Feld bliebe von der Tasse ein Streifen Tischplatte. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform .4s ease;
}

.sternzeit-welt__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--bild-unten,
		linear-gradient(180deg, rgba(11, 11, 16, 0) 0%, rgba(11, 11, 16, .55) 55%, rgba(11, 11, 16, .94) 100%));
}

.sternzeit-welt__inhalt {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: block;
	padding: 1.25rem;
}

.sternzeit-welt__titel {
	display: block;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sz-blau-hell);
}

.sternzeit-welt__text {
	display: block;
	margin-top: 0.35rem;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--sz-text);
}

.sternzeit-welt__link:hover .sternzeit-welt__bild img,
.sternzeit-welt__link:focus-visible .sternzeit-welt__bild img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------
   Zweispaltige Abschnitte: Café, Shisha, Außenbereich
   --------------------------------------------------------------- */

.sternzeit-zweispalt__raster {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: center;
}

.sternzeit-zweispalt__text h2 {
	margin: 0 0 1rem;
}

.sternzeit-zweispalt__bild,
.sternzeit-zweispalt__bild img {
	display: block;
	width: 100%;
	border-radius: var(--sz-radius);
	object-fit: cover;
}

/* Außenbereich: ein Bild über die volle Breite. */
.sternzeit-aussen {
	margin-top: 2.5rem;
}

.sternzeit-aussen img {
	display: block;
	width: 100%;
	/* Mobil etwas hochkantiger als 16:9 – sonst ist die Terrasse auf
	   360 px nur noch ein Streifen von 200 px Höhe. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sz-radius);
}

/* Preise als Liste mit Führungslinie */

.sternzeit-preisliste {
	margin: 1.75rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background: var(--sz-nacht-hoch);
}

.sternzeit-preisliste__zeile {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.sternzeit-preisliste__zeile + .sternzeit-preisliste__zeile {
	border-top: 1px solid var(--sz-linie);
}

.sternzeit-preisliste dt {
	font-weight: 600;
}

.sternzeit-preisliste dd {
	margin: 0 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--sz-text-leise);
	white-space: nowrap;
}

/* Zwei große Preisschilder für die Shisha */

.sternzeit-preisschilder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
}

.sternzeit-preisschild {
	flex: 1 1 9rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background: var(--sz-nacht-hoch);
}

.sternzeit-preisschild__titel {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sz-text-leise);
}

.sternzeit-preisschild__preis {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sz-weiss);
}

/* Die Sortennamen als Marken */

.sternzeit-sorten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sternzeit-sorten li {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--sz-linie);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--sz-text-leise);
}

/* ---------------------------------------------------------------
   Cocktails

   Mobil eine Reihe zum Wischen, ab 900 px ein Raster mit ungleichen
   Feldern. Dieselbe Liste, zwei Anordnungen – die Bilder werden nur
   einmal geladen.
   --------------------------------------------------------------- */

.sternzeit-cocktails {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0 var(--sz-rand) 0.5rem;
	/* Aus der begrenzten Breite ausbrechen, damit die Reihe am Rand
	   angeschnitten wird – das ist der Hinweis, dass es weitergeht. */
	margin-inline: calc(-1 * var(--sz-rand));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sternzeit-cocktails::-webkit-scrollbar {
	display: none;
}

.sternzeit-cocktails__feld {
	flex: 0 0 78%;
	max-width: 20rem;
	scroll-snap-align: center;
}

.sternzeit-cocktails__bild,
.sternzeit-cocktails__bild img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sz-radius);
}

/* ---------------------------------------------------------------
   Atmosphäre
   --------------------------------------------------------------- */

.sternzeit-atmo {
	display: grid;
	gap: 0.75rem;
	margin-top: 2.5rem;
	grid-template-columns: 1fr 1fr;
}

/* Mobil eines über zwei Spalten, darunter zwei nebeneinander. Das gibt der
   Reihe einen Anfang, statt drei gleich große Kacheln aufzureihen. */
.sternzeit-atmo__bild--1 {
	grid-column: 1 / -1;
}

.sternzeit-atmo__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sz-radius);
}

.sternzeit-atmo__bild--1 img {
	aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------
   Bewertungen

   Karten statt einer Wischreihe: Rezensionen sind Text, und Text, den man
   seitwärts schieben muss, liest niemand zu Ende.
   --------------------------------------------------------------- */

.sternzeit-stimmen {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.sternzeit-stimme figure {
	height: 100%;
	margin: 0;
	padding: 1.35rem 1.5rem 1.25rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background: var(--sz-nacht-hoch);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.sternzeit-sterne {
	display: inline-flex;
	gap: 2px;
	color: var(--sz-magenta);
	line-height: 0;
}

.sternzeit-stimme__text {
	margin: 0;
	flex: 1 1 auto;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sz-text);
}

/* Anführungszeichen aus dem Stylesheet, nicht aus dem Zitat: so steht im
   Quelltext genau das, was die Person geschrieben hat. */
.sternzeit-stimme__text::before {
	content: '\201E';
}

.sternzeit-stimme__text::after {
	content: '\201C';
}

.sternzeit-stimme__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--sz-weiss);
}

.sternzeit-stimme__quelle {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--sz-text-leise);
}

/* ---------------------------------------------------------------
   Kontakt und Standortkarte
   --------------------------------------------------------------- */

.sternzeit-kontakt {
	display: grid;
	gap: 2rem;
	margin-top: 2.5rem;
}

.sternzeit-angaben {
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background: var(--sz-nacht-hoch);
}

.sternzeit-angaben__zeile + .sternzeit-angaben__zeile {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sz-linie);
}

.sternzeit-angaben dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sz-text-leise);
}

.sternzeit-angaben dd {
	margin: 0.5rem 0 0 1.75rem;
	font-size: 1.0625rem;
}

.sternzeit-angaben address {
	font-style: normal;
	line-height: 1.55;
}

.sternzeit-angaben strong {
	color: var(--sz-weiss);
}

.sternzeit-sozial {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.sternzeit-sozial a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--sz-linie);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--sz-text);
}

.sternzeit-sozial a:hover {
	border-color: var(--sz-magenta);
	color: var(--sz-magenta);
}

/* Die Google-Karte. Bis zum Klick steht hier nur der Hinweis – geladen
   wird erst danach, siehe assets/js/standortkarte.js. */
.sternzeit-karte {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 22rem;
	padding: 1.5rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(26, 95, 239, .12) 0%, transparent 60%),
		var(--sz-nacht-hoch);
	text-align: center;
	overflow: hidden;
}

.sternzeit-karte--geladen {
	display: block;
	padding: 0;
}

.sternzeit-karte__nadel {
	width: 28px;
	height: 28px;
	color: var(--sz-blau-hell);
}

.sternzeit-karte__adresse {
	margin: 0.75rem 0 0;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sz-weiss);
}

.sternzeit-karte__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--sz-text-leise);
}

.sternzeit-karte__laden {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------- */

.sternzeit-fuss {
	margin-top: 0;
	padding-top: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--sz-linie);
	background: var(--sz-nacht-tief);
}

.sternzeit-fuss__raster {
	display: grid;
	gap: 2rem;
}

.sternzeit-fuss__zusatz {
	margin: 0.85rem 0 1.25rem;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	color: var(--sz-text-leise);
}

.sternzeit-fuss__adresse {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--sz-text-leise);
}

.sternzeit-fuss__adresse a {
	color: var(--sz-text);
}

.sternzeit-fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sternzeit-fuss__liste a {
	display: inline-block;
	padding: 0.35rem 0;
	text-decoration: none;
	color: var(--sz-text-leise);
}

.sternzeit-fuss__liste a:hover {
	color: var(--sz-blau-hell);
	text-decoration: underline;
}

.sternzeit-fuss .sternzeit-kleinkopf {
	margin-top: 0;
}

.sternzeit-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: 2.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--sz-linie);
	font-size: 0.8125rem;
	color: var(--sz-text-leise);
}

.sternzeit-fuss__zeile p {
	margin: 0;
}

/* Die Leiste am unteren Bildschirmrand – nur auf schmalen Geräten. */
.sternzeit-schnell {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: rgba(6, 6, 10, .96);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--sz-linie);
}

.sternzeit-schnell a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: var(--sz-schnell);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--sz-text);
}

.sternzeit-schnell a + a {
	border-left: 1px solid var(--sz-linie);
}

.sternzeit-schnell .sternzeit-zeichen {
	width: 20px;
	height: 20px;
	color: var(--sz-blau-hell);
}

/* ---------------------------------------------------------------
   Getränkekarte
   --------------------------------------------------------------- */

.sternzeit-getraenke h1 {
	margin: 0 0 0.75rem;
}

.sternzeit-getraenke__inhalt {
	padding-bottom: clamp(3rem, 8vw, 5rem);
}

/* Die Sprungleiste klebt unter dem Kopfbereich. Waagerecht scrollbar:
   sechzehn Kategorien passen auf 360 px nicht nebeneinander. */
/*
 * Die Leiste klebt unmittelbar unter dem Kopfbereich, ohne Fuge dazwischen.
 * Beide zusammen sollen wie ein Stück Bedienleiste wirken, nicht wie zwei
 * Streifen, zwischen denen Inhalt hindurchläuft. Deshalb:
 *
 * - deckender Untergrund statt durchscheinend; sonst schiebt sich beim
 *   Scrollen Text hinter den Kategorien durch und man weiß nicht mehr, was
 *   Bedienung ist und was Inhalt,
 * - nur unten eine Kante. Eine Linie auch oben hat sie wie einen Trenner
 *   mitten im Text aussehen lassen,
 * - ein Schatten nach unten, der sagt: das hier liegt über der Seite.
 */
.sternzeit-sprungleiste {
	position: sticky;
	/* Genau auf Kopfhöhe: der Kopfbereich hat dort noch seine Randlinie, und
	   ein Pixel Überlappung ist besser als ein Haarspalt, durch den beim
	   Scrollen Inhalt blitzt. */
	top: var(--sz-kopf);
	z-index: 30;
	background: var(--sz-nacht);
	border-bottom: 1px solid var(--sz-linie);
	box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .95);
}

.sternzeit-sprungleiste__liste {
	display: flex;
	gap: 0.5rem;
	max-width: var(--sz-breite);
	/* margin: 0, nicht nur margin-inline. Der Standardabstand einer Liste
	   (1em oben und unten) kollabierte sonst nach oben aus der Leiste heraus
	   und schob sie vom Kopfbereich weg; unten blieb er als leerer Streifen
	   darin stehen. Beides zusammen ließ die Leiste zwischen dem Inhalt
	   schweben, statt am Kopfbereich zu kleben. */
	margin: 0 auto;
	padding: 0.6rem var(--sz-rand);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sternzeit-sprungleiste__liste::-webkit-scrollbar {
	display: none;
}

/* Sechzehn Kategorien passen auf keinen Bildschirm. Die weiche rechte Kante
   sagt, dass es seitwärts weitergeht – ein hart abgeschnittener Chip sieht
   nach kaputtem Layout aus. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
	.sternzeit-sprungleiste__liste {
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
	}
}

.sternzeit-sprungleiste a {
	display: block;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--sz-linie);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--sz-text-leise);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sternzeit-sprungleiste a:hover {
	color: var(--sz-text);
	border-color: var(--sz-text-leise);
}

.sternzeit-sprungleiste a[aria-current] {
	background: var(--sz-blau);
	border-color: var(--sz-blau);
	color: var(--sz-weiss);
}

.sternzeit-gruppe {
	padding-top: clamp(2rem, 5vw, 3rem);
	/*
	 * Nur die Höhe der Sprungleiste, nicht die des Kopfbereichs: den bringt
	 * schon scroll-padding-top am html-Element mit. Beides zusammen hat die
	 * Überschrift nach einem Sprung 92 px zu tief landen lassen – ein
	 * Bildschirmviertel Leere über der Kategorie, die man angeklickt hat.
	 *
	 * --sz-leiste setzt sprungleiste.js auf die gemessene Höhe.
	 */
	scroll-margin-top: var(--sz-leiste);
}

.sternzeit-gruppe__titel {
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sz-linie);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
}

.sternzeit-positionen {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sternzeit-position {
	padding: 0.9rem 0;
}

.sternzeit-position + .sternzeit-position {
	border-top: 1px solid rgba(42, 42, 56, .55);
}

/* Keine Tabelle: Name links, Preise rechts, beides umbruchfähig. Auf 360 px
   ist eine Tabelle mit vier Spalten unlesbar. */
.sternzeit-position__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0;
}

.sternzeit-position__name {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sz-text);
}

.sternzeit-position__nummer {
	display: inline-block;
	min-width: 1.9rem;
	margin-right: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sz-text-leise);
}

/* Zusatzstoff- und Allergencodes klein und hochgestellt – da, wo sie auf
   einer gedruckten Karte auch stehen.

   Getrennt durch Kommas statt durch Leerzeichen: hochgestellt und klein
   ließen sich "1 2 13" und "1213" sonst kaum auseinanderhalten. */
.sternzeit-position__codes {
	margin-left: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	vertical-align: super;
	white-space: nowrap;
	color: var(--sz-text-leise);
}

/* Die Allergene etwas kräftiger als die Zusatzstoffe: sie sind der Grund,
   aus dem jemand überhaupt hinsieht. */
.sternzeit-position__codes--allergen {
	color: var(--sz-text);
}

.sternzeit-position__preise {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	flex: 0 0 auto;
	text-align: right;
}

.sternzeit-position__preis {
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--sz-weiss);
}

.sternzeit-position__groesse {
	margin-right: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--sz-text-leise);
}

.sternzeit-position__groesse::after {
	content: ' ·';
}

.sternzeit-position__text {
	margin: 0.3rem 0 0;
	padding-right: 4.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sz-text-leise);
}

.sternzeit-position__text--hinweis {
	color: var(--sz-blau-hell);
}

.sternzeit-legende {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	/* Wie bei den Kategorien: der Sprung soll unter der Leiste ankommen. */
	scroll-margin-top: var(--sz-leiste);
	padding: 1.5rem;
	border: 1px solid var(--sz-linie);
	border-radius: var(--sz-radius);
	background: var(--sz-nacht-hoch);
}

.sternzeit-legende__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
}

.sternzeit-legende__spalten {
	display: grid;
	gap: 1.5rem;
	margin-top: 0.5rem;
}

.sternzeit-legende__spalten .sternzeit-kleinkopf {
	margin-top: 0;
}

.sternzeit-legende__liste {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--sz-text-leise);
}

.sternzeit-legende__liste li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.sternzeit-legende__code {
	flex: 0 0 1.5rem;
	font-weight: 700;
	color: var(--sz-text);
}

.sternzeit-legende__text {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sz-linie);
	font-size: 0.875rem;
	color: var(--sz-text-leise);
}

/* ---------------------------------------------------------------
   Inhaltsseiten (Impressum, Datenschutz, alles ohne eigene Vorlage)
   --------------------------------------------------------------- */

.sternzeit-inhaltsseite {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(2.5rem, 7vw, 4.5rem) var(--sz-rand) clamp(3rem, 8vw, 5rem);
}

.sternzeit-inhaltsseite h1 {
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	margin-bottom: 1.5rem;
}

.sternzeit-inhaltsseite h2 {
	margin-top: 2.5rem;
}

/* ---------------------------------------------------------------
   Ab 600 px
   --------------------------------------------------------------- */

@media (min-width: 600px) {
	.sternzeit-hero .sternzeit-knopf {
		flex: 0 0 auto;
	}

	.sternzeit-atmo {
		grid-template-columns: repeat(3, 1fr);
	}

	.sternzeit-atmo__bild--1 {
		grid-column: auto;
	}

	.sternzeit-atmo__bild--1 img {
		aspect-ratio: 4 / 5;
	}

	.sternzeit-fuss__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.sternzeit-stimmen {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------
   Ab 900 px – hier wird aus der gestapelten Seite eine zweispaltige
   --------------------------------------------------------------- */

@media (min-width: 900px) {
	:root {
		--sz-kopf: 76px;
	}

	body {
		padding-bottom: 0;
	}

	/* Die Leiste am unteren Rand ist eine Lösung für den Daumen. Mit Maus
	   und breitem Bildschirm steht alles im Kopfbereich. */
	.sternzeit-schnell {
		display: none;
	}

	.sternzeit-kopf__schalter {
		display: none;
	}

	.sternzeit-kopf__navigation {
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	.sternzeit-kopf[data-offen] .sternzeit-kopf__navigation {
		position: static;
		display: flex;
		padding: 0;
		background: none;
		backdrop-filter: none;
		border: 0;
	}

	.sternzeit-kopf__liste {
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}

	.sternzeit-kopf__liste a {
		padding: 0.25rem 0;
		border-bottom: 2px solid transparent;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.sternzeit-kopf__liste a:hover {
		border-bottom-color: var(--sz-blau-hell);
	}

	.sternzeit-kopf__route {
		width: auto;
		margin-top: 0;
		min-height: 42px;
		padding-block: 0.55rem;
	}

	/* Hero */

	.sternzeit-hero {
		padding: calc(var(--sz-kopf) + 6rem) 0 6rem;
		min-height: min(88vh, 780px);
		display: flex;
		align-items: center;
	}

	.sternzeit-hero__text {
		max-width: 44ch;
	}

	/* Drei Welten nebeneinander, jetzt hochkant. */

	.sternzeit-welten {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}

	.sternzeit-welt__bild,
	.sternzeit-welt__bild img {
		aspect-ratio: 4 / 5;
	}

	.sternzeit-welt__inhalt {
		padding: 1.75rem;
	}

	.sternzeit-welt__titel {
		font-size: 0.875rem;
	}

	/* Zwei Spalten: Text und Bild. Bei --gedreht steht das Bild links. */

	.sternzeit-zweispalt__raster {
		grid-template-columns: 1fr 1.15fr;
	}

	.sternzeit-zweispalt--gedreht .sternzeit-zweispalt__text {
		order: 2;
	}

	.sternzeit-zweispalt--gedreht .sternzeit-zweispalt__bild {
		order: 1;
	}

	/* Ab hier in voller Breite und im Originalverhältnis der Aufnahme. */
	.sternzeit-aussen img {
		aspect-ratio: 16 / 9;
	}

	/* Kopfzeile: Überschrift links, Vorspann rechts daneben. */

	.sternzeit-kopfzeile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: end;
	}

	.sternzeit-stimmen {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}

	/* Cocktails: aus der Wischreihe wird ein ungleiches Raster.

	   Ein großes Feld links, zwei hochkant rechts, darunter drei quer –
	   asymmetrisch, aber in drei gleich hohen Reihen, damit nichts
	   ausfranst. */

	/* Vier Spalten, zwei Reihen: links ein Feld über zwei mal zwei, rechts
	   vier einzelne. Die Reihenhöhe ist so gewählt, dass jedes Feld etwa im
	   Verhältnis 4:5 steht – dem Format der Aufnahmen. */
	.sternzeit-cocktails {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: calc((min(var(--sz-breite), 100vw) - 2 * var(--sz-rand) - 3rem) / 4 * 1.25);
		gap: 1rem;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.sternzeit-cocktails__feld {
		flex: none;
		max-width: none;
	}

	.sternzeit-cocktails__feld--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
	.sternzeit-cocktails__feld--2 { grid-column: 3 / 4; grid-row: 1 / 2; }
	.sternzeit-cocktails__feld--3 { grid-column: 4 / 5; grid-row: 1 / 2; }
	.sternzeit-cocktails__feld--4 { grid-column: 3 / 4; grid-row: 2 / 3; }
	.sternzeit-cocktails__feld--5 { grid-column: 4 / 5; grid-row: 2 / 3; }

	.sternzeit-cocktails__bild,
	.sternzeit-cocktails__bild img {
		height: 100%;
		aspect-ratio: auto;
	}

	/* Kontakt: Angaben links, Karte rechts. */

	.sternzeit-kontakt {
		grid-template-columns: 1fr 1.1fr;
		gap: 2.5rem;
		align-items: start;
	}

	.sternzeit-karte {
		min-height: 26rem;
		height: 100%;
	}

	/* Fußbereich */

	.sternzeit-fuss__raster {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 2.5rem;
	}

	/* Getränkekarte: zwei Spalten Positionen nebeneinander.

	   Die Spalten laufen je Kategorie, nicht über die ganze Seite – sonst
	   müsste man beim Lesen von unten links wieder nach oben rechts
	   springen. */

	.sternzeit-positionen {
		columns: 2;
		column-gap: 3rem;
	}

	.sternzeit-position {
		break-inside: avoid;
	}

	/* Zusatzstoffe links, Allergene rechts. Innerhalb der Spalte bleibt
	   jede Liste einspaltig – sonst springt das Auge zwischen zwei
	   Aufzählungen hin und her, die nichts miteinander zu tun haben. */
	.sternzeit-legende__spalten {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

/* ---------------------------------------------------------------
   Ab 1200 px
   --------------------------------------------------------------- */

@media (min-width: 1200px) {
	.sternzeit-hero__text {
		font-size: 1.25rem;
	}

	.sternzeit-positionen {
		column-gap: 4rem;
	}
}

/* ---------------------------------------------------------------
   Wer weniger Bewegung eingestellt hat, bekommt weniger Bewegung
   --------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.sternzeit-welt__link:hover .sternzeit-welt__bild img {
		transform: none;
	}
}