/* ==========================================================================
   Ricardo Uhlig — Editorial-Spread design system
   ========================================================================== */

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque.woff2') format('woff2-variations'),
		url('../fonts/BricolageGrotesque.ttf') format('truetype-variations');
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
}

@font-face {
	font-family: 'Hanken Grotesk';
	src: url('../fonts/HankenGrotesk.woff2') format('woff2-variations'),
		url('../fonts/HankenGrotesk.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--color-black: #0b0b0c;
	--color-black-soft: #16151a;
	/* War #f6eee3 (klassisches Beige-Creme, vom /impeccable-Audit als
	   generisches "KI-Design"-Muster markiert) - jetzt ein rosé-getöntes
	   Weiß, das den Unterton von der Markenfarbe Pink statt von einem
	   generischen Terracotta-Beige nimmt. --color-cream-dim bewusst reines
	   Weiß statt eines weiteren Beige-Tons - Karten/Boxen heben sich damit
	   klar vom Seiten-Grundton ab, statt in dieselbe Beige-Familie zu fallen. */
	--color-cream: #fff9f9;
	--color-cream-dim: #ffffff;
	--color-pink: #ff2c6d;
	/* Um 4 Werte je Kanal abgedunkelt gegenüber dem ursprünglichen #d81a58 -
	   visuell praktisch identisch, aber schafft jetzt 4.5:1 auf Creme
	   (WCAG AA für Fließtext), vorher 4.3:1. Minimalste mögliche Korrektur,
	   Markenfarbe bleibt dieselbe. */
	--color-pink-deep: #d41654;
	--color-rose: #d9a79c;
	/* Ersetzt "color: var(--color-ink); opacity: 0.5–0.85" für gedämpften
	   Text auf Creme - ein fester, warmer Dunkelgrauton statt Opacity, die
	   den tatsächlichen Kontrast unvorhersehbar macht. 6.1:1 auf Creme,
	   sicher über WCAG AA (4.5:1). */
	--color-ink-muted: #5c5854;

	--color-ink: var(--color-black);
	--color-paper: var(--color-cream);

	--font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
	--font-body: 'Hanken Grotesk', -apple-system, sans-serif;

	--fs-display: clamp(2.75rem, 3.2vw + 2rem, 6rem);
	--fs-h2: clamp(2rem, 1.6vw + 1.5rem, 3.25rem);
	--fs-h3: clamp(1.35rem, 0.6vw + 1.15rem, 1.75rem);
	--fs-lede: clamp(1.15rem, 0.4vw + 1rem, 1.4rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.875rem;
	--fs-micro: 0.75rem;

	--space-section: clamp(4.5rem, 6vw + 2rem, 9rem);
	--space-gutter: clamp(1.5rem, 4vw, 4rem);
	--radius: 2px;

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	color-scheme: light;
}

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

html { scroll-behavior: smooth; }

/* iOS Safari blendet beim Antippen von Links/Buttons sonst kurz ein
   eigenes, nicht per Farbvariable gestyltes Highlight ein (oft bläulich/
   grau) - global deaktiviert, da :focus-visible (siehe unten) bereits
   einen markenkonformen pinken Fokus-Ring liefert. */
* { -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }

/* Safari (v.a. iOS) tönt native Formularelemente (Checkboxen, Radios,
   Range-Slider, teils auch den Fokus-/Auswahlring von Buttons/Selects)
   sonst mit seiner eigenen System-Akzentfarbe (meist Blau) statt der
   Marke - das war vermutlich die Ursache für "blaue Uhrzeiten"/"oranges
   Menü" auf dem iPhone. accent-color greift genau dort, wo eigenes CSS
   die native Steuerelement-Farbe nicht direkt überschreiben kann. */
:root { accent-color: var(--color-pink); }

::selection { background: var(--color-pink); color: var(--color-cream); }

:focus-visible {
	outline: 2px solid var(--color-pink);
	outline-offset: 3px;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb {
	background: var(--color-black);
	border: 3px solid var(--color-cream);
	border-radius: 8px;
}
* { scrollbar-color: var(--color-black) var(--color-cream); scrollbar-width: thin; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.03em;
	margin: 0;
	text-wrap: balance;
}

p { max-width: 68ch; }

.container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--space-gutter);
}

.kicker {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-pink-deep);
}

.folio {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: currentColor;
	opacity: 0.55;
}

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.9rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	color: var(--color-black);
	border-radius: var(--radius);
	background-image: url('../images/tape-single.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition: filter 0.2s ease;
}
.btn:hover { filter: brightness(0.93); }

/* Laut DESIGN.md ("Ghost: Transparent mit 1.5px Rand in aktueller
   Textfarbe") vorgesehen, aber nie umgesetzt - .btn--ghost hatte bislang
   gar keine eigene Basis-Definition, wurde also unbeabsichtigt identisch
   zum Tape-Textur-Primärbutton dargestellt (z.B. im Consent-Banner nicht
   von "Alle akzeptieren" unterscheidbar, dazu zu niedriger Kontrast). */
.btn--ghost {
	background-image: none;
	background-color: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
}
.btn--ghost:hover { filter: none; background-color: rgba(127, 127, 127, 0.1); }

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

.site-header {
	position: sticky;
	top: 0;
	/* Muss höher sein als .nav-overlay (55): .site-header bildet durch
	   position:sticky + z-index einen eigenen Stacking-Context, in dem
	   .site-nav (z-index 60) verschachtelt liegt. Wäre dieser Wert
	   niedriger als 55, würde das Overlay als Geschwisterelement die
	   gesamte Header-Ebene inkl. offenem Menü überdecken und alle Klicks
	   auf Menüpunkte abfangen, statt sie durchzulassen.
	*/
	z-index: 65;
	background: var(--color-paper);
	border-bottom: 1px solid rgba(11, 11, 12, 0.1);
}

.site-header__inner {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	padding: 1.1rem var(--space-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.site-logo { display: inline-flex; }
.site-logo img {
	height: 40px;
	width: auto;
	display: block;
	animation: logo-stick 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes logo-stick {
	0% { opacity: 0; transform: translateY(-14px) rotate(-14deg) scale(0.85); }
	60% { opacity: 1; transform: translateY(2px) rotate(4deg) scale(1.04); }
	100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.site-logo img { animation: none; }
}

.nav-toggle {
	/* .site-nav liegt im DOM als Kind von .site-header (nicht als
	   Geschwister) und hat selbst z-index:60 - ohne eigene Positionierung
	   + höheren z-index würde das geöffnete Menü (position:fixed) den
	   Button innerhalb desselben .site-header-Stacking-Context einfach
	   überdecken, obwohl der Header selbst über allem anderen liegt
	   (siehe DESIGN.md "Real-Content-Under-Chrome-Regel"). Der Button muss
	   also IMMER klickbar bleiben, damit man das Menü wieder schließen
	   kann. */
	position: relative;
	z-index: 61;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius);
	padding: 0.55rem 1rem;
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
	color: var(--color-ink);
	transition: color 0.2s ease, border-color 0.2s ease;
}

/* Solange der Header über der vollflächigen schwarzen Hero-Fläche
   transparent ist (siehe hero-logo-animation.js), wäre der dunkle
   Toggle-Button auf Schwarz unlesbar - hellt ihn in dieser Phase auf. */
.site-header.is-on-dark .nav-toggle {
	border-color: var(--color-cream);
	color: var(--color-cream);
}

/* Startseite: is-on-dark wird serverseitig direkt mit ins Markup gerendert
   (siehe header.php) statt erst durch hero-logo-animation.js im Footer
   gesetzt zu werden - sonst zeigt der Header für den kurzen Moment bis das
   Skript laeuft (Ladezeit, langsames Mobilgeraet) faelschlich sein cremefarbenes
   Default-Aussehen ueber der eigentlich schwarzen Hero-Flaeche, inkl. dunkel
   unlesbarem Menü-Button. Das Skript übernimmt danach nahtlos per Inline-Style.
   Bewusst auf .home beschränkt: auf Unterseiten setzt nav.js is-on-dark auch
   bei offenem Menü (fürs helle Icon), dort steht aber nie eine schwarze
   Vollflaeche dahinter - der Header muss dort weiterhin cremefarben bleiben,
   sonst scheint auf breiten Viewports (Nav-Panel nur 420px breit) der
   Seiteninhalt links davon durch den sonst transparenten Header durch. */
.home .site-header.is-on-dark {
	background: transparent;
	border-bottom-color: transparent;
}

.site-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: var(--color-black);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	padding: 6rem var(--space-gutter) 4rem;
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
	z-index: 60;
	overflow-y: auto;
}
.site-nav.is-open { transform: translateX(0); }

.site-nav > li { border-top: 1px solid rgba(246, 238, 227, 0.12); }
.site-nav > li:first-child { border-top: none; }

.site-nav a {
	display: block;
	padding: 1.05rem 0;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.2vw + 1.1rem, 1.9rem);
	font-weight: 600;
	color: var(--color-cream);
	border-bottom: none;
	transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--color-pink); }

.site-nav > li { position: relative; }
.site-nav > li:has(.sub-menu) > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
}
.site-nav > li:has(.sub-menu) > a::after {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.6;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.site-nav > li.is-expanded > a::after { transform: rotate(225deg); }

/* Standardmäßig eingeklappt (siehe nav.js) - max-height statt height:auto,
   da Höhenübergänge zu/von "auto" nicht animierbar sind. 500px reicht für
   die aktuell 5 Unterpunkte deutlich, auch bei künftigen Ergänzungen. */
.site-nav .sub-menu {
	display: block;
	position: static;
	border: none;
	background: none;
	padding-bottom: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}
.site-nav > li.is-expanded .sub-menu { max-height: 500px; padding-bottom: 0.75rem; }
.site-nav .sub-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	padding: 0.6rem 0 0.6rem 1.25rem;
	color: var(--color-rose);
	border-left: 1.5px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
.site-nav .sub-menu a:hover {
	background: none;
	color: var(--color-pink);
	border-left-color: var(--color-pink);
	padding-left: 1.6rem;
}

.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 11, 12, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 55;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 761px) {
	.site-nav { padding-top: 8rem; }
}

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

/* Pin-Wrapper: hält .hero per position:sticky fest im Bild, während die
   R-Animation läuft - die eigentliche Seite scrollt in dieser Phase also
   gar nicht "im Hintergrund" weiter (siehe hero-logo-animation.js). Die
   Extra-Höhe über 100vh hinaus ist die Scroll-Strecke, die für die
   Animation "verbraucht" wird, bevor .hero sich normal weiterscrollen
   lässt. Ohne diesen Wrapper würde die echte Headline (normaler Fluss)
   bei jedem Scroll-Schwung sofort aus dem Bild verschwinden, während das
   R noch mitten in der Bewegung ist. */
.hero-pin {
	position: relative;
	/* vh statt dvh als Fallback für Browser ohne dvh-Support. */
	height: 220vh;
	height: 220dvh;
}

.hero {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	background: var(--color-black);
	color: var(--color-cream);
	/* Höhe bewusst auf eine Bildschirmhöhe begrenzt (nicht nur min-height):
	   .hero ist der Sticky-Kindknoten von .hero-pin - wäre er durch eigenen
	   Inhalt höher als der Viewport, würde das die Sticky-Mechanik selbst
	   verkürzen/verfälschen (siehe hero-logo-animation.js getProgress()).
	   .hero__media (Video/Bild) sitzt deshalb absichtlich NICHT mehr mit
	   im Sticky-Element, sondern folgt danach im normalen Fluss.

	   dvh statt vh: auf Mobile (v.a. Safari) ändert sich die sichtbare
	   Viewport-Höhe beim Ein-/Ausblenden der Adressleiste, "vh" bleibt
	   dabei aber auf dem größten Wert eingefroren. Dadurch war .hero kurz
	   höher als der tatsächlich sichtbare Bereich, und am unteren Rand
	   blitzte für einen Frame der helle Seitenhintergrund durch, bis
	   Scroll-Handler & Layout nachgezogen haben. dvh folgt der ECHTEN,
	   aktuellen Viewporthöhe (wie window.innerHeight im JS) und vermeidet
	   das. vh bleibt als Fallback für Browser ohne dvh-Support stehen. */
	min-height: 100vh;
	max-height: 100vh;
	min-height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
}

.hero__content {
	/* Seit .hero__media nicht mehr als zweite Grid-Spalte daneben sitzt
	   (siehe .hero-pin), bekommt der Textblock eine eigene, bewusst
	   begrenzte Breite - sonst würde er als einziges Flex-Kind versuchen,
	   die komplette Hero-Breite auszufüllen und auf großen Bildschirmen
	   unlesbar breite Zeilen erzeugen. */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.75rem;
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 6rem) var(--space-gutter);
}

/* Start-/Referenzposition der Hero-R-Animation (siehe hero-logo-animation.js):
   bewusst raumgreifend, ein echtes Statement (pinkes R auf Schwarz), nicht
   nur ein akzentuiertes Detail - siehe DESIGN.md "Named Rules". Überlappt
   während der Eröffnung problemlos die Headline, da die vollflächige
   schwarze Fläche den Content in dieser Phase ohnehin verdeckt.

   Bewusst position:fixed statt absolute: die Fläche ist jetzt vollflächig
   (siehe #hero-logo-backdrop), das R muss deshalb mittig zum GESAMTEN
   Viewport stehen - nicht nur zur .hero__content-Textspalte, die bei
   Desktop-Breiten nur ca. 51% der Seite einnimmt (Grid mit zwei Spalten
   ab 900px). Mit position:absolute läge die Mitte sonst spürbar links
   von der echten Seitenmitte. Sowohl horizontal als auch vertikal mittig
   zum Viewport (nicht nur horizontal), damit es wirklich als große,
   zentrale Geste wirkt statt als Element am oberen Rand. */
#hero-anim-hero-ref {
	/* Ohne explizite Höhe wäre die Box 0px hoch (leeres div) - dann würde
	   translateY(-50%) nur die eigene (nicht vorhandene) Höhe halbieren,
	   und die reale, hochgeladene Logo-Grafik (mit echter Höhe) würde vom
	   oberen statt vom Mittelpunkt aus nach unten wachsen und dadurch
	   deutlich UNTER der Viewport-Mitte landen. aspect-ratio sorgt dafür,
	   dass diese Referenzbox dieselben Proportionen wie das echte Logo hat
	   (512×430) und dadurch tatsächlich mittig sitzt. */
	position: fixed;
	top: 50%;
	left: 50%;
	width: min(62vw, 58vh, 760px);
	aspect-ratio: 512 / 430;
	transform: translate(-50%, -50%);
}

/* Auf Desktop-Breiten darf das R noch deutlich raumgreifender sein - dort
   ist mehr Fläche vorhanden, ohne dass es an die Viewport-Ränder stößt. */
@media (min-width: 900px) {
	#hero-anim-hero-ref {
		width: min(50vw, 62vh, 980px);
	}
}

.hero__eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.hero__eyebrow-row .kicker { color: var(--color-rose); }
.hero__eyebrow-row .folio { color: var(--color-cream); opacity: 0.4; }

.hero__title {
	font-size: var(--fs-display);
	color: var(--color-cream);
}
.hero__title em {
	font-style: normal;
	color: var(--color-pink);
}

.hero__lede {
	font-size: var(--fs-lede);
	color: var(--color-rose);
	max-width: 42ch;
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.5rem;
}

.review-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-small);
	color: var(--color-cream);
}
.review-badge__stars { color: var(--color-pink); letter-spacing: 0.1em; }

.hero__media {
	/* Steht seit der Sticky-Pin-Umstellung (siehe .hero-pin) als eigener
	   Block NACH dem gepinnten Hero im normalen Fluss, statt als Grid-Spalte
	   daneben - braucht deshalb jetzt eine eigene, feste Höhe statt der
	   vorherigen height:100% vom Grid-Row-Stretch. */
	position: relative;
	overflow: hidden;
	height: 70vh;
	min-height: 360px;
	background: var(--color-black);
}

@media (min-width: 900px) {
	.hero__media { height: 90vh; }
}
.hero__media img,
.hero__media-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

/* ---- Section scaffolding ---- */

.section { padding-block: var(--space-section); }
.section--dark { background: var(--color-black); color: var(--color-cream); }
.section--rose { background: var(--color-cream-dim); }

/* ---- Editorial-Bildpause: randabfallendes Foto zwischen Textsektionen,
   ein Satz statt neuem Absatz - "BILD. Ein Satz." statt Text→Bild→Text. ---- */
.editorial-break {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: clamp(60vh, 80vh, 900px);
	overflow: hidden;
}
.editorial-break img {
	/* Überhöht + absolut positioniert, damit editorial-parallax.js beim
	   Scrollen per transform:translateY() Spielraum hat, ohne dass am
	   oberen/unteren Rand des Ausschnitts leere Fläche sichtbar wird -
	   bewusste Ausnahme von der sonst parallaxfreien Regel, nur für diese
	   zwei Bildpausen (Nutzerwunsch). */
	position: absolute;
	top: -23%;
	left: 0;
	width: 100%;
	height: 146%;
	object-fit: cover;
	display: block;
	will-change: transform;
}
.editorial-break__scrim {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(2rem, 5vw, 3.5rem) var(--space-gutter) clamp(2rem, 4vw, 3rem);
	background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.65) 60%, rgba(11,11,12,0.9) 100%);
}

.editorial-break__line {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.2vw + 1rem, 2rem);
	font-weight: 500;
	color: var(--color-cream);
	max-width: 34ch;
	margin: 0;
}

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	flex-wrap: wrap;
}

.section__title { font-size: var(--fs-h2); }

/* ---- Problem section ---- */

.problem-grid {
	display: grid;
	gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.problem-item__index {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--color-pink-deep);
	margin-bottom: 0.75rem;
}
.problem-item__lead {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 0.75rem;
	max-width: none;
}
.problem-item__sub { font-size: var(--fs-small); color: var(--color-ink-muted); }

.pull-quote {
	border-left: none;
	border-top: 2px solid var(--color-pink);
	padding-top: 1.5rem;
	max-width: 60ch;
}
.pull-quote p {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);
	font-weight: 500;
	line-height: 1.4;
	max-width: none;
}
.pull-quote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-size: var(--fs-small);
	color: var(--color-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- "Was dich erwartet" ---- */

.expect-grid {
	display: grid;
	gap: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.expect-item__index {
	display: block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--color-pink-deep);
	margin-bottom: 0.5rem;
}
.expect-item h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.expect-item p { font-size: var(--fs-small); color: var(--color-ink-muted); }
/* .expect-item sitzt im Studio-Guide-Block auch auf Rosé statt Creme -
   dort reicht der Kontrast von --color-ink-muted nicht (Rosé ist deutlich
   dunkler als Creme), volles --color-ink bleibt dort sicher (9.3:1). */
.section--rose .expect-item p { color: var(--color-ink); }

/* ---- Showreel ---- */

.showreel { background: var(--color-black); line-height: 0; }
.showreel__video { width: 100%; max-height: 90vh; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.about__weg-video { margin-top: clamp(2rem, 3vw, 2.5rem); overflow: hidden; line-height: 0; }
.about__weg-video-el { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* ---- Locations ---- */

.location-grid {
	display: grid;
	gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	border-top: 1px solid rgba(246, 238, 227, 0.15);
	padding-top: clamp(2rem, 3vw, 3rem);
}
.location-item .kicker { color: var(--color-rose); display: block; margin-bottom: 0.75rem; }
.location-item p { font-size: var(--fs-body); max-width: none; }
.location-item__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 1.25rem;
}
.location-item__media img { width: 100%; height: 100%; object-fit: cover; }
.location-item__media--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5px;
	aspect-ratio: 8 / 3;
}

/* ---- Stats bar ---- */

.stats-bar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	padding-block: clamp(3rem, 5vw, 5rem);
	border-top: 1px solid rgba(11,11,12,0.12);
	border-bottom: 1px solid rgba(11,11,12,0.12);
}
@media (min-width: 700px) {
	.stats-bar { grid-template-columns: repeat(4, 1fr); }
}
.stats-bar__item { display: flex; flex-direction: column; gap: 0.4rem; }
.stats-bar__number {
	font-family: var(--font-display);
	font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
	color: var(--color-pink-deep);
}
.stats-bar__label { font-size: var(--fs-small); color: var(--color-ink-muted); }

/* ---- Process ---- */

.process-grid {
	display: grid;
	gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.process-item__index {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--color-pink-deep);
	margin-bottom: 0.5rem;
}
.process-item h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.process-item p { font-size: var(--fs-small); color: var(--color-ink-muted); }
/* .process-item wird auch im dunklen "Ablauf"-Block der Fotoshooting-
   buchen-Produktseite verwendet (taxonomy-ru_shooting_category.php) -
   dort muss der gedämpfte Text hell statt dunkel sein. */
.section--dark .process-item p { color: var(--color-rose); }

/* ---- Addons ---- */

.addon-grid {
	margin-top: clamp(2.5rem, 4vw, 4rem);
	display: grid;
	gap: 1.5px;
	background: rgba(11,11,12,0.12);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.addon-item {
	background: var(--color-cream-dim);
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.addon-item h4 { font-family: var(--font-display); font-size: 1.15rem; }
.addon-item p { font-size: var(--fs-small); color: var(--color-ink-muted); }
.addon-item__price { font-family: var(--font-display); color: var(--color-pink-deep); font-size: 1.1rem; }

/* ---- Category index ---- */

.category-index {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid rgba(11, 11, 12, 0.12);
}
.category-index__item {
	flex: 1 1 220px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0.25rem;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	border-right: 1px solid rgba(11, 11, 12, 0.12);
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1vw + 0.8rem, 1.5rem);
	font-weight: 500;
}
.category-index__item:hover { color: var(--color-pink-deep); }
.category-index__item span:last-child {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	opacity: 0.5;
}

/* ---- Portfolio grid ---- */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5px;
	background: rgba(11, 11, 12, 0.12);
}
.portfolio-item {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-black);
}
.portfolio-item img {
	width: 100%; height: 100%; object-fit: cover;
}
.portfolio-item__title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.25rem;
	color: var(--color-cream);
	font-family: var(--font-display);
	font-size: 1.05rem;
	background: linear-gradient(to top, rgba(11,11,12,0.75), transparent);
}

.portfolio-cta { margin-top: 3rem; }

/* ---- Testimonials ---- */

.testimonial-grid {
	display: grid;
	gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.testimonial--extra { display: none; }
.testimonial--featured {
	max-width: 900px;
}
.testimonial {
	border-top: 2px solid var(--color-pink);
	padding-top: 1.5rem;
	margin: 0;
}
.testimonial p {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.4;
	color: var(--color-cream);
	max-width: none;
}
.testimonial--featured {
	border-top-width: 3px;
	padding-top: 2rem;
}
.testimonial--featured p {
	font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.35rem);
	line-height: 1.35;
}
.testimonial--featured img { width: 64px; height: 64px; }
.testimonial cite {
	display: block;
	margin-top: 1.25rem;
	font-style: normal;
	font-size: var(--fs-small);
	color: var(--color-rose);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* Markiert die Quelle jedes Zitats direkt am Namen - "Direkte Rückmeldung"
   (aus dem Buchungsprozess) neben "Google-Rezension" (extern, verlinkt,
   nachpruefbar) statt zwei optisch getrennte Bereiche fuer beide Quellen. */
a.testimonial__source {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
a.testimonial__source:hover { border-bottom-color: currentColor; }
/* Text zuerst, kleiner runder Avatar erst unten neben dem Namen - vorher
   trug ein grosses 4:5-Foto jede Karte (oder ein Initialen-Platzhalter, wenn
   keins da war). Jetzt: Zitat fuehrt, das Foto ist nur noch eine kleine,
   erkennbare Bestaetigung neben der Quelle. Kein Foto vorhanden -> gar kein
   Avatar-Element (kein Platzhalter mehr), .testimonial__meta faengt das
   Layout dann automatisch ab (Name steht einfach allein in der Zeile). */
.testimonial__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.testimonial__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 22%;
	flex: none;
}
.testimonial__meta cite { margin-top: 0; }

/* ---- Packages: billing hierarchy ---- */

.billing {
	display: grid;
	gap: 1.5px;
	background: rgba(11, 11, 12, 0.12);
	grid-template-columns: 1fr;
}
@media (min-width: 800px) {
	.billing { grid-template-columns: 1fr 1.35fr 1fr; align-items: stretch; }
}

.billing-act {
	background: var(--color-cream);
	padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.billing-act--headline {
	background: var(--color-black);
	color: var(--color-cream);
	padding-block: clamp(2.75rem, 4vw, 4rem);
}
.billing-act--headline .package__price { color: var(--color-pink); }
.billing-act--headline .billing-act__badge {
	color: var(--color-pink);
}

.billing-act__badge {
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-pink-deep);
}
.package__name {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.5vw + 1.1rem, 2.25rem);
	margin: 0;
}
.package__price {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--color-pink-deep);
}
.package__description { font-size: var(--fs-small); color: var(--color-ink-muted); margin: 0; }
.billing-act--headline .package__description { color: var(--color-rose); }
.package__features {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: var(--fs-small);
}
.package__features li {
	padding-left: 1.1rem;
	position: relative;
}
.package__features li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.55em;
	width: 6px; height: 1.5px;
	background: currentColor;
}

/* ---- Footer ----
   Kompakter, editorialer als eine reine Linkliste (Nutzerfeedback): weniger
   vertikale Luft als ein normaler .section (eigenes, kleineres Space-Token
   statt --space-section), klare Hierarchie zwischen den eigentlichen
   Handlungen (WhatsApp/Instagram/Termin buchen) und dem Rechtlichen, und
   ein eigener, emotionalerer Abschluss-CTA statt nur einer dritten
   Grid-Spalte "Bereit?". */

.site-footer {
	background: var(--color-black-soft);
	color: var(--color-cream);
	padding-block: clamp(3rem, 5vw, 5.5rem);
	/* --color-black-soft liegt tonal so nah an --color-black (den
	   vorausgehenden .section--dark-CTAs), dass eine reine Farbgrenze kaum
	   sichtbar ist — die Trennung braucht daher einen deutlich kräftigeren
	   Akzent statt nur eines dezenten Cream-Rands. */
	border-top: 2px solid var(--color-pink);
}
.site-footer a:hover { color: var(--color-pink); }

.site-footer__top {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1.2fr 1fr;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 720px) {
	.site-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Tape-Wordmark darf im Footer groesser/praesenter sein als sonst auf der
   Seite - funktioniert dort fast wie eine Signatur, die den ganzen Footer
   abschliesst bzw. hier einleitet. */
.site-footer__signature {
	display: block;
	width: clamp(150px, 15vw, 210px);
	height: auto;
	margin-top: 0.75rem;
	transform: rotate(-2deg);
}

/* Sitzt jetzt zentriert ueber dem Abschluss-CTA statt in der Kontakt-Spalte
   (Nutzerfeedback: dadurch wirkten "Kontakt" und "Mehr" unausgewogen hoch/
   niedrig). Etwas kleiner als vorher, da sie hier nur noch eine von drei
   Zeilen im CTA-Block ist, nicht mehr das hoehendominante Element der
   ganzen Spalte. */
.site-footer__cta-signature {
	display: block;
	width: clamp(190px, 20vw, 270px);
	height: auto;
	margin: 0 auto 1.5rem;
	transform: rotate(-2deg);
}
.site-footer__tagline {
	margin: 0.75rem 0 0;
	color: var(--color-rose);
	font-size: var(--fs-small);
}
.site-footer__contact {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.site-footer__phone a { font-size: var(--fs-small); opacity: 0.7; }
/* WhatsApp/Instagram sind die eigentlichen Handlungen hier - deutlich
   groesser/praesenter als die Telefonnummer, statt optisch gleichrangig
   in einer Liste zu verschwinden. */
.site-footer__link-strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
}

.site-footer__more-list {
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 1.05rem;
}
/* Rechtliches bewusst als unauffaellige Fliesstext-Zeile statt gleich
   grosser Linkliste wie "Mehr" - klare Hierarchie zwischen Inhalt und
   Pflichtangaben. */
.site-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fs-micro);
	opacity: 0.55;
}
.site-footer__legal li:not(:last-child)::after {
	content: "·";
	margin: 0 8px;
}
/* Erzwungener Umbruch nach dem 2. Eintrag (siehe Walker in footer.php) -
   ohne das brach die Zeile natuerlich nach dem 4. Eintrag um und liess
   "AGB" als einsames Wort auf der zweiten Zeile stehen. flex-basis:100%
   auf einem leeren Flex-Kind erzwingt in einer flex-wrap-Reihe zuverlaessig
   einen Zeilenumbruch an genau dieser Stelle. */
.site-footer__legal-break {
	flex-basis: 100%;
	width: 0;
	height: 0;
}
.site-footer__legal-break::after {
	content: none;
}

.site-footer__cta {
	text-align: center;
	padding: clamp(2rem, 4vw, 3rem) 0;
	border-top: 1px solid rgba(246, 238, 227, 0.15);
	border-bottom: 1px solid rgba(246, 238, 227, 0.15);
	margin-bottom: 2rem;
}
.site-footer__cta-title {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3vw, 2.7rem);
	margin: 0;
}
.site-footer__cta-sub {
	color: var(--color-rose);
	margin: 0.5rem auto 1.5rem;
	/* Globales p{max-width:68ch} macht die Box schmaler als ihren
	   Container - ohne margin-inline:auto haengt der Text dadurch trotz
	   text-align:center auf .site-footer__cta sichtbar am linken statt am
	   mittigen Rand. */
}

.site-footer__meta {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--fs-micro);
	opacity: 0.55;
}
.site-footer__cookie-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.site-footer__cookie-link:hover { color: var(--color-pink); }

/* ---- Generic content pages (Pakete / FAQ / Kontakt / Portfolio / posts) ---- */

.site-main { padding-block: var(--space-section); }
.site-main > .container, .site-main.container { max-width: 1200px; }

.page-pakete h1,
.page-faq h1,
.page-kontakt h1,
.archive-shooting h1,
.single-shooting h1 {
	font-size: var(--fs-display);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-inline: var(--space-gutter);
}

.packages-grid,
.faq-list,
.contact-channels,
.contact-form,
.page-intro,
.portfolio-filter {
	padding-inline: var(--space-gutter);
}

.packages-grid {
	display: grid;
	gap: 1.5px;
	background: rgba(11,11,12,0.12);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	max-width: 1200px;
	margin-inline: auto;
}
.package {
	background: var(--color-paper);
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.package--highlighted { background: var(--color-black); color: var(--color-cream); }
.package--highlighted .package__price { color: var(--color-pink); }

.faq-list {
	max-width: 800px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.faq-item {
	border-bottom: 1px solid rgba(11,11,12,0.15);
	padding-block: 1.1rem;
}
.faq-item__question {
	font-family: var(--font-display);
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after { content: '+'; float: right; color: var(--color-pink-deep); }
.faq-item[open] .faq-item__question::after { content: '–'; }
.faq-item__answer { padding-top: 0.9rem; font-size: var(--fs-small); max-width: 65ch; }

.contact-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 3rem;
}
.contact-channel {
	display: inline-flex;
	align-items: center;
	padding: 0.95rem 1.9rem;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--color-black);
	border-radius: var(--radius);
	background-image: url('../images/tape-single.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition: filter 0.2s ease;
}
.contact-channel:hover { filter: brightness(0.93); }

.contact-form { max-width: 640px; }
.contact-form p { max-width: none; margin-bottom: 1.25rem; }
.contact-form .form-row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}
@media (max-width: 560px) {
	.contact-form .form-row--2col { grid-template-columns: 1fr; }
}
.contact-form label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.5rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	background: var(--color-paper);
	border: 1.5px solid rgba(11, 11, 12, 0.3);
	border-radius: var(--radius);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--color-pink);
	outline: none;
}
.contact-form input[type="submit"] {
	display: inline-flex;
	padding: 0.95rem 1.9rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	background-image: url('../images/tape-single.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: var(--color-black);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: filter 0.2s ease;
}
.contact-form input[type="submit"]:hover { filter: brightness(0.93); }
.contact-form .wpcf7-not-valid-tip { color: var(--color-pink-deep); font-size: var(--fs-micro); margin-top: 0.35rem; }
.contact-form .wpcf7-response-output { border-radius: var(--radius); padding: 1rem; font-size: var(--fs-small); }
.contact-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: var(--fs-small);
}
.contact-form .wpcf7-acceptance input { width: auto; margin-top: 0.2rem; }

/* Honeypot-Feld gegen Formular-Spam-Bots — für echte Nutzer:innen
   unsichtbar (nicht display:none, das umgehen manche Bots gezielt). */
.contact-form .ru-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Als Filter-Chips statt als Textlink-Reihe gestaltet, damit die Zeile
   eindeutig als "hier kannst du die Kategorie wechseln" lesbar ist und
   nicht wie ein zweites Hauptmenü wirkt. Sitzt bewusst ganz oben auf der
   Seite (direkt unter dem Header, vor jedem redaktionellen Inhalt), nicht
   mehr mitten im Fließtext. */
.portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
}
.portfolio-filter a {
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius);
	border: 1px solid rgba(11, 11, 12, 0.15);
	opacity: 0.65;
	transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.portfolio-filter a:hover {
	opacity: 1;
	border-color: var(--color-pink-deep);
	background: var(--color-pink-deep);
	color: var(--color-cream);
}
.portfolio-filter a.is-active {
	opacity: 1;
	color: var(--color-cream);
	background: var(--color-ink);
	border-color: var(--color-ink);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--color-ink-muted); }
.breadcrumbs a:hover { opacity: 1; color: var(--color-pink-deep); }
.breadcrumbs span[aria-hidden] { opacity: 0.35; }
.breadcrumbs span[aria-current] { opacity: 0.75; }

.category-hero { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.category-hero__title { font-size: var(--fs-display); margin-top: 0.75rem; max-width: 16ch; }
.category-hero__lede { margin-top: 1.5rem; max-width: 62ch; }
.category-hero__lede p { font-size: var(--fs-lede); color: var(--color-ink-muted); margin-bottom: 1rem; }
.category-hero .portfolio-filter { margin-top: 2.5rem; margin-bottom: 0; }

.category-extra { max-width: 700px; }
.category-extra p { margin-bottom: 1.25rem; font-size: var(--fs-body); }

.single-shooting__header { padding-inline: var(--space-gutter); margin-bottom: 2rem; }
.single-shooting__categories { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.single-shooting__categories a {
	font-size: var(--fs-small);
	color: var(--color-pink-deep);
}
.single-shooting__gallery .wp-block-gallery { padding-inline: var(--space-gutter); }

/* ---- Signature scroll reveal (one authored moment, used deliberately) ---- */

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Portfolio grid: controlled asymmetry ---- */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5px;
	background: rgba(11, 11, 12, 0.12);
}
.portfolio-item {
	grid-column: span 3;
	aspect-ratio: 4 / 5;
}
/* 3er-Zyklus, der jede Reihe immer exakt füllt — egal wie viele Kacheln insgesamt: 4+2=6, dann eine volle Breite. */
.portfolio-item:nth-child(3n+1) { grid-column: span 4; aspect-ratio: 16 / 11; }
.portfolio-item:nth-child(3n+2) { grid-column: span 2; aspect-ratio: 4 / 5; }
.portfolio-item:nth-child(3n) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }

/* Die meisten Fotos sind Hochkant-Portraits, landen aber per Zyklus oft in
   den breiten/ultrabreiten Kacheln (16:11, 21:9) - ein mittiger Bildausschnitt
   (object-fit:cover Default) schneidet dort häufig genau durch Kopf/Hals,
   weil Personen im Hochkant-Original meist im oberen Drittel stehen, nicht
   in der vertikalen Bildmitte. Bewusster Versatz nach oben statt reinem
   Zentrieren, damit Kopf/Schultern in der breiten Kachel erhalten bleiben
   (Nutzerfeedback: "oft kopflose Frauen" im Portfolio-Raster). */
.portfolio-item:nth-child(3n+1) img,
.portfolio-item:nth-child(3n) img {
	object-position: center 22%;
}

@media (max-width: 980px) {
	/* Die schmale 2/6-Spalte (nth(3n+2)) wird auf Tablets/größeren Handys
	   zu eng, um Portraitfotos lesbar zu zeigen — daher greift der
	   Umbruch auf Einspaltig hier deutlich früher als bei anderen Grids. */
	.portfolio-grid { grid-template-columns: 1fr; }
	.portfolio-item,
	.portfolio-item:nth-child(3n+1),
	.portfolio-item:nth-child(3n+2),
	.portfolio-item:nth-child(3n) {
		grid-column: 1 / -1;
		aspect-ratio: 4 / 5;
	}
}

/* ---- Über mich ---- */

.about__intro {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--color-black);
	color: var(--color-cream);
}
@media (min-width: 900px) {
	.about__intro { grid-template-columns: 0.9fr 1.1fr; min-height: 80vh; }
}
.about__intro-media { overflow: hidden; min-height: 420px; }
.about__intro-media img { width: 100%; height: 100%; object-fit: cover; }
.about__intro-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: clamp(3rem, 6vw, 6rem) var(--space-gutter);
}
.about__intro-content .kicker { color: var(--color-rose); }
.about__title { font-size: var(--fs-display); color: var(--color-cream); }
.about__lede { font-size: var(--fs-lede); color: var(--color-rose); max-width: 40ch; }

.about__statement {
	max-width: 900px;
	padding-block: clamp(3.5rem, 6vw, 6rem);
}
.about__statement-line {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
	max-width: none;
	margin-bottom: 1.5rem;
}

.about__work-sample { line-height: 0; }
.about__work-sample img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; }

.about__city {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
	padding-block: var(--space-section);
}
@media (min-width: 900px) {
	.about__city { grid-template-columns: 0.85fr 1.15fr; }
}
.about__city-media { overflow: hidden; }
.about__city-media img { width: 100%; height: auto; display: block; }
.about__spots {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(11,11,12,0.12);
}
.about__spots li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(11,11,12,0.12);
	font-size: var(--fs-small);
}
.about__spots li span:first-child { font-family: var(--font-display); font-weight: 600; }
.about__spots li span:last-child { color: var(--color-ink-muted); text-align: right; }

.about__principles-grid {
	display: grid;
	gap: 1.5px;
	background: rgba(246, 238, 227, 0.1);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.about__principles-grid > div {
	background: var(--color-black-soft);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.about__principles-index {
	display: block;
	font-family: var(--font-display);
	font-size: 2.5rem;
	color: var(--color-pink-deep);
	margin-bottom: 0.5rem;
}
.about__principles-grid h3 { font-size: var(--fs-h3); margin-bottom: 0.75rem; }

.about__rebrand-note {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 0.6vw + 0.95rem, 1.35rem);
	font-weight: 500;
	color: var(--color-ink);
	opacity: 0.7;
	margin-bottom: 1.75rem;
}
.about__rebrand-note del {
	text-decoration: none;
	position: relative;
	opacity: 0.55;
}
.about__rebrand-note del::after {
	content: '';
	position: absolute;
	left: -2%;
	right: -2%;
	top: 52%;
	height: 2px;
	background: var(--color-pink);
	transform: rotate(-2deg);
}

.about__cta { text-align: left; }
.about__cta .btn { margin-top: 1.5rem; }

/* Modifier für die volle .container-Breite (Leistungsseiten, Shooting-
   Einzelseiten, Produktseite) - dort wirkt linksbündig (Standard oben, für
   Kontakt/Über-mich mit ihrer schmaleren max-width:900px-Spalte gedacht)
   auf 1440px Breite verloren/asymmetrisch. Zusätzlich eine Trennlinie nach
   oben, da hier oft eine andere dunkle Sektion (z.B. Testimonials) direkt
   vorausgeht und beide sonst optisch zu einem Block verschmelzen. */
.about__cta--wide {
	text-align: center;
	border-top: 1px solid rgba(246, 238, 227, 0.15);
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
/* Jedes <p> hier erbt global p{max-width:68ch} - ohne margin-inline:auto
   haengt dessen Inhalt (Fliesstext, aber auch eingebettete Links/Buttons wie
   den FAQ-Ghost-Link) trotz text-align:center sichtbar links, weil die Box
   selbst schmaler als der Container bleibt (dasselbe Muster wie beim
   Footer-CTA und der "Kostenlose Erstberatung"-Zeile). */
.about__cta--wide p { margin-inline: auto; }

@media (max-width: 640px) {
	.category-index__item { flex-basis: 100%; }
	.billing { grid-template-columns: 1fr; }
}

.consent-banner {
	position: fixed;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 100;
	max-width: 640px;
	margin: 0 auto;
	background: var(--color-black);
	color: var(--color-cream);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.consent-banner[hidden] {
	display: none;
}
.consent-banner__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}
.consent-banner__text {
	flex: 1 1 320px;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
	color: var(--color-rose);
}
.consent-banner__text a {
	color: var(--color-cream);
	text-decoration: underline;
}
.consent-banner__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.consent-banner .btn,
.consent-banner .btn--ghost {
	padding: 0.65rem 1.25rem;
	font-size: 0.85rem;
}
.consent-banner__links {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(246, 238, 227, 0.15);
}
.consent-banner__links a {
	font-size: 0.78rem;
	color: var(--color-cream);
	opacity: 0.6;
	text-decoration: underline;
}
.consent-banner__links a:hover { opacity: 0.9; }

@media (max-width: 640px) {
	.consent-banner {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		padding: 1.25rem;
	}
}

/* Lightbox — ein Klick auf ein Portfolio-Bild öffnet direkt die volle
   Galerie dieses Shootings, statt erst auf die Einzelseite zu navigieren. */
body.lightbox-open { overflow: hidden; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba( 11, 11, 12, 0.96 );
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox__stage {
	max-width: min(90vw, 1100px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--radius);
}
.lightbox__caption {
	color: var(--color-cream);
	opacity: 0.7;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	margin: 0;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
	position: fixed;
	background: transparent;
	border: none;
	color: var(--color-cream);
	cursor: pointer;
	line-height: 1;
}
.lightbox__close {
	top: 1.5rem;
	right: 1.5rem;
	font-size: 2.5rem;
}
.lightbox__prev,
.lightbox__next {
	top: 50%;
	transform: translateY( -50% );
	font-size: 3rem;
	padding: 0.5rem 1rem;
}
.lightbox__prev { left: 0.5rem; }
.lightbox__next { right: 0.5rem; }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--color-pink); }

@media (max-width: 640px) {
	.lightbox__prev, .lightbox__next { font-size: 2rem; padding: 0.5rem; }
	.lightbox__close { top: 1rem; right: 1rem; font-size: 2rem; }
}

/* Blog — Journal-Artikel (Übersicht + Einzelansicht).
   Bildgeführt statt reine Text-Liste, passend zur Fotografie-Website, die
   sich sonst konsequent über echte Bilder trägt. Bewusst mit Hover-Zoom auf
   den Bildern (im Gegensatz zur "kein Hover-Zoom auf Portfolio-Bildern"-
   Regel): Journal-Karten sind redaktionelle Artikel-Teaser, kein Foto-
   Portfolio — dieselbe Interaktions-Sprache wie bei Artist-Spotlight-Fotos. */

.blog-index__intro { text-align: center; max-width: 700px; margin-inline: auto; }
/* margin-inline:auto vorbeugend gegen dasselbe Zentrierungs-Problem wie
   beim Footer-CTA und der "Kostenlose Erstberatung"-Zeile: globales
   p{max-width:68ch} macht die Box schmaler als .blog-index__intro (700px),
   ohne auto-Margin haengt der Text dann trotz text-align:center links. */
.blog-index__lede { color: var(--color-ink-muted); font-size: var(--fs-lede); margin: 1rem auto 0; }

.blog-feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
	border-bottom: 1px solid rgba(11, 11, 12, 0.1);
}
@media (min-width: 800px) {
	.blog-feature { grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2.5rem, 4vw, 4rem); }
}
.blog-feature__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--color-black-soft); }
.blog-feature__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s var(--ease-out-expo);
}
.blog-feature:hover .blog-feature__media img { transform: scale(1.03); }
.blog-feature__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem);
	line-height: 1.1;
	margin-top: 0.6rem;
}
.blog-feature__excerpt { font-size: var(--fs-lede); color: var(--color-ink-muted); margin-top: 1rem; max-width: 50ch; }
.blog-feature__cta {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--color-pink-deep);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5px;
	background: rgba(11,11,12,0.12);
	max-width: 1200px;
	margin-inline: auto;
}
.blog-card {
	background: var(--color-paper);
	display: flex;
	flex-direction: column;
}
.blog-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-black-soft); }
.blog-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s var(--ease-out-expo);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body {
	padding: 1.75rem 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.blog-card__date {
	font-size: var(--fs-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pink-deep);
}
.blog-card__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.25;
}
.blog-card__title a { color: inherit; }
.blog-card__excerpt { font-size: var(--fs-small); color: var(--color-ink-muted); max-width: 45ch; }

.single-post__hero {
	position: relative;
	height: clamp(45vh, 60vh, 640px);
	overflow: hidden;
}
.single-post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-post__hero-scrim {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(2rem, 5vw, 3.5rem) var(--space-gutter) clamp(2rem, 4vw, 3rem);
	background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.75) 55%, rgba(11,11,12,0.95) 100%);
}
.single-post__title {
	font-family: var(--font-display);
	font-weight: 650;
	font-size: clamp(2rem, 2.4vw + 1.4rem, 3.5rem);
	color: var(--color-cream);
	max-width: 22ch;
	line-height: 1.05;
}
.single-post__date { font-size: var(--fs-small); color: var(--color-rose); margin-top: 0.75rem; }

.blog-post {
	max-width: 68ch;
	margin-inline: auto;
	padding-inline: var(--space-gutter);
}
.blog-post h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1vw + 1.3rem, 1.9rem);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}
.blog-post h3 {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 0.6vw + 1.1rem, 1.4rem);
	margin-top: 2rem;
	margin-bottom: 0.85rem;
}
.blog-post p { margin-bottom: 1.15rem; line-height: 1.75; }
.blog-post p:first-of-type { margin-top: 0; }
.blog-post strong { color: var(--color-ink); }

/* ---- Artist-Spotlight (Musiker & Artist-Editorial) ----
   Bewusst dunkler, redaktioneller als die übrigen Leistungen-Kategorien —
   Zielpublikum sind Künstler:innen, kein Boudoir-/Familienangebot. */

.artist-spotlight { background: var(--color-black); color: var(--color-cream); }

.artist-spotlight__hero {
	position: relative;
	height: clamp(60vh, 80vh, 900px);
	overflow: hidden;
}
.artist-spotlight__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-spotlight__hero-scrim {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(2rem, 5vw, 4rem) var(--space-gutter) clamp(2.5rem, 5vw, 4rem);
	background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.75) 55%, rgba(11,11,12,0.95) 100%);
}
.artist-spotlight__name {
	font-family: var(--font-display);
	font-weight: 650;
	font-size: var(--fs-display);
	color: var(--color-cream);
	margin-top: 0.5rem;
	line-height: 1;
}
.artist-spotlight__role {
	font-size: var(--fs-lede);
	color: var(--color-rose);
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
}

/* Bewusst direkt unter dem Hero, deutlich sichtbar (Kicker + große
   Schrift) — die Bio darf nicht in der Foto-Strecke untergehen. */
.artist-spotlight__bio {
	max-width: 68ch;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(246, 238, 227, 0.1);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.artist-spotlight__bio p {
	font-size: var(--fs-lede);
	color: var(--color-cream);
	line-height: 1.6;
	margin-top: 0.9rem;
	margin-bottom: 1.75rem;
}

.artist-spotlight__strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5px;
	background: rgba(246, 238, 227, 0.1);
}
.artist-spotlight__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; grid-column: span 1; }
.artist-spotlight__photo--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.artist-spotlight__photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s var(--ease-out-expo);
}
.artist-spotlight__photo:hover img { transform: scale(1.03); }

@media (max-width: 640px) {
	.artist-spotlight__strip { grid-template-columns: 1fr; }
	.artist-spotlight__photo,
	.artist-spotlight__photo--wide { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
}

/* ---- Artist-Übersicht (Musiker & Artist-Editorial Kategorie-Seite) ---- */

.artist-grid-section {
	background: var(--color-black);
	color: var(--color-cream);
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 6vw, 6rem);
}
.artist-grid-section .breadcrumbs { margin-bottom: 2rem; }
.artist-grid-section .breadcrumbs a { color: var(--color-rose); }
.artist-grid-section .breadcrumbs a:hover { opacity: 1; color: var(--color-pink); }
.artist-grid-section .breadcrumbs span[aria-hidden] { opacity: 0.35; }
.artist-grid-section .breadcrumbs span[aria-current] { opacity: 0.75; }

.artist-grid-section__title {
	font-size: var(--fs-display);
	color: var(--color-cream);
	margin-top: 0.75rem;
	max-width: 18ch;
}
.artist-grid-section__lede {
	font-size: var(--fs-lede);
	color: var(--color-rose);
	max-width: 55ch;
	margin-top: 1.25rem;
}

.artist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(3rem, 5vw, 4rem);
}
.artist-card { display: block; }
.artist-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-black-soft);
}
.artist-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s var(--ease-out-expo);
}
.artist-card:hover .artist-card__media img { transform: scale(1.04); }
.artist-card__meta { padding-top: 1.1rem; }
.artist-card__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--color-cream);
}
.artist-card__role {
	display: block;
	font-size: var(--fs-small);
	color: var(--color-rose);
	margin-top: 0.25rem;
}

/* ---- Pakete-CTA: AIDA "Action" direkt nach der Preisübersicht — räumt
   die typischen Zögerlichkeiten (Kosten? Verbindlich? Wie schnell?) sofort
   aus, statt sie unbeantwortet zu lassen, bis man ganz unten ankommt. ---- */
.pakete-cta { text-align: center; }
.pakete-cta__reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin-top: 2rem;
	font-size: var(--fs-small);
	color: var(--color-rose);
}
.pakete-cta__reassurance li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.pakete-cta__reassurance li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-pink);
	flex-shrink: 0;
}

/* ---- Hero-R-Animation (Logo wandert von der Hero-Position in die Navbar) ----
   Reiner Deko-Layer über dem echten, normal im DOM stehenden Hero-Content
   (SEO-Pflicht: H1/Text existieren unabhängig von dieser Animation). Nur
   transform wird animiert, siehe assets/js/hero-logo-animation.js. */

.hero-anim-ref {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}

/* Vollflächige schwarze Fläche hinter dem Logo (deckt die gesamte Seite ab,
   nicht nur den Hero) - löst sich zum Ende der Scroll-Strecke auf, damit
   im Header kein schwarzer Kasten neben dem fertig platzierten Logo
   hängen bleibt. */
#hero-logo-backdrop {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--color-black);
	z-index: 64; /* unter Header (65) und Logo (66), über allem sonstigen Seiteninhalt */
	pointer-events: none;
	will-change: opacity;
}

#hero-logo-wrap {
	position: fixed;
	top: 0;
	left: 0;
	transform-origin: top left;
	z-index: 66; /* über .site-header (65), landet sichtbar auf dem Nav-Logo */
	pointer-events: none;
	will-change: transform;
}
#hero-logo-wrap img { display: block; width: 100%; height: auto; }

/* Dezenter Hinweis, dass die Seite scrollbar ist - verschwindet zügig,
   sobald tatsächlich gescrollt wird (siehe hero-logo-animation.js). Gleiche
   Ebene wie #hero-logo-backdrop (64), aber danach im DOM eingefügt und
   dadurch sichtbar darüber. */
/* War ein Maus-Scrollrad-Icon (Pille + wandernder Punkt) - direkt unter dem
   grossen R wirkte das wie ein loses, kaum lesbares Anhaengsel statt einem
   klaren "scroll runter"-Signal, zumal ein Maus-Symbol auf Mobile (kein
   Mausrad vorhanden) ohnehin nicht passt (Nutzerfeedback). Jetzt ein
   simpler, eindeutiger Pfeil nach unten. Nur transform wird per CSS
   animiert, nie opacity - das setzt weiterhin hero-logo-animation.js per
   Inline-Style (Ausblenden beim tatsaechlichen Scrollen); beides zusammen
   animiert haette sich sonst gegenseitig ueberschrieben. */
#hero-scroll-hint {
	position: fixed;
	left: 50%;
	bottom: 2.5rem;
	z-index: 64;
	color: var(--color-cream);
	opacity: 0.6;
	pointer-events: none;
	will-change: opacity, transform;
	animation: hero-scroll-hint-bounce 1.6s ease-in-out infinite;
}
#hero-scroll-hint span {
	display: block;
	width: 14px;
	height: 14px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
@keyframes hero-scroll-hint-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	#hero-logo-backdrop { display: none; }
	#hero-logo-wrap { display: none; }
	#hero-scroll-hint { display: none; }
}

/* ---- WooCommerce (Gutschein-Produkt) ----
   Überschreibt die generischen WooCommerce-Standardstile, damit Produkt-
   seite/Warenkorb/Kasse sich wie ein Teil der Seite anfühlen, nicht wie
   ein fremdes Plugin-UI. Bewusst nur die Elemente gestylt, die dieses eine
   Produkt (Fotoshooting-Gutschein) tatsächlich braucht - kein volles
   Shop-Archiv-Theming, da (noch) kein Produktkatalog existiert. */

.woocommerce .product {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (min-width: 900px) {
	.woocommerce .product { grid-template-columns: 1fr 1fr; }
}
/* .woocommerce-tabs (Beschreibung/Zusätzliche Informationen) ist ein
   drittes Kind von .product, direkt nach Galerie und Summary - würde ohne
   das hier einfach in die erste Grid-Spalte rutschen (zweite Zeile, Spalte
   1) statt über die volle Breite zu gehen, und alle eigenen Farbwechsel-
   Sections in der Produktbeschreibung wären dadurch auf die halbe Breite
   eingequetscht. */
.woocommerce .woocommerce-tabs {
	grid-column: 1 / -1;
}

.woocommerce .woocommerce-product-gallery {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-cream-dim);
}
.woocommerce .woocommerce-product-gallery img { display: block; width: 100%; height: auto; }

.woocommerce .product_title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	margin: 0 0 1rem;
}
.woocommerce .woocommerce-product-details__short-description {
	font-size: var(--fs-lede);
	opacity: 0.85;
	margin-bottom: 1.5rem;
}
.woocommerce .price {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--color-pink-deep);
	margin-bottom: 1.5rem;
}
.woocommerce .price del { opacity: 0.5; font-size: 0.7em; margin-right: 0.5rem; }

.woocommerce table.variations {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: separate;
	border-spacing: 0 1rem;
}
.woocommerce table.variations label {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.woocommerce table.variations select {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	background: var(--color-paper);
	border: 1.5px solid rgba(11, 11, 12, 0.3);
	border-radius: var(--radius);
}
.woocommerce table.variations select:focus { border-color: var(--color-pink); outline: none; }
.woocommerce table.variations tr { display: block; }
.woocommerce a.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: var(--fs-micro);
	color: var(--color-ink);
	opacity: 0.6;
}

.woocommerce .woocommerce-variation-price .price {
	font-size: var(--fs-h3);
	margin-bottom: 0;
}
.woocommerce .woocommerce-variation {
	padding: 1.25rem;
	background: var(--color-cream-dim);
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
}

.woocommerce .quantity input {
	width: 4.5rem;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	background: var(--color-paper);
	border: 1.5px solid rgba(11, 11, 12, 0.3);
	border-radius: var(--radius);
}
.woocommerce .cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.9rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	color: var(--color-black);
	border: none;
	border-radius: var(--radius);
	background-color: var(--color-pink);
	background-image: url('../images/tape-single.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: filter 0.2s ease;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { filter: brightness(0.93); }
.woocommerce .single_add_to_cart_button.disabled { opacity: 0.5; pointer-events: none; }

.woocommerce .woocommerce-product-details__short-description ul {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--fs-small);
	opacity: 1;
}

/* Warenkorb & Kasse: Tabellen/Formulare auf dieselbe Eingabe-Optik heben. */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid rgba(11, 11, 12, 0.1);
}
.woocommerce .woocommerce-form-login input[type="text"],
.woocommerce .woocommerce-form-login input[type="password"],
.woocommerce .woocommerce-billing-fields input[type="text"],
.woocommerce .woocommerce-billing-fields input[type="email"],
.woocommerce .woocommerce-billing-fields input[type="tel"],
.woocommerce .woocommerce-additional-fields textarea,
.woocommerce #order_comments {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	background: var(--color-paper);
	border: 1.5px solid rgba(11, 11, 12, 0.3);
	border-radius: var(--radius);
}
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	list-style: none;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--color-cream-dim);
	border-left: 3px solid var(--color-pink);
	margin-bottom: 1.5rem;
}

/* Bricht ein verschachteltes Element bis zur vollen Viewport-Breite aus
   seinem umgebenden .container aus - gebraucht für die farbigen Section-
   Wechsel (.section--rose/.section--dark) innerhalb der Produktbeschreibung
   in single-product.php, die (anders als bei Kategorie-Seiten) tief in
   WooCommerces eigener Tab-Struktur verschachtelt liegen und sonst nur
   als eingefärbte Box innerhalb der Textspalte erscheinen würden, statt
   randlos wie auf den übrigen Unterseiten. */
.section-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

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

/* ---- Studio Guide (Lead-Magnet auf der Boudoir-Seite) ---- */
.studio-guide {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}
@media (min-width: 800px) {
	.studio-guide { grid-template-columns: 1.2fr 1fr; }
}
.studio-guide__form .wpcf7-form-control-wrap { display: block; }
.studio-guide__form .wpcf7 p { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.studio-guide__form input[type="email"] { flex: 1 1 220px; min-width: 0; }
.studio-guide__form input[type="submit"] { flex-shrink: 0; }
.studio-guide__hint { margin-top: 0.75rem; font-size: var(--fs-micro); opacity: 0.6; }
.studio-guide__form .wpcf7-not-valid-tip { color: var(--color-pink-deep); font-size: var(--fs-micro); margin-top: 0.35rem; }
.studio-guide__form .wpcf7-response-output { margin-top: 1rem; border-radius: var(--radius); padding: 0.85rem 1rem; font-size: var(--fs-small); border: 1.5px solid rgba(11,11,12,0.15); }

/* Nitropack-Branding-Banner ausblenden - taucht offenbar nur fuer
   eingeloggte Admins auf (im anonymen Test nicht im DOM sichtbar), daher
   mehrere plausible Selektorvarianten gleichzeitig, um sicher zu treffen. */
div[id*="nitropack" i],
div[class*="nitropack" i],
a[href*="nitropack.io" i],
.nitropack-footer-badge,
#nitropack-badge {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}