/* Schriften liegen im Repo statt bei Google Fonts: der Abruf dort überträgt die IP jedes Besuchers an Google und
   zwingt die Datenschutzerklärung zu einem Abschnitt, den niemand braucht. Nur die Subsets latin und latin-ext,
   nur die Schnitte, die das Stylesheet wirklich benutzt. GFS Didot und IBM Plex stehen beide unter der SIL Open
   Font License 1.1; Lizenztexte und Herkunft stehen in fonts/README.txt. font-display: swap hält den Text
   sichtbar, solange die Datei lädt. */
@font-face {
	font-family: 'GFS Didot';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/didot-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-mono-400-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-mono-400-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/plex-mono-500-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/plex-mono-500-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: 'IBM Plex Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-sans-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: 'IBM Plex Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-sans-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;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/plex-sans-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;
}

:root {
	--glass: #12140e;
	--sediment: #1b1e15;
	--sediment-2: #232719;
	--chalk: #ebe7da;
	--chalk-dim: #a5a191;
	--chalk-faint: rgba(235, 231, 218, 0.14);
	--oil: #c8a24b;
	--oil-bright: #dab55f;
	--leaf: #8a996b;
	--acheron: #7ba6a0;
	/* Öl-Akzent der gerade gezeigten Seite oder Kollektionszeile; die Produktseite setzt ihn am body, die Startseite je Zeile */
	--accent: #7ba6a0;
	--display: "GFS Didot", "Didot", serif;
	--body: "IBM Plex Sans", sans-serif;
	--mono: "IBM Plex Mono", monospace;
	--pad: clamp(1.5rem, 5vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Jede Klasse mit eigenem `display` schlägt sonst die eingebaute Regel für [hidden] — ausverkaufte Bestellknöpfe
   und Formular-Vorlagen blieben dadurch sichtbar */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	background: var(--glass);
	color: var(--chalk);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.65;
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--oil); color: var(--glass); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--oil); outline-offset: 3px; }

.kicker {
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oil);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 3.25rem;
	background: var(--oil);
	color: var(--glass);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.6rem 2rem;
	border: none;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--oil-bright); }
.btn.ghost { background: transparent; color: var(--chalk); border: 1px solid rgba(235, 231, 218, 0.28); }
.btn.ghost:hover { background: transparent; border-color: var(--oil); color: var(--oil); }

.textlink {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	border-bottom: 1px solid var(--chalk-faint);
	padding-bottom: 0.3rem;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.textlink:hover { color: var(--chalk); border-color: var(--oil); }

/* ---------- Nav ---------- */
nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.2rem var(--pad);
	background: rgba(18, 20, 14, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(235, 231, 218, 0.07);
}

.wordmark {
	font-family: var(--display);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--chalk);
}
.wordmark span { color: var(--oil); }

.nav-links {
	display: flex;
	align-items: center;
	gap: 2.4rem;
}
.nav-links a {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--oil); }
/* Der Korb ist kein Menüpunkt, sondern der Weg zur Kasse: Rahmen statt Textlink, damit er in der Leiste als Ziel liest */
.nav-links .cart {
	display: inline-flex;
	align-items: center;
	min-height: 2.4rem;
	padding: 0 1rem;
	color: var(--chalk);
	border: 1px solid rgba(235, 231, 218, 0.2);
	letter-spacing: 0.16em;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-links .cart:hover { color: var(--oil); border-color: var(--oil); }

/* Knopf und Korb-Link in der Leiste setzt shop.js ein und markiert die Navigation mit .has-toggle. Ohne JS
   bleiben die Links als umbrechende Reihe stehen — eine Seite ohne erreichbare Navigation wäre schlimmer als eine zweite Zeile */
.nav-toggle, .cart-bar { display: none; }
.nav-toggle {
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.35rem;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.75rem;
	background: none;
	border: 0;
	cursor: pointer;
}
/* Zwei ungleich lange Striche statt drei gleicher: die Leiste soll wie eine Signatur wirken, nicht wie ein App-Icon */
.nav-toggle span { display: block; width: 1.375rem; height: 1px; background: var(--chalk); transition: transform 0.25s ease, width 0.25s ease; }
.nav-toggle span:nth-child(2) { width: 0.875rem; }
.is-open .nav-toggle span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.is-open .nav-toggle span:nth-child(2) { width: 1.375rem; transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 760px) {
	nav, .nav-links { flex-wrap: wrap; }
	nav.has-toggle .nav-toggle { display: flex; }
	nav.has-toggle .cart-bar {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
		margin-right: 0.9rem;
		min-height: 2.75rem;
		padding: 0 0.9rem;
		border: 1px solid rgba(235, 231, 218, 0.2);
		font-family: var(--mono);
		font-size: 0.72rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--chalk);
	}
	nav.has-toggle .nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--sediment-2);
		border-bottom: 1px solid var(--chalk-faint);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
	}
	nav.has-toggle.is-open .nav-links { display: flex; }
	nav.has-toggle .nav-links a {
		display: flex;
		align-items: center;
		min-height: 3.4rem;
		padding: 0 var(--pad);
		font-size: 0.78rem;
		border-top: 1px solid var(--chalk-faint);
	}
	nav.has-toggle .nav-links .cart { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: calc(5rem + 4svh) var(--pad) 3rem;
	max-width: 1500px;
	margin: 0 auto;
}

.hero-copy { display: flex; flex-direction: column; gap: 1.8rem; }

h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.9rem, 5.3vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: 0.005em;
}
h1 em {
	font-style: italic;
	color: var(--oil);
}

.hero-sub {
	color: var(--chalk-dim);
	max-width: 30rem;
	font-size: 1.02rem;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 2.2rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-copy > * {
		opacity: 0;
		transform: translateY(14px);
		animation: rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
	}
	.hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
	.hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
	.hero-copy > *:nth-child(4) { animation-delay: 0.36s; }
	@keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- Karte ---------- */
.chart { width: min(100%, 35rem); justify-self: center; display: flex; flex-direction: column; }

/* Blatt: Rahmen mit Eckmarken, Kopfzeile, Inhalt. Trägt die Karte im Hero und die Analyse auf der Produktseite.
   Ohne den Rahmen hängen Küstenlinie und Laborwerte ohne Bezug im Dunkeln */
.sheet {
	position: relative;
	background: var(--sediment);
	border: 1px solid var(--chalk-faint);
	padding: 1.1rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	border: 0 solid rgba(200, 162, 75, 0.6);
}
.c1 { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.c2 { right: -1px; top: -1px; border-right-width: 1px; border-top-width: 1px; }
.c3 { left: -1px; bottom: -1px; border-left-width: 1px; border-bottom-width: 1px; }
.c4 { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }

.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.sheet-head .kicker { letter-spacing: 0.2em; }
.sheet-scale {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	white-space: nowrap;
}

/* Nur die Karte selbst ist der Bezug der Marker: Prozentwerte am .map-point sind damit exakt die Koordinaten der viewBox, Kopfzeile und Legende verschieben nichts */
.chart-map { position: relative; width: min(100%, 25rem); align-self: center; }

.chart svg { width: 100%; height: auto; display: block; }

.coast {
	fill: rgba(235, 231, 218, 0.03);
	stroke: rgba(235, 231, 218, 0.34);
	stroke-width: 0.8;
	stroke-linejoin: round;
}
.isles circle { fill: rgba(235, 231, 218, 0.3); }
.graticule {
	stroke: rgba(235, 231, 218, 0.09);
	stroke-width: 0.7;
	stroke-dasharray: 2 5;
}
.grat-label {
	font-family: var(--mono);
	font-size: 8px;
	fill: rgba(235, 231, 218, 0.32);
	letter-spacing: 0.1em;
}

/* transform erzeugt pro Punkt einen Stacking-Context, die Card kann nie über ein Geschwister hinaus; daher den aktiven Punkt selbst heben */
.map-point { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.map-point:hover,
.map-point:focus-within { z-index: 40; }

.harbor-light { display: block; position: relative; }
.harbor-dot {
	display: block;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--oil);
	box-shadow: 0 0 18px 2px rgba(200, 162, 75, 0.55);
}
.harbor-dot::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
	border-radius: 50%;
	border: 1px solid rgba(200, 162, 75, 0.5);
	animation: pulse 3s ease-out infinite;
}
@keyframes pulse {
	0% { transform: scale(0.5); opacity: 1; }
	75% { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.harbor-dot::after { animation: none; opacity: 0.4; }
}

/* Das Label steht rechts vom Punkt; am rechten Kartenrand links, sonst schiebt es sich über den Rahmen hinaus */
.harbor-label {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	text-align: left;
	line-height: 1.35;
	white-space: nowrap;
}
.is-flipped .harbor-label { left: auto; right: 0.85rem; text-align: right; }
.harbor-label .name {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--oil);
}
.harbor-label .place {
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}

.map-card {
	position: absolute;
	left: 1.6rem;
	top: 50%;
	transform: translate(-8px, -50%);
	width: 15.5rem;
	background: var(--sediment);
	border: 1px solid var(--chalk-faint);
	padding: 1rem;
	display: flex;
	gap: 0.9rem;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 30;
}
.map-point:hover .map-card,
.map-point:focus-within .map-card {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, -50%);
}
.card-left .map-card { left: auto; right: 1.6rem; transform: translate(8px, -50%); }
.card-left:hover .map-card,
.card-left:focus-within .map-card { transform: translate(0, -50%); }
.map-card img { width: 3.4rem; height: 5.1rem; object-fit: cover; object-position: 50% 30%; }
.map-card .t { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; }
.map-card .d { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-dim); margin-top: 0.35rem; }
.map-card .p { font-family: var(--mono); font-size: 0.72rem; color: var(--oil); margin-top: 0.4rem; }

.mute-light {
	display: block;
	position: relative;
	padding: 0.5rem;
	margin: -0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}
.mute-light:focus-visible { outline: 1px solid var(--oil); outline-offset: 2px; }
.mute-dot {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 1px solid rgba(235, 231, 218, 0.4);
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.mute-light:hover .mute-dot,
.mute-light:focus .mute-dot {
	border-color: var(--chalk);
	background: rgba(235, 231, 218, 0.25);
	box-shadow: 0 0 10px 1px rgba(235, 231, 218, 0.25);
}
.mute-card {
	position: absolute;
	left: 1.6rem;
	top: 50%;
	transform: translate(-8px, -50%);
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	white-space: nowrap;
	background: var(--sediment);
	border: 1px solid var(--chalk-faint);
	padding: 0.45rem 0.7rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.mute-light:hover .mute-card,
.mute-light:focus .mute-card {
	opacity: 1;
	transform: translate(0, -50%);
}

.chart-legend {
	display: flex;
	justify-content: space-between;
	gap: 0.4rem 1.6rem;
	flex-wrap: wrap;
	padding-top: 0.8rem;
	border-top: 1px solid rgba(235, 231, 218, 0.1);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}
.chart-legend span { display: flex; align-items: center; gap: 0.6rem; }
.chart-legend i {
	width: 0.5rem; height: 0.5rem; border-radius: 50%;
	display: inline-block;
}
.chart-legend .live i { background: var(--oil); }
.chart-legend .mute i { border: 1px solid rgba(235, 231, 218, 0.4); }

/* Register der Güter. Am Schirm hängt es als Leiste unter dem Kartenblatt, eine Spalte pro Öl; auf dem Telefon
   wird daraus eine Liste, weil die Punkte dort zu klein zum Zielen sind und ein Name allein noch keinen Preis nennt */
.harbor-list {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	/* Ohne das darf die Leiste als Flex-Element über das Kartenblatt hinauswachsen, sobald ein Name breiter ist als seine Spalte */
	min-width: 0;
	/* Die Trennlinien sind der durchscheinende Untergrund in den Lücken: so stimmen sie bei jeder Spaltenzahl und
	   in jeder weiteren Reihe, ohne Regeln für „letzte Spalte“ und „erste Reihe“ */
	gap: 1px;
	background: var(--chalk-faint);
	border: 1px solid var(--chalk-faint);
	border-top: 0;
}
.harbor-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1.1rem;
	background: var(--glass);
	transition: background 0.25s ease;
}
a.harbor-item:hover { background: var(--sediment); }
.harbor-item.is-empty { padding: 0; }
.harbor-item.is-pending { display: none; }
.harbor-item .no { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oil); }
.harbor-item .n { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.harbor-item .meta { display: flex; gap: 0.35rem; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk-dim); }
/* Eine Zeile pro Spalte: eine lange Region würde sonst umbrechen und den Preis von seinem Ort trennen */
.harbor-item .meta .o { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.harbor-item .meta .p { color: var(--oil); white-space: nowrap; }
.harbor-item .meta .p::before { content: "· "; color: var(--chalk-dim); }
.harbor-item .meta .p.is-out { color: var(--chalk-dim); }

@media (max-width: 1000px) {
	.hero { grid-template-columns: 1fr; padding-top: 7rem; gap: 3.5rem; }
	.chart { width: min(100%, 24rem); }
}

/* ---------- Sektionen ---------- */
section { padding: clamp(4rem, 9vh, 6.5rem) var(--pad); }
.shell { max-width: 1500px; margin: 0 auto; }

h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	line-height: 1.1;
}

/* ---------- Kollektion ---------- */
.oil-section { background: var(--sediment); border-top: 1px solid var(--chalk-faint); border-bottom: 1px solid var(--chalk-faint); }

.collection-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.8rem 3rem;
	flex-wrap: wrap;
	margin-bottom: 2.8rem;
}
.collection-head > div { display: flex; flex-direction: column; gap: 0.9rem; }
.collection-note {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	padding-bottom: 0.6rem;
}

/* Das Raster richtet sich nach der Anzahl der Öle aus der Datenbank: bei einem sähen drei Spalten leer aus,
   ab vier braucht es die zweite Reihe. Der letzte freie Platz bleibt dann als gestrichelte Kachel stehen */
.oil-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
.oil-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.oil-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.oil-label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"photo photo"
		"ident ident"
		"title title"
		"lede  lede"
		"tiles tiles"
		"rule  rule"
		"price actions";
	gap: 1.1rem 1.2rem;
	align-items: center;
}
/* Kopf des Etiketts: am Schirm hängen Nummer, Name und Preis als eigene Rasterzeilen, auf dem Telefon stehen sie
   als Spalte neben dem Foto. Deshalb löst sich der Kopf am Schirm auf */
.oil-head { display: contents; }

.oil-photo { grid-area: photo; display: block; border: 1px solid rgba(200, 162, 75, 0.35); padding: 0.6rem; }
/* height muss mit: die height-Attribute am Bild reservieren den Platz vor dem Laden und würden hier sonst als
   Präsentationshinweis das Seitenverhältnis des Ausschnitts überstimmen */
.oil-photo img, .oil-photo-empty { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.oil-photo-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sediment-2);
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}

.oil-ident { grid-area: ident; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.oil-ident .no { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oil); }
.oil-ident .coords { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk-dim); text-align: right; }

.oil-title { grid-area: title; display: flex; flex-direction: column; gap: 0.35rem; }
.oil-title .n { font-family: var(--display); font-size: 2.25rem; line-height: 1; transition: color 0.25s ease; }
.oil-title .n:hover { color: var(--oil); }
.oil-title .o { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }

.oil-lede { grid-area: lede; color: var(--chalk-dim); max-width: 32rem; }

.oil-tiles { grid-area: tiles; display: flex; gap: 0 1.2rem; }
.tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.8rem 0 0.6rem; border-top: 1px solid var(--chalk-faint); }
.tile .v { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
.tile .l { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim); }

/* Eine durchgehende Linie über Preis und Knopf; zwei eigene Oberkanten hätten in der Spaltenlücke ein Loch */
.oil-rule { grid-area: rule; height: 1px; background: var(--chalk-faint); }

.oil-label .price { grid-area: price; font-size: 1.45rem; }
.oil-grid[data-count="2"] .oil-label .price { font-size: 1.7rem; }
.oil-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; flex-wrap: wrap; }
.oil-actions .btn { min-height: 2.9rem; padding: 0.5rem 1.4rem; }
/* Der Bestandshinweis steht im Markup zwischen Knopf und Weiterführung; gelesen wirkt er dort wie ein zweiter
   Knopf. order schiebt ihn ans Ende, flex-basis auf eine eigene Zeile darunter */
.oil-actions .stock { order: 99; flex-basis: 100%; }
/* „Zum Öl“ ist der zweite Weg für den Daumen; am Schirm führt der Name selbst dorthin */
.oil-more { display: none; }

.oil-free {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.7rem;
	padding: 2rem;
	border: 1px dashed rgba(235, 231, 218, 0.2);
	align-self: stretch;
}
.oil-free .no { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chalk-dim); }
.oil-free .t { font-family: var(--display); font-style: italic; font-size: 1.6rem; line-height: 1.2; color: var(--chalk-dim); }
.oil-free .s { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }

/* Zwischen Handy und breitem Schirm steht das Foto links und alles andere rechts, Preis und Knopf aber
   untereinander: nebeneinander bliebe für den Preis keine Spalte übrig */
@media (min-width: 761px) and (max-width: 1359px) {
	.oil-grid[data-count="1"] .oil-label {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		grid-template-areas:
			"photo ident"
			"photo title"
			"photo lede"
			"photo tiles"
			"photo rule"
			"photo price"
			"photo actions";
		gap: 1.2rem 2.5rem;
		align-items: start;
	}
	.oil-grid[data-count="1"] .oil-actions { justify-content: flex-start; }
}

@media (min-width: 1360px) {
	/* Ein einzelnes Öl bekommt ein breites Etikett: drei leere Spalten wären ein Schaufenster ohne Ware.
	   Erst ab 1360 px: darunter passen Foto, Werte, Preis und Knopf nicht nebeneinander */
	.oil-grid[data-count="1"] .oil-label {
		/* Die mittlere Spalte trägt nur den Preis. Als auto-Spalte bekäme sie einen Teil der Breite ab, die
		   Fließtext und Kacheln über beide Spalten aufspannen, und der Knopf stünde weit rechts vom Betrag */
		grid-template-columns: 26rem 18rem minmax(0, 1fr);
		grid-template-areas:
			"photo ident   ident"
			"photo title   title"
			"photo lede    lede"
			"photo tiles   tiles"
			"photo rule    rule"
			"photo price   actions"
			"photo .       .";
		/* Das Foto spannt alle Zeilen und ist höher als der Text. Ohne diese leere Schlusszeile verteilt das Raster
		   den Überschuss gleichmäßig auf die Textzeilen, und zwischen Fließtext, Kacheln und Kaufzeile klaffen Löcher */
		grid-template-rows: repeat(6, auto) 1fr;
		gap: 1.3rem 3rem;
		align-items: start;
	}
	.oil-grid[data-count="1"] .oil-title .n { font-size: 3.4rem; }
	.oil-grid[data-count="1"] .oil-lede { margin-top: 0.2rem; }
	.oil-grid[data-count="1"] .oil-tiles { margin-top: 0.6rem; }
	.oil-grid[data-count="1"] .oil-label .price { font-size: 2rem; align-self: center; }
	.oil-grid[data-count="1"] .oil-actions { justify-content: flex-start; align-self: center; }
}

.analyse {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}
.analyse caption {
	text-align: left;
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--oil);
	padding-bottom: 0.7rem;
}
.analyse td {
	padding: 0.65rem 0;
	border-top: 1px solid var(--chalk-faint);
}
.analyse tr:last-child td { border-bottom: 1px solid var(--chalk-faint); }
.analyse td:first-child { color: var(--chalk-dim); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.2em; }
.analyse td:last-child { text-align: right; color: var(--chalk); }

.price { font-family: var(--display); font-size: 2rem; color: var(--oil); }
.price small { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--chalk-dim); margin-left: 0.5rem; }

.storylink { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.storylink:hover { color: var(--accent); border-color: var(--accent); }

.specimen { justify-self: center; max-width: 26rem; width: 100%; }
.specimen figure {
	border: 1px solid rgba(200, 162, 75, 0.35);
	padding: 0.8rem;
}
.specimen img { width: 100%; height: auto; display: block; }
.specimen figcaption {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	text-align: center;
	padding-top: 1rem;
}
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

@media (max-width: 1000px) {
	.specimen { order: -1; max-width: 20rem; }
}

/* ---------- Lightbox ---------- */
.lightbox {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--chalk);
}
.lightbox[open] { display: grid; place-items: center; }
/* ::backdrop erbt die Tokens nicht in jedem Browser, deshalb --glass als Wert */
.lightbox::backdrop { background: rgba(18, 20, 14, 0.94); }
.lightbox img {
	display: block;
	max-width: calc(100vw - 2 * var(--pad));
	max-height: calc(100dvh - 8rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid rgba(200, 162, 75, 0.35);
	cursor: default;
}
.lightbox-close {
	position: fixed;
	top: 1.2rem;
	right: var(--pad);
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--chalk-faint);
	background: none;
	color: var(--chalk-dim);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}
.lightbox-close:hover { color: var(--chalk); border-color: var(--oil); }
html:has(.lightbox[open]) { overflow: hidden; }

/* ---------- Prinzip ---------- */
.principles-head { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }
.principles-head p { color: var(--chalk-dim); }

.ledger { border-top: 1px solid var(--chalk-faint); }
/* Marginale links, Titel und Text daneben — auch auf dem Telefon. Gestapelt verliert das Hauptbuch die Anmutung
   einer Buchseite und wird zur Liste. Die Spalte ist 56 px breit und wächst nur, wenn eine Marginale ein Wort ist */
.ledger-row {
	display: grid;
	grid-template-columns: minmax(3.5rem, max-content) minmax(0, 1fr);
	gap: 0.5rem clamp(1rem, 2vw, 1.6rem);
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--chalk-faint);
	align-items: baseline;
}
.ledger-row .no {
	grid-column: 1;
	grid-row: 1 / 3;
	font-family: var(--display);
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--oil);
}
.ledger-row h3 {
	grid-column: 2;
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.25;
}
.ledger-row p { grid-column: 2; color: var(--chalk-dim); font-size: 0.95rem; max-width: 44rem; }

/* ---------- Wissen ---------- */
.wissen { background: var(--sediment); border-top: 1px solid var(--chalk-faint); }
.wissen-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }

.index-list { border-top: 1px solid var(--chalk-faint); }
/* Tag, Titel und Text untereinander, der Pfeil daneben: „Lesen →“ als Text stand am Handy in einer eigenen Zeile
   und wiederholte nur, was der Titel als Link schon sagt */
.index-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.25rem;
	gap: 0.4rem clamp(1rem, 2vw, 1.6rem);
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--chalk-faint);
	align-items: start;
	transition: background 0.25s ease;
}
.index-row:hover { background: rgba(235, 231, 218, 0.03); }
.index-row > * { grid-column: 1; }
.index-row .tag {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--leaf);
}
.index-row h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.25;
}
.index-row p { color: var(--chalk-dim); font-size: 0.92rem; max-width: 44rem; }
.index-row .go {
	grid-column: 2;
	grid-row: 1 / 4;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 1.3rem;
	fill: none;
	stroke: var(--oil);
	stroke-width: 1.2;
	transition: transform 0.25s ease;
}
.index-row:hover .go { transform: translateX(3px); }

/* ---------- Footer ---------- */
footer {
	padding: 2.6rem var(--pad) 2.4rem;
	border-top: 1px solid var(--chalk-faint);
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}
.footer-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem 2rem;
	flex-wrap: wrap;
}
.footer-motto { font-family: var(--display); font-style: italic; font-size: 0.95rem; color: var(--chalk-dim); }
footer .fine {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}
/* Eine Reihe, solange sie passt; darunter zwei Spalten statt einer umbrechenden Wortwolke */
.footer-links { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 0 2rem; border-top: 1px solid rgba(235, 231, 218, 0.1); }
.footer-links a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	transition: color 0.25s ease;
}
.footer-links a:hover { color: var(--oil); }
@media (max-width: 760px) {
	.footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 0 2rem; }
}

/* ---------- Mobile ---------- */
body { overflow-x: clip; }

/* Das Register wechselt auf die Liste, sobald die Karte schmal wird: eine Spalte pro Öl lässt bei fünf Ölen
   rund 40 px je Name übrig, und die Namen laufen dann über ihre Nachbarspalten */
@media (max-width: 999px) {
	.map-card { display: none; }
	.harbor-list {
		display: block;
		margin-top: 1.6rem;
		gap: 0;
		background: none;
		border: 0;
		border-top: 1px solid var(--chalk-faint);
	}
	.harbor-item {
		display: grid;
		grid-template-columns: 3.4rem minmax(0, 1fr) auto;
		gap: 0.1rem 0.9rem;
		align-items: center;
		padding: 0.9rem 0;
		background: none;
		border-bottom: 1px solid var(--chalk-faint);
	}
	.harbor-item.is-pending { display: grid; opacity: 0.55; }
	.harbor-item.is-empty { display: none; }
	.harbor-item .no { grid-column: 1; grid-row: 1 / 3; font-size: 10px; white-space: nowrap; }
	.harbor-item .n { grid-column: 2; grid-row: 1; font-size: 1.3rem; line-height: 1.15; overflow: visible; white-space: normal; }
	.harbor-item.is-pending .n { font-style: italic; font-size: 1.1rem; color: var(--chalk-dim); }
	/* Ort und Preis stehen im Markup zusammen, damit die Leiste am Schirm eine Zeile daraus macht; hier lösen sie sich in eigene Zellen auf */
	.harbor-item .meta { display: contents; }
	.harbor-item .o { grid-column: 2; grid-row: 2; font-size: 10px; white-space: normal; overflow: visible; }
	.harbor-item .p { grid-column: 3; grid-row: 1 / 3; font-size: 0.75rem; }
	.harbor-item .meta .p::before { content: none; }
}

@media (max-width: 700px) {
	/* Mobil unter den Punkt, zentriert; am linken Kartenrand linksbündig, sonst läuft die Card aus dem Viewport */
	.mute-card { left: 50%; top: 1.1rem; transform: translate(-50%, 8px); }
	.mute-light:hover .mute-card,
	.mute-light:focus .mute-card { transform: translate(-50%, 0); }
	.edge-left .mute-card { left: -0.5rem; transform: translate(0, 8px); }
	.edge-left:hover .mute-card,
	.edge-left:focus .mute-card { transform: translate(0, 0); }
}

/* ---------- Acheron Landingpage ---------- */
.kicker.petrol { color: var(--accent); }

.coords-strip {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}

.river-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.river-head { display: flex; flex-direction: column; gap: 1.2rem; }

.pull {
	font-family: var(--display);
	font-style: italic;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1.45;
	color: var(--chalk);
	margin-top: 1.4rem;
}

.prose { display: flex; flex-direction: column; gap: 1.2rem; color: var(--chalk-dim); }
.prose strong { color: var(--chalk); font-weight: 500; }

.analyse-wrap { max-width: 40rem; }

.analyse-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.analyse-grid .prose { max-width: 30rem; padding-top: 1.9rem; }
@media (max-width: 860px) {
	.analyse-grid { grid-template-columns: 1fr; }
	.analyse-grid .prose { padding-top: 0; }
}

.footnote {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	margin-top: 1.4rem;
}

.buy-band .shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.6rem;
}
/* Der Grundpreis darunter ist die breitere Zeile und bestimmt damit die Kastenbreite; ohne das steht der Betrag
   linksbündig in einem mittigen Kasten und wirkt gegenüber der Überschrift verrutscht */
.buy-band .price { justify-content: center; }
.buy-band .price .unit { text-align: center; }

/* ---------- Produktseite: Kopf, Analyse-Blatt, weitere Güter, Kaufleiste ---------- */
.hero-ident { display: flex; flex-direction: column; gap: 1.2rem; }
/* Ohne Bild gäbe es sonst eine leere zweite Spalte über die halbe Breite des Kopfs */
.hero.is-product:not(:has(.specimen)) { grid-template-columns: minmax(0, 1fr); }
.hero-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.hero-price .stock { white-space: nowrap; }

.sheet-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.sheet-rows { display: flex; flex-direction: column; border-top: 1px solid var(--chalk-faint); }
.sheet-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(235, 231, 218, 0.1); }
.sheet-row:last-child { border-bottom: 0; }
.sheet-row .l { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }
.sheet-row .v { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-align: right; }

/* Der Bestellabschnitt darüber hat schon vollen Sektionsabstand; zweimal davon reißt hier ein Loch */
.more-goods { padding-top: clamp(2.5rem, 5vh, 3.5rem); }

/* Register der übrigen Güter: Nummernkachel statt Foto, damit die Zeile nicht mit dem Hero des gezeigten Öls konkurriert */
.goods-list { display: flex; flex-direction: column; border-top: 1px solid var(--chalk-faint); margin-top: 1.2rem; }
.goods-row {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) auto;
	gap: 0.1rem 0.9rem;
	align-items: center;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--chalk-faint);
	transition: background 0.25s ease;
}
.goods-row:hover { background: rgba(235, 231, 218, 0.03); }
.goods-row .no {
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 3.6rem;
	border: 1px solid rgba(200, 162, 75, 0.35);
	font-family: var(--mono);
	font-size: 0.56rem;
	letter-spacing: 0.14em;
	color: var(--oil);
}
.goods-row .t { grid-column: 2; font-family: var(--display); font-size: 1.2rem; line-height: 1.15; }
.goods-row .o { grid-column: 2; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }
.goods-row .p { grid-column: 3; grid-row: 1 / 3; font-family: var(--mono); font-size: 0.75rem; color: var(--oil); white-space: nowrap; }
.goods-row .p.is-out { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }

/* Die Kaufleiste ist eine Antwort auf den langen Daumenweg am Telefon; am Schirm steht der Bestellabschnitt ohnehin im Blick.
   Als Medienabfrage und nicht als schlichtes display:none, weil die Leiste weiter oben in der Datei sichtbar geschaltet wird */
@media (min-width: 761px) {
	.buy-bar { display: none; }
}

@media (max-width: 860px) {
	.river-grid { grid-template-columns: 1fr; }
}

/* ---------- Korb, Bestellung, Rechtsseiten ---------- */
.btn.is-added { background: var(--sediment-2); color: var(--oil); }
.buy-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--chalk-faint); }
.qty span {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	padding: 0 0.9rem;
}
.qty input {
	width: 3.4rem;
	background: transparent;
	border: none;
	border-left: 1px solid var(--chalk-faint);
	color: var(--chalk);
	font-family: var(--mono);
	font-size: 0.9rem;
	text-align: center;
	padding: 0.8rem 0.4rem;
	-moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty button {
	background: transparent;
	border: none;
	color: var(--chalk-dim);
	font-family: var(--mono);
	font-size: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	transition: color 0.25s ease;
}
.qty button:hover { color: var(--oil); }
.qty input:focus-visible { outline: none; background: var(--sediment-2); }

.page { padding: 9rem var(--pad) 5rem; }
.page-head { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; margin-bottom: 3rem; }
.page-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; }
.page-head p { color: var(--chalk-dim); }

.cart-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; align-items: start; }
.cart-lines { border-top: 1px solid var(--chalk-faint); }
.cart-line, .cart-total {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 2rem;
	align-items: center;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--chalk-faint);
}
.cart-name { font-family: var(--display); font-size: 1.5rem; display: block; }
.cart-name:hover { color: var(--oil); }
/* Detailzeile und Bestandshinweis stehen als zwei Spans nebeneinander im Markup; inline gelesen ergeben sie
   auf schmalen Schirmen einen Fließtext aus Preis und Warnung */
.cart-detail { display: block; }
.cart-detail, .cart-total span:first-child {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}
.cart-sum { font-family: var(--display); font-size: 1.4rem; color: var(--oil); min-width: 6rem; text-align: right; }
.cart-total { grid-template-columns: 1fr auto; }
.cart-empty { color: var(--chalk-dim); padding: 2rem 0; display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; }

.order-form { display: flex; flex-direction: column; gap: 1.2rem; padding: 2rem; background: var(--sediment); border: 1px solid var(--chalk-faint); }
.order-form label {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk-dim);
}
.order-form input, .order-form textarea, .order-copy {
	background: var(--glass);
	border: 1px solid var(--chalk-faint);
	color: var(--chalk);
	font-family: var(--body);
	font-size: 1rem;
	padding: 0.8rem 1rem;
	letter-spacing: 0;
	text-transform: none;
	width: 100%;
	resize: vertical;
}
.order-form input:focus-visible, .order-form textarea:focus-visible { outline: none; border-color: var(--oil); }
.order-form .fine { text-transform: none; letter-spacing: 0.02em; font-family: var(--body); font-size: 0.85rem; margin: 0; }
.order-form .fine a { border-bottom: 1px solid var(--chalk-faint); }
.order-form .btn { align-self: flex-start; }
.order-error { color: var(--oil); font-size: 0.9rem; }
.order-copy { margin-top: 1rem; font-family: var(--mono); font-size: 0.85rem; }
#order-fallback { margin-top: 3rem; max-width: 44rem; }

.legal { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; }
.legal h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin-top: 1.6rem; }
.legal p { color: var(--chalk-dim); }
.legal a { color: var(--chalk); border-bottom: 1px solid var(--chalk-faint); }

@media (max-width: 860px) {
	.cart-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	/* Position über die volle Breite, darunter Menge links und Summe rechts auf einer Höhe */
	.cart-line { grid-template-columns: 1fr auto; gap: 1rem 1.5rem; }
	.cart-line:not(.is-compact) > div:first-child { grid-column: 1 / -1; }
	.cart-line .cart-sum { text-align: right; }
	/* Die feste Mindestbreite der Summe plus Spaltenabstand passt neben einer Position nicht mehr auf 320 px */
	.cart-line.is-compact { gap: 1rem; }
	.cart-sum { min-width: 0; }
}
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.price em { font-family: var(--mono); font-style: normal; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim); margin-right: 0.5rem; }
.price .unit { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-dim); margin-top: 0.3rem; flex-basis: 100%; }

/* ---------- Kasse, Bestellung, Bestand ---------- */
.stock { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leaf); margin: 0; }
.stock.is-out, .is-out { color: var(--oil); }
.cart-next { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.cart-line.is-compact { grid-template-columns: 1fr auto; }
.cart-total.is-grand .cart-sum { font-size: 1.8rem; }
.cart-total.is-grand span:first-child { color: var(--chalk); }
.form-row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.pay-options { display: flex; flex-direction: column; gap: 0.6rem; }
.order-form .pay-option { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--chalk-faint); cursor: pointer; font-family: var(--body); font-size: 0.9rem; color: var(--chalk-dim); letter-spacing: 0; text-transform: none; }
.pay-option:has(input:checked) { border-color: var(--oil); }
.order-form .pay-option input { width: auto; accent-color: var(--oil); margin-top: 0.3rem; }
.order-form .pay-option strong { display: block; color: var(--chalk); font-weight: 500; margin-bottom: 0.2rem; }
.order-wrap { max-width: 44rem; }
#order-view { display: flex; flex-direction: column; gap: 2.5rem; }
.order-head { display: flex; flex-direction: column; gap: 1rem; }
.order-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; }
.order-head p { color: var(--chalk-dim); }
.order-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; counter-reset: step; }
.order-steps li { counter-increment: step; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-dim); border-top: 2px solid var(--chalk-faint); padding-top: 0.7rem; }
.order-steps li::before { content: counter(step, upper-roman) " · "; }
.order-steps li.is-done { color: var(--oil); border-top-color: var(--oil); }
.order-status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.pay-box { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem; background: var(--sediment); border: 1px solid var(--chalk-faint); }
.pay-box p { color: var(--chalk-dim); }
.pay-box strong { color: var(--chalk); font-weight: 500; }
.pay-box .btn { align-self: flex-start; }
.pay-box .analyse { width: 100%; }
@media (max-width: 600px) {
	.form-row { grid-template-columns: 1fr; }
	.order-steps { grid-template-columns: 1fr; }
}

/* ---------- Varianten ---------- */
.variants { border: 0; display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.variants legend {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--chalk-dim);
	text-align: center;
	width: 100%;
	padding-bottom: 0.9rem;
}
.variant {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border: 1px solid var(--chalk-faint);
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	transition: border-color 0.25s, color 0.25s;
}
.variant input { position: absolute; opacity: 0; pointer-events: none; }
.variant-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk); }
.variant-price { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--chalk-dim); }
.variant:hover { border-color: var(--chalk-dim); }
.variant:has(input:checked) { border-color: var(--oil); }
.variant:has(input:checked) .variant-price { color: var(--oil); }
.variant:has(input:focus-visible) { outline: 1px solid var(--oil); outline-offset: 3px; }
.variant.is-out { cursor: not-allowed; opacity: 0.45; }
.variant.is-out .variant-price { color: var(--oil); }

.specimen.is-wide { max-width: 44rem; }

.quote-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }

/* Der Mobilblock steht am Dateiende, weil viele seiner Basisfassungen weiter unten im Stylesheet stehen: bei
   gleicher Spezifität gewinnt sonst die spätere Regel, und die Mobilfassung greift nie */
@media (max-width: 760px) {
	/* Ohne diese Deckelung ist der Hero 1176 px hoch und die Karte beginnt erst unterhalb des ersten Bildschirms */
	.hero { min-height: 0; padding: 6.5rem var(--pad) 2.5rem; gap: 2.5rem; }
	.hero-actions { gap: 1.2rem; }
	/* Etikett auf dem Telefon: Foto links, Kopf daneben, darunter Kacheln und die beiden Wege zum Öl */
	.oil-grid, .oil-grid[data-count] { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.oil-label {
		grid-template-columns: 6.75rem minmax(0, 1fr);
		grid-template-areas:
			"photo head"
			"lede lede"
			"tiles tiles"
			"actions actions";
		gap: 1.1rem;
		align-items: end;
		padding: 1.4rem 0 1.6rem;
		border-top: 1px solid var(--chalk-faint);
	}
	.oil-head { display: flex; flex-direction: column; gap: 0.4rem; grid-area: head; }
	.oil-ident .coords { display: none; }
	.oil-title .n { font-size: 1.85rem; }
	.oil-label .price { font-size: 1.5rem; }
	.oil-label .price .unit { font-size: 0.6rem; letter-spacing: 0.1em; }
	.oil-rule { display: none; }
	.tile { padding: 0.7rem 0 0.5rem; }
	.tile .v { font-size: 1.05rem; }
	.tile .l { font-size: 0.56rem; letter-spacing: 0.14em; }
	.oil-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; }
	.oil-actions .btn { min-height: 3.25rem; padding: 0.5rem 1.2rem; }
	.oil-actions .stock { grid-column: 1 / -1; }
	.oil-more { display: inline-flex; }
	.oil-free { padding: 1.6rem 0; border: 0; border-top: 1px dashed rgba(235, 231, 218, 0.2); }
	.collection-head { margin-bottom: 1.4rem; }

	/* Produktseite: das Foto ist die Bühne, Kicker, Name und Koordinaten liegen im unteren Drittel darauf.
	   Der Kopf löst sich dafür auf, sonst könnte die Beschriftung nicht über dem Bild liegen */
	.hero.is-product {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "lede" "price" "actions";
		gap: 1.4rem;
		padding: 0 0 2.5rem;
	}
	.hero.is-product .hero-copy { display: contents; }
	.hero.is-product .specimen {
		grid-area: stage;
		position: relative;
		max-width: none;
		width: 100%;
		height: 60svh;
		min-height: 22rem;
	}
	.hero.is-product .specimen figure, .hero.is-product .specimen .zoom { border: 0; padding: 0; height: 100%; }
	.hero.is-product .specimen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
	.hero.is-product .specimen figcaption { display: none; }
	.hero.is-product .specimen::after {
		content: "";
		position: absolute;
		inset: 0;
		/* Der Verlauf liegt über dem Bild und würde sonst den Tap zum Vergrößern abfangen */
		pointer-events: none;
		background: linear-gradient(180deg, rgba(18, 20, 14, 0.5) 0%, rgba(18, 20, 14, 0) 35%, rgba(18, 20, 14, 0.2) 60%, var(--glass) 96%);
	}
	/* Die Beschriftung liegt über dem unteren Bildteil; ohne pointer-events: none fängt sie dort den Tap zum Vergrößern
	   ab. Sie enthält nur Text, keine Links */
	.hero.is-product .hero-ident { grid-area: stage; align-self: end; z-index: 1; gap: 0.7rem; padding: 0 var(--pad) 0.5rem; pointer-events: none; }
	/* Ohne Bild gibt es keine Bühne; dann braucht der Kopf den Abstand zur Leiste selbst */
	.hero.is-product:not(:has(.specimen)) .hero-ident { align-self: start; padding-top: 7rem; }
	.hero.is-product h1 { font-size: clamp(2.6rem, 14vw, 3.75rem); }
	.hero.is-product .hero-sub { grid-area: lede; padding: 0 var(--pad); }
	.hero.is-product .hero-price {
		grid-area: price;
		margin: 0 var(--pad);
		padding: 1rem 0;
		border-top: 1px solid var(--chalk-faint);
		border-bottom: 1px solid var(--chalk-faint);
		align-items: flex-end;
		flex-wrap: nowrap;
	}
	/* Der Grundpreis muss auf eine Zeile, sonst schiebt er den Bestandshinweis aus der Preiszeile */
	.hero.is-product .price .unit { font-size: 0.68rem; letter-spacing: 0.08em; }
	.hero.is-product .hero-actions { grid-area: actions; flex-direction: column; align-items: stretch; gap: 1rem; margin: 0; padding: 0 var(--pad); }
	.hero.is-product .hero-actions .textlink { align-self: center; }

	.buy-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.15rem 1rem;
		padding: 0.6rem 1rem 0.6rem var(--pad);
		background: rgba(27, 30, 21, 0.92);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--chalk-faint);
	}
	.bar-name { grid-column: 1; font-family: var(--display); font-size: 1.05rem; line-height: 1.15; }
	.bar-meta { grid-column: 1; display: flex; gap: 0.4rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk-dim); }
	.bar-meta .p { color: var(--oil); }
	.bar-meta .p small, .bar-meta .p .unit { display: none; }
	.bar-meta .stock::before { content: "· "; color: var(--chalk-dim); }
	.buy-bar .btn { grid-column: 2; grid-row: 1 / 3; min-height: 2.9rem; padding: 0.4rem 1.2rem; }
	/* Sonst deckt die Leiste die letzte Fußzeile ab */
	body:has(.buy-bar) { padding-bottom: 4.6rem; }
	/* Beide Legenden müssen nebeneinander ins Blatt passen; ab 12 px bricht „In Auswahl · Ernte 2026“ um */
	.chart-legend { gap: 0.4rem 1.2rem; font-size: 10px; letter-spacing: 0.12em; }
	/* „Griechenlands“, „Geschäftsbedingungen“: einzelne lange Wörter sind auf 320 px breiter als die Spalte und
	   schieben die Seite über den Rand. Kleinere Grade, Trennung, und als letzte Reißleine ein Umbruch im Wort */
	h1 { font-size: clamp(2.2rem, 10.6vw, 2.75rem); }
	/* Kopfzeile des Kartenblatts: der Zusatz passt nur am Schirm neben den Maßstab */
	.sheet-wide { display: none; }
	.page-head h1, .order-head h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
	h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
	.page { padding-top: 6.5rem; }
	/* Der Punkt bleibt 10 px groß, die Trefferfläche wird 44 px */
	.harbor-light::before, .mute-light::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 2.75rem;
		height: 2.75rem;
		transform: translate(-50%, -50%);
	}
	/* Klickziele auf 44 px bringen, ohne die Zeilen auseinanderzuziehen: die Marge holt der negative Rand zurück */
	.textlink { display: inline-block; padding: 1.25rem 0 0.4rem; }
	.wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; }
	.oil-title .n { padding: 0.55rem 0; margin: -0.55rem 0; }
	/* Der Bestellknopf trägt den Gesamtbetrag im Text und war damit breiter als der Bildschirm auf 320 px */
	.order-form { padding: 1.5rem; }
	.order-form .btn { align-self: stretch; padding: 1.05rem 1.4rem; text-align: center; }
	/* Versalien-Mono unter 12 px bricht auf dem Telefon dauernd um und liest sich schlecht */
	.kicker, .price em, .price .unit, .stock, .cart-detail, .analyse, .coords-strip, .footnote,
	.footer-links a, footer .fine, .order-form label, .cart-total span:first-child { font-size: 0.75rem; letter-spacing: 0.12em; }
	.analyse td:first-child { font-size: 0.75rem; letter-spacing: 0.12em; }
	.kicker { letter-spacing: 0.2em; }
	.buy-band .shell { align-items: stretch; }
	.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; justify-content: stretch; }
	.variants legend { grid-column: 1 / -1; padding-bottom: 0.5rem; }
	.variant { padding: 0.8rem 0.9rem; text-align: left; }
	.buy-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.7rem; }
	.buy-row .qty { justify-content: space-between; }
	.buy-row .textlink { grid-column: 1 / -1; justify-self: center; }
}