/*
Theme Name: Helena Höbel
Theme URI: https://helena-hoebel.de
Description: Child-Theme von Twenty Twenty-Five für helena-hoebel.de. Trägt die Geometrie des One-Pagers; Farben, Schriften und Schaltflächen stehen in der theme.json, die Inhalte in Block-Vorlagen.
Author: Helena Höbel – Haare & Make up
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: helena-hoebel
*/

/* =========================================================================
   Aufbau dieser Datei

   Farben, Schriften, Schriftgrößen und das Aussehen der Schaltflächen stehen
   in der theme.json und sind damit im Editor sichtbar und einstellbar.
   Hier steht nur, was der Editor nicht abbilden kann: die Geometrie des
   Entwurfs – Bogenmaske, Überlappungen und die dekorativen Formen.

   Referenz: HH_Webseite_Entwurf – Entwurfsbreite 1280px, Container 1080px.
   ========================================================================= */

:root{
	/* Schriftgrade des Entwurfs, fluid zwischen 375px und 1280px Viewport */
	--hh-fs-h1:       clamp(32px, 3.4vw + 6px, 48px);
	--hh-fs-script-l: clamp(40px, 4.6vw + 6px, 62px);
	--hh-fs-script-m: clamp(30px, 3.4vw + 5px, 46px);
	--hh-fs-h2-light: clamp(30px, 3.2vw + 6px, 46px);
	--hh-fs-quote:    clamp(24px, 2.4vw + 6px, 35px);
	--hh-fs-kicker:   clamp(15px, 0.35vw + 13px, 17px);
	--hh-fs-body:     clamp(14px, 0.25vw + 13px, 15px);
	--hh-fs-lead:     clamp(15px, 0.35vw + 13px, 16.5px);
	--hh-fs-nav:      clamp(14px, 0.55vw + 12px, 17px);

	/* Raster und Rhythmus */
	--hh-container: 1080px;
	--hh-gutter:    clamp(20px, 5vw, 40px);
	--hh-sec-y:     clamp(56px, 7vw, 110px);
	--hh-flow:      clamp(14px, 1.4vw, 20px);
}

/* =========================================================================
   1  SEKTIONEN
   Jede Sektion ist eine Gruppe über die volle Breite. Die Flächenfarbe
   kommt aus der Palette und ist im Editor wählbar.
   ========================================================================= */

.hh-section{
	position: relative;
	padding-block: var(--hh-sec-y);
	/* schneidet die dekorativen Formen am Sektionsrand ab */
	overflow: hidden;
	isolation: isolate;
}

.hh-inner{
	position: relative;
	z-index: 2;
	max-width: var(--hh-container);
	margin-inline: auto;
	padding-inline: var(--hh-gutter);
}

/* =========================================================================
   2  TYPOGRAFIE

   Die Schreibschrift wird über die Kursiv-Auszeichnung gesetzt. Im Editor
   ist das der Kursiv-Knopf – so lassen sich neue Schreibschrift-Passagen
   ohne HTML anlegen.
   ========================================================================= */

.hh-title{
	font-size: var(--hh-fs-h1);
	font-weight: 700;
	line-height: 1.06;
	text-transform: none;
	letter-spacing: 0;
}
.hh-title--light{
	font-size: var(--hh-fs-h2-light);
	font-weight: 300;
	line-height: 1.15;
}

/* Schreibschrift-Passagen innerhalb der Titel */
.hh-title em,
.hh-quote-text em{
	font-family: var(--wp--preset--font-family--karme-handwritten);
	font-style: normal;
	font-weight: 400;
	font-size: var(--hh-fs-script-l);
	/* Karme Handwritten hat hohe Ober- und tiefe Unterlängen; die
	   Zeilenhöhe gibt ihnen Platz, damit sie die Nachbarzeile nicht berühren. */
	line-height: 1.16;
}
/* „über Mich“ und „für Neugierige“ stehen auf einer Grundlinie */
.hh-title--inline em{
	display: inline-block;
	transform: translateY(0.11em);
	margin-left: 0.18em;
}
/* „Deine / perfekten Haare“ und „Gesundes Haar / beginnt bei der Wurzel“
   setzen die Schreibschrift auf eine eigene Zeile */
.hh-title--stacked em{ display: block; }

.hh-lead{
	font-size: var(--hh-fs-lead);
	line-height: 1.62;
}
.hh-body{
	font-size: var(--hh-fs-body);
	line-height: 1.62;
}
/* Der Abstand zwischen Absätzen gilt nur im senkrechten Fluss. Der
   Kern setzt dafür is-layout-flow; in einer Flex-Reihe – etwa der
   Fußzeile – stehen die Absätze nebeneinander und brauchen keinen. */
:where(.is-layout-flow) > .hh-lead + .hh-lead,
:where(.is-layout-flow) > .hh-body + .hh-body{ margin-top: var(--hh-flow); }

/* Rubriken über den Karten */
.hh-kicker{
	font-size: var(--hh-fs-kicker);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.hh-kicker--light{ font-weight: 300; letter-spacing: 0.06em; }

/* Der Abstand unter einer Überschrift steht am folgenden Element, damit er
   unabhängig davon greift, welcher Block die Überschrift bildet. */
.hh-title + *,
.hh-title--light + *{ margin-top: clamp(22px, 2.8vw, 38px); }
.hh-kicker + *{ margin-top: clamp(12px, 1.4vw, 18px); }

/* =========================================================================
   3  DEKORATIVE FORMEN

   Bögen, Halb- und Viertelkreise des Entwurfs als CSS-Flächen. Sie stehen
   nicht im Seiteninhalt, sind also im Editor nicht versehentlich löschbar.

   Bezugsrahmen: Die Formen stehen in einem festen Verhältnis zum
   Inhaltscontainer, nicht zum Fenster. --hh-cl ist die linke Kante des
   Containers innerhalb der Sektion, --hh-cw seine Breite. Damit bleibt die
   Lage zum Porträt und zur Galerie bei jeder Fensterbreite gleich.

   Die Maße sind aus dem Entwurf abgenommen (Zeichenfläche 1280 pt,
   Container 1080 pt) und als Anteile notiert.
   ========================================================================= */

.hh-section{
	--hh-cl: max(0px, calc((100% - var(--hh-container)) / 2));
	--hh-cw: min(100%, var(--hh-container));
}

.hh-shape::before,
.hh-shape::after{
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}
/* „über Mich“ trägt seine Formen am Bild, „für Neugierige“ am Container.
   Nur der Beige-Bogen oben rechts hängt an der Sektion. */
.hh-about::before,
.hh-about::after,
.hh-curious::before{ content: none; }

/* --- über Mich ---------------------------------------------------------
   Alle drei Formen sind am Porträt verankert, so wie im Entwurf: der Bogen
   umgreift es, der weiche Kreis liegt links unter ihm, die Mauve-Fläche
   rechts unten. Bezugsmaße aus dem Entwurf, Bildkasten 475 × 563 pt.

   Stapelung: Bogen und Kreis hinter dem Bild (Index −1), die Mauve-Fläche
   über dem Bogen, aber weiterhin hinter dem Bild (Index 0 und früher im
   Dokument als das Bild).
   -------------------------------------------------------------------- */
.hh-about__figure{ position: relative; }

/* Beige-Bogen: 53 % … 141 % der Bildbreite, −14 % … 110 % der Bildhöhe */
.hh-about__figure::after{
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: 53.1%;
	top: -13.7%;
	width: 87.6%;
	height: 123.4%;
	border-radius: 50% 50% 0 0 / 30% 30% 0 0;
	background-color: var(--wp--preset--color--beige);
}

/* weicher Kreis, halbtransparent, links unter dem Bild */
.hh-about__figure::before{
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: 27.4%;
	top: 76.7%;
	width: 47.6%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: rgb(214 213 202 / .45);
}

/* Mauve-Fläche rechts unten: eine Halbellipse mit flacher Seite links, die
   nach rechts aus dem Bild läuft. Maße aus dem Entwurf angepasst
   (Kasten 235 × 320 pt, mittlere Abweichung 4 pt).
   Sie hängt an der Bildspalte, deren Höhe der Bildhöhe entspricht. */
.hh-about__grid > .wp-block-column:last-child{ position: relative; }
.hh-about__grid > .wp-block-column:last-child::before{
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	left: 85.7%;
	top: 61.6%;
	width: 49.6%;
	height: 56.8%;
	border-radius: 0 999px 999px 0;
	background-color: var(--wp--preset--color--mauve);
}

/* --- für Neugierige ---------------------------------------------------
   Mauve-Fläche und Blush-Fläche sind an der Galerie verankert, der Bogen
   am Container. Bezugsmaße aus dem Entwurf: Galeriekasten 905 × 229 pt,
   drei Bilder à 244 × 229 pt.

   Absolut gesetzte Pseudoelemente sind keine Flex-Elemente, die Galerie
   ordnet ihre Bilder also unverändert an.
   -------------------------------------------------------------------- */
/* Die Galerie wird zum waagerecht verschiebbaren Rahmen. Formen dürfen
   deshalb nicht an ihr hängen – sie würden mitscrollen und abgeschnitten.
   Sie sitzen am Inhaltscontainer, dessen Höhe durch das Karussell
   gleichbleibend ist. */

/* Mauve: Halbellipse mit flacher Seite rechts, läuft links aus dem Bild */
.hh-curious > .hh-inner::before{
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: -11.8%;
	top: 56.7%;
	width: 23.1%;
	height: 62.8%;
	border-radius: 999px 0 0 999px;
	background-color: var(--wp--preset--color--mauve);
}

/* Blush: Halbellipse mit flacher Seite links */
.hh-curious > .hh-inner::after{
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: 16.7%;
	top: 62.1%;
	width: 20.4%;
	height: 56.3%;
	border-radius: 0 999px 999px 0;
	background-color: var(--wp--preset--color--blush);
}

/* Halbtransparenter Beige-Bogen oben rechts, an der Sektion verankert */
.hh-curious::after{
	top: 11.3%;
	left: calc(var(--hh-cl) + 0.869 * var(--hh-cw));
	width: calc(0.226 * var(--hh-cw));
	height: 29.7%;
	border-radius: 50% 50% 0 0 / 50% 50% 0 0;
	background-color: rgb(214 213 202 / .45);
}

/* =========================================================================
   4  HERO
   ========================================================================= */

.hh-hero{ padding-bottom: 0; }

.hh-hero__grid{
	position: relative;
	display: grid;
	/* Bogenfoto und Textkarte überlappen, wie im Entwurf */
	grid-template-columns: minmax(0, 445fr) minmax(0, 518fr);
	align-items: center;
	gap: 0;
}

/* Bogenmaske: Halbkreis oben, gerade Kante unten */
.hh-hero__arch{
	position: relative;
	z-index: 2;
	aspect-ratio: 445 / 587;
	overflow: hidden;
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
}
.hh-hero__arch img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
}

.hh-hero__card{
	position: relative;
	z-index: 3;
	/* zieht die Karte über die rechte Flanke des Bogens */
	margin-left: -11%;
	/* der untere Abstand hält die Schaltfläche frei vom Text */
	padding: clamp(38px, 4.6vw, 62px) clamp(30px, 3.8vw, 56px) clamp(104px, 11vw, 140px);
	background-color: color-mix(in srgb, var(--wp--preset--color--greige) 92%, transparent);
	backdrop-filter: blur(2px);
}

/* Die Schaltfläche sitzt am unteren Rand der Karte und ragt links darüber
   hinaus, so dass sie die Flanke des Bogenfotos berührt. */
.hh-hero__cta{
	position: absolute;
	z-index: 4;
	left: -7%;
	bottom: clamp(26px, 3.4vw, 46px);
	margin: 0;
}

/* =========================================================================
   5  RASTER-ABSCHNITTE
   Die Spaltenzahl kommt aus dem Grid-Layout der Kern-Gruppe. Karten lassen
   sich damit im Editor hinzufügen und entfernen, ohne CSS anzufassen.
   ========================================================================= */

.hh-cards{ margin-top: 0; }
.hh-card{
	padding: clamp(20px, 2.2vw, 30px);
	min-height: 154px;
}

.hh-scalp-grid{ margin-top: clamp(40px, 5vw, 72px); }
.hh-scalp-grid img{
	width: 100%;
	height: auto;
	aspect-ratio: 311 / 258;
	object-fit: cover;
	display: block;
}
.hh-scalp-grid figure{ margin-bottom: clamp(20px, 2.6vw, 34px); }

.hh-partner-grid{ margin-top: clamp(34px, 4.4vw, 62px); }
.hh-partner-item{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(120px, 13vw, 167px);
	padding: clamp(20px, 2.6vw, 34px);
}
.hh-partner-item img{ max-width: 72%; height: auto; }
.hh-partner-item p{ margin: 0; color: var(--wp--preset--color--ink-soft); }

/* =========================================================================
   6  WILLKOMMEN
   ========================================================================= */

.hh-welcome{
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
}

/* =========================================================================
   7  ÜBER MICH
   ========================================================================= */

.hh-about__grid{ align-items: flex-start; }
.hh-about__figure img{
	width: 100%;
	height: auto;
	display: block;
}
.hh-about__cta{ margin-top: clamp(28px, 3.4vw, 44px); }

/* =========================================================================
   8  ZITAT
   Der Bildband ist ein Cover-Block; Bild und Deckkraft sind im Editor
   einstellbar.
   ========================================================================= */

.hh-quote{ text-align: center; }
.hh-quote-text{
	max-width: 640px;
	margin-inline: auto;
	font-size: var(--hh-fs-quote);
	font-weight: 300;
	line-height: 1.22;
}
.hh-quote-text em{ font-size: var(--hh-fs-script-m); }
.hh-quote-cite{
	margin-top: clamp(18px, 2.4vw, 30px);
	font-size: var(--hh-fs-body);
	color: var(--wp--preset--color--ink-soft);
}

/* =========================================================================
   9  GALERIE UND KARUSSELL

   Der Galerie-Block bleibt der Ort, an dem Bilder gepflegt werden. Das
   Karussell ist eine Ergänzung: hh-carousel.js hängt eine Hülle darum und
   setzt die Klasse is-carousel. Ohne JavaScript bleibt die normale Galerie.
   ========================================================================= */

.hh-gallery{ margin-top: clamp(34px, 4.4vw, 60px); }
.hh-gallery img{
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.hh-carousel{
	position: relative;
	margin-top: clamp(34px, 4.4vw, 60px);
}
.hh-carousel .hh-gallery{ margin-top: 0; }

/* Waagerechter Rahmen mit Einrasten. Am Handy ergibt das das Wischen,
   ohne dass dafür Code nötig wäre. */
.hh-gallery.is-carousel{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Die weiche Bewegung steht hier, nicht im Skript – so greift auch die
	   Einstellung „Bewegung reduzieren“ ohne Zutun. */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hh-gallery.is-carousel::-webkit-scrollbar{ display: none; }
.hh-gallery.is-carousel:focus-visible{
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 4px;
}

/* Drei Bilder im Rahmen. Die fünf Klassen sind nötig, um die Breitenangabe
   des Kern-Galerieblocks zu überschreiben. */
.wp-block-gallery.hh-gallery.is-carousel.has-nested-images > .wp-block-image{
	flex: 0 0 calc((100% - 2 * var(--hh-gal-gap)) / 3);
	scroll-snap-align: start;
	margin: 0;
}
.hh-gallery.is-carousel{ --hh-gal-gap: clamp(16px, 2.4vw, 34px); gap: var(--hh-gal-gap); }

/* Pfeile. Sie erscheinen erst, wenn mehr Bilder da sind als Platz. */
.hh-carousel__arrow{
	position: absolute;
	top: 50%;
	z-index: 3;
	display: none;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--plum) 88%, transparent);
	color: #fff;
	font: 400 26px/1 var(--wp--preset--font-family--open-sans);
	cursor: pointer;
	transition: background-color .2s ease;
}
.hh-carousel.is-active .hh-carousel__arrow{ display: block; }
.hh-carousel__arrow:hover{ background-color: var(--wp--preset--color--plum); }
.hh-carousel__arrow:focus-visible{
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 3px;
}
.hh-carousel__arrow--prev{ left: clamp(-22px, -1.4vw, -6px); }
.hh-carousel__arrow--next{ right: clamp(-22px, -1.4vw, -6px); }

@media (prefers-reduced-motion: reduce){
	.hh-carousel__arrow{ transition: none; }
	.hh-gallery.is-carousel{ scroll-behavior: auto; }
}

/* =========================================================================
   10  KONTAKT UND KARTE
   ========================================================================= */

.hh-contact__grid{ align-items: flex-end; }
.hh-contact__figure img{ width: 100%; height: auto; display: block; }
.hh-contact__data p{ margin: 0; }
.hh-contact__data p + p{ margin-top: 1.05em; }

.hh-map{
	position: relative;
	width: 100%;
	height: clamp(280px, 30vw, 400px);
	background-color: var(--wp--preset--color--beige-light);
	overflow: hidden;
}
.hh-map__fallback{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 24px;
	text-align: center;
	font-size: var(--hh-fs-body);
	color: var(--wp--preset--color--ink-soft);
}
.hh-map__canvas{ position: absolute; inset: 0; cursor: grab; touch-action: none; }
.hh-map__canvas.is-dragging{ cursor: grabbing; }
.hh-map__tile{ position: absolute; width: 256px; height: 256px; }
.hh-map__pin{
	position: absolute;
	width: 22px; height: 22px;
	margin: -22px 0 0 -11px;
	border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
	background-color: var(--wp--preset--color--plum);
	box-shadow: 0 0 0 3px rgb(255 255 255 / .85);
	pointer-events: none;
}
.hh-map__zoom{
	position: absolute; right: 14px; bottom: 14px;
	display: flex; flex-direction: column; gap: 4px;
}
.hh-map__zoom button{
	width: 34px; height: 34px;
	border: 0; border-radius: 4px;
	background-color: rgb(255 255 255 / .92);
	color: var(--wp--preset--color--ink);
	font: 400 20px/1 inherit;
	cursor: pointer;
}
.hh-map__attr{
	position: absolute; left: 0; bottom: 0;
	padding: 3px 8px;
	background-color: rgb(255 255 255 / .82);
	font-size: 11px;
	color: #444;
}

/* =========================================================================
   11  KOPF- UND FUSSBEREICH
   ========================================================================= */

.hh-header{
	background-color: var(--wp--preset--color--cream);
	padding-block: clamp(14px, 1.6vw, 20px);
}
.hh-header .wp-block-site-logo img{
	width: auto;
	max-height: clamp(50px, 5vw, 68px);
	display: block;
}
/* Der Kern verwirft clamp()-Werte in der Blockabstands-Einstellung, deshalb
   stehen die Abstände von Menü und Fußzeile hier.
   Entwurfsmaß: Menü ca. 40 pt, Fußzeile ca. 38 pt. */
.hh-nav.wp-block-navigation{ gap: clamp(18px, 2.6vw, 42px); }

.hh-nav .wp-block-navigation-item__content{
	font-size: var(--hh-fs-nav);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hh-nav .wp-block-navigation-item__content:hover,
.hh-nav .current-menu-item .wp-block-navigation-item__content{
	color: var(--wp--preset--color--logo);
}

/* Fläche und Schriftfarbe der Fußzeile stehen als Blockeinstellung in
   parts/footer.html und sind damit im Editor änderbar. */
.hh-footer{ padding-block: clamp(30px, 3.4vw, 40px); }

/* =========================================================================
   12  RESPONSIVE
   Der Entwurf liegt für 1280px vor. Unterhalb 990px stapeln die
   mehrspaltigen Bereiche, die dekorativen Formen treten zurück.
   ========================================================================= */

@media (max-width: 1100px){
	.hh-hero__card{ margin-left: -8%; }
}

@media (max-width: 989px){
	/* Hero stapelt: Bogen oben, Karte darunter mit leichter Überlappung */
	.hh-hero__grid{ grid-template-columns: 1fr; }
	.hh-hero__arch{ max-width: 360px; margin-inline: auto; }
	.hh-hero__card{
		margin-left: 0;
		margin-top: -48px;
		padding-bottom: clamp(104px, 17vw, 132px);
	}
	.hh-hero__cta{
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	/* Der Zeilenumbruch im Vorspann ist auf die Entwurfsbreite abgestimmt. */
	.hh-hero__card .hh-lead br{ display: none; }

	.hh-about__figure{ max-width: 460px; }
	.hh-contact__data{ padding-bottom: 0; }

	/* Formen kleiner und weiter aus dem Bild, damit sie den Text nicht
	   bedrängen. Unterhalb dieser Breite stapelt das Layout, das
	   Verhältnis aus dem Entwurf trägt hier nicht mehr. */
	.hh-about__figure::after{
		left: 46%;
		top: -8%;
		width: 78%;
		height: 112%;
	}
	.hh-about__figure::before{ display: none; }
	.hh-about__grid > .wp-block-column:last-child::before{ display: none; }
	/* Zwei Bilder im Rahmen */
	.wp-block-gallery.hh-gallery.is-carousel.has-nested-images > .wp-block-image{
		flex: 0 0 calc((100% - var(--hh-gal-gap)) / 2);
	}
	.hh-curious > .hh-inner::before{
		left: -28%;
		width: 30%;
		height: 44%;
		top: 62%;
	}
	.hh-curious > .hh-inner::after{ display: none; }
	.hh-curious::after{
		left: auto;
		right: -10%;
		width: 150px;
		height: 150px;
	}
}

@media (max-width: 620px){
	.hh-title--inline em{ margin-left: 0.1em; }

	/* Ein Bild im Rahmen; gewischt wird ohnehin */
	.wp-block-gallery.hh-gallery.is-carousel.has-nested-images > .wp-block-image{
		flex: 0 0 100%;
	}
	.hh-carousel__arrow{ width: 38px; height: 38px; font-size: 22px; }
	.hh-carousel__arrow--prev{ left: 4px; }
	.hh-carousel__arrow--next{ right: 4px; }
}

@media (prefers-reduced-motion: reduce){
	.wp-block-button__link{ transition: none; }
}

/* Markierung für Bildstellen, an denen das endgültige Motiv noch fehlt.
   Die Klasse wird an der Abbildung gesetzt und entfällt mit dem Austausch. */
.hh-placeholder{ position: relative; }
.hh-placeholder::after{
	content: "Platzhalter";
	position: absolute;
	top: 8px; left: 8px;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgb(100 85 92 / .88);
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Kern-Zitatblock ohne die voreingestellte Zierleiste */
.hh-quote-block{
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}
.hh-quote-text em{ display: block; }
.hh-quote-block cite{
	display: block;
	margin-top: clamp(18px, 2.4vw, 30px);
	font-size: var(--hh-fs-body);
	font-style: normal;
	color: var(--wp--preset--color--ink-soft);
}

/* =========================================================================
   13  ANBINDUNG AN DIE KERN-BLÖCKE

   Twenty Twenty-Five setzt zwischen Blöcken einen Zwischenraum und färbt
   Text im Cover-Block hell. Beides wird hier für den One-Pager aufgehoben.
   ========================================================================= */

/* Die Sektionen stoßen ohne Zwischenraum aneinander. */
.hh-section,
.hh-map{
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Der Cover-Block stellt Text auf Weiß; das Zitat steht auf hellem Grund. */
.hh-quote,
.hh-quote p,
.hh-quote cite{ color: var(--wp--preset--color--ink); }

/* Eine Spalte des Kopfhaut-Rasters ist eine Rasterzelle. */
.hh-scalp-col{ min-width: 0; }

/* Fußzeile: Verweise hell, ohne Unterstreichung, auf einer Linie.
   Weiß auf Pflaume ergibt ein Kontrastverhältnis von 7,0 : 1. */
.hh-footer .hh-inner{
	align-items: center;
	gap: clamp(22px, 3vw, 40px);
}
.hh-footer p{ margin: 0; }
.hh-footer a{
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.hh-footer a:hover,
.hh-footer a:focus-visible{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hh-footer a:focus-visible{
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* Kopfbereich: das Logo trägt keinen Rahmen und keine Fläche. */
.hh-header .wp-block-site-logo,
.hh-header .wp-block-site-logo a{ background: none; border: 0; }