/* =========================================================================
   Pottschön — Stylesheet
   Handgeschrieben, kein Build-Step. Reihenfolge: Tokens, Basis, Bausteine,
   Sektionen der Startseite, Beitrag/Seite, Responsive.
   ====================================================================== */

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

:root {
	--bg:        #15120E;  /* Grundton der Seite */
	--bg-band:   #1E1A15;  /* abgesetzte Bänder: Galerie, Kundenstimmen */
	--bg-deep:   #0E0B08;  /* Laufband und Footer */
	--card:      #221D17;
	--card-warm: #211A13;
	--cream:     #EDE3D0;  /* helle Karte im Auftrag-Block */

	--ink:     #F1E9DA;
	--ink-2:   #B3A899;
	--ink-3:   #8A8075;
	--ink-nav: #C9BEAE;
	--ink-dark: #221D18;   /* Text auf hellen Flächen */

	--accent:    #E4590F;
	--accent-2:  #EF8A4F;
	--on-accent: #FBF7EF;

	--line:   rgba(241, 233, 218, 0.10);
	--line-2: rgba(241, 233, 218, 0.22);

	--maxw: 1240px;
	--pad:  28px;

	--radius:    16px;
	--radius-lg: 20px;
	--pill:      999px;

	/* Capsuula ist die Hausschrift — eine Schrift für alles, Überschrift wie Fließtext.
	   Sie hat nur einen Schnitt (400). Betonung deshalb nie über font-weight, sondern über
	   Größe, Farbe und Laufweite; siehe Abschnitt Typografie weiter unten. */
	--font-head: 'Capsuula', system-ui, sans-serif;
	--font-body: 'Capsuula', system-ui, sans-serif;

	--shadow-card: 0 16px 34px -24px rgba(0, 0, 0, 0.8);
	--shadow-hero: 0 24px 54px -20px rgba(0, 0, 0, 0.7);

	--ease: cubic-bezier(0.3, 0.7, 0.4, 1);
}

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

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

/* clip statt hidden — der Unterschied ist auf dem Telefon der zwischen "geht nicht" und
   "geht doch": overflow-x:hidden macht das Element zum Scroll-Container. Es versteckt nur
   die Scrollleiste, seitwärts ziehen lässt sich die Seite trotzdem (iOS Safari tut das
   zuverlässig). clip erzeugt keinen Scroll-Container — da ist nichts zu ziehen.
   Zweiter Grund: Am Scroll-Container body würde die sticky-Nav kleben statt am Fenster.
   Das hier ist ein Sicherheitsnetz, kein Ersatz für sauberes Layout — die Ursachen sind
   behoben (siehe .auftrag). */
html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
}

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

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #F5A877; }

::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Typografie -------------------------------------------------------- */

/* Überschriften: leicht und in Versalien — so wie die alte Seite es hielt.

   Zwei Dinge hängen zusammen und dürfen nicht auseinandergerissen werden:

   1. font-weight bleibt 400. Capsuula hat keinen fetten Schnitt. Stünde hier 700, malte
      der Browser ein synthetisches Fett dazu (er verzerrt die Konturen), und genau das
      wirkte auf der alten Seite matschig. Die gewünschte Leichtigkeit kommt daher, dass
      hier NICHT gefettet wird.

   2. letter-spacing wird positiv. Versalien brauchen Luft — das vorherige -0.02em stammt
      aus der Gemischtschreibung mit Saira Condensed und ließe die Großbuchstaben
      aneinanderkleben. */
h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-wrap: balance;
	margin: 0;
}

/* Der Fließtext war zu dünn zum Lesen — und zwar aus zwei Gründen gleichzeitig.

   Capsuula ist eine schmale, leichte Schrift mit nur einem Schnitt. Was den großen
   Überschriften ihre Eleganz gibt, wird bei 15–17 px zum Problem: Auf dem dunklen Grund
   franst der Text aus, statt zu stehen.

   Der naheliegende Griff — font-weight: 600 — ist genau der falsche. Ohne fetten Schnitt
   rechnet der Browser ein synthetisches Fett dazu und verzerrt dabei die Konturen. Das ist
   das „matschig", vor dem fonts.css warnt. Stattdessen zwei Stellschrauben, die die
   Buchstabenform respektieren:

   1. `-webkit-font-smoothing: antialiased` ist raus (stand vorher am body). Der Name klingt
      nach Qualität, aber bei heller Schrift auf dunklem Grund bewirkt es das Gegenteil: Es
      rendert die Konturen dünner. Es war ein Teil des Problems, nicht der Lösung.

   2. Ein hauchdünner Umriss in der Textfarbe. Er verdickt die vorhandene Kontur echt,
      gleichmäßig und ohne sie zu verzerren — 0,3 px reichen. 0,5 px sieht im direkten
      Vergleich kaum anders aus und wäre nur näher an der Kante zum Zulaufen.

   Überschriften bleiben ausgenommen: Sie sind groß genug, um dünn zu funktionieren, und
   leben von dieser Leichtigkeit. */
body { -webkit-text-stroke: 0.3px currentColor; }
h1, h2, h3, h4 { -webkit-text-stroke: 0; }

p { text-wrap: pretty; }

/* Tastatur-Nutzer sollen die Galerie überspringen können. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--accent);
	color: var(--on-accent);
	padding: 12px 20px;
	font-weight: 400;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--on-accent); }

/* Die Körnung liegt als fixes Overlay über allem und macht die großen dunklen
   Flächen weniger digital-flach. Rein dekorativ, daher aria-hidden. */
.grain {
	position: fixed;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.section { padding-block: clamp(56px, 8vw, 110px); }

.eyebrow {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.eyebrow-rule {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.eyebrow-rule::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--accent);
}

/* Ohne fetten Schnitt bekommen Knöpfe ihren Halt aus Versalien und Laufweite statt aus
   Gewicht. So hielt es auch die alte Seite mit ihren Buttons. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border: 0;
	border-radius: var(--pill);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.18s var(--ease), background-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #F26A20; color: var(--on-accent); }

/* Der Knopf, der in die Galerie führt: ein Lichtbogen wandert um ihn herum.

   Das ::before liegt 3 px größer über dem Knopf und trägt einen conic-gradient — einen
   einzelnen hellen Bogen auf sonst durchsichtigem Grund. Animiert wird allein dessen
   Startwinkel, der Bogen wandert also einmal rundherum.

   Der Kniff ist die Maske, und sie ist nicht optional: Zwei deckungsgleiche Ebenen, von
   denen die innere (content-box, also alles innerhalb des 3-px-Paddings) wieder
   abgezogen wird. Übrig bleibt genau der 3 px breite Ring — die Mitte ist ausgestanzt und
   gibt den Knopf darunter frei.

   Der naheliegende Weg (::before per z-index: -1 hinter den Knopf legen) funktioniert
   hier NICHT: Ein Kind mit negativem z-index landet zwar hinter dem Text, aber immer noch
   ÜBER dem eigenen Hintergrund seines Elternteils. Der Bogen lag damit als Schleier auf
   dem Knopf statt als Rahmen darum.

   Das @property ist ebenfalls Pflicht: Ein Winkel in einer Custom Property ist für den
   Browser sonst bloß eine Zeichenkette, und Zeichenketten kann er nicht interpolieren —
   die Animation spränge von 0 auf 360, statt zu laufen. Erst die Typ-Angabe macht sie
   animierbar. */
@property --pott-drall {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.btn-locken { position: relative; }

.btn-locken::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	padding: 3px;
	pointer-events: none;
	background: conic-gradient(
		from var(--pott-drall),
		transparent 0deg 200deg,
		var(--accent-2) 285deg,
		#FFE7D2 325deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: pott-drall 3.4s linear infinite;
}

@keyframes pott-drall {
	to { --pott-drall: 360deg; }
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line-2);
	font-weight: 400;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn-dark { background: var(--ink-dark); color: var(--ink); }
.btn-dark:hover { background: #0E0B08; color: var(--ink); }

.btn-sm { padding: 9px 16px; font-size: 13px; }

.tag {
	font-weight: 400;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--pill);
	background: rgba(241, 233, 218, 0.07);
	color: #D9CDB4;
	border: 1px solid rgba(241, 233, 218, 0.12);
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(21, 18, 14, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(241, 233, 218, 0.12);
}

/* Knapperes Polster als im Entwurf: Das Emblem braucht 64px Höhe, um lesbar zu sein.
   Mit den ursprünglichen 14px käme der sticky Header auf über 90px und würde auf dem
   Handy zu viel vom Bildschirm fressen. */
.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 10px;
}

/* Marke: das runde Emblem allein. Es trägt den Schriftzug "POTTSCHÖN" in sich —
   ab 64px ist der lesbar, darunter wird er zu Matsch. Deshalb hier kein Wort daneben,
   sondern schlicht genug Größe. */
.marke {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}
.marke:hover { color: var(--ink); }
.marke:hover .marke-logo { transform: rotate(-6deg); }

.marke-logo {
	width: auto;
	flex-shrink: 0;
	transition: transform 0.3s var(--ease);
}

/* Fallback, falls das Logo aus der Mediathek verschwindet. */
.marke-wort {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: 0.02em;
	line-height: 1;
}

.marke--header .marke-logo { height: 64px; }

.marke--footer { display: flex; margin-bottom: 16px; }
.marke--footer .marke-logo { height: 96px; }
.marke--footer .marke-wort { font-size: 28px; }

.nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-weight: 400;
	font-size: 14px;
}
.nav a { color: var(--ink-nav); }
.nav a:hover { color: var(--ink); }
.nav .btn { padding: 10px 18px; font-size: 14px; }
.nav .btn:hover { color: var(--on-accent); }

/* display: contents — die Links sind dadurch direkte Flex-Kinder von .nav und stehen in
   einer Reihe mit dem Knopf. Auf dem Handy wird daraus ein echter Kasten, siehe Responsive. */
.nav-links { display: contents; }

/* Der Burger. Auf dem Desktop nie zu sehen; auf dem Handy blendet ihn menue.js ein.
   44px Kantenlänge, damit man ihn mit dem Daumen trifft. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	color: var(--ink-nav);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}
.nav-toggle:hover { color: var(--ink); }

.nav-toggle-wort { line-height: 1; }

/* Drei Striche aus einem Element: der mittlere ist das Element selbst, die äußeren sind
   seine Pseudo-Elemente. Im offenen Zustand wird daraus ein Kreuz. */
.nav-toggle-linien,
.nav-toggle-linien::before,
.nav-toggle-linien::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle-linien { position: relative; }
.nav-toggle-linien::before,
.nav-toggle-linien::after {
	content: '';
	position: absolute;
	left: 0;
}
.nav-toggle-linien::before { top: -6px; }
.nav-toggle-linien::after { top: 6px; }

.nav--offen .nav-toggle-linien { background: transparent; }
.nav--offen .nav-toggle-linien::before { transform: translateY(6px) rotate(45deg); }
.nav--offen .nav-toggle-linien::after { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.nav-toggle-linien,
	.nav-toggle-linien::before,
	.nav-toggle-linien::after { transition: none; }
}

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

.hero {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding-block: clamp(36px, 6vw, 84px) clamp(28px, 4vw, 56px);
}

.hero-text { flex: 1 1 440px; min-width: 300px; }

.hero h1 {
	font-size: clamp(48px, 8vw, 104px);
	line-height: 0.92;
	letter-spacing: 0.02em;
	margin: 22px 0;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-lede {
	font-size: clamp(18px, 2.2vw, 23px);
	line-height: 1.5;
	max-width: 30ch;
	color: var(--ink-2);
	margin: 0 0 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid rgba(241, 233, 218, 0.12);
}
/* Die Zahl trägt sich über Größe, nicht über Fett — Capsuula hat kein Fett. */
.stats dt {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 38px;
	line-height: 1;
	color: var(--ink);
}
.stats dd { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-3); }

/* Die Collage: ein hohes Bild links, zwei gestapelte rechts. Der Versatz nach
   unten bricht die Symmetrie — sonst wirkt es wie ein Produktkatalog. */
.hero-collage {
	flex: 1 1 380px;
	min-width: 300px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.hero-collage-main { flex: 1.15; margin-top: 34px; }
.hero-collage-side { flex: 1; display: flex; flex-direction: column; gap: 16px; }

.hero-collage figure {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #2A241D;
	box-shadow: var(--shadow-hero);
}
.hero-collage img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage-main figure { aspect-ratio: 2 / 3; }
.hero-collage-side figure:first-child { aspect-ratio: 3 / 4; }
.hero-collage-side figure:last-child  { aspect-ratio: 1 / 1; }

/* --- Laufband ---------------------------------------------------------- */

.marquee {
	background: var(--bg-deep);
	padding-block: 16px;
	overflow: hidden;
	border-block: 1px solid var(--line);
}
.marquee-track {
	display: inline-flex;
	white-space: nowrap;
	animation: pott-marquee 42s linear infinite;
	will-change: transform;
}
.marquee-track span {
	font-weight: 400;
	font-size: 19px;
	text-transform: uppercase;
	white-space: nowrap;
}
@keyframes pott-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --- Story ------------------------------------------------------------- */

.story {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.story-bild {
	flex: 1 1 300px;
	min-width: 280px;
	max-width: 420px;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #2A241D;
	box-shadow: 0 30px 64px -26px rgba(0, 0, 0, 0.75);
	transform: rotate(-1.5deg);
}
.story-bild img { width: 100%; height: 100%; object-fit: cover; }

.story-text { flex: 1 1 420px; min-width: 300px; }
.story-text h2 {
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.02;
	margin: 16px 0 24px;
}
.story-text p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }
.story-text p:last-of-type { margin-bottom: 0; }
.story-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* --- Reel --------------------------------------------------------------- */

/* Das Handy steht rechts, die Story-Kachel darüber links — so läuft der Blick im Zickzack
   die Seite hinunter, statt an einer Kante zu kleben. */
.reel {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.reel-text { flex: 1 1 420px; min-width: 300px; }
.reel-text h2 {
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.02;
	margin: 16px 0 24px;
}
.reel-text p {
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 30px;
	max-width: 46ch;
}

.reel-handle {
	margin: 18px 0 0;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.reel-buehne {
	flex: 0 1 320px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

/* Das Gehäuse.

   Die Neigung sitzt in `rotate`, nicht in `transform` — dieselbe Trennung wie bei den
   Karten weiter unten: Die Auftauch-Animation hält am Ende einen `translate`-Wert fest.
   Stünde die Drehung in `transform`, wäre das noch verträglich; sobald aber jemand später
   ein Schweben ergänzt (das läuft über `transform`), wäre die Neigung schlagartig weg.
   Als eigene Property kommen sich die drei nie in die Quere. */
.handy {
	position: relative;
	width: 100%;
	max-width: 330px;
	padding: 9px;
	border-radius: 46px;
	rotate: 2deg;

	/* Kein flaches Schwarz: Der schmale helle Streifen oben links ist das, was aus einem
	   abgerundeten Rechteck ein Gerät macht. */
	background: linear-gradient(150deg, #4A423A 0%, #14100C 26%, #0C0906 74%, #38302A 100%);

	/* Der äußere Ring ist hier kein Zierrat. Auf einem fast schwarzen Hintergrund hätte
	   ein dunkles Gehäuse sonst gar keine Silhouette — der Rahmen verschwände, und übrig
	   bliebe ein Video mit abgerundeten Ecken. Erst die Kante macht daraus ein Gerät. */
	box-shadow:
		0 40px 70px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(241, 233, 218, 0.18);
}

/* Die Tasten. Zwei Striche, mehr braucht es nicht — sie sitzen halb unter dem Gehäuse und
   schauen nur ein paar Pixel heraus. */
.handy::before,
.handy::after {
	content: '';
	position: absolute;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, #3A332B, #1A1610);
}
/* Lautstärke, links. */
.handy::before {
	left: -2px;
	top: 108px;
	height: 56px;
}
/* Ein/Aus, rechts. */
.handy::after {
	right: -2px;
	top: 128px;
	height: 74px;
}

/* Die Pille oben. Sie liegt über dem Bildschirm, nicht darin — sonst müsste das Video
   Platz für sie lassen. */
.handy-insel {
	position: absolute;
	top: 20px;
	left: 50%;
	translate: -50% 0;
	z-index: 2;
	width: 78px;
	height: 22px;
	border-radius: var(--pill);
	background: #060403;
}

.handy-schirm {
	position: relative;
	overflow: hidden;
	border-radius: 38px;
	aspect-ratio: 9 / 16;

	/* Bis das Video geladen ist, steht hier das Standbild. Fehlt auch das, ist wenigstens
	   der Rahmen kein schwarzes Loch, sondern hat den Ton der übrigen Bildflächen. */
	background: #2A241D;
}

.handy-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ein Hauch Glas: ein einzelner schräger Lichtstreifen über der oberen Ecke. Mehr wäre
   Effekthascherei und würde vom Video ablenken — und genau das soll hier ja wirken. */
.handy-schirm::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		122deg,
		rgba(241, 233, 218, 0.10) 0%,
		rgba(241, 233, 218, 0.03) 18%,
		transparent 40%
	);
}

.reel-caption {
	margin: 0;
	max-width: 30ch;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-3);
}

/* --- Galerie ----------------------------------------------------------- */

.galerie {
	background: var(--bg-band);
	border-block: 1px solid var(--line);
	padding-block: clamp(48px, 7vw, 90px);
}

.galerie-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 34px;
}
.galerie-kopf h2 {
	font-size: clamp(32px, 5vw, 60px);
	line-height: 0.98;
	margin-top: 14px;
}
.galerie-kopf p {
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 34ch;
	margin: 0;
}

/* Die Neuheit: dasselbe Stück wie eine Karte, nur groß. Sie hebt sich über den
   Akzentrand und den warmen Schein ab — nicht über eine eigene Farbwelt. Der Block
   hängt am Galerie-Filter und wird darüber per hidden-Attribut versteckt. */
.neuheit {
	display: grid;
	grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
	align-items: stretch;
	margin-bottom: 34px;
	background: var(--card);
	border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card), 0 0 46px -22px color-mix(in oklab, var(--accent) 60%, transparent);
}
.neuheit[hidden] { display: none; }

/* Dasselbe Seitenverhältnis wie die Karten — und dasselbe, das pott-card ohnehin hat
   (560×700). Der Container passt damit exakt auf das Bild: object-fit hat nichts mehr
   zu beschneiden, egal welches Stück nachrückt. Ein breiterer Ausschnitt säbelt sonst
   beim nächsten hohen Schrank Kopf und Füße ab. */
.neuheit-bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #2A241D;
}
.neuheit-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.neuheit:hover .neuheit-bild img { transform: scale(1.03); }

.neuheit-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--pill);
}

.neuheit-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: clamp(26px, 3.4vw, 44px);
}
.neuheit-typ {
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
}
.neuheit-body h3 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: 0.02em;
	margin: 0;
}
.neuheit-body h3 a { color: var(--ink); }
.neuheit-body h3 a:hover { color: var(--accent-2); }

.neuheit-text {
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0;
}

/* Der Preis trägt die Box — er darf größer sein als alles außer dem Namen.

   Kein margin-top:auto mehr: Das drückte den Preis an den unteren Rand, und weil die Box
   ihre Höhe vom Bild bekommt (600 px), klaffte zwischen Anreißer und Preis ein totes Loch.
   Der Textblock steht jetzt als Ganzes mittig — siehe justify-content in .neuheit-body. */
.neuheit-preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-top: 14px;
}
.neuheit-preis .preis {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 34px;
	line-height: 1;
	color: var(--ink);
}
.neuheit-preis .preis-note { font-size: 13px; color: var(--ink-3); }

.neuheit-aktion { display: flex; flex-wrap: wrap; gap: 12px; }

.neuheit-fuss {
	font-size: 13px;
	color: var(--ink-3);
	margin: 0;
}

.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter button {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: var(--pill);
	cursor: pointer;
	background: transparent;
	color: var(--ink-nav);
	border: 1.5px solid var(--line-2);
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.filter button:hover { color: var(--ink); border-color: var(--ink-nav); }
.filter button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 22px;
}

.karte {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.karte[hidden] { display: none; }
/* Zurückgenommen, aber NICHT über opacity: Die Auftauch-Animation endet auf opacity: 1 und
   hält diesen Wert fest (fill-mode: both) — ein opacity: 0.72 hier würde schlicht
   überschrieben und die verkauften Karten stünden so kräftig da wie die verfügbaren.
   Über Farbe und Bildfilter kommt sich nichts in die Quere. */
.karte--verkauft { border-color: transparent; background: color-mix(in oklab, var(--card) 82%, var(--bg)); }
.karte--verkauft .karte-body h3 a { color: var(--ink-2); }
.karte--verkauft .karte-preis { color: var(--ink-3); }

.karte-bild {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #2A241D;
}
.karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte--verkauft .karte-bild img { filter: grayscale(0.55) brightness(0.78); }

.karte-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--ink);
	color: var(--bg);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--pill);
}

.karte-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 18px 18px 20px;
}
.karte-typ {
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
}
.karte-body h3 { font-size: 22px; letter-spacing: 0.02em; }
.karte-body h3 a { color: var(--ink); }
.karte-body h3 a:hover { color: var(--accent-2); }

.karte-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
}
.karte-preis { font-family: var(--font-head); font-weight: 400; font-size: 22px; color: var(--ink); }
.karte-vergriffen { color: var(--ink-3); font-weight: 400; font-size: 13px; }

.galerie-hinweis {
	font-size: 14px;
	color: var(--ink-3);
	margin: 30px 0 0;
	text-align: center;
}

/* Wenn ein Filter nichts übrig lässt, muss die Seite das sagen — sonst wirkt
   sie kaputt. Sichtbar wird der Hinweis über das hidden-Attribut aus dem Skript. */
.galerie-leer {
	text-align: center;
	color: var(--ink-2);
	padding: 48px 0;
	font-size: 17px;
}

/* --- Schon verkauft ----------------------------------------------------- */

/* Was weg ist, ist weg: kleinere Karten, ruhiger, seitlich wegzuschieben statt als
   gleichberechtigtes Raster. Ganz verschwinden dürfen die Stücke aber nicht — sie sind
   die Arbeitsprobe. */
.verkauft {
	padding-block: clamp(48px, 7vw, 84px);
	border-top: 1px solid var(--line);
}

.verkauft-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
}
.verkauft-kopf h2 {
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.05;
	margin-top: 12px;
	color: var(--ink-2);
}
.verkauft-meta {
	display: flex;
	align-items: flex-end;
	gap: 24px;
}
.verkauft-kopf p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-3);
	max-width: 34ch;
	margin: 0;
}

/* Die Pfeile. Sichtbar erst, wenn galerie.js sie freigibt — siehe dort. */
.slider-nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.slider-nav[hidden] { display: none; }

.slider-nav button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	font-size: 17px;
	border-radius: var(--pill);
	cursor: pointer;
	background: transparent;
	color: var(--ink-nav);
	border: 1.5px solid var(--line-2);
	transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
}
.slider-nav button:hover:not(:disabled) {
	color: var(--ink);
	border-color: var(--ink);
	background: rgba(241, 233, 218, 0.05);
}

/* Am Anschlag wird der Pfeil blass und unklickbar, statt zu verschwinden — ein Knopf, der
   springt, ist schlimmer als einer, der nichts tut. */
.slider-nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Der Streifen läuft bis an den Fensterrand statt im Raster zu enden — die angeschnittene
   Karte rechts ist das Signal, dass es seitwärts weitergeht. Das erste padding-inline hält
   die erste Karte trotzdem auf der Fluchtlinie des restlichen Inhalts.

   scroll-padding sorgt dafür, dass eine angesteuerte Karte nicht unter dem linken Rand
   klebt, sondern auf derselben Linie einrastet. */
.slider {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
	padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
	padding-block: 4px 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
	overscroll-behavior-x: contain;
}
.slider:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* Erst wenn galerie.js die Pfeile eingeblendet hat, verschwindet die Scrollleiste. Stünde
   das hier unbedingt, wäre der Streifen ohne JavaScript mit der Maus nicht mehr zu bewegen.
   Gewischt und mit der Tastatur bedient wird er weiterhin — er bleibt ein echter
   Scroll-Container, die Pfeile schieben ihn nur. */
.slider--gesteuert {
	scrollbar-width: none;
	padding-bottom: 4px;
}
.slider--gesteuert::-webkit-scrollbar { display: none; }

.slider .karte {
	flex: 0 0 200px;
	scroll-snap-align: start;
}
/* Die Karten sind hier halb so groß — der Text muss mit. */
.slider .karte-body { padding: 14px 14px 16px; gap: 4px; }
.slider .karte-body h3 { font-size: 17px; }
.slider .karte-typ { font-size: 10px; }

/* Der Fuß sagte dreimal dasselbe: das Badge im Bild, das Preisfeld ("Verkauft") und der
   Zusatz ("Vergriffen"). Ein Badge genügt — hier zählt nur noch, was gebaut wurde. */
.slider .karte-fuss { display: none; }

/* --- Auftrag ----------------------------------------------------------- */

/* min(320px, 100%) statt 320px: Auf einem 320-px-Gerät bleiben nach dem Seitenrand nur
   280 px übrig — ein starres minmax(320px, …) besteht dann trotzdem auf 320 und schiebt
   die ganze Seite 20 px nach rechts raus. Genau das war die Ursache für das seitliche
   Scrollen auf schmalen Telefonen. */
.auftrag {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 26px;
}
.auftrag article {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.auftrag figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #2A241D; }
.auftrag figure img { width: 100%; height: 100%; object-fit: cover; }
.auftrag .inhalt { padding: 32px 30px 34px; }
.auftrag h3 { font-size: 28px; letter-spacing: 0.02em; margin: 12px 0 14px; }
.auftrag p { font-size: 17px; line-height: 1.6; margin: 0; }

.auftrag--dunkel { background: var(--card-warm); color: var(--ink); }
.auftrag--dunkel .eyebrow { color: var(--accent); }
.auftrag--dunkel p { color: var(--ink-2); }

.auftrag--hell { background: var(--cream); }
.auftrag--hell figure { background: #DDD2BD; }
.auftrag--hell .eyebrow { color: #A05A24; }
.auftrag--hell h3 { color: var(--ink-dark); }
.auftrag--hell p { color: #4A4139; margin-bottom: 22px; }
.auftrag--hell .btn { padding: 14px 24px; font-size: 15px; }

/* --- Kundenstimmen ----------------------------------------------------- */

.stimmen {
	background: var(--bg-band);
	border-top: 1px solid var(--line);
	padding-block: clamp(56px, 8vw, 100px);
}
.stimmen-kopf { text-align: center; margin-bottom: 44px; }
.stimmen-kopf h2 { font-size: clamp(32px, 5vw, 58px); margin-top: 14px; }

.stimmen-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}
.stimmen-liste figure {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 28px 26px;
	background: rgba(241, 233, 218, 0.05);
	border: 1px solid rgba(241, 233, 218, 0.12);
	border-radius: 18px;
}
.stimmen-liste blockquote {
	margin: 0;
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--ink);
}
.stimmen-liste figcaption { margin-top: auto; }
.stimmen-name { font-weight: 400; font-size: 16px; color: var(--ink); }
.stimmen-ort { font-size: 14px; color: var(--ink-3); }

/* --- Unterseiten: Werkstatt & Auftrag ----------------------------------
   Beide Seiten benutzen den Baukasten der Startseite (.hero, .story, .karten) und
   ergaenzen ihn nur um das, was es dort nicht gibt: Prozessschritte, Vorher/Nachher,
   Gedicht, Preis-Panel. Kein zweites Design, sondern dasselbe mit mehr Teilen. */

.seite-hero { padding-block: clamp(28px, 4vw, 60px) clamp(28px, 4vw, 56px); }

/* Der Absatz unter dem Lede (nicht auf der Startseite vorhanden). */
.seite-hero .hero-text > p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 44ch;
	margin: 0 0 28px;
	text-wrap: pretty;
}
.seite-hero .hero-lede { margin-bottom: 18px; }

/* Die Zuspitzung auf /auftrag/ („Perfekt. Bring ihn mit.") — traegt die Sektion, also
   gross und in Textfarbe statt im gedaempften Grau der Absaetze. */
.seite-hero .hero-text > p.seite-hero-claim {
	font-size: clamp(20px, 2.4vw, 27px);
	color: var(--ink);
	max-width: none;
}

.sektion-kopf { max-width: 720px; margin-bottom: clamp(30px, 4vw, 50px); }
.sektion-kopf h2 {
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.02;
	margin: 14px 0 18px;
}
.sektion-kopf p {
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0;
	text-wrap: pretty;
}

/* Story-Sektion gespiegelt: Bild mal links, mal rechts. Die Neigung dreht mit, sonst
   kippen alle Bilder in dieselbe Richtung und der Wechsel faellt nicht auf. */
.story--gedreht { flex-direction: row-reverse; }
.story--gedreht .story-bild { transform: rotate(1.5deg); }

.story-text p.story-link { margin-top: 26px; }
.story-link a {
	color: var(--accent);
	font-size: 17px;
	border-bottom: 1px solid transparent;
}
.story-link a:hover { border-bottom-color: currentColor; }

/* --- Die vier Schritte -------------------------------------------------- */

.schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}
.schritte li {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 28px;
}
.schritt-nr {
	font-family: var(--font-head);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--accent);
}
.schritte h3 { font-size: 22px; letter-spacing: 0.02em; margin: 14px 0 10px; }
.schritte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.schritte-bild {
	margin: 34px 0 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #2A241D;
}
.schritte-bild img { width: 100%; height: 100%; object-fit: cover; }

/* --- Werkstatt-Streifen --------------------------------------------------
   Die Handyfotos aus der Werkstatt, im Hochformat belassen. */

.werkstatt-streifen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 40px;
}
.werkstatt-streifen figure {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #2A241D;
}
.werkstatt-streifen img { width: 100%; height: 100%; object-fit: cover; }

/* --- Vorher / Nachher ---------------------------------------------------
   Faellt komplett weg, solange keine Paare gepflegt sind (POTT_VORHER_NACHHER).

   Zwei Zustaende, und die Reihenfolge ist Absicht:
   1. Ohne JavaScript  -> beide Bilder nebeneinander, Griff versteckt (hidden im HTML).
   2. Mit JavaScript   -> galerie.js setzt .vn-paar--regler, die Bilder liegen uebereinander
                          und --pos schneidet das Vorher frei.
   Andersherum (gestapelt im CSS, Nebeneinander per JS) saehe man ohne JavaScript ein halb
   abgeschnittenes Bild und einen toten Griff. Gleiches Muster wie beim Verkauft-Streifen. */

.vorher-nachher {
	background: var(--bg-band);
	padding-block: clamp(56px, 8vw, 110px);
}
.vn-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}
.vn-paar { margin: 0; }
.vn-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vn-bild {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #2A241D;
}
/* Im Markup steht das Nachher zuerst, damit im Regler-Modus das Vorher darueber liegt und
   freigeschnitten werden kann. Nebeneinander gelesen gehoert das Vorher aber nach links —
   das dreht order, ohne die Stapelung anzufassen. */
.vn-bild--vorher { order: -1; }
.vn-bild img { width: 100%; height: 100%; object-fit: cover; }
.vn-marke {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 6px 11px;
	border-radius: var(--pill);
	background: rgba(14, 11, 8, 0.82);
	color: var(--ink-2);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.vn-marke--nachher { background: var(--accent); color: var(--on-accent); }
.vn-paar figcaption { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.vn-paar figcaption a { color: var(--ink); }
.vn-paar figcaption a:hover { color: var(--accent); }

/* Ohne die Regler-Klasse haben Griff und Regler nichts verloren. */
.vn-griff { display: none; }

/* --- Vorher / Nachher: der Schieberegler --------------------------------- */

.vn-paar--regler .vn-bilder {
	--pos: 50%;
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: #2A241D;
	touch-action: pan-y;   /* Senkrecht scrollen bleibt moeglich, waagerecht zieht den Regler. */
}
.vn-paar--regler .vn-bild {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto;
}
/* Das Vorher liegt oben und wird von rechts her weggeschnitten: Griff ganz rechts = alles
   alt, Griff ganz links = alles neu, Mitte = beides. */
.vn-paar--regler .vn-bild--vorher {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.vn-paar--regler .vn-marke--nachher { left: auto; right: 10px; }

/* Der Regler selbst ist unsichtbar und deckt die ganze Flaeche ab — dadurch zieht ein Klick
   irgendwo im Bild den Griff dorthin, und Wischen sowie Pfeiltasten funktionieren ohne eine
   Zeile eigenes Gedoens. Sichtbar ist nur .vn-griff, der keine Klicks abfaengt. */
.vn-paar--regler .vn-regler {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	background: transparent;
	border: 0;
	appearance: none;
	cursor: ew-resize;
}
.vn-paar--regler .vn-regler::-webkit-slider-thumb {
	appearance: none;
	width: 46px;
	height: 100vh;      /* Voller Griffbereich ueber die gesamte Bildhoehe. */
	cursor: ew-resize;
}
.vn-paar--regler .vn-regler::-moz-range-thumb {
	width: 46px;
	height: 100vh;
	border: 0;
	border-radius: 0;
	cursor: ew-resize;
}

.vn-paar--regler .vn-griff {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	z-index: 3;
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.9);
	pointer-events: none;
}
.vn-paar--regler .vn-griff::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	translate: -50% -50%;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: rgba(14, 11, 8, 0.55) no-repeat center / 17px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l6 6-6 6M9 6l-6 6 6 6'/%3E%3C/svg%3E");
	backdrop-filter: blur(2px);
}
/* Tastaturfokus muss sichtbar sein — der Regler selbst ist ja durchsichtig. */
.vn-paar--regler .vn-regler:focus-visible + .vn-griff::after {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent);
}

/* --- Das Gedicht -------------------------------------------------------- */

.gedicht-band {
	background: var(--bg-band);
	padding-block: clamp(56px, 8vw, 110px);
	text-align: center;
}
.gedicht {
	max-width: 620px;
	margin: 24px auto 0;
	padding: 0;
	border: 0;
}
.gedicht p {
	font-size: clamp(19px, 2.1vw, 24px);
	line-height: 1.75;
	color: var(--ink);
	margin: 0 0 26px;
}
.gedicht p:last-child { margin-bottom: 0; }

/* --- Nebenwirkungen ----------------------------------------------------- */

.kacheln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}
.kacheln li {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 22px 22px 46px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink-2);
}
.kacheln li::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 29px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

/* --- Preis-Panel (/auftrag/) -------------------------------------------- */

.preis-panel {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	background: var(--card-warm);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 52px);
}
.preis-panel h2 {
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.05;
	margin: 14px 0 20px;
}
.preis-panel p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 16px;
	text-wrap: pretty;
}
.preis-panel strong { color: var(--ink); }
.preis-panel .hero-actions { margin-top: 28px; }

.preis-schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	counter-reset: preis-schritt;
}
.preis-schritte li {
	position: relative;
	padding-left: 46px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-2);
}
.preis-schritte strong { color: var(--ink); }
.preis-schritte li::before {
	counter-increment: preis-schritt;
	content: counter(preis-schritt);
	position: absolute;
	left: 0;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	display: grid;
	place-items: center;
	font-size: 13px;
	color: var(--accent);
}

/* --- Grenzen ------------------------------------------------------------ */

.grenzen { max-width: 700px; }
.grenzen h2 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; margin: 0 0 20px; }
.grenzen p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 0 0 10px; }
.grenzen p.grenzen-pointe { color: var(--accent); }

/* --- Beleg-Streifen (echte Stuecke statt Stockfotos) --------------------- */

.section-tight { padding-block: clamp(40px, 6vw, 78px); }

.beleg-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}
.beleg-kopf h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.04; margin: 12px 0 0; }
.beleg-kopf p { max-width: 38ch; margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.beleg-mehr { margin: 32px 0 0; }

/* --- CTA-Band ---------------------------------------------------------- */

.cta-band { background: var(--accent); color: var(--ink-dark); }
.cta-band .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding-block: clamp(44px, 6vw, 76px);
}
.cta-band h2 {
	font-size: clamp(28px, 4.4vw, 48px);
	line-height: 1;
	max-width: 20ch;
	color: #2B1A0C;
}
.cta-band .btn { padding: 17px 30px; font-size: 17px; white-space: nowrap; }

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

.site-footer { background: var(--bg-deep); color: var(--ink-2); }
.site-footer .wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 40px;
	padding-block: clamp(48px, 6vw, 80px) 28px;
}
.footer-intro { grid-column: 1 / -1; max-width: 420px; }
.footer-intro p { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 0; }

.site-footer h2 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}
.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
}
.site-footer li { color: var(--ink-3); }
.site-footer li a { color: var(--ink-nav); }
.site-footer li a:hover { color: var(--ink); }

/* Zweite Ueberschrift in derselben Spalte ("Wann du kommen kannst") braucht Luft
   nach der Liste darueber. */
.site-footer ul + h2 { margin-top: 30px; }
.footer-besichtigung {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-3);
	margin: 0;
	max-width: 34ch;
	text-wrap: pretty;
}

.footer-copy {
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: #6F665C;
	padding-block: 22px;
}

/* --- Beitrag und Seite ------------------------------------------------- */

.beitrag { padding-block: clamp(40px, 6vw, 72px); }
.beitrag-kopf { max-width: 760px; margin-bottom: 32px; }
.beitrag-kopf h1 {
	font-size: clamp(36px, 5.5vw, 62px);
	line-height: 1.0;
	margin: 14px 0 20px;
}

/* Der Einleitungstext eines Kategorie-Archivs. Etwas groesser als Fliesstext,
   damit er als Einordnung gelesen wird und nicht als erster Absatz. */
.beitrag-lede p {
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 62ch;
	text-wrap: pretty;
	margin: 0;
}

.beitrag-preis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 36px;
}
.beitrag-preis .preis {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 32px;
	color: var(--ink);
}
.beitrag-preis .btn { margin-left: auto; }
.beitrag-preis .hinweis { font-size: 14px; color: var(--ink-3); }

/* Der Beitragstext kommt aus Gutenberg. Enge Spalte, damit er lesbar bleibt —
   Galerien und Bilder dürfen ausbrechen. */
.inhalt-text { max-width: 760px; }
.inhalt-text > * { margin-block: 1.1em; }
.inhalt-text p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.inhalt-text strong { color: var(--ink); }
.inhalt-text h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 1.6em; }
.inhalt-text h3 { font-size: 22px; margin-top: 1.5em; }
.inhalt-text figure { margin-inline: 0; }
.inhalt-text img { border-radius: var(--radius); }
.inhalt-text ul, .inhalt-text ol { color: var(--ink-2); padding-left: 1.2em; }
.inhalt-text .wp-block-gallery { max-width: none; }
.inhalt-text a { text-decoration: underline; text-underline-offset: 3px; }

.beitrag-galerie { max-width: none; margin-top: 40px; }

.zurueck {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 15px;
	color: var(--ink-nav);
}
.zurueck:hover { color: var(--accent-2); }

/* Weitere Stücke unter dem Beitrag. */
.weitere { background: var(--bg-band); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 80px); }
.weitere h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 28px; }

/* --- 404 --------------------------------------------------------------- */

.fehler { text-align: center; padding-block: clamp(80px, 12vw, 160px); }
.fehler h1 { font-size: clamp(56px, 12vw, 130px); line-height: 1; color: var(--accent); }
.fehler p { font-size: 20px; color: var(--ink-2); margin: 20px auto 32px; max-width: 44ch; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
	/* Ohne JavaScript: Die Links brechen als Zeile unter Logo und Knopf um. Der Header wird
	   dadurch zweizeilig und frisst mehr Bildschirm — dafür kommt man überall hin. Bis zum
	   14.07.2026 stand hier `display: none`, weil die Seite ein reiner One-Pager war und
	   jeder Link ein Anker. Seit „Werkstatt" und „Auftrag" eigene Seiten sind, waren sie
	   auf dem Handy damit unerreichbar. */
	.site-header .wrap { flex-wrap: wrap; row-gap: 10px; }

	.nav { flex-wrap: wrap; justify-content: flex-end; gap: 14px; }

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		order: 3;
		width: 100%;
		gap: 12px 18px;
	}

	/* Mit JavaScript: aus der Zeile wird ein Klapp-Menü, der Header bleibt einzeilig. */
	.nav--menue .nav-toggle { display: inline-flex; }

	.nav--menue .nav-links {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: auto;
		gap: 0;
		padding: 6px var(--pad) 14px;
		background: var(--bg-band);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.8);
	}
	.nav--menue.nav--offen .nav-links { display: flex; }

	/* Große Ziele statt enger Textlinks — das hier wird mit dem Daumen bedient. */
	.nav--menue .nav-links a {
		padding: 13px 2px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	.nav--menue .nav-links a:last-child { border-bottom: 0; }

	.neuheit { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	:root { --pad: 20px; }

	body { font-size: 16px; }

	/* Die Collage kippt auf dem Telefon vom Nebeneinander ins Raster: ein breites Bild
	   oben, zwei Quadrate darunter.

	   Vorher standen hier zwei Spalten unterschiedlicher Höhe nebeneinander — links ein
	   Bild, rechts zwei gestapelte. Rechts war dadurch gut 110 px höher als links, und
	   unten links klaffte ein Loch. Auf dem Desktop ist dieser Versatz gewollt, auf 350 px
	   Breite liest er sich als Fehler.

	   display:contents löst den Seiten-Wrapper auf, damit seine beiden figure zu direkten
	   Rasterfeldern werden — kein zusätzliches Markup nötig. */
	.hero-collage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.hero-collage-main {
		grid-column: 1 / -1;
		margin-top: 0;
	}
	.hero-collage-main figure { aspect-ratio: 4 / 3; }
	.hero-collage-side { display: contents; }
	.hero-collage-side figure:first-child,
	.hero-collage-side figure:last-child { aspect-ratio: 1 / 1; }

	.story-bild { transform: none; max-width: none; }

	/* Ein Handy-Mockup auf einem Handy: Die Neigung geht raus (sie liest sich auf schmalem
	   Raum als Schieflage, nicht als Absicht), und der Rahmen darf nicht die ganze Breite
	   fressen — sonst konkurriert das Video mit dem echten Gerät drumherum. */
	.reel-buehne { flex-basis: 100%; }
	.handy { rotate: none; max-width: 260px; }

	.galerie-kopf { align-items: flex-start; }

	/* Text und Pfeile drängeln sich sonst; untereinander hat beides Luft. */
	.verkauft-kopf { align-items: flex-start; }
	.verkauft-meta { flex-direction: column; align-items: flex-start; gap: 16px; }

	.karten { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

	.cta-band .wrap { flex-direction: column; align-items: flex-start; }

	.beitrag-preis .btn { margin-left: 0; width: 100%; justify-content: center; }

	/* Auf den Unterseiten: Panel und Kopfzeilen untereinander statt nebeneinander.
	   Die Neigung der gespiegelten Story-Bilder faellt raus — dieselbe Begruendung wie
	   beim Reel-Handy: Auf schmalem Raum liest sie sich als Schieflage, nicht als Absicht. */
	.preis-panel { grid-template-columns: 1fr; }
	.beleg-kopf { align-items: flex-start; }
	.story--gedreht .story-bild { transform: none; }
}

@media (max-width: 420px) {
	.karten { grid-template-columns: 1fr; }
	.stats { gap: 20px; }

	/* Emblem und Anfrage-Button drängeln sich sonst. 52px ist die Grenze, ab der
	   "POTTSCHÖN" im Emblem noch erkennbar bleibt. */
	.marke--header .marke-logo { height: 52px; }
	.nav .btn { padding: 9px 14px; }
}

/* --- Zurück nach oben ---------------------------------------------------
   Nur auf dem Handy: Auf dem Desktop ist der Weg nach oben ein Wisch am Mausrad, und der
   sticky Header steht sowieso da. Auf 13.000 px Seitenlänge ist er es dagegen wert.

   z-index bleibt unter dem Header (50) — sonst läge der Pfeil über dem offenen Menü. */

.nach-oben {
	display: none;
	position: fixed;
	right: 12px;
	/* env() fängt die Gestenleiste am unteren Rand neuerer iPhones ab. Ohne das säße der
	   Pfeil im Wischbereich und wäre mal zu treffen, mal nicht. */
	bottom: max(12px, env(safe-area-inset-bottom, 0px));
	z-index: 40;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: rgba(21, 18, 14, 0.85);
	backdrop-filter: blur(10px);
	color: var(--ink-nav);
}
.nach-oben:hover { color: var(--ink); border-color: var(--accent); }

@media (max-width: 900px) {
	.nach-oben { display: inline-flex; }
}

/* Auftauchen, sobald ein Bildschirm gescrollt ist — vom Browser am Scroll-Fortschritt
   entlanggerechnet, ohne Skript.

   Dieselbe Vorsicht wie beim view()-Gate weiter unten, und aus demselben Grund: `opacity: 0`
   steht **innerhalb** des @supports. Kann ein Browser scroll() nicht, wird die Deckkraft nie
   auf 0 gesetzt und der Pfeil steht schlicht immer da. Ein dauerhaft sichtbarer Pfeil ist
   ein Schönheitsfehler; ein unsichtbarer, der trotzdem Klicks frisst, wäre ein Fehler. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.nach-oben {
			opacity: 0;
			visibility: hidden;
			animation: pott-nach-oben linear both;
			animation-timeline: scroll(root);
			animation-range: 600px 900px;
		}
	}
}

@keyframes pott-nach-oben {
	from { opacity: 0; visibility: hidden; }
	to   { opacity: 1; visibility: visible; }
}

/* --- Bewegung ----------------------------------------------------------- */

/* Die Seite soll leben, ohne zu zappeln. Drei Mittel, alle in reinem CSS — kein
   JavaScript, kein IntersectionObserver, keine Bibliothek:

   1. Die Hero-Bilder schweben. Sehr langsam (9–11 s), sehr wenig (10 px), und jedes
      versetzt — durch die negativen Verzögerungen starten sie mitten in der Bewegung
      statt alle gleichzeitig. Gleichtakt wäre der Moment, in dem es billig aussieht.
   2. Inhalte tauchen beim Scrollen auf. Über animation-timeline: view(), also vom
      Browser selbst am Scroll-Fortschritt entlanggerechnet.
   3. Karten heben beim Überfahren an.

   Warum das @supports drumherum steht: Kann ein Browser view() nicht (Firefox konnte es
   lange nicht), liefe die Animation sonst als gewöhnliche Zeit-Animation los — und ohne
   den Gate stünde im Zweifel eine Galerie mit opacity: 0 da. Unsichtbarer Inhalt ist ein
   schlimmerer Fehler als fehlende Animation. Ohne view() passiert schlicht nichts, alles
   steht sofort sichtbar da. */

@media (prefers-reduced-motion: no-preference) {
	.hero-collage figure { animation: pott-schweben 9s ease-in-out infinite; }
	.hero-collage-side figure:first-child { animation-duration: 11s; animation-delay: -3s; }
	.hero-collage-side figure:last-child  { animation-duration: 10s; animation-delay: -6s; }

	.karte { transition: transform 0.25s var(--ease), border-color 0.25s; }
	.karte:hover {
		transform: translateY(-4px);
		border-color: var(--line-2);
	}
}

@keyframes pott-schweben {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.neuheit,
		.karte,
		.auftrag article,
		.stimmen-liste figure,
		.story-bild,
		.story-text,
		.reel-text,
		.handy {
			animation: pott-auftauchen linear both;
			animation-timeline: view();
			/* Fertig eingeblendet, lange bevor das Element mittig steht — sonst liest sich
			   das Auftauchen als Verzögerung statt als Begrüßung. */
			animation-range: entry 0% entry 55%;
		}
	}
}

/* translate statt transform, und das ist kein Geschmack, sondern Notwendigkeit: Die
   Animation hält ihren Endwert fest (fill-mode: both). Stünde hier transform, wäre der
   transform des :hover überschrieben und die Karten hörten auf, sich anheben zu lassen.
   translate ist eine eigene Property — die beiden kommen sich nicht in die Quere. */
@keyframes pott-auftauchen {
	from { opacity: 0; translate: 0 22px; }
	to   { opacity: 1; translate: 0 0; }
}

/* Wer Bewegung reduziert haben will, bekommt keine. Das Laufband steht dann still
   und bleibt trotzdem lesbar. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee-track { animation: none; }

	/* Der Lichtbogen bliebe sonst an zufälliger Stelle stehen — ein halber Rahmen, der
	   aussieht wie ein Darstellungsfehler. Lieber gar keiner. */
	.btn-locken::before { display: none; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		/* Ohne das liefe die Scroll-Animation weiter — sie hat gar keine Dauer, die man
		   auf 0 kürzen könnte. */
		animation-timeline: none !important;
	}
}

/* --- Laden-Seite (page-laden.php) --------------------------------------- */

/* Das Hero-Bild ist quer (das Schaufenster), nicht die 2/3-Collage der anderen Seiten.
   Deshalb ein eigener Container statt .hero-collage. */
.laden-hero-bild {
	flex: 1 1 460px;
	min-width: 300px;
	margin: 0;
}
.laden-hero-bild figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--card);
	box-shadow: var(--shadow-hero);
}
.laden-hero-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Die kleine „was dich erwartet“-Liste im Hero — ein Punkt in Akzentfarbe statt Bullet,
   analog zu .kacheln. Kein font-weight (Capsuula hat nur einen Schnitt). */
.laden-erwartung {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	gap: 13px;
}
.laden-erwartung li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-2);
}
.laden-erwartung li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
}

/* Galerie: ein scroll-snap-Streifen. Die Fotos sind Hochformate — statt sie in ein Raster
   zu quetschen, stehen sie hier groß und wischbar nebeneinander. Klick öffnet die Lightbox. */
.laden-slider {
	display: flex;
	gap: 18px;
	margin-top: 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
	-webkit-overflow-scrolling: touch;
}
.laden-slide {
	flex: 0 0 auto;
	width: clamp(260px, 74vw, 360px);
	aspect-ratio: 2 / 3;
	scroll-snap-align: center;
	display: block;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card);
	box-shadow: var(--shadow-card);
	cursor: zoom-in;
}
.laden-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}
.laden-slide:hover img,
.laden-slide:focus-visible img { transform: scale(1.04); }
.laden-slide:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* Galerie-Kopf: der Text links, die Blätter-Pfeile rechts auf gleicher Grundlinie. */
.laden-galerie-kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.laden-galerie-kopf .sektion-kopf { margin: 0; }
.laden-pfeile {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.laden-pfeil {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
}
.laden-pfeil:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.laden-pfeil:active { transform: scale(0.92); }
.laden-pfeil:disabled { opacity: 0.3; pointer-events: none; }
.laden-pfeil svg { display: block; }

/* Auf schmalen Screens wischt und tippt man — dann brauchen die Pfeile keinen Platz. */
@media (max-width: 700px) {
	.laden-pfeile { display: none; }
}

/* Native Carousel-Punkte, wo der Browser sie kann (Chrome 135+, Safari 18.2+). Jeder Punkt
   ist ein echter Link auf sein Bild — Tastatur und Screenreader inklusive, ganz ohne JS.
   Firefox kennt das (noch) nicht und fällt still auf reines Wischen/Scrollen zurück. */
@supports (scroll-marker-group: after) {
	.laden-slider {
		scroll-marker-group: after;
		scrollbar-width: none;
	}
	.laden-slider::-webkit-scrollbar { display: none; }

	.laden-slider::scroll-marker-group {
		display: flex;
		gap: 10px;
		justify-content: center;
		margin-top: 22px;
	}
	.laden-slide::scroll-marker {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 1px solid var(--line-2);
		background: transparent;
		cursor: pointer;
		transition: background 0.2s, border-color 0.2s, transform 0.2s;
	}
	.laden-slide::scroll-marker:hover { border-color: var(--accent-2); }
	.laden-slide::scroll-marker:target-current {
		background: var(--accent);
		border-color: var(--accent);
		transform: scale(1.25);
	}
}

/* --- Lightbox (Popover) -------------------------------------------------
   Klick auf ein Galeriebild öffnet es hier formatfüllend. Der abgedunkelte Hintergrund
   (::backdrop), der oberste Stapel und ESC/Klick-daneben zum Schließen kommen vom
   popover-Attribut. `display:none` als Grundzustand: Kann der Browser kein Popover, bleibt
   das leere Overlay unsichtbar und der <a>-Fallback der Slides greift. */
.lightbox { display: none; }
.lightbox:popover-open {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	border: 0;
	padding: clamp(16px, 4vw, 56px);
	background: transparent;
	overflow: hidden;
}
.lightbox::backdrop {
	background: rgba(8, 6, 4, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.lightbox-figur {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-height: 100%;
}
.lightbox-bild {
	max-width: min(92vw, 760px);
	max-height: 80dvh;
	width: auto;
	height: auto;
	border-radius: var(--radius);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.lightbox-text {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	max-width: 56ch;
}
.lightbox-knopf {
	position: fixed;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: color-mix(in oklab, var(--bg) 65%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ink);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.lightbox-knopf:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lightbox-schliessen { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); font-size: 26px; }
.lightbox-zurueck { left: clamp(10px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox-weiter  { right: clamp(10px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox-zurueck:active,
.lightbox-weiter:active { transform: translateY(-50%) scale(0.94); }
.lightbox-schliessen:active { transform: scale(0.94); }
.lightbox-zaehler {
	position: fixed;
	bottom: clamp(14px, 3vw, 28px);
	left: 50%;
	transform: translateX(-50%);
	color: var(--ink-3);
	font-size: 13px;
	letter-spacing: 0.08em;
}

/* Sanftes Ein-/Ausblenden — das moderne Popover-Muster mit @starting-style und
   allow-discrete. Fehlt dem Browser eins davon, schaltet die Lightbox schlicht hart um;
   bei „Bewegung reduzieren“ greift ohnehin der globale Kurzschluss am Dateiende. */
.lightbox,
.lightbox::backdrop {
	opacity: 0;
	transition: opacity 0.28s ease, display 0.28s allow-discrete, overlay 0.28s allow-discrete;
}
.lightbox:popover-open,
.lightbox:popover-open::backdrop { opacity: 1; }
@starting-style {
	.lightbox:popover-open,
	.lightbox:popover-open::backdrop { opacity: 0; }
}

/* „So findest du uns“ — abgesetztes Band wie die Galerie auf der Startseite. */
.anfahrt {
	background: var(--bg-band);
	border-block: 1px solid var(--line);
	padding-block: clamp(48px, 7vw, 96px);
	margin-top: clamp(40px, 6vw, 78px);
}
.anfahrt-inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.anfahrt-text { flex: 1 1 380px; min-width: 300px; }
.anfahrt-text h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; margin: 14px 0 20px; }
.anfahrt-adresse {
	font-style: normal;
	font-size: 20px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 20px;
}
.anfahrt-besichtigung {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 46ch;
	margin: 0 0 28px;
	text-wrap: pretty;
}
.anfahrt-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.anfahrt-tel { margin: 20px 0 0; font-size: 15px; color: var(--ink-3); }
.anfahrt-tel a { color: var(--ink-2); }
.anfahrt-bilder {
	flex: 1 1 320px;
	min-width: 260px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.anfahrt-bilder figure {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--card);
	box-shadow: var(--shadow-card);
}
.anfahrt-bilder figure:first-child { transform: rotate(-1.5deg); }
.anfahrt-bilder figure:last-child  { transform: rotate(1.5deg); margin-top: 22px; }
.anfahrt-bilder img { width: 100%; height: 100%; object-fit: cover; }