/* =========================================================================
   Glow & Bloom – Hauptstylesheet
   -------------------------------------------------------------------------
   Gestaltungsregeln dieses Themes:

   1. Gold ist reserviert. Es markiert ausschliesslich Interaktion und den
      System-Index. Gold wird niemals dekorativ eingesetzt.
   2. Trennung erfolgt ueber Haarlinien in Champagner, nicht ueber Schatten,
      Rahmen oder Fuellflaechen.
   3. Ecken sind scharf. Der Bogen ist rund, die Oberflaeche ist es nicht.
   4. Bewegung ist langsam und einmalig. Nichts pulsiert, nichts wiederholt sich.

   Farb- und Schriftwerte stammen aus theme.json. Die Hex-Werte hier sind nur
   Rueckfallebene. Wer Farben aendern will, aendert theme.json.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
	/*
	 * Farben
	 *
	 * Die Basis ist bewusst kein Weiss, sondern ein warmes Creme. Reines Weiss
	 * wirkt am Bildschirm technisch und kuehl. Der warme Grundton traegt die
	 * Marke auch dann, wenn noch kein Foto auf der Seite ist.
	 */
	--glow-porcelain: var(--wp--preset--color--porcelain, #FBF7F1);
	--glow-creme: var(--wp--preset--color--creme, #F1E9DC);
	--glow-champagner: var(--wp--preset--color--champagner, #DECFB6);
	--glow-champagner-deep: var(--wp--preset--color--champagner-tief, #C4AC84);
	--glow-gold: var(--wp--preset--color--gold, #A8894C);
	--glow-gold-light: var(--wp--preset--color--gold-light, #C9AE79);
	--glow-anthrazit: var(--wp--preset--color--anthrazit, #1E1D1B);
	--glow-anthrazit-soft: var(--wp--preset--color--anthrazit-soft, #57534C);

	/* Haarlinien */
	--glow-rule: rgba(74, 57, 32, 0.17);
	--glow-rule-strong: rgba(74, 57, 32, 0.30);
	--glow-rule-light: rgba(222, 207, 182, 0.24);

	/* Schrift */
	--glow-font-display: var(--wp--preset--font-family--display, "Bodoni Moda", Didot, "Times New Roman", serif);
	--glow-font-ui: var(--wp--preset--font-family--ui, "Jost", "Helvetica Neue", Arial, sans-serif);

	/* Groessen */
	--glow-fs-label: 0.6875rem;
	--glow-fs-small: 0.875rem;
	--glow-fs-body: 1.0625rem;
	--glow-fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--glow-fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	--glow-fs-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
	--glow-fs-h1: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
	--glow-fs-display: clamp(2.75rem, 1.5rem + 6vw, 6.5rem);

	/*
	 * Zwei getrennte Werte, und das mit Absicht:
	 * --glow-header-h     bestimmt die Hoehe des Innenbereichs (Sollwert)
	 * --glow-header-total ist die gemessene Gesamthoehe inklusive Trennlinie
	 *
	 * Wuerde das Skript den gemessenen Wert in --glow-header-h zurueckschreiben,
	 * entstuende eine Rueckkopplung: Die Trennlinie macht den Header 1 px hoeher
	 * als seinen Innenbereich, der Header wuerde bei jeder Messung um 1 px
	 * wachsen. Deshalb liest das Skript nur und schreibt nie in den Sollwert.
	 */

	/* Bildausschnitt, im Customizer überschreibbar */
	--glow-img-ratio: auto;
	--glow-img-fit: contain;
	--glow-img-height: auto;
	--glow-price-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--glow-preview-h: 34svh;

	/* Raster */
	--glow-container: 1400px;
	--glow-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--glow-section-y: clamp(5rem, 3rem + 8vw, 10rem);
	--glow-header-h: 76px;
	--glow-header-total: 77px;

	/* Bewegung */
	--glow-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--glow-dur-fast: 220ms;
	--glow-dur-slow: 900ms;
}

@media (min-width: 1180px) {
	:root {
		--glow-header-h: 92px;
		--glow-header-total: 93px;
	}
}

/* -------------------------------------------------------------------------
   2. Reset und Basis
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--glow-header-total) + 1.5rem);
}

body.glow-body {
	margin: 0;
	background-color: var(--glow-porcelain);
	color: var(--glow-anthrazit);
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-body);
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.glow-nav-open {
	overflow: hidden;
}

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

figure {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-family: var(--glow-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p {
	margin: 0 0 1.25em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

strong {
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */

.glow-main {
	display: block;
	min-height: 50vh;
}

body:not(.glow-has-overlay-header) .glow-main {
	padding-top: var(--glow-header-total);
}

.glow-container {
	width: 100%;
	max-width: var(--glow-container);
	margin-inline: auto;
	padding-inline: var(--glow-gutter);
}

.glow-container--narrow {
	max-width: 860px;
}

.glow-section {
	padding-block: var(--glow-section-y);
}

.glow-section--tight {
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

.glow-section--creme {
	background-color: var(--glow-creme);
}

/* -------------------------------------------------------------------------
   5. Bewegung
   -------------------------------------------------------------------------
   Der versteckte Ausgangszustand gilt nur, wenn JavaScript aktiv ist. Ohne
   JavaScript bleiben alle Inhalte sichtbar.
   ------------------------------------------------------------------------- */

.glow-js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity var(--glow-dur-slow) var(--glow-ease),
		transform var(--glow-dur-slow) var(--glow-ease);
	will-change: opacity, transform;
}

.glow-js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* -------------------------------------------------------------------------
   6. Buttons und Links
   ------------------------------------------------------------------------- */

.glow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: 3.5rem;
	padding: 0 2.5rem;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: var(--glow-anthrazit);
	color: var(--glow-porcelain);
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	transition:
		background-color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease,
		color var(--glow-dur-fast) ease;
}

.glow-btn:hover,
.glow-btn:focus-visible {
	background-color: var(--glow-gold);
	border-color: var(--glow-gold);
	color: var(--glow-porcelain);
}

/*
 * Versalien mit weiter Sperrung erzeugen rechts einen Leerraum in Hoehe des
 * letzten Sperrungswertes. Die negative Marge gleicht ihn aus, damit die
 * Beschriftung optisch mittig im Button steht.
 */
.glow-btn__label {
	display: inline-block;
	margin-inline-end: -0.18em;
}

.glow-btn--solid {
	background-color: var(--glow-anthrazit);
	border-color: var(--glow-anthrazit);
	color: var(--glow-porcelain);
}

.glow-btn--ghost {
	background-color: transparent;
	border-color: var(--glow-rule-strong);
	color: var(--glow-anthrazit);
}

.glow-btn--ghost:hover,
.glow-btn--ghost:focus-visible {
	background-color: transparent;
	border-color: var(--glow-gold);
	color: var(--glow-gold);
}

.glow-btn--light {
	background-color: transparent;
	border-color: var(--glow-rule-light);
	color: var(--glow-porcelain);
}

.glow-btn--light:hover,
.glow-btn--light:focus-visible {
	background-color: var(--glow-gold);
	border-color: var(--glow-gold);
	color: var(--glow-porcelain);
}

.glow-btn--sm {
	min-height: 2.875rem;
	padding: 0 1.625rem;
	letter-spacing: 0.16em;
}

.glow-btn--block {
	display: flex;
	width: 100%;
}

.glow-link {
	color: inherit;
	border-bottom: 1px solid var(--glow-rule);
	padding-bottom: 0.1em;
	transition:
		color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-link:hover,
.glow-link:focus-visible {
	color: var(--glow-gold-light);
	border-color: var(--glow-gold);
}

/* -------------------------------------------------------------------------
   7. System-Index (Signatur des Themes)
   -------------------------------------------------------------------------
   Der Index benennt die drei austauschbaren Ebenen einer Kulisse. Er ist
   damit inhaltlich begruendet und nicht dekorativ.
   ------------------------------------------------------------------------- */

.glow-index {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	font-size: var(--glow-fs-label);
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

.glow-index__item {
	white-space: nowrap;
}

.glow-index__sep {
	color: var(--glow-gold);
}

.glow-index--light {
	color: rgba(253, 252, 250, 0.6);
}

.glow-index--light .glow-index__sep {
	color: var(--glow-gold-light);
}

/* -------------------------------------------------------------------------
   8. Header
   ------------------------------------------------------------------------- */

.glow-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	background-color: var(--glow-porcelain);
	border-bottom: 1px solid var(--glow-rule);
	transition:
		background-color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease,
		color var(--glow-dur-fast) ease;
}

.glow-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	height: var(--glow-header-h);
	max-width: var(--glow-container);
	margin-inline: auto;
	padding-inline: var(--glow-gutter);
}

/* Ueberlagerter Zustand auf der Startseite. */
.glow-header--overlay {
	background-color: transparent;
	border-bottom-color: transparent;
	color: var(--glow-porcelain);
}

.glow-header.is-scrolled {
	background-color: var(--glow-porcelain);
	border-bottom-color: var(--glow-rule);
	color: var(--glow-anthrazit);
}

.glow-header__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* Wortmarke */
.glow-brand {
	margin: 0;
}

.glow-brand__link {
	display: inline-block;
}

.glow-brand__word {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	font-family: var(--glow-font-display);
	font-weight: 400;
	font-size: clamp(0.9375rem, 0.78rem + 0.6vw, 1.25rem);
	letter-spacing: clamp(0.15em, 0.06em + 0.45vw, 0.3em);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--glow-dur-fast) ease;
}

.glow-brand__part {
	white-space: nowrap;
}

/*
 * Das Und-Zeichen traegt in einer Didone die meiste Zeichnung des gesamten
 * Alphabets. Es wird deshalb nicht mitgesperrt, sondern eigenstaendig gesetzt:
 * eine Spur kleiner, ohne Sperrung, mit eigenem Nachabstand.
 */
.glow-brand__amp {
	font-size: 0.88em;
	letter-spacing: 0;
	margin-inline-end: 0.3em;
}

.glow-brand--header .glow-brand__link:hover .glow-brand__word,
.glow-brand--header .glow-brand__link:focus-visible .glow-brand__word {
	color: var(--glow-gold);
}

.glow-brand--header .custom-logo {
	max-height: calc(var(--glow-header-h) - 40px);
	width: auto;
}

/* Hauptnavigation */
/*
 * min-width: 0 ist entscheidend. Ohne diese Zeile schrumpft eine Rasterspalte
 * nicht unter die Breite ihres Inhalts – die Navigation liefe dann unter den
 * Anfrage-Knopf und einzelne Punkte verschwänden unbemerkt.
 */
.glow-nav {
	display: none;
	justify-self: center;
	min-width: 0;
}

.glow-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(0.875rem, 1.6vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-nav__list > li {
	flex: 0 1 auto;
	min-width: 0;
}

.glow-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: 0.5rem;
	font-size: clamp(0.6875rem, 0.6rem + 0.15vw, 0.75rem);
	font-weight: 400;
	letter-spacing: clamp(0.1em, 0.05em + 0.2vw, 0.18em);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--glow-dur-fast) ease;
}

.glow-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--glow-dur-fast) var(--glow-ease);
}

.glow-nav__list a:hover,
.glow-nav__list a:focus-visible {
	color: var(--glow-gold);
}

.glow-nav__list a:hover::after,
.glow-nav__list a:focus-visible::after {
	transform: scaleX(1);
}

.glow-nav__list .current-menu-item > a,
.glow-nav__list .current_page_item > a,
.glow-nav__list .current-menu-parent > a {
	color: var(--glow-gold);
}

.glow-nav__list .current-menu-item > a::after,
.glow-nav__list .current_page_item > a::after,
.glow-nav__list .current-menu-parent > a::after {
	transform: scaleX(1);
}

/* Aktionen rechts */
.glow-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-self: end;
}

.glow-header__cta {
	display: none;
}

.glow-header--overlay:not(.is-scrolled) .glow-header__cta .glow-btn {
	background-color: transparent;
	border-color: rgba(253, 252, 250, 0.45);
	color: var(--glow-porcelain);
}

.glow-header--overlay:not(.is-scrolled) .glow-header__cta .glow-btn:hover,
.glow-header--overlay:not(.is-scrolled) .glow-header__cta .glow-btn:focus-visible {
	background-color: var(--glow-porcelain);
	border-color: var(--glow-porcelain);
	color: var(--glow-anthrazit);
}

@media (min-width: 1180px) {
	.glow-nav {
		display: block;
	}

	.glow-header__cta {
		display: block;
	}
}

/* Burger */
.glow-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-end: -0.5rem;
}

.glow-burger__lines {
	position: relative;
	display: block;
	width: 26px;
	height: 10px;
}

.glow-burger__line {
	position: absolute;
	inset-inline: 0;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--glow-dur-fast) var(--glow-ease);
}

.glow-burger__line:first-child {
	top: 0;
}

.glow-burger__line:last-child {
	bottom: 0;
}

.glow-burger[aria-expanded="true"] .glow-burger__line:first-child {
	transform: translateY(4.5px) rotate(45deg);
}

.glow-burger[aria-expanded="true"] .glow-burger__line:last-child {
	transform: translateY(-4.5px) rotate(-45deg);
}

@media (min-width: 1180px) {
	.glow-burger {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   9. Vollbild-Navigation
   ------------------------------------------------------------------------- */

.glow-navpanel {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	background-color: var(--glow-porcelain);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--glow-dur-fast) ease,
		visibility var(--glow-dur-fast) ease;
}

.glow-navpanel.is-open {
	opacity: 1;
	visibility: visible;
}

.glow-navpanel__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	width: 100%;
	max-width: var(--glow-container);
	margin-inline: auto;
	padding: calc(var(--glow-header-total) + 2.5rem) var(--glow-gutter) 3rem;
	overflow-y: auto;
}

.glow-navpanel__nav {
	flex: 1 1 auto;
}

.glow-navpanel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-navpanel__list li {
	border-bottom: 1px solid var(--glow-rule);
}

.glow-navpanel__list li:first-child {
	border-top: 1px solid var(--glow-rule);
}

.glow-navpanel__list a {
	display: block;
	padding-block: 1.125rem;
	font-family: var(--glow-font-display);
	font-size: clamp(1.75rem, 1.2rem + 3.5vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition:
		opacity 500ms var(--glow-ease),
		transform 500ms var(--glow-ease),
		color var(--glow-dur-fast) ease;
}

.glow-navpanel.is-open .glow-navpanel__list a {
	opacity: 1;
	transform: none;
}

.glow-navpanel__list li:nth-child(1) a { transition-delay: 60ms; }
.glow-navpanel__list li:nth-child(2) a { transition-delay: 110ms; }
.glow-navpanel__list li:nth-child(3) a { transition-delay: 160ms; }
.glow-navpanel__list li:nth-child(4) a { transition-delay: 210ms; }
.glow-navpanel__list li:nth-child(5) a { transition-delay: 260ms; }
.glow-navpanel__list li:nth-child(6) a { transition-delay: 310ms; }
.glow-navpanel__list li:nth-child(7) a { transition-delay: 360ms; }
.glow-navpanel__list li:nth-child(8) a { transition-delay: 410ms; }

.glow-navpanel__list a:hover,
.glow-navpanel__list a:focus-visible {
	color: var(--glow-gold);
}

.glow-navpanel__list .current-menu-item > a {
	color: var(--glow-gold);
}

.glow-navpanel__foot {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.glow-navpanel__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.glow-navpanel__line {
	margin: 0;
	font-size: var(--glow-fs-small);
	color: var(--glow-anthrazit-soft);
}

@media (min-width: 1180px) {
	.glow-navpanel {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------------------- */

.glow-footer {
	background-color: var(--glow-anthrazit);
	color: rgba(253, 252, 250, 0.78);
}

.glow-footer__inner {
	max-width: var(--glow-container);
	margin-inline: auto;
	padding: clamp(4rem, 2.5rem + 5vw, 7rem) var(--glow-gutter) 2.5rem;
}

.glow-footer__lead {
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-bottom: 1px solid var(--glow-rule-light);
}

.glow-footer .glow-brand--footer {
	margin-bottom: 1.25rem;
}

/*
 * Die Wortmarke auf dunklem Grund steht in Gold – aber im aufgehellten Ton.
 * Das dunklere #A8894C wirkt auf fast schwarzem Untergrund bräunlich und
 * stumpf. Metallische Farben müssen auf dunklem Grund aufgehellt werden,
 * sonst kippen sie ins Schlammige.
 */
.glow-footer .glow-brand--footer .glow-brand__word {
	flex-wrap: wrap;
	white-space: normal;
	font-size: clamp(1.75rem, 1rem + 3.6vw, 3.25rem);
	letter-spacing: 0.2em;
	color: var(--glow-gold-light);
}

.glow-footer .glow-brand--footer .glow-brand__link:hover .glow-brand__word,
.glow-footer .glow-brand--footer .glow-brand__link:focus-visible .glow-brand__word {
	color: var(--glow-porcelain);
}

.glow-footer__tagline {
	max-width: 42ch;
	margin: 0 0 1.5rem;
	font-size: var(--glow-fs-lead);
	line-height: 1.55;
	color: rgba(253, 252, 250, 0.86);
}

.glow-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-bottom: 1px solid var(--glow-rule-light);
}

@media (min-width: 640px) {
	.glow-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.glow-footer__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
}

.glow-footer__col {
	min-width: 0;
}

.glow-footer__col--contact .glow-footer__list,
.glow-footer__col--cta {
	line-height: 1.6;
}

.glow-footer__heading {
	margin: 0 0 1.25rem;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--glow-champagner);
}

.glow-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: var(--glow-fs-small);
}

.glow-footer__list a {
	transition: color var(--glow-dur-fast) ease;
}

.glow-footer__list a:hover,
.glow-footer__list a:focus-visible {
	color: var(--glow-gold-light);
}

.glow-footer__note {
	margin: 0 0 1.5rem;
	font-size: var(--glow-fs-small);
	line-height: 1.6;
}

.glow-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(253, 252, 250, 0.5);
}

.glow-footer__copy,
.glow-footer__origin {
	margin: 0;
}

/* -------------------------------------------------------------------------
   11. Inhaltsbausteine der Fallback-Templates
   ------------------------------------------------------------------------- */

.glow-pagehead {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.glow-pagehead__title {
	margin: 0 0 1rem;
	font-size: var(--glow-fs-h1);
}

.glow-pagehead__text {
	max-width: 62ch;
	color: var(--glow-anthrazit-soft);
}

.glow-entry {
	margin: 0;
}

.glow-entry__media {
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.glow-entry__content > * + * {
	margin-top: 1.25em;
}

.glow-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

@media (min-width: 720px) {
	.glow-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.glow-listitem {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.glow-listitem__media img {
	width: 100%;
	transition: transform 1200ms var(--glow-ease);
}

.glow-listitem__media {
	overflow: hidden;
}

.glow-listitem:hover .glow-listitem__media img {
	transform: scale(1.03);
}

.glow-listitem__body {
	display: flex;
	flex-direction: column;
}

.glow-listitem__title {
	margin: 0 0 0.5rem;
	font-size: var(--glow-fs-h3);
}

.glow-listitem__title a {
	transition: color var(--glow-dur-fast) ease;
}

.glow-listitem__title a:hover,
.glow-listitem__title a:focus-visible {
	color: var(--glow-gold);
}

.glow-listitem__text {
	margin: 0;
	color: var(--glow-anthrazit-soft);
	font-size: var(--glow-fs-small);
}

.glow-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.75rem;
	padding-block: 2rem;
}

.glow-empty__text {
	max-width: 52ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	color: var(--glow-anthrazit-soft);
}

.glow-pagination {
	margin-top: clamp(3rem, 2rem + 3vw, 5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--glow-rule);
	font-size: var(--glow-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.glow-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.glow-pagination a {
	transition: color var(--glow-dur-fast) ease;
}

.glow-pagination a:hover,
.glow-pagination a:focus-visible {
	color: var(--glow-gold);
}

.glow-pagination .current {
	color: var(--glow-gold);
}

.glow-pagelinks {
	margin-top: 2rem;
	font-size: var(--glow-fs-small);
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
   12. Zugaenglichkeit
   ------------------------------------------------------------------------- */

.glow-skip {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 200;
	padding: 0.875rem 1.5rem;
	background-color: var(--glow-anthrazit);
	color: var(--glow-porcelain);
	font-size: var(--glow-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transform: translateY(-200%);
	transition: transform var(--glow-dur-fast) var(--glow-ease);
}

.glow-skip:focus {
	transform: translateY(0);
}

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

.glow-footer :focus-visible,
.glow-header--overlay:not(.is-scrolled) :focus-visible {
	outline-color: var(--glow-gold-light);
}

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

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* -------------------------------------------------------------------------
   13. Reduzierte Bewegung
   ------------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.glow-js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.glow-navpanel__list a {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   14. Block-Editor-Bruecke
   -------------------------------------------------------------------------
   Sorgt dafuer, dass Beitraege im Editor genauso aussehen wie im Frontend.
   ------------------------------------------------------------------------- */

.editor-styles-wrapper {
	background-color: var(--glow-porcelain);
	font-family: var(--glow-font-ui);
	font-weight: 300;
}

.wp-block-image img {
	display: block;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--glow-champagner);
	opacity: 1;
}

/* -------------------------------------------------------------------------
   15. Druck
   ------------------------------------------------------------------------- */

@media print {
	.glow-header,
	.glow-navpanel,
	.glow-skip,
	.glow-footer__grid,
	.glow-pagination {
		display: none !important;
	}

	/* Auf Papier bleibt das Signet sichtbar und wird einfarbig gesetzt. */
	.glow-signet--footer {
		color: #000;
		opacity: 1;
	}

	body.glow-body {
		background: #fff;
		color: #000;
	}

	.glow-main {
		padding-top: 0;
	}
}

/* =========================================================================
   PHASE 2 – Sektionsbausteine
   -------------------------------------------------------------------------
   Es gelten dieselben vier Regeln wie oben: Gold nur fuer Interaktion,
   Trennung ueber Haarlinien, scharfe Ecken, Bewegung langsam und einmalig.
   ========================================================================= */

/* -------------------------------------------------------------------------
   16. Sektionsvarianten
   ------------------------------------------------------------------------- */

.glow-section--top {
	padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.glow-section--flush {
	padding-bottom: 0;
}

.glow-section__action {
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* -------------------------------------------------------------------------
   17. Sektionskopf und Kennzeichnung
   ------------------------------------------------------------------------- */

.glow-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.25rem;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

.glow-eyebrow::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background-color: var(--glow-champagner);
}

.glow-eyebrow--light {
	color: rgba(253, 252, 250, 0.78);
}

.glow-eyebrow--light::before {
	background-color: rgba(253, 252, 250, 0.5);
}

.glow-sectionhead {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.glow-sectionhead__title {
	max-width: 20ch;
	margin: 0 0 1rem;
	font-size: var(--glow-fs-h2);
}

.glow-sectionhead__text {
	max-width: 58ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	color: var(--glow-anthrazit-soft);
}

.glow-sectionhead__index {
	margin-top: 1.75rem;
}

/* -------------------------------------------------------------------------
   18. Hero
   ------------------------------------------------------------------------- */

.glow-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 88vh;
	min-height: clamp(34rem, 88svh, 56rem);
	padding-top: var(--glow-header-total);
	background-color: var(--glow-anthrazit);
	color: var(--glow-porcelain);
	overflow: hidden;
}

.glow-hero--plain {
	min-height: clamp(28rem, 70svh, 44rem);
}

.glow-hero__media {
	position: absolute;
	inset: 0;
}

.glow-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Zwei Verlaeufe: oben, damit die Navigation auf hellen Bildern lesbar bleibt,
 * unten, damit die Ueberschrift steht. Beide sind so schwach wie moeglich
 * gehalten – das Bild soll das Bild bleiben.
 */
.glow-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, rgba(18, 17, 15, 0.55) 0%, rgba(18, 17, 15, 0) 26%),
		linear-gradient(to top, rgba(18, 17, 15, 0.74) 0%, rgba(18, 17, 15, 0.18) 46%, rgba(18, 17, 15, 0) 72%);
}

.glow-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	width: 100%;
	max-width: var(--glow-container);
	margin-inline: auto;
	padding: clamp(3rem, 2rem + 4vw, 5rem) var(--glow-gutter) clamp(1.5rem, 1rem + 1vw, 2rem);
}

.glow-hero__title {
	max-width: 20ch;
	margin: 0 0 1.5rem;
	font-size: var(--glow-fs-display);
	line-height: 1.02;
}

.glow-hero__text {
	max-width: 46ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	color: rgba(253, 252, 250, 0.88);
}

.glow-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.glow-hero__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
	border-top: 1px solid rgba(253, 252, 250, 0.22);
}

.glow-hero__scroll {
	margin: 0;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(253, 252, 250, 0.6);
}

.glow-btn--invert {
	background-color: var(--glow-porcelain);
	border-color: var(--glow-porcelain);
	color: var(--glow-anthrazit);
}

.glow-btn--invert:hover,
.glow-btn--invert:focus-visible {
	background-color: var(--glow-gold);
	border-color: var(--glow-gold);
	color: var(--glow-porcelain);
}

/* -------------------------------------------------------------------------
   19. Vorteile als Spezifikationsliste
   ------------------------------------------------------------------------- */

.glow-features {
	margin: 0;
}

.glow-features__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-top: 1px solid var(--glow-rule);
}

.glow-features__row:last-child {
	border-bottom: 1px solid var(--glow-rule);
}

@media (min-width: 860px) {
	.glow-features__row {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 3rem;
	}
}

.glow-features__term {
	margin: 0;
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.glow-features__desc {
	max-width: 58ch;
	margin: 0;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   20. Raster und Kollektionskarte
   ------------------------------------------------------------------------- */

.glow-grid {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.glow-grid--cards {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.glow-grid--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.glow-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.glow-card {
	margin: 0;
}

.glow-card__link {
	display: block;
}

.glow-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--glow-img-ratio);
	background-color: var(--glow-creme);
}

.glow-card__media img {
	width: 100%;
	height: var(--glow-img-height);
	object-fit: var(--glow-img-fit);
	transition: transform 1200ms var(--glow-ease);
}

.glow-card__link:hover .glow-card__media img,
.glow-card__link:focus-visible .glow-card__media img {
	transform: scale(1.04);
}

.glow-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--glow-champagner);
}

.glow-card__body {
	padding-top: 1.25rem;
}

.glow-card__title {
	margin: 0 0 0.75rem;
	font-size: var(--glow-fs-h3);
	transition: color var(--glow-dur-fast) ease;
}

.glow-card__link:hover .glow-card__title,
.glow-card__link:focus-visible .glow-card__title {
	color: var(--glow-gold);
}

/* -------------------------------------------------------------------------
   21. Ablaufschritte
   -------------------------------------------------------------------------
   Die Ziffern sind in Champagner gesetzt und bewusst zurueckgenommen. Sie
   ordnen, sie draengen sich nicht auf. Gold bleibt der Interaktion vorbehalten.
   ------------------------------------------------------------------------- */

.glow-steps {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-steps__item {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	border-top: 1px solid var(--glow-rule);
}

.glow-steps__item:last-child {
	border-bottom: 1px solid var(--glow-rule);
}

@media (min-width: 900px) {
	.glow-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		border-top: 1px solid var(--glow-rule);
		border-bottom: 1px solid var(--glow-rule);
	}

	.glow-steps__item {
		padding: 2.5rem 2rem 2.5rem 0;
		border-top: 0;
	}

	.glow-steps__item:last-child {
		padding-right: 0;
		border-bottom: 0;
	}

	.glow-steps__item + .glow-steps__item {
		padding-left: 2rem;
		border-left: 1px solid var(--glow-rule);
	}
}

.glow-steps__number {
	display: block;
	margin-bottom: 0.875rem;
	font-family: var(--glow-font-display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--glow-champagner-deep);
}

.glow-steps__title {
	margin: 0 0 0.625rem;
	font-size: var(--glow-fs-h3);
}

.glow-steps__text {
	margin: 0;
	font-size: var(--glow-fs-small);
	line-height: 1.65;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   22. Zweispalter mit Bild
   ------------------------------------------------------------------------- */

.glow-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.glow-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.glow-split--single {
	grid-template-columns: 1fr;
}

.glow-split__media img {
	width: 100%;
	aspect-ratio: var(--glow-img-ratio);
	height: var(--glow-img-height);
	object-fit: var(--glow-img-fit);
}

.glow-split__body .glow-sectionhead {
	margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   23. Liste ohne Symbole
   ------------------------------------------------------------------------- */

.glow-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-checklist__item {
	padding-block: 0.9375rem;
	border-bottom: 1px solid var(--glow-rule);
}

.glow-checklist__item:first-child {
	border-top: 1px solid var(--glow-rule);
}

/* -------------------------------------------------------------------------
   24. Haeufige Fragen
   ------------------------------------------------------------------------- */

.glow-faq__item {
	border-bottom: 1px solid var(--glow-rule);
}

.glow-faq__item:first-child {
	border-top: 1px solid var(--glow-rule);
}

.glow-faq__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
	cursor: pointer;
	list-style: none;
	transition: color var(--glow-dur-fast) ease;
}

.glow-faq__question::-webkit-details-marker {
	display: none;
}

.glow-faq__question:hover,
.glow-faq__question:focus-visible {
	color: var(--glow-gold);
}

.glow-faq__label {
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Plus, das sich beim Oeffnen zu einem Minus schliesst. */
.glow-faq__marker {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	align-self: center;
}

.glow-faq__marker::before,
.glow-faq__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
}

.glow-faq__marker::after {
	transform: rotate(90deg);
	transition: transform var(--glow-dur-fast) var(--glow-ease);
}

.glow-faq__item[open] .glow-faq__marker::after {
	transform: rotate(0deg);
}

.glow-faq__answer {
	max-width: 62ch;
	padding-bottom: clamp(1.5rem, 1rem + 1vw, 2rem);
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   25. Abschlussblock
   ------------------------------------------------------------------------- */

.glow-closing {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-top: 1px solid var(--glow-rule);
	border-bottom: 1px solid var(--glow-rule);
}

@media (min-width: 900px) {
	.glow-closing {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		align-items: end;
	}
}

.glow-closing__title {
	max-width: 18ch;
	margin: 0 0 1rem;
	font-size: var(--glow-fs-h2);
}

.glow-closing__text {
	max-width: 48ch;
	margin: 0;
	color: var(--glow-anthrazit-soft);
}

.glow-closing__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.glow-closing__aside {
		align-items: flex-end;
		text-align: right;
	}
}

.glow-closing__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--glow-fs-small);
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   26. Filter nach Anlass
   ------------------------------------------------------------------------- */

.glow-filter {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--glow-rule);
}

.glow-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-filter__link {
	display: inline-block;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid transparent;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
	transition:
		color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-filter__link:hover,
.glow-filter__link:focus-visible,
.glow-filter__link.is-current {
	color: var(--glow-gold);
	border-bottom-color: var(--glow-gold);
}

/* -------------------------------------------------------------------------
   27. Technische Angaben
   ------------------------------------------------------------------------- */

.glow-specs {
	margin: 0;
}

.glow-specs__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	padding-block: 0.9375rem;
	border-bottom: 1px solid var(--glow-rule);
}

.glow-specs__row:first-child {
	border-top: 1px solid var(--glow-rule);
}

@media (min-width: 480px) {
	.glow-specs__row {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		gap: 1.5rem;
		align-items: baseline;
	}
}

.glow-specs__label {
	margin: 0;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

.glow-specs__value {
	margin: 0;
}

/* -------------------------------------------------------------------------
   28. Detailseite einer Kollektion
   ------------------------------------------------------------------------- */

.glow-single,
.glow-page {
	margin: 0;
}

.glow-single__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.glow-single__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.glow-single__title {
	margin: 0 0 1.25rem;
	font-size: var(--glow-fs-h1);
}

.glow-single__index {
	margin-bottom: 1.75rem;
}

.glow-single__lead {
	max-width: 46ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	color: var(--glow-anthrazit-soft);
}

.glow-single__actions {
	margin-top: clamp(2rem, 1.5rem + 1vw, 2.75rem);
}

.glow-single__media img {
	width: 100%;
	aspect-ratio: var(--glow-img-ratio);
	height: var(--glow-img-height);
	object-fit: var(--glow-img-fit);
}

.glow-single__detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

@media (min-width: 900px) {
	.glow-single__detail {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}
}

.glow-single__subhead {
	margin: 0 0 1.25rem;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--glow-anthrazit);
}

.glow-single__aside > * + .glow-single__subhead {
	margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
}

/* -------------------------------------------------------------------------
   29. Einzelseite
   ------------------------------------------------------------------------- */

.glow-pagehead__lead {
	max-width: 56ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	color: var(--glow-anthrazit-soft);
}

.glow-page__media {
	margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
}

.glow-page__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   30. Redaktionelle Inhalte aus dem Block-Editor
   ------------------------------------------------------------------------- */

.glow-entry__content > * + * {
	margin-top: 1.5em;
}

.glow-entry__content h2 {
	margin-top: 1.8em;
	font-size: var(--glow-fs-h3);
}

.glow-entry__content h3 {
	margin-top: 1.6em;
	font-size: 1.375rem;
}

.glow-entry__content ul,
.glow-entry__content ol {
	padding-inline-start: 1.25em;
}

.glow-entry__content li + li {
	margin-top: 0.5em;
}

.glow-entry__content a {
	border-bottom: 1px solid var(--glow-rule);
	transition:
		color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-entry__content a:hover,
.glow-entry__content a:focus-visible {
	color: var(--glow-gold);
	border-bottom-color: var(--glow-gold);
}

.glow-entry__content img {
	width: 100%;
}

/* -------------------------------------------------------------------------
   31. Ergaenzende Containerregeln
   -------------------------------------------------------------------------
   Rasterelemente brauchen min-width: 0, sonst sprengen lange Woerter oder
   Bilder die Spalte. Das ist der haeufigste Grund fuer horizontales Scrollen
   auf Mobilgeraeten.
   ------------------------------------------------------------------------- */

.glow-hero__content {
	max-width: 62rem;
}

.glow-closing__body,
.glow-single__intro,
.glow-single__body {
	min-width: 0;
}

.glow-filter__item {
	margin: 0;
}

/* -------------------------------------------------------------------------
   32. Konditionshinweis am Anfrage-Button
   -------------------------------------------------------------------------
   Die Kaution steht bewusst direkt neben der Handlungsaufforderung und nicht
   im Kleingedruckten. Eine Bedingung, die man erst nach der Zusage erfaehrt,
   kostet mehr Vertrauen, als sie an Anfragen einbringt.
   ------------------------------------------------------------------------- */

.glow-closing__note {
	max-width: 34ch;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--glow-rule);
	font-size: var(--glow-fs-label);
	line-height: 1.7;
	letter-spacing: 0.06em;
	color: var(--glow-anthrazit-soft);
}

/* =========================================================================
   PHASE 3 – Formular, Hinweise, Preise
   ========================================================================= */

/* -------------------------------------------------------------------------
   33. Formular
   -------------------------------------------------------------------------
   Eingabefelder mit Haarlinienrahmen statt Fülllfläche. Beim Fokus wechselt
   die Linie auf Gold – auch hier gilt: Gold bedeutet, dass etwas passiert.
   ------------------------------------------------------------------------- */

.glow-form {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.glow-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 1rem + 1vw, 2rem);
}

@media (min-width: 640px) {
	.glow-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.glow-field--wide {
		grid-column: 1 / -1;
	}
}

.glow-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	min-width: 0;
}

.glow-field__label {
	font-size: var(--glow-fs-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

.glow-field__req {
	color: var(--glow-gold);
}

.glow-field__input {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--glow-rule-strong);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--glow-font-ui);
	font-size: 1rem;
	font-weight: 300;
	color: var(--glow-anthrazit);
	transition:
		border-color var(--glow-dur-fast) ease,
		background-color var(--glow-dur-fast) ease;
	appearance: none;
}

textarea.glow-field__input {
	min-height: 9rem;
	line-height: 1.6;
	resize: vertical;
}

select.glow-field__input {
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) calc(50% + 2px), calc(100% - 1rem) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.glow-field__input::placeholder {
	color: var(--glow-anthrazit-soft);
	opacity: 0.65;
}

.glow-field__input:hover {
	border-color: var(--glow-gold-light);
}

.glow-field__input:focus {
	outline: none;
	border-color: var(--glow-gold);
	background-color: rgba(255, 255, 255, 0.5);
}

.glow-field__input:focus-visible {
	outline: 2px solid var(--glow-gold);
	outline-offset: 2px;
}

.glow-field.has-error .glow-field__input {
	border-color: #8C3A2B;
}

.glow-field__error {
	font-size: var(--glow-fs-small);
	line-height: 1.5;
	color: #8C3A2B;
}

/* Falle für automatische Ausfüller. Nicht display:none – manche Programme
   überspringen versteckte Felder gezielt. */
.glow-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.glow-field--check {
	margin-top: clamp(1.75rem, 1.25rem + 1vw, 2.5rem);
}

.glow-check {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	cursor: pointer;
}

.glow-check input[type="checkbox"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.25rem;
	border: 1px solid var(--glow-rule-strong);
	border-radius: 0;
	background-color: transparent;
	appearance: none;
	cursor: pointer;
	transition:
		background-color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-check input[type="checkbox"]:checked {
	border-color: var(--glow-gold);
	background-color: var(--glow-gold);
	background-image: linear-gradient(45deg, transparent 46%, var(--glow-porcelain) 46%, var(--glow-porcelain) 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--glow-porcelain) 46%, var(--glow-porcelain) 54%, transparent 54%);
}

.glow-check__text {
	font-size: var(--glow-fs-small);
	line-height: 1.65;
	color: var(--glow-anthrazit-soft);
}

.glow-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	padding-top: clamp(1.75rem, 1.25rem + 1vw, 2.5rem);
	border-top: 1px solid var(--glow-rule);
}

.glow-form__hint {
	max-width: 44ch;
	margin: 0;
	font-size: var(--glow-fs-small);
	line-height: 1.6;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   34. Rückmeldungen
   ------------------------------------------------------------------------- */

.glow-notice {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-left: 2px solid var(--glow-gold);
	background-color: var(--glow-creme);
}

.glow-notice--error {
	border-left-color: #8C3A2B;
}

/*
 * Die Erfolgsmeldung behält das Gold. Sie ist der einzige Ort, an dem Gold
 * nicht Interaktion markiert, sondern deren Ergebnis – die Anfrage ist raus.
 */
.glow-notice--success {
	border-left-color: var(--glow-gold);
}

.glow-notice__title {
	margin: 0 0 0.5rem;
	font-size: var(--glow-fs-h3);
}

.glow-notice__text {
	max-width: 60ch;
	margin: 0;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   35. Preise
   ------------------------------------------------------------------------- */

.glow-price {
	margin: 0;
}

.glow-price__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 2rem;
	align-items: baseline;
	padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-bottom: 1px solid var(--glow-rule);
}

.glow-price__row:first-child {
	border-top: 1px solid var(--glow-rule);
}

.glow-price__label {
	margin: 0;
	min-width: 0;
}

.glow-price__name {
	display: block;
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	line-height: 1.2;
}

.glow-price__note {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--glow-fs-small);
	color: var(--glow-anthrazit-soft);
}

/*
 * Erläuterung unter einer Preiszeile. Gleiche Rolle wie __note, aber innerhalb
 * der Zeile statt darunter – deshalb eine eigene Klasse und kein Doppelname.
 */
.glow-price__text {
	display: block;
	max-width: 52ch;
	margin-top: 0.25rem;
	font-size: var(--glow-fs-small);
	line-height: 1.55;
	color: var(--glow-anthrazit-soft);
}

.glow-price__value {
	margin: 0;
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	line-height: 1.2;
	white-space: nowrap;
}

.glow-price--compact .glow-price__name,
.glow-price--compact .glow-price__value {
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-body);
	font-weight: 400;
}

.glow-price--compact .glow-price__row {
	padding-block: 0.875rem;
}

.glow-pricegroup {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.glow-pricegroup .glow-price__note {
	max-width: 68ch;
	margin-top: 1.25rem;
}

.glow-pricefoot {
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--glow-rule);
}

.glow-pricefoot__line {
	max-width: 62ch;
	margin: 0 0 0.75rem;
	font-size: var(--glow-fs-small);
	line-height: 1.7;
	color: var(--glow-anthrazit-soft);
}

.glow-pricefoot__line:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   36. Erweiterungen
   ------------------------------------------------------------------------- */

.glow-upgrades__media {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.glow-upgrades__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.glow-upgrades {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 860px) {
	.glow-upgrades {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 1px solid var(--glow-rule);
	}
}

.glow-upgrades__item {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	border-top: 1px solid var(--glow-rule);
}

.glow-upgrades__item:last-child {
	border-bottom: 1px solid var(--glow-rule);
}

@media (min-width: 860px) {
	.glow-upgrades__item {
		padding: 2.5rem 2.5rem 2.5rem 0;
		border-top: 0;
		border-bottom: 0;
	}

	.glow-upgrades__item + .glow-upgrades__item {
		padding-inline: 2.5rem 0;
		border-left: 1px solid var(--glow-rule);
	}

	.glow-upgrades {
		border-bottom: 1px solid var(--glow-rule);
	}
}

.glow-upgrades__title {
	margin: 0 0 0.75rem;
	font-size: var(--glow-fs-h3);
}

.glow-upgrades__text {
	max-width: 46ch;
	margin: 0;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   37. Auswahlfeld für Erweiterungen
   ------------------------------------------------------------------------- */

.glow-field--extras {
	margin: 0 0 clamp(1.5rem, 1rem + 1vw, 2rem);
	padding: 0;
	border: 0;
	border-top: 1px solid var(--glow-rule);
	padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
}

.glow-field--extras .glow-field__label {
	padding: 0;
}

.glow-field--extras .glow-field__hint {
	margin-bottom: 1rem;
}

.glow-field--extras .glow-check + .glow-check {
	margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
   38. Varianten einer Kollektion
   ------------------------------------------------------------------------- */

.glow-variants {
	margin: 0 0 clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
	padding: 0;
	list-style: none;
}

.glow-variants__item {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--glow-rule);
}

.glow-variants__item:first-child {
	border-top: 1px solid var(--glow-rule);
}

.glow-variants__name {
	margin: 0 0 0.25rem;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-small);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.glow-variants__price {
	margin: 0 0 0.5rem;
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	line-height: 1.1;
}

.glow-variants__text {
	max-width: 42ch;
	margin: 0;
	font-size: var(--glow-fs-small);
	line-height: 1.6;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   38. Signet
   -------------------------------------------------------------------------
   Das Zeichen erbt über currentColor die Farbe seiner Umgebung. Dadurch
   genügt eine einzige Fassung für hellen und dunklen Grund.
   ------------------------------------------------------------------------- */

.glow-signet {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	color: currentColor;
}

.glow-signet__l {
	font-family: var(--glow-font-display);
	font-size: 46px;
}

.glow-signet__a {
	font-family: var(--glow-font-display);
	font-size: 30px;
}

/*
 * Im Footer steht das Signet über der Wortmarke – als Schlusszeichen, mit dem
 * die Marke die Seite beendet. Es sitzt in Champagner, damit die Wortmarke
 * darunter die Hauptsache bleibt.
 */
.glow-signet--footer {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.75rem;
	color: var(--glow-champagner);
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   39. Konfigurator
   -------------------------------------------------------------------------
   Die Auswahlfelder selbst sind unsichtbar, sichtbar ist das zugehörige
   Etikett. Dadurch wird die ganze Karte zur Schaltfläche – auf dem Handy der
   Unterschied zwischen treffen und danebentippen. Der Tastaturfokus bleibt
   erhalten, weil das Feld nicht ausgeblendet, sondern nur verdeckt wird.
   ------------------------------------------------------------------------- */

.glow-config__step {
	margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
	padding: 0;
	border: 0;
	border-top: 1px solid var(--glow-rule);
	padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
}

.glow-config__legend {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0;
	margin-bottom: 1.25rem;
}

.glow-config__nummer {
	font-family: var(--glow-font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--glow-champagner-deep);
}

.glow-config__frage {
	font-family: var(--glow-font-display);
	font-size: var(--glow-fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.glow-config__optionen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 700px) {
	.glow-config__optionen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Das Feld liegt unter dem Etikett statt display:none – sonst wäre es für die
 * Tastatur nicht mehr erreichbar.
 */
.glow-config__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.glow-config__karte {
	display: block;
	padding: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
	background-color: var(--glow-porcelain);
	border: 1px solid var(--glow-rule);
	cursor: pointer;
	transition:
		border-color var(--glow-dur-fast) ease,
		background-color var(--glow-dur-fast) ease;
}

.glow-config__karte:hover {
	border-color: var(--glow-rule-strong);
}

.glow-config__radio:checked + .glow-config__karte {
	border-color: var(--glow-gold);
	box-shadow: inset 0 0 0 1px var(--glow-gold);
}

.glow-config__radio:focus-visible + .glow-config__karte {
	outline: 2px solid var(--glow-gold);
	outline-offset: 3px;
}

.glow-config__titel {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--glow-font-display);
	font-size: 1.375rem;
	line-height: 1.2;
}

.glow-config__text {
	display: block;
	font-size: var(--glow-fs-small);
	line-height: 1.6;
	color: var(--glow-anthrazit-soft);
}

/*
 * Ohne JavaScript bleibt der bedingte Schritt sichtbar – lieber eine Frage zu
 * viel als eine Auswahl, die niemand treffen kann.
 */
.glow-js .glow-config__step--bedingt[hidden] {
	display: none;
}

.glow-config__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
	border-top: 1px solid var(--glow-rule);
}

.glow-config__eyebrow {
	margin-bottom: 0.75rem;
}

/*
 * Rangfolge im Abschlussblock: Der Preis ist die Zahl, nach der gesucht wird,
 * also führt er. Die Zusammenstellung darunter bestätigt nur die Auswahl und
 * tritt entsprechend zurück.
 */
.glow-config__zusammenfassung {
	max-width: 40ch;
	margin: 0;
	font-size: var(--glow-fs-lead);
	line-height: 1.4;
	color: var(--glow-anthrazit-soft);
}

/* Übernommene Auswahl im Anfrageformular */
.glow-config__uebernahme {
	padding: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
	background-color: var(--glow-creme);
	border-left: 2px solid var(--glow-gold);
}

.glow-config__uebernahme-text {
	margin: 0 0 0.5rem;
	font-family: var(--glow-font-display);
	font-size: 1.25rem;
	line-height: 1.3;
}

.glow-config__ergebnis {
	min-width: 0;
}

/*
 * Bild in der Auswahlkarte. Der Innenabstand der Karte wird für das Bild
 * aufgehoben, damit es bündig bis an die Ränder läuft.
 */
.glow-config__karte:has(.glow-config__bild) {
	padding: 0;
}

.glow-config__bild {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--glow-img-ratio);
	background-color: var(--glow-creme);
}

.glow-config__bild img {
	width: 100%;
	height: var(--glow-img-height);
	object-fit: var(--glow-img-fit);
	transition: transform 1200ms var(--glow-ease);
}

.glow-config__karte:hover .glow-config__bild img {
	transform: scale(1.03);
}

.glow-config__karte:has(.glow-config__bild) .glow-config__titel,
.glow-config__karte:has(.glow-config__bild) .glow-config__text {
	padding-inline: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
}

.glow-config__karte:has(.glow-config__bild) .glow-config__titel {
	padding-top: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
}

.glow-config__karte:has(.glow-config__bild) .glow-config__text {
	padding-bottom: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
}

.glow-config__preis {
	margin: 0 0 0.375rem;
	font-family: var(--glow-font-display);
	font-size: var(--glow-price-size);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--glow-anthrazit);
}

.glow-config__preis:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   40. Bildausschnitt
   -------------------------------------------------------------------------
   Steht die Darstellung auf "vollständig", bleibt seitlich Fläche frei. Sie
   wird in Creme gefüllt, damit kein Loch entsteht.
   ------------------------------------------------------------------------- */

.glow-card__media,
.glow-config__bild,
.glow-single__media,
.glow-split__media {
	background-color: var(--glow-creme);
}

/* -------------------------------------------------------------------------
   41. Vorschau im Konfigurator
   -------------------------------------------------------------------------
   Auf breiten Bildschirmen bleibt das Bild beim Scrollen stehen, während man
   die Schritte durchgeht. Auf schmalen steht es oben und bleibt am oberen
   Rand kleben – sonst wählt man Blumen aus, ohne sie zu sehen.
   ------------------------------------------------------------------------- */

.glow-config__buehne {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

@media (min-width: 900px) {
	.glow-config__buehne {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
	}

	/*
	 * Bild und Angaben stehen in einer gemeinsamen Spalte und wandern
	 * zusammen mit, während man rechts die Schritte durchgeht. Das Formular
	 * ist deutlich höher als die Spalte – ohne Mitwandern stünde die Vorschau
	 * bei den letzten Fragen längst außerhalb des Bildes.
	 */
	.glow-config__spalte {
		grid-column: 1;
		position: sticky;
		top: calc(var(--glow-header-total) + 1.5rem);
	}

	.glow-config__daten {
		margin-top: 1rem;
	}

	.glow-config {
		grid-column: 2;
	}
}

/*
 * Am Rechner steht das Bild fest neben den Schritten – dort ist beides
 * gleichzeitig sichtbar, ein Mitwandern brächte nichts und wirkt unruhig.
 * Das Klebeverhalten gilt nur auf schmalen Displays, wo Bild und Auswahl
 * untereinander stehen.
 */
.glow-config__vorschau {
	position: static;
}

.glow-config__vorschaubild {
	margin: 0;
	overflow: hidden;
	background-color: var(--glow-porcelain);
	border: 1px solid var(--glow-rule);
}

.glow-config__vorschaubild img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--glow-dur-fast) ease;
}

.glow-config__vorschauleer {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	background-color: var(--glow-creme);
}

.glow-config__vorschautext {
	margin: 1rem 0 0;
	font-size: var(--glow-fs-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--glow-anthrazit);
}

/*
 * Auf schmalen Displays darf die Vorschau nicht kleben. Am Rechner steht sie
 * neben den Schritten und kostet keinen Platz – auf dem Handy steht sie
 * darüber und würde den gesamten Bildschirm belegen. Dann sieht man die
 * Auswahlkarten nicht mehr, die man treffen soll.
 */
/*
 * Auf dem Handy bleibt nur das Bild stehen, und zwar flach. Es soll die
 * Auswahl begleiten, nicht den Bildschirm belegen – Bildunterschrift,
 * Hinweis und Maße stehen deshalb unter dem Formular und scrollen mit.
 */
@media (max-width: 899px) {
	/*
	 * display: contents hebt die Spalte als Kasten auf – Bild und Angaben
	 * werden dadurch zu direkten Rasterfeldern und lassen sich einzeln
	 * anordnen. So bleibt das Bild oben kleben, während die Angaben unter
	 * das Formular rutschen.
	 */
	.glow-config__spalte {
		display: contents;
	}

	.glow-config__vorschau {
		order: 1;
	}

	.glow-config {
		order: 2;
	}

	.glow-config__daten {
		order: 3;
	}

	.glow-config__vorschau {
		position: sticky;
		top: var(--glow-header-total);
		z-index: 1;
		padding-block: 0.5rem;
		margin-inline: calc(var(--glow-gutter) * -1);
		padding-inline: var(--glow-gutter);
		background-color: var(--glow-creme);
		box-shadow: 0 12px 16px -12px rgba(30, 29, 27, 0.28);
	}

	/*
	 * Das Bild behält sein Seitenverhältnis und wird nur in der Höhe begrenzt.
	 * Der Rahmen zieht sich auf die Bildbreite zusammen, statt den Bildschirm
	 * zu füllen – dadurch entstehen keine leeren Flächen neben dem Motiv, und
	 * beschnitten wird trotzdem nichts.
	 */
	.glow-config__vorschaubild {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		background-color: transparent;
		border: 0;
	}

	.glow-config__vorschaubild img,
	.glow-config__vorschauleer {
		display: block;
		height: var(--glow-preview-h);
		max-height: 360px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		aspect-ratio: auto;
	}

	/* Der Platzhalter ohne Bild braucht eine eigene Breite. */
	.glow-config__vorschauleer {
		width: 60vw;
		background-color: var(--glow-porcelain);
	}

	.glow-config__daten {
		margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
		padding-top: 1.25rem;
		border-top: 1px solid var(--glow-rule);
	}
}

/* -------------------------------------------------------------------------
   42. Lupe auf dem Vorschaubild
   -------------------------------------------------------------------------
   Der Ausschnitt folgt dem Mauszeiger, damit man gezielt die Rosen oder die
   Paneelstruktur ansehen kann. Nur dort aktiv, wo es einen Mauszeiger gibt –
   auf Berührungsgeräten gäbe es keinen Weg, den Zoom wieder zu verlassen.
   ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.glow-config__vorschaubild {
		cursor: zoom-in;
	}

	.glow-config__vorschaubild img {
		transform-origin: var(--glow-zoom-x, 50%) var(--glow-zoom-y, 50%);
		transition: transform 400ms var(--glow-ease);
		will-change: transform;
	}

	.glow-config__vorschaubild.is-zoom img {
		transform: scale(2);
		transition-duration: 200ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glow-config__vorschaubild.is-zoom img {
		transform: none;
	}
}

/* Technische Angaben unter der Vorschau */
.glow-config__angabenblock {
	margin-top: clamp(1.5rem, 1rem + 1vw, 2rem);
}

.glow-config__angaben[hidden] {
	display: none;
}

/*
 * Ohne JavaScript werden beide Listen gezeigt. Damit klar bleibt, welche zu
 * welcher Ausstattung gehört, bekommt jede eine Überschrift – aber nur dann.
 */
.glow-js .glow-config__angaben + .glow-config__angaben {
	margin-top: 0;
}

.glow-config__angaben + .glow-config__angaben {
	margin-top: 1.5rem;
}

/* Technische Angaben unter dem Vorschaubild */
.glow-config__angaben {
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--glow-rule);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: var(--glow-fs-small);
	color: var(--glow-anthrazit-soft);
}

.glow-config__angaben:empty {
	display: none;
}


/* -------------------------------------------------------------------------
   43. Impressionen
   ------------------------------------------------------------------------- */

.glow-gallery__hinweis {
	max-width: 56ch;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--glow-rule);
	font-size: var(--glow-fs-small);
	color: var(--glow-anthrazit-soft);
}

.glow-gallery .wp-block-gallery {
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.glow-gallery .wp-block-image img,
.glow-gallery .wp-block-gallery img {
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   44. Technische Angaben im Konfigurator
   -------------------------------------------------------------------------
   Ohne JavaScript stehen beide Blöcke untereinander. Damit dann erkennbar
   bleibt, welcher wozu gehört, bekommt jeder eine Beschriftung – mit
   aktivem JavaScript ist sie überflüssig und wird ausgeblendet.
   ------------------------------------------------------------------------- */

.glow-config__angabenblock {
	margin-top: 0.875rem;
}

.glow-config__angaben[hidden] {
	display: none;
}

.glow-config__angaben + .glow-config__angaben {
	margin-top: 1.25rem;
}

/*
 * Hinweis unter dem Preis. Klein genug, um den Betrag nicht zu stören, groß
 * genug, um vor dem Klick gelesen zu werden – dort gehört er hin, nicht ins
 * Kleingedruckte.
 */
.glow-config__preishinweis {
	max-width: 42ch;
	margin: 0.375rem 0 0.75rem;
	font-size: var(--glow-fs-small);
	line-height: 1.5;
	color: var(--glow-anthrazit-soft);
}

/*
 * Zusicherung über dem Anfrageformular. Steht bewusst vor dem ersten Feld:
 * Wer befürchtet, sich mit dem Absenden zu binden, füllt gar nicht erst aus.
 */
.glow-form__zusicherung {
	max-width: 62ch;
	margin: 0 0 clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	padding: clamp(1rem, 0.75rem + 0.75vw, 1.375rem);
	border-left: 2px solid var(--glow-champagner);
	background-color: var(--glow-creme);
	font-size: var(--glow-fs-small);
	line-height: 1.6;
	color: var(--glow-anthrazit-soft);
}

/* Kennzeichnung freiwilliger Felder */
.glow-field__optional {
	margin-left: 0.5em;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

/* -------------------------------------------------------------------------
   45. Rechtstexte
   -------------------------------------------------------------------------
   Andere Anforderungen als redaktionelle Seiten: Man liest nicht von vorn nach
   hinten, sondern sucht einen bestimmten Absatz. Deshalb ein sichtbares
   Inhaltsverzeichnis, klar abgesetzte Paragrafen und eine ruhige Druckfassung.
   ------------------------------------------------------------------------- */

.glow-legal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--glow-rule);
}

.glow-legal__stand {
	margin: 0;
	font-size: var(--glow-fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
}

.glow-legal__print {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--glow-rule);
	background: none;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--glow-anthrazit-soft);
	cursor: pointer;
	transition:
		color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-legal__print:hover,
.glow-legal__print:focus-visible {
	color: var(--glow-gold);
	border-bottom-color: var(--glow-gold);
}

.glow-legal__toc {
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	background-color: var(--glow-creme);
}

.glow-legal__toctitle {
	margin: 0 0 1rem;
	font-family: var(--glow-font-ui);
	font-size: var(--glow-fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.glow-legal__toclist {
	margin: 0;
	padding-inline-start: 1.5em;
	font-size: var(--glow-fs-small);
	line-height: 1.7;
}

.glow-legal__toclist a {
	border-bottom: 1px solid transparent;
	transition:
		color var(--glow-dur-fast) ease,
		border-color var(--glow-dur-fast) ease;
}

.glow-legal__toclist a:hover,
.glow-legal__toclist a:focus-visible {
	color: var(--glow-gold);
	border-bottom-color: var(--glow-gold);
}

/* Paragrafen deutlich voneinander absetzen. */
.glow-legal__text h2 {
	margin-top: 2.5em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--glow-rule);
	font-size: var(--glow-fs-h3);
	scroll-margin-top: calc(var(--glow-header-total) + 1.5rem);
}

.glow-legal__text h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.glow-legal__text {
	font-size: var(--glow-fs-body);
	line-height: 1.75;
}

.glow-legal__text table {
	width: 100%;
	margin-block: 1.5em;
	border-collapse: collapse;
	font-size: var(--glow-fs-small);
}

.glow-legal__text th,
.glow-legal__text td {
	padding: 0.75rem 1rem 0.75rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--glow-rule);
}

.glow-legal__text th {
	font-weight: 500;
}

.glow-footer__legal {
	margin: 0;
}

@media print {
	.glow-legal__print,
	.glow-legal__toc {
		display: none !important;
	}

	.glow-legal__text h2 {
		page-break-after: avoid;
		break-after: avoid;
	}

	.glow-legal__text {
		font-size: 11pt;
		line-height: 1.5;
	}
}

/* -------------------------------------------------------------------------
   46. Bildhinweis
   -------------------------------------------------------------------------
   Muss lesbar sein, ohne die Bilder zu überlagern. Deshalb klein und
   zurückgenommen, aber nicht ausgegraut bis zur Unkenntlichkeit – ein
   Transparenzhinweis, den niemand liest, erfüllt seinen Zweck nicht.
   ------------------------------------------------------------------------- */

.glow-imagenote {
	max-width: 62ch;
	margin: clamp(1.5rem, 1rem + 1vw, 2rem) 0 0;
	font-size: var(--glow-fs-small);
	line-height: 1.6;
	color: var(--glow-anthrazit-soft);
}

.glow-imagenote--config {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--glow-rule);
}

/* -------------------------------------------------------------------------
   47. Geteilter Hero
   -------------------------------------------------------------------------
   Text links auf ruhiger Fläche, Motiv rechts ungestört. Schrift über einem
   leuchtenden Neonschild funktioniert nicht – beide kämpfen um dieselbe
   Aufmerksamkeit. Getrennt gewinnen beide.
   ------------------------------------------------------------------------- */

.glow-hero--geteilt {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 0;
	padding-top: 0;
	background-color: var(--glow-creme);
	color: var(--glow-anthrazit);
}

.glow-hero--geteilt .glow-hero__media {
	position: relative;
	inset: auto;
	min-height: clamp(20rem, 46svh, 32rem);
}

/* Die Verlaufsabdunklung entfällt – sie diente der Lesbarkeit über dem Bild. */
.glow-hero--geteilt .glow-hero__media::after {
	content: none;
}

.glow-hero--geteilt .glow-hero__image {
	height: 100%;
	object-fit: cover;
}

.glow-hero--geteilt .glow-hero__inner {
	max-width: none;
	padding: clamp(2.5rem, 2rem + 4vw, 5rem) var(--glow-gutter);
	gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.glow-hero--geteilt .glow-hero__title {
	max-width: 16ch;
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
}

.glow-hero--geteilt .glow-hero__text {
	color: var(--glow-anthrazit-soft);
}

.glow-hero--geteilt .glow-hero__base {
	border-top-color: var(--glow-rule);
}

.glow-hero--geteilt .glow-hero__scroll {
	color: var(--glow-anthrazit-soft);
}

@media (min-width: 900px) {
	.glow-hero--geteilt {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: clamp(32rem, 78svh, 46rem);
	}

	/*
	 * Der Text sitzt im Raster links, das Bild rechts. Die Reihenfolge im
	 * Quelltext bleibt Text zuerst – für Vorlesewerkzeuge und Suchmaschinen
	 * ist die Überschrift damit das erste Element.
	 */
	.glow-hero--geteilt .glow-hero__inner {
		grid-column: 1;
		grid-row: 1;
		justify-content: center;
		padding-inline: clamp(2rem, 4vw, 4.5rem);
		padding-inline-start: max(var(--glow-gutter), calc((100vw - var(--glow-container)) / 2 + var(--glow-gutter)));
	}

	.glow-hero--geteilt .glow-hero__media {
		grid-column: 2;
		grid-row: 1;
		min-height: 100%;
	}
}

/* Ohne Bild bleibt nur die Textspalte, dann füllt sie die Breite. */
.glow-hero--geteilt.glow-hero--plain {
	grid-template-columns: 1fr;
}

/* -------------------------------------------------------------------------
   48. Textseite des geteilten Hero
   -------------------------------------------------------------------------
   Drei Zustände: helle Fläche, dunkle Fläche, eigenes Bild. Die Schriftfarbe
   folgt daraus zwingend – hell auf dunkel, dunkel auf hell.
   ------------------------------------------------------------------------- */

.glow-hero--seite-anthrazit,
.glow-hero--seite-bild {
	background-color: var(--glow-anthrazit);
	color: var(--glow-porcelain);
}

.glow-hero--seite-anthrazit .glow-hero__text,
.glow-hero--seite-bild .glow-hero__text {
	color: rgba(253, 252, 250, 0.88);
}

.glow-hero--seite-anthrazit .glow-hero__base,
.glow-hero--seite-bild .glow-hero__base {
	border-top-color: rgba(253, 252, 250, 0.22);
}

.glow-hero--seite-anthrazit .glow-hero__scroll,
.glow-hero--seite-bild .glow-hero__scroll {
	color: rgba(253, 252, 250, 0.6);
}

/* Bild der Textseite */
.glow-hero__seitenbild {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.glow-hero__seitenbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Zusätzliche Abdunklung. Auch ein dunkles Motiv hat Stellen, an denen weiße
 * Schrift kippt – der Verlauf sichert die Lesbarkeit ab, ohne das Bild
 * zuzudecken.
 */
.glow-hero__seitenbild::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		rgba(18, 17, 15, 0.72) 0%,
		rgba(18, 17, 15, 0.58) 55%,
		rgba(18, 17, 15, 0.7) 100%
	);
}

@media (min-width: 900px) {
	.glow-hero--geteilt .glow-hero__seitenbild {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		inset: auto;
	}

	/* Der Text liegt über dem Bild derselben Rasterzelle. */
	.glow-hero--geteilt.glow-hero--seite-bild .glow-hero__inner {
		position: relative;
		z-index: 1;
		margin-inline-end: -100%;
	}
}

/* -------------------------------------------------------------------------
   49. Übergang zwischen Textseite und Motiv
   -------------------------------------------------------------------------
   Ohne Verlauf treffen zwei Flächen an einer harten Kante aufeinander – das
   liest sich als zwei nebeneinandergelegte Bilder statt als ein Raum. Der
   Verlauf läuft ins Motiv hinein, nicht in die Textseite: So bleibt die
   Schriftfläche unangetastet und die Kante verschwindet trotzdem.
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.glow-hero--geteilt .glow-hero__media {
		position: relative;
	}

	.glow-hero--geteilt.glow-hero--seite-anthrazit .glow-hero__media::before,
	.glow-hero--geteilt.glow-hero--seite-bild .glow-hero__media::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: clamp(80px, 10vw, 160px);
		z-index: 1;
		background-image: linear-gradient(
			to right,
			var(--glow-anthrazit) 0%,
			rgba(30, 29, 27, 0.85) 30%,
			rgba(30, 29, 27, 0.45) 65%,
			rgba(30, 29, 27, 0) 100%
		);
		pointer-events: none;
	}
}

/*
 * Die Überschrift bricht an ihren eigenen Satzgrenzen statt irgendwo in der
 * Mitte. Ein Umbruch nach dem Punkt hält die beiden Hälften zusammen.
 */
.glow-hero__title {
	text-wrap: balance;
}

.glow-hero--geteilt .glow-hero__title {
	max-width: 13ch;
}

/* -------------------------------------------------------------------------
   30. Feinschliff der Bewegung
   ------------------------------------------------------------------------- */

:root {
	--glow-dur-slow: 620ms;
}

.glow-js .glow-grid > [data-reveal]:nth-child(2),
.glow-js .glow-steps > [data-reveal]:nth-child(2),
.glow-js .glow-features > [data-reveal]:nth-child(2) {
	transition-delay: 90ms;
}

.glow-js .glow-grid > [data-reveal]:nth-child(3),
.glow-js .glow-steps > [data-reveal]:nth-child(3),
.glow-js .glow-features > [data-reveal]:nth-child(3) {
	transition-delay: 180ms;
}

.glow-js .glow-grid > [data-reveal]:nth-child(n + 4),
.glow-js .glow-steps > [data-reveal]:nth-child(n + 4),
.glow-js .glow-features > [data-reveal]:nth-child(n + 4) {
	transition-delay: 270ms;
}


@media (min-width: 900px) {
	.glow-hero--geteilt .glow-hero__inner {
		padding-top: calc(var(--glow-header-total) + clamp(1.5rem, 1rem + 2vw, 3rem));
	}
}


/* Zweiter Hero-Button tritt zurück, damit die Anfrage gewinnt. */
.glow-hero__actions .glow-btn--light {
	border-color: transparent;
	padding-inline: 0;
	margin-inline-start: clamp(1rem, 2.5vw, 2rem);
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--glow-rule-light);
}

.glow-hero__actions .glow-btn--light:hover,
.glow-hero__actions .glow-btn--light:focus-visible {
	background-color: transparent;
	border-color: transparent;
	color: var(--glow-porcelain);
	text-decoration-color: currentColor;
}

@keyframes glow-hero-zug {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

.glow-hero:not(.glow-hero--geteilt) .glow-hero__image {
	transform-origin: 50% 45%;
	animation: glow-hero-zug 24s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
	.glow-hero .glow-hero__image {
		animation: none;
	}
}

.glow-hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 2.5rem;
	margin-top: 0.85rem;
	background-color: currentColor;
	transform-origin: top;
	animation: glow-scroll-linie 2.6s var(--glow-ease) infinite;
}

@keyframes glow-scroll-linie {
	0%        { transform: scaleY(0); opacity: 0; }
	30%       { opacity: 1; }
	70%, 100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.glow-hero__scroll::after {
		animation: none;
		opacity: 0.5;
	}
}

@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.glow-faq__item::details-content {
		overflow: hidden;
		block-size: 0;
		transition:
			block-size 260ms var(--glow-ease),
			content-visibility 260ms allow-discrete;
	}

	.glow-faq__item[open]::details-content {
		block-size: auto;
	}
}


/* Tagessätze sind Optionen, keine eigenen Produkte. */
.glow-price__row--zusatz {
	border-top: 0;
	margin-top: -0.5rem;
}

.glow-price__row--zusatz .glow-price__name {
	font-size: 0.9em;
}

.glow-price__row--zusatz .glow-price__value {
	font-size: 0.82em;
}
.glow-price__row:has(+ .glow-price__row--zusatz) {
	border-bottom: 0;
}


/* Versteckte Radiobuttons bleiben in ihrer Gruppe, statt nach oben zu wandern. */
.glow-config__optionen {
	position: relative;
}

#konfigurator,
#konfigurator * {
	overflow-anchor: none;
}

/* Zwei gleichfarbige Abschnitte teilen sich einen Abstand, nicht zwei. */
.glow-section--creme + .glow-section--creme {
	padding-block-start: 0;
}