/* ===========================================================================
   möbelinio – Startseite 3 (Hybrid)
   ---------------------------------------------------------------------------
   Lädt ausschliesslich auf page-templates/startseite-3.php.

   Die Leitplanken aus der Korrekturrunde, als Regeln gelesen:

   1. EINE Grundfläche. Kein Abschnitt bringt einen eigenen Grund mit.
      Getrennt wird über Abstand, Linie und Karte – nicht über Farbe.
   2. KEINE schwarzen Flächen. Dunkel ist hier nur Text.
   3. CD-Gelb wird NICHT abgestuft. Es gibt genau einen Gelbwert,
      --h3-yellow, und der ist auch im Zeigezustand derselbe. Wo eine
      Rückmeldung nötig ist, bewegt sich etwas oder eine Linie kommt dazu –
      die Farbe bleibt.
   4. Der Kopfbereich ist Bild mit Text, der Fliesstext steht darunter.
   5. Der animierte Leitfaden bleibt.
   6. Der Bildslider läuft auf EINHEITLICHER Höhe und grösser.
   7. Der Claim im Fuss ist klein und leise.

   Inhalt
     01  Grundlagen und Token
     02  Typografie
     03  Kopfleiste und Menü-Ebene
     04  Schaltflächen
     05  Bühne
     06  Bildslider
     07  Grosse Bildmotivflächen
     08  Basic & Smart
     09  Leitfaden
     10  Professionals
     11  Team
     12  Fragen
     13  Kontakt
     14  Seitenfuss
     15  Bewegung, Druck, schmale Geräte
   =========================================================================== */

/* ===========================================================================
   01  Grundlagen und Token
   =========================================================================== */
body.is-hybrid {
	/*
	 * Die Grundfläche ist Weiss – wie auf moebelinio.com. Vorher war sie
	 * hellgrau; damit stand die Imageseite neben dem Shop sichtbar anders da,
	 * und genau das soll sie nicht.
	 */
	--h3-ground: #fff;

	/*
	 * Die zweite Fläche: Karten heben sich minimal ab. Auf weissem Grund muss
	 * das andersherum laufen als vorher – die Karte ist jetzt der leicht
	 * getönte Ton, nicht der hellere. Warm getönt, nicht neutralgrau:
	 * möbelinio steht für helle, warme Kinderräume.
	 */
	--h3-surface: oklch(0.972 0.005 92);
	--h3-line: oklch(0.895 0.008 92);

	/*
	 * CD-Gelb. Ein Wert. Keine Abstufung, kein Hover-Ton, kein Verlauf.
	 *
	 * Bewusst als Hexadezimalwert und nicht als oklch: Die oklch-Näherung im
	 * Grundstylesheet ergibt umgerechnet #FED14E – rund zwei Prozent neben dem
	 * CD-Wert. Für einen Ton, der ausdrücklich nicht abgestuft werden soll,
	 * ist das eine Abstufung zu viel.
	 */
	--h3-yellow: #FFD340;

	--h3-ink: oklch(0.19 0.008 90);

	/*
	 * Der Bernstein der Navigation von moebelinio.com – aktiver Eintrag und
	 * die Verweise im Mega-Menü.
	 *
	 * Nicht geschätzt: am Kopfbereich des Shops gemessen, rgb(244, 182, 21).
	 */
	--h3-nav-active: #F4B615;
	--h3-ink-muted: oklch(0.46 0.012 90);

	/*
	 * EINE Breite fuer alles.
	 *
	 * Kopfleiste, Buehne, Slider, Kacheln, Kontakt und Fuss stehen auf
	 * derselben Formel – deshalb liegen ihre Kanten exakt uebereinander. Wer
	 * einen Block ergaenzt, gibt ihm width: var(--h3-shell) und
	 * margin-inline: auto, sonst nichts.
	 *
	 * --h3-edge ist der Abstand dieser Kante zum Fensterrand. Ihn braucht, wer
	 * aus dem Raster ausbrechen und trotzdem buendig beginnen muss – der
	 * Bildslider zum Beispiel, der nach rechts aus dem Bild laeuft.
	 */
	--h3-bar-inset: clamp(1.5625rem, 1.2rem + 0.8vw, 2.5rem);

	/*
	 * Eine Breite für alles: 1500 px, darunter der Fensterrand minus
	 * Einrückung.
	 *
	 * Ausgenommen sind nur die Dinge, die absichtlich darüber hinauslaufen –
	 * der Bildslider, der nach rechts aus dem Bild läuft, und die Flächen von
	 * Kopfbereich und Fuss, deren Inhalt aber wieder auf --h3-shell sitzt.
	 *
	 * Damit der Text trotzdem lesbar bleibt, tragen die Textelemente ihr
	 * eigenes Mass (--h3-lead 62ch, Überschriften 22ch). Die Breite gilt für
	 * Flächen, nicht für Zeilen.
	 */
	--h3-max: 1500px;
	--h3-shell: min(100% - (var(--h3-bar-inset) * 2), var(--h3-max));
	--h3-edge: calc((100% - var(--h3-shell)) / 2);

	/*
	 * Abstand je Seite eines Abschnitts; zwischen zwei Abschnitten also das
	 * Doppelte. Vorher standen hier bis zu 9 rem, macht 18 rem Fuge – die
	 * Seite fiel dadurch in Einzelteile.
	 */
	--h3-section: clamp(2.75rem, 1.8rem + 3.2vw, 5.5rem);
	--h3-radius: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--h3-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/*
	 * Die Ecke rechts unten teilen sich drei Dinge: der Knopf für
	 * Barrierefreiheit, der Zurück-nach-oben-Knopf und – auf schmalen Geräten –
	 * die Aktionsleiste. Sie lagen übereinander, weil jedes für sich
	 * positioniert war.
	 *
	 * Jetzt ein Stapel aus einer Rechnung: Grundabstand zum Rand, darüber der
	 * Platz für die Aktionsleiste, darüber die Höhe des jeweils darunter
	 * liegenden Knopfes.
	 */
	/* Innenabstand unter der Navigationszeile – und zugleich der sichtbare
	   Abstand zwischen Menüpunkt und Klappe. Eine Quelle für beides. */
	--h3-nav-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);

	--h3-corner-inset: var(--mi-space-4);
	--h3-corner-gap: 0.6rem;
	--h3-corner-btn: 2.75rem;
	--h3-bar-space: 0px;

	/* Kopfleiste: schwebt, nimmt keinen Platz im Fluss ein. */
	--h3-bar-top: 15px;
	--h3-bar-h: clamp(3.25rem, 2.6rem + 1.6vw, 4.25rem);
	--h3-bar-pad: clamp(0.4rem, 0.25rem + 0.5vw, 0.75rem);
	--h3-bar-total: calc(var(--h3-bar-h) + var(--h3-bar-pad) * 2);

	--h3-display: clamp(2.125rem, 0.9rem + 4.2vw, 4.25rem);
	--h3-h2-size: clamp(1.75rem, 1.05rem + 3vw, 3.25rem);
	--h3-h3-size: clamp(1.125rem, 1.02rem + 0.6vw, 1.5rem);
	--h3-lead-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);

	background: var(--h3-ground);
}

.hybrid {
	background: transparent;
	color: var(--h3-ink);
	overflow-x: clip;
}

/*
 * Die von Startseite 1 übernommenen Bauteile – Aufklappbereiche, Fragen,
 * Formularteile – bringen deren Palette mit. Auf hellgrauem Grund fiel das
 * nicht auf; auf weissem Grund hoben sie sich nicht mehr ab, weil ihre
 * Kartenfarbe fast weiss ist.
 *
 * Statt jedes Bauteil einzeln umzufärben, werden die drei Flächentoken des
 * Grundstylesheets hier umgehängt. Das gilt für alles, was jetzt oder später
 * von dort übernommen wird – und nur innerhalb des Seiteninhalts: Der
 * Cookie-Hinweis und das Barrierefreiheits-Panel liegen ausserhalb und
 * behalten ihr Aussehen.
 */
.hybrid,
.mi-shop-footer,
.mi-shop-header {
	--mi-paper: var(--h3-surface);
	--mi-surface: var(--h3-ground);
	--mi-surface-2: var(--h3-surface);
	--mi-line: var(--h3-line);
}

/* Kein Abschnitt bringt einen eigenen Grund mit. Ausnahme: der Kontakt. */
.hybrid > section {
	background: transparent;
}

.h3-inner {
	width: var(--h3-shell);
	margin-inline: auto;
}

.hybrid ::selection {
	background: var(--h3-yellow);
	color: var(--h3-ink);
}

/* Sprungziele landen unter der schwebenden Leiste, nicht darunter. */
body.is-hybrid :where(section, [id]) {
	scroll-margin-top: calc(var(--h3-bar-total) + var(--mi-space-5));
}

/* ===========================================================================
   02  Typografie
   =========================================================================== */
.h3-kicker {
	margin: 0 0 var(--mi-space-3);
	color: var(--h3-ink-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.h3-display {
	margin: 0;
	max-width: 20ch;
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-display);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--h3-ink);
	text-wrap: balance;
}

/*
 * Ohne Deckelung der Fläche braucht die Überschrift ein eigenes Mass – sonst
 * liefe sie auf breiten Schirmen über die volle Fensterbreite.
 */
.h3-h2 {
	margin: 0 0 var(--mi-space-4);
	max-width: 22ch;
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-h2-size);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--h3-ink);
	text-wrap: balance;
}

.h3-h3 {
	margin: 0 0 var(--mi-space-3);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-h3-size);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--h3-ink);
}

.h3-lead {
	margin: 0;
	max-width: 62ch;
	font-size: var(--h3-lead-size);
	line-height: 1.6;
	color: var(--h3-ink-muted);
	text-wrap: pretty;
}

.h3-head {
	margin-bottom: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
}

.hybrid p {
	text-wrap: pretty;
}

/* ===========================================================================
   03  Kopfleiste und Menü-Ebene
   ---------------------------------------------------------------------------
   Dieselbe schwebende Leiste wie auf Startseite 2 – sie hat sich bewährt –,
   aber in der hellen Palette: Fläche hellgrau, Aktionen in CD-Gelb. Der runde
   Knopf war dort schwarz; hier wäre das eine schwarze Fläche.
   =========================================================================== */
body.is-hybrid .site-header {
	position: fixed;
	top: var(--h3-bar-top);
	left: 0;
	right: 0;
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	border-bottom: 0;
	box-shadow: none;
}

body.is-hybrid .header-row {
	position: relative;
	width: auto;
	max-width: none;
	min-height: var(--h3-bar-h);
	width: var(--h3-shell);
	margin-inline: auto;
	padding: var(--h3-bar-pad);
	gap: clamp(0.5rem, 0.3rem + 0.8vw, 1.25rem);
	border-radius: calc(var(--h3-radius) + 0.5rem);
	background: var(--h3-surface);
	box-shadow:
		0 1px 2px oklch(0.19 0.008 90 / 0.06),
		0 12px 32px -14px oklch(0.19 0.008 90 / 0.2);
	transition: background-color 320ms var(--h3-ease);
}

/* Ganz oben liegt die Leiste auf dem Motiv und tritt zurück. */
body.is-hybrid .site-header[data-scrolled="false"] .header-row {
	background: oklch(1 0 0 / 0.72);
	backdrop-filter: saturate(1.3) blur(10px);
}

body.is-hybrid .brand {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

body.is-hybrid .brand img {
	width: clamp(104px, 8vw, 132px);
}

body.is-hybrid .main-nav {
	margin-left: 0;
	flex: 1 1 auto;
	gap: clamp(0.25rem, 0.1rem + 0.5vw, 0.75rem);
	padding-left: calc(var(--h3-bar-h) + 0.75rem);
}

/* Die Abschnittslinks trägt die Ebene, nicht die Leiste. */
body.is-hybrid .main-nav-links {
	display: none;
}

body.is-hybrid .professional-lock-nav {
	margin-left: auto;
}

/* --- Der runde Knopf, in CD-Gelb statt Schwarz --------------------------- */
.h3-menu-btn {
	position: absolute;
	left: var(--h3-bar-pad);
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--h3-bar-h);
	height: var(--h3-bar-h);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	cursor: pointer;
	transform: translateY(-50%);
	/*
	 * Rückmeldung ohne Farbwechsel: Das Gelb bleibt, ein Ring kommt dazu.
	 * Ein zweiter Gelbton wäre eine Abstufung – und die ist ausgeschlossen.
	 */
	box-shadow: 0 0 0 0 oklch(0.19 0.008 90 / 0.18);
	transition:
		box-shadow 240ms var(--h3-ease),
		transform 200ms var(--h3-ease);
}

.h3-menu-btn:hover {
	box-shadow: 0 0 0 4px oklch(0.19 0.008 90 / 0.12);
}

.h3-menu-btn:active {
	transform: translateY(-50%) scale(0.95);
}

.h3-menu-icon {
	position: relative;
	display: block;
	width: 1.05rem;
	height: 0.6rem;
}

.h3-menu-icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 320ms var(--h3-ease);
}

.h3-menu-icon span:first-child { top: 0; }
.h3-menu-icon span:last-child  { bottom: 0; }

.h3-menu-btn[aria-expanded="true"] .h3-menu-icon span:first-child {
	transform: translateY(0.29rem) rotate(45deg);
}

.h3-menu-btn[aria-expanded="true"] .h3-menu-icon span:last-child {
	transform: translateY(-0.29rem) rotate(-45deg);
}

/* --- Shop-Pille: CD-Gelb, ohne Unterstrich ------------------------------- */
body.is-hybrid .shop-nav-link {
	margin-left: clamp(0.35rem, 0.2rem + 0.5vw, 0.75rem);
	min-height: var(--h3-bar-h);
	padding-inline: clamp(1.1rem, 0.8rem + 1.2vw, 2rem);
	border-radius: 999px;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	box-shadow: 0 0 0 0 oklch(0.19 0.008 90 / 0.18);
	transition: box-shadow 240ms var(--h3-ease);
}

body.is-hybrid .shop-nav-link:hover {
	background: var(--h3-yellow);
	box-shadow: 0 0 0 4px oklch(0.19 0.008 90 / 0.12);
}

body.is-hybrid .shop-nav-link::after,
body.is-hybrid .shop-nav-link:hover::after {
	content: none;
}

/* --- Sprachumschalter als Segment ---------------------------------------- */
.h3-lang {
	position: relative;
	flex: 0 0 auto;
}

.h3-lang .lang-menu {
	position: relative;
	top: auto;
	right: auto;
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 0;
	padding: 0.25rem;
	border-radius: 999px;
	background: var(--h3-ground);
	box-shadow: none;
}

.h3-lang .lang-menu::before {
	content: "";
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	z-index: 0;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background: var(--h3-surface);
	box-shadow: 0 1px 2px oklch(0.19 0.008 90 / 0.14);
	transition: transform 280ms var(--h3-ease);
}

.h3-lang .lang-menu:has(.lang-option[data-lang="en"].is-active)::before {
	transform: translateX(2.125rem);
}

.h3-lang .lang-option,
.h3-lang .lang-option.is-active {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	min-width: 0;
	height: 2.125rem;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--h3-ink-muted);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 240ms var(--h3-ease);
}

.h3-lang .lang-option.is-active,
.h3-lang .lang-option:hover {
	background: transparent;
	color: var(--h3-ink);
}

@media (max-width: 62rem) {
	body.is-hybrid .mobile-menu-btn,
	body.is-hybrid .main-nav {
		display: none;
	}

	body.is-hybrid .brand {
		position: static;
		transform: none;
		margin-left: calc(var(--h3-bar-h) + 0.75rem);
		margin-right: auto;
	}
}

/* --- Die Menü-Ebene, hell statt schwarz ---------------------------------- */
.h3-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1150;
	background: oklch(0.19 0.008 90 / 0.28);
	backdrop-filter: blur(3px);
	animation: h3-fade 240ms var(--h3-ease) both;
}

.h3-menu {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	overflow-y: auto;
	background: var(--h3-ground);
	color: var(--h3-ink);
	animation: h3-menu-in 380ms var(--h3-ease) both;
}

.h3-menu[hidden],
.h3-menu-backdrop[hidden] {
	display: none;
}

.h3-menu-inner {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	width: var(--h3-shell);
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
}

.h3-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mi-space-4);
}

.h3-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--h3-bar-h);
	height: var(--h3-bar-h);
	border: 0;
	border-radius: 50%;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0 0 oklch(0.19 0.008 90 / 0.18);
	transition: box-shadow 240ms var(--h3-ease);
}

.h3-menu-close:hover {
	box-shadow: 0 0 0 4px oklch(0.19 0.008 90 / 0.12);
}

.h3-menu-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.h3-menu-nav li {
	border-top: 1px solid var(--h3-line);
	animation: h3-rise 420ms var(--h3-ease) both;
	animation-delay: calc(var(--h3-i) * 40ms);
}

.h3-menu-nav li:last-child {
	border-bottom: 1px solid var(--h3-line);
}

.h3-menu-nav a {
	display: grid;
	grid-template-columns: 3rem 1fr auto;
	align-items: baseline;
	gap: var(--mi-space-4);
	padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem) 0;
	color: var(--h3-ink);
	text-decoration: none;
	transition: padding-left 260ms var(--h3-ease);
}

.h3-menu-nav a:hover {
	padding-left: 0.75rem;
}

.h3-menu-num {
	color: var(--h3-ink-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.h3-menu-label {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: clamp(1.375rem, 1rem + 1.8vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.h3-menu-note {
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
	text-align: right;
}

/*
 * Die Shop-Navigation in der Ebene. Zwei Ebenen, eingerueckt – kein
 * Aufklappen: In einer Ebene, die man ohnehin scrollt, ist eine offene Liste
 * schneller als ein Klappmechanismus.
 */
.h3-menu-shop {
	padding-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	border-top: 1px solid var(--h3-line);
}

.h3-menu-shop ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.h3-menu-shop > ul {
	display: grid;
	gap: 0.35rem;
}

.h3-menu-shop a {
	display: block;
	padding: 0.3rem 0;
	color: var(--h3-ink);
	text-decoration: none;
}

.h3-menu-shop > ul > li > a {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: 1.125rem;
}

.h3-menu-shop .sub-menu {
	margin: 0.15rem 0 0.6rem 0.9rem;
	display: grid;
	gap: 0.15rem;
}

.h3-menu-shop .sub-menu a {
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
}

.h3-menu-shop a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.h3-menu-foot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--mi-space-6);
	padding-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
	border-top: 1px solid var(--h3-line);
}

.h3-menu-foot a {
	display: block;
	color: var(--h3-ink);
	text-decoration: none;
	line-height: 1.9;
}

.h3-menu-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.h3-menu-address {
	margin: var(--mi-space-3) 0 0;
	color: var(--h3-ink-muted);
}

@keyframes h3-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes h3-menu-in {
	from { opacity: 0; transform: translateY(-1.5rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes h3-rise {
	from { opacity: 0; transform: translateY(0.9rem); }
	to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   03b  Kopfbereich und Seitenfuss wie moebelinio.com
   ---------------------------------------------------------------------------
   Nach der Vorlage: oben zwei weisse Zeilen – Marke, Suche, Symbole; darunter
   die Navigation. Unten eine schwarze Fläche mit drei Spalten und ein
   dunkelgraues Band mit Wortmarke und Urheberzeile.

   Die Flächen laufen über die volle Fensterbreite, ihr Inhalt sitzt auf
   --h3-shell. Das ist der Unterschied zwischen Fläche und Spalte: Eine
   schwarze Fläche, die bei 1500 px endete, sähe aus wie ein Kasten.
   =========================================================================== */
.mi-shop-row {
	width: var(--h3-shell);
	margin-inline: auto;
}

.mi-shop-header {
	position: relative;
	z-index: var(--mi-z-header, 100);
	background: #fff;
}

/* --- Zeile 1: Marke, Suche, Symbole -------------------------------------- */
.mi-shop-top .mi-shop-row {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 2vw, 3rem);
	padding-block: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.mi-shop-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.mi-shop-brand img {
	/* Im Shop gemessen: 300 px breit bei 1585 px Sichtfläche. */
	width: clamp(170px, 19vw, 300px);
	height: auto;
}

.mi-shop-search {
	flex: 0 1 26rem;
	display: flex;
	margin-inline: auto;
}

.mi-shop-search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--h3-ink);
	border-right: 0;
	border-radius: 0;
	background: #fff;
	color: var(--h3-ink);
	font: inherit;
}

.mi-shop-search input::placeholder {
	color: var(--h3-ink-muted);
}

.mi-shop-search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	border: 1px solid var(--h3-ink);
	background: #fff;
	color: var(--h3-ink);
	cursor: pointer;
}

.mi-shop-search button svg {
	width: 1.25rem;
	height: 1.25rem;
}

.mi-shop-search button:hover {
	background: var(--h3-ground);
}

/*
 * Ganz nach rechts. Vorher schob das Suchfeld die Symbole dorthin; seit es
 * fehlt, stünden sie ohne diesen Rand direkt neben der Marke.
 */
.mi-shop-tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 0.2rem + 0.6vw, 1rem);
	margin-left: auto;
}

.mi-shop-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--h3-ink);
	transition: background-color 200ms var(--h3-ease);
}

.mi-shop-tool svg {
	/* Im Shop gemessen: 22 x 22. */
	width: 1.375rem;
	height: 1.375rem;
}

.mi-shop-tool:hover {
	background: var(--h3-ground);
}

.mi-shop-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	cursor: pointer;
}

/* --- Zeile 2: Navigation ------------------------------------------------- */
.mi-shop-bottom .mi-shop-row {
	padding-bottom: var(--h3-nav-gap);
}

.mi-shop-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-shop-menu > li {
	position: relative;
}

/*
 * Am Shop gemessen: 16 px, Gewicht 400, Innenabstand 8 px oben und unten,
 * 16 px zwischen den Punkten. Nicht fett – die Hausschrift wirkt in Regular
 * bereits kräftig, und der Black-Schnitt war deutlich zu schwer.
 */
.mi-shop-menu > li > a {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--h3-ink);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

/*
 * Der aktive Eintrag steht in Bernstein mit Unterstrich – wie in der Vorlage.
 *
 * Zum Kontrast siehe AUDIT.md: Dieser Ton erreicht auf weissem Grund nicht die
 * 4,5 : 1, die WCAG 1.4.3 für Fliesstext verlangt. Er ist so gewählt, weil die
 * Vorlage ihn so zeigt; --h3-nav-active an einer Stelle dunkler gestellt
 * behebt es, kostet aber die Übereinstimmung.
 */
.mi-shop-menu > .current-menu-item > a,
.mi-shop-menu > li > a[aria-current="page"] {
	color: var(--h3-nav-active);
	border-bottom-color: var(--h3-nav-active);
}

.mi-shop-menu > li > a:hover {
	color: var(--h3-nav-active);
	border-bottom-color: var(--h3-nav-active);
}

/*
 * Der Pfeil erscheint nur, wo es wirklich ein Untermenü gibt – ein gefülltes
 * Dreieck wie in der Vorlage, kein Winkel.
 */
.mi-shop-menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.4rem;
	vertical-align: 0.18em;
	border-left: 0.3rem solid transparent;
	border-right: 0.3rem solid transparent;
	border-top: 0.32rem solid currentColor;
}

/* --- Klappmenüs ---------------------------------------------------------- */

/*
 * Zwei Bauarten aus derselben Auszeichnung:
 *
 *   Mega-Menü  – wenn die zweite Ebene selbst noch eine dritte hat. Es läuft
 *                über die ganze Breite der Kopfleiste, die Kategorien stehen
 *                als Spalten nebeneinander.
 *   Klappmenü  – sonst; eine schmale Liste unter dem Menüpunkt.
 *
 * Unterschieden wird über :has(). Ohne diese Abfrage müsste die Bauart im
 * Markup stehen, und dann müsste sie jemand pflegen, sobald im Backend ein
 * Unterpunkt dazukommt.
 */
.mi-shop-bottom .mi-shop-row {
	position: relative;
}

/* Ein Mega-Menü misst sich an der Leiste, nicht am Menüpunkt. */
.mi-shop-menu > li:has(.sub-menu .sub-menu) {
	position: static;
}

.mi-shop-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 18px 40px -18px oklch(0.19 0.008 90 / 0.35), 0 0 0 1px var(--h3-line);
	opacity: 0;
	visibility: hidden;
	/*
	 * Zusätzlich zu visibility: Eine geschlossene Klappe darf keine Zeigerdaten
	 * abfangen. Das Mega-Menü ist über 900 Pixel hoch und liegt damit über der
	 * halben Bühne – ohne diese Zeile öffnete es sich, sobald der Zeiger
	 * irgendwo in diesen Bereich geriet, etwa über der Zeile
	 * "Pädagogische Raumkonzepte".
	 */
	pointer-events: none;
	transition: opacity 180ms var(--h3-ease), visibility 180ms;
}

.mi-shop-menu > li:hover > .sub-menu,
.mi-shop-menu > li:focus-within > .sub-menu,
.mi-shop-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
 * Kein Loch zwischen Menüpunkt und Klappe.
 *
 * Zwischen der Unterkante des Punktes und der Oberkante der Klappe lag der
 * Innenabstand der Zeile – rund 20 Pixel, in denen der Zeiger den Kontakt
 * verlor und die Klappe zuging. Sie war damit gar nicht zu bedienen.
 *
 * Gelöst nicht über einen unsichtbaren Streifen, sondern über die Kiste selbst:
 * Die Klappe beginnt genau an der Unterkante des Punktes, und der sichtbare
 * Abstand entsteht aus einem durchsichtigen oberen Rahmen. `background-clip`
 * hält die weisse Fläche innerhalb davon – man sieht denselben Abstand,
 * aber der Zeiger läuft über eine durchgehende Fläche.
 */
.mi-shop-menu > li > .sub-menu {
	top: calc(100% - var(--h3-nav-gap));
	border-top: var(--h3-nav-gap) solid transparent;
	background-clip: padding-box;
}

/* Die einfache Klappe. */
.mi-shop-menu > li > .sub-menu {
	min-width: 15rem;
}

.mi-shop-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.1rem;
	color: var(--h3-ink);
	text-decoration: none;
}

.mi-shop-menu .sub-menu a:hover {
	background: var(--h3-ground);
}

/* --- Das Mega-Menü ------------------------------------------------------- */
.mi-shop-menu > li > .sub-menu.mi-mega {
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Zeilen enger als Spalten: Die Spalten brauchen Trennung, die Zeilen nicht. */
	gap: clamp(1.25rem, 1rem + 0.8vw, 2rem) clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
	min-width: 0;
	padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.25rem, 1rem + 1.2vw, 2rem);
	border-radius: 0.25rem;
}

/*
 * „Zur Kategorie …" steht über allen Spalten, nicht in der ersten – deshalb
 * über die volle Rasterbreite.
 */
.mi-mega > .mi-mega-lead {
	grid-column: 1 / -1;
	margin-bottom: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--h3-line);
	line-height: 1.2;
}

.mi-mega > .mi-mega-lead > a {
	display: inline-block;
	padding: 0;
	color: var(--h3-nav-active);
	font-weight: 700;
}

.mi-mega > .mi-mega-lead > a:hover {
	background: none;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Jede Kategorie ist eine Spalte: Überschrift, darunter ihre Unterpunkte. */
.mi-mega > li:not(.mi-mega-lead) > a {
	padding: 0 0 0.35rem;
	font-weight: 700;
	line-height: 1.3;
}

.mi-mega > li:not(.mi-mega-lead) > a:hover {
	background: none;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * Die dritte Ebene steht im Fluss, nicht als eigene Klappe. Deshalb hier
 * alles zurücksetzen, was die Klappe ausmacht.
 */
.mi-mega .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	/*
	 * `inherit`, nicht `visible`: Ein festes `visible` hebt das `hidden` der
	 * geschlossenen Klappe für diesen Teilbaum auf. Die Liste bliebe dann
	 * unsichtbar – die Deckkraft der Klappe gilt für alles darunter –, wäre
	 * aber weiterhin anklickbar und mausempfindlich.
	 */
	visibility: inherit;
	pointer-events: inherit;
}

/*
 * Die 44 Pixel je Punkt kamen nicht aus diesem Stylesheet.
 *
 * `body.a11y-large-targets` setzt auf jeden Link eine Mindesthöhe von
 * 2,75 rem – die Zielgröße für den Finger. In einem Klappmenü mit 38 Einträgen
 * summiert sich das: Das Panel wuchs dadurch auf 945 Pixel.
 *
 * Aufgehoben wird sie nur bei feinem Zeiger. Das Mega-Menü erscheint ohnehin
 * erst ab 62 rem, aber die Fensterbreite sagt nichts über das Eingabegerät –
 * ein Notebook mit Tastschirm gehört zu beidem. `pointer: fine` fragt das
 * Gerät, nicht die Breite: Wer tippt, behält die grossen Ziele.
 */
@media (pointer: fine) {
	.mi-shop-menu .sub-menu a {
		min-height: 0;
	}

	.mi-mega > li > a,
	.mi-mega > .mi-mega-lead > a {
		min-height: 0;
	}
}

.mi-mega .sub-menu li {
	margin: 0;
}

.mi-mega .sub-menu a {
	padding: 0.12rem 0 0.12rem 0.85rem;
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.mi-mega .sub-menu a:hover {
	background: none;
	color: var(--h3-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Ohne dritte Ebene braucht die Spalte keinen Innenabstand unten. */
.mi-mega > li:not(.mi-mega-lead) {
	break-inside: avoid;
}

@media (max-width: 80rem) {
	.mi-shop-menu > li > .sub-menu.mi-mega {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Das Konto-Aufklappmenü ---------------------------------------------- */
.mi-shop-account {
	position: relative;
}

.mi-shop-account-panel {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 10;
	width: 15rem;
	pointer-events: none;
	padding: 1.1rem 1.25rem 1.25rem;
	background: #fff;
	box-shadow: 0 18px 40px -18px oklch(0.19 0.008 90 / 0.35), 0 0 0 1px var(--h3-line);
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms var(--h3-ease), visibility 180ms;
}

.mi-shop-account:hover .mi-shop-account-panel,
.mi-shop-account:focus-within .mi-shop-account-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Brücke über den Abstand zwischen Symbol und Klappe, siehe Navigation. */
.mi-shop-account-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 0.75rem;
}

.mi-shop-account-head {
	margin: 0 0 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--h3-line);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: 1.0625rem;
}

.mi-shop-account-login {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: 0.25rem;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.mi-shop-account-register {
	margin: 0.7rem 0 1rem;
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
	text-align: center;
}

.mi-shop-account-register a {
	color: var(--h3-nav-active);
	font-weight: 600;
	text-decoration: none;
}

.mi-shop-account-register a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.mi-shop-account-panel ul {
	margin: 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--h3-line);
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.mi-shop-account-panel ul a {
	color: var(--h3-ink);
	text-decoration: none;
}

.mi-shop-account-panel ul a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 62rem) {
	.mi-shop-bottom {
		display: none;
	}

	.mi-shop-burger {
		display: inline-flex;
	}

	.mi-shop-top .mi-shop-row {
		flex-wrap: wrap;
	}

	.mi-shop-search {
		order: 3;
		flex-basis: 100%;
		margin-inline: 0;
	}

}

@media (max-width: 26rem) {
	/*
	 * Marke, drei Symbole und der Knopf passen bei 320 px nicht nebeneinander.
	 * Merkzettel und Konto treten zurück; sie stehen im Shop an derselben
	 * Stelle, und der Warenkorb trägt den Weg dorthin.
	 */
	.mi-shop-tool:not(:last-of-type) {
		display: none;
	}

	.mi-shop-brand img {
		width: 140px;
	}
}

/* ---------------------------------------------------------------------------
   Seitenfuss
   --------------------------------------------------------------------------- */
.mi-shop-footer {
	margin-top: var(--h3-section);
}

.mi-shop-footer-main {
	background: #000;
	color: #fff;
}

.mi-shop-footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.mi-shop-footer-head {
	margin: 0 0 var(--mi-space-4);
	color: #fff;
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: 1.0625rem;
}

.mi-shop-footer-address {
	margin: 0 0 var(--mi-space-4);
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
}

.mi-shop-footer-col p {
	margin: 0 0 var(--mi-space-4);
	font-weight: 600;
}

.mi-shop-footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.mi-shop-footer-col a,
.mi-shop-footer-col button {
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	/* Der Unterstrich erscheint beim Zeigen; auf Schwarz ist er sonst laut. */
	border-bottom: 1px solid transparent;
}

.mi-shop-footer-col a:hover,
.mi-shop-footer-col button:hover {
	border-bottom-color: currentColor;
}

.mi-shop-footer-social {
	display: flex;
	gap: var(--mi-space-3);
	margin-top: var(--mi-space-5);
}

.mi-shop-footer-social a {
	display: inline-flex;
	color: #fff;
	border-bottom: 0;
	transition: opacity 200ms var(--h3-ease);
}

.mi-shop-footer-social svg {
	width: 1.6rem;
	height: 1.6rem;
}

.mi-shop-footer-social a:hover {
	opacity: 0.7;
}

/* Das dunkelgraue Band darunter. */
.mi-shop-footer-base {
	background: oklch(0.31 0 0);
	color: #fff;
	text-align: center;
}

.mi-shop-footer-base .mi-shop-row {
	display: grid;
	justify-items: center;
	gap: var(--mi-space-4);
	padding-block: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}

.mi-shop-footer-mark img {
	width: clamp(130px, 11vw, 165px);
	height: auto;
	/* Die Wortmarke liegt farbig vor; auf Schwarz wird sie weiss gebraucht. */
	filter: brightness(0) invert(1);
}

.mi-shop-footer-copy {
	margin: 0;
	font-weight: 600;
}

/*
 * Der Knopf für Barrierefreiheit kommt aus dem Grundstylesheet und steht dort
 * fest in der Ecke. Auf dieser Seite rückt er über die Aktionsleiste.
 */
body.is-hybrid .a11y-toggle {
	right: var(--h3-corner-inset);
	bottom: calc(var(--h3-corner-inset) + var(--h3-bar-space));
}

/* ---------------------------------------------------------------------------
   Aktionsleiste auf schmalen Geräten
   ---------------------------------------------------------------------------
   Auf dem Telefon steht die Hauptaktion sonst am Ende einer langen
   Scrollstrecke. Auf dem Schreibtisch ist der Weg kurz genug – dort bleibt
   die Leiste aus.
   --------------------------------------------------------------------------- */
.mi-cta-bar {
	display: none;
}

@media (max-width: 48rem) {
	/* Die Leiste belegt die unterste Zeile; die Knöpfe rücken darüber. */
	body.is-hybrid {
		--h3-bar-space: 4.75rem;
	}

	.mi-cta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 850;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.6rem clamp(0.75rem, 0.5rem + 1vw, 1.25rem)
			calc(0.6rem + env(safe-area-inset-bottom, 0px));
		background: var(--h3-surface);
		box-shadow: 0 -6px 24px -12px oklch(0.19 0.008 90 / 0.4);
		transition: transform 300ms var(--h3-ease);
	}

	/* Im Kontaktabschnitt fährt sie nach unten aus dem Bild. */
	.mi-cta-bar.is-hidden {
		transform: translateY(110%);
	}

	.mi-cta-bar-main {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 3rem;
		padding: 0.7rem 1.25rem;
		border-radius: 999px;
		background: var(--h3-yellow);
		color: var(--h3-ink);
		font-family: var(--mi-font-display);
		font-weight: var(--mi-weight-display);
		text-decoration: none;
	}

	.mi-cta-bar-call {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		border-radius: 999px;
		color: var(--h3-ink);
		box-shadow: inset 0 0 0 1px var(--h3-line);
	}

	.mi-cta-bar-call svg {
		width: 1.4rem;
		height: 1.4rem;
	}

	/*
	 * Der Fuss braucht Platz, sonst deckt die Leiste seine letzte Zeile ab.
	 * Und der Zurück-nach-oben-Knopf rückt über sie.
	 */
	.mi-shop-footer-base .mi-shop-row {
		padding-bottom: calc(clamp(1.75rem, 1.3rem + 2vw, 3rem) + 4.5rem);
	}

}

/* Zurück nach oben. */
/*
 * Eine Stufe über dem Knopf für Barrierefreiheit, nicht darauf.
 */
.mi-shop-totop {
	position: fixed;
	right: var(--h3-corner-inset);
	bottom: calc(
		var(--h3-corner-inset) + var(--h3-bar-space)
		+ var(--h3-corner-btn) + var(--h3-corner-gap)
	);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	cursor: pointer;
	box-shadow: 0 6px 18px -8px oklch(0.19 0.008 90 / 0.5);
	transition: box-shadow 240ms var(--h3-ease);
}

.mi-shop-totop[hidden] {
	display: none;
}

.mi-shop-totop svg {
	width: 1.35rem;
	height: 1.35rem;
}

.mi-shop-totop:hover {
	box-shadow: 0 0 0 4px oklch(0.19 0.008 90 / 0.12);
}

@media (max-width: 48rem) {
	.mi-shop-footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===========================================================================
   04  Schaltflächen
   ---------------------------------------------------------------------------
   Drei Ausprägungen, ein Gelb. Der Zeigezustand ändert nie die Farbe – er
   fügt einen Ring hinzu und hebt die Fläche leicht an.
   =========================================================================== */
.h3-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3rem;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--h3-surface);
	color: var(--h3-ink);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-sm);
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		0 0 0 1px var(--h3-line),
		0 0 0 0 oklch(0.19 0.008 90 / 0.18);
	transition:
		box-shadow 240ms var(--h3-ease),
		transform 200ms var(--h3-ease);
}

.h3-btn:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px var(--h3-line),
		0 0 0 4px oklch(0.19 0.008 90 / 0.08);
}

.h3-btn:active {
	transform: translateY(0);
}

.h3-btn--accent,
.h3-btn--solid {
	background: var(--h3-yellow);
	box-shadow:
		0 0 0 1px oklch(0.19 0.008 90 / 0.06),
		0 0 0 0 oklch(0.19 0.008 90 / 0.18);
}

.h3-btn--accent:hover,
.h3-btn--solid:hover {
	background: var(--h3-yellow);
	box-shadow:
		0 0 0 1px oklch(0.19 0.008 90 / 0.06),
		0 0 0 4px oklch(0.19 0.008 90 / 0.14);
}

.h3-btn--quiet {
	background: transparent;
	box-shadow: 0 0 0 1px var(--h3-line);
}

.h3-btn--quiet:hover {
	background: var(--h3-surface);
}

/* ===========================================================================
   05  Bühne: Bild mit Text, Fliesstext darunter
   =========================================================================== */
/*
 * Kein Freiraum für die Leiste mehr: Der Kopfbereich von moebelinio.com steht
 * im Fluss und nimmt seinen Platz selbst ein. Der frühere Wert rechnete mit
 * einer schwebenden Leiste und hinterliess jetzt eine leere Bahn.
 */
.h3-hero {
	position: relative;
	padding-block: clamp(1.5rem, 1.1rem + 1.8vw, 3rem) var(--h3-section);
}

.h3-hero-media {
	width: var(--h3-shell);
	margin-inline: auto;
}

.h3-hero-img {
	display: block;
	width: 100%;
	/* 42vh statt 48: Erst dann steht der CTA in der Karte über der Falz. */
	/*
	 * Höhe an das Sichtfenster gebunden, Motiv beschnitten statt gestaucht:
	 * Im Format 16:9 stünde die Hauptaussage auf einem grossen Schirm sonst
	 * unter der Falz.
	 */
	height: clamp(14rem, 42vh, 30rem);
	object-fit: cover;
	object-position: center 42%;
	border-radius: var(--h3-radius);
}

/*
 * Die Karte greift mit ihrem oberen Drittel in die Bildkante hinein, statt
 * darunter zu stehen. Ein grösserer Versatz liesse sie das Motiv verschlucken,
 * das hier das eigentliche Argument ist.
 */
.h3-hero-card {
	position: relative;
	width: calc(var(--h3-shell) - clamp(1.5rem, 4vw, 6rem));
	margin: clamp(-4.5rem, -2.5rem - 3vw, -2rem) auto 0;
	padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
	box-shadow:
		0 1px 3px oklch(0.19 0.008 90 / 0.05),
		0 24px 60px -32px oklch(0.19 0.008 90 / 0.3);
}

/*
 * Flache Fenster: Bei 800 Pixeln Höhe stand der CTA gemessen 20 Pixel unter
 * der Falz. Statt das Motiv überall zu verkleinern, gibt es hier nach – auf
 * hohen Schirmen bleibt die Bühne so gross, wie sie gedacht ist.
 *
 * Nur ab 48 rem Breite: Auf dem Telefon ist die Höhe ohnehin knapp, dort
 * greift bereits die vh-Bindung.
 */
@media (max-height: 54rem) and (min-width: 48rem) {
	.h3-hero {
		padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) var(--h3-section);
	}

	.h3-hero-img {
		height: clamp(11rem, 32vh, 20rem);
	}
}

.h3-hero-below {
	width: var(--h3-shell);
	margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto 0;
}

.h3-hero-below .h3-lead {
	max-width: 68ch;
}

.h3-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-3);
	margin-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.h3-slider-section {
	padding-block: var(--h3-section);
}

.h3-slider-section .h3-head {
	width: var(--h3-shell);
	margin-inline: auto;
}

/*
 * Der Rahmen des Streifens.
 *
 * Er hat genau die Spur, in der auch Überschrift, Text und alle übrigen
 * Abschnitte stehen – der Streifen läuft also nicht mehr aus dem Bild heraus.
 * Zugleich ist er der Bezugsrahmen für die beiden Pfeile.
 */
.h3-slider-frame {
	position: relative;
	width: var(--h3-shell);
	margin-inline: auto;
}

.h3-slider-nav {
	display: flex;
	gap: 0.5rem;
	margin-top: var(--mi-space-4);
}

.h3-slider-nav[hidden] {
	display: none;
}

/*
 * Ab Tabletbreite stehen die Pfeile unmittelbar links und rechts am Streifen,
 * mittig auf der Kante des Rahmens: je zur Hälfte im Seitensteg, zur Hälfte
 * über der äußersten Karte. So liegen sie dort, wo man sie sucht, ohne ein
 * ganzes Motiv zu verdecken.
 *
 * Der Behälter selbst nimmt keine Zeigereingaben an – sonst läge eine
 * unsichtbare Fläche über der halben Kartenreihe und das Ziehen mit der Maus
 * würde dort nicht mehr greifen.
 */
@media (min-width: 48.0625rem) {
	.h3-slider-nav {
		position: absolute;
		inset-block: 0;
		inset-inline: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0;
		pointer-events: none;
	}

	.h3-slider-arrow {
		pointer-events: auto;
	}

	.h3-slider-arrow--prev {
		margin-left: -1.5rem;
	}

	.h3-slider-arrow--next {
		margin-right: -1.5rem;
	}
}

.h3-slider-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	cursor: pointer;
	box-shadow: 0 0 0 0 oklch(0.19 0.008 90 / 0.18);
	transition:
		box-shadow 240ms var(--h3-ease),
		opacity 240ms var(--h3-ease);
}

.h3-slider-arrow svg {
	width: 1.4rem;
	height: 1.4rem;
}

.h3-slider-arrow:hover:not(:disabled) {
	box-shadow: 0 0 0 4px oklch(0.19 0.008 90 / 0.12);
}

/*
 * Am Ende der Strecke abgeschaltet. Die Fläche bleibt gelb – ein zweiter
 * Gelbton wäre eine Abstufung –, stattdessen sinkt die Deckkraft.
 */
/*
 * Das Grundstylesheet faerbt abgeschaltete Knöpfe grau. Hier bleibt die Fläche
 * gelb – ein zweiter Ton wäre eine Abstufung –, zurück tritt sie über die
 * Deckkraft.
 */
.h3-slider-arrow:disabled {
	background: var(--h3-yellow);
	opacity: 0.35;
	cursor: default;
}

.h3-slider {
	display: flex;
	gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
	margin: 0;
	/*
	 * Die erste Karte beginnt genau dort, wo der Text darüber beginnt; nach
	 * rechts läuft der Streifen aus dem Bild. Der Gutter allein reicht dafür
	 * nicht: Sobald das Fenster breiter ist als --h3-max, steht die Textspalte
	 * weiter innen als der Gutter.
	 */
	padding: 0.5rem 0 1.5rem;
	/*
	 * Ohne scroll-padding schnappt die erste Karte an der Polsterkante vorbei:
	 * Der Schnapp-Bereich beginnt am Polsterrand, nicht am Inhaltsrand, und der
	 * Streifen scrollt sich beim Laden genau um den Innenabstand nach rechts.
	 * Derselbe Wert wie oben – deshalb hier wiederholt und nicht abgeleitet.
	 */
	scroll-padding-inline: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	/* Ohne sichtbare Leiste; gezogen wird direkt an den Karten. */
	scrollbar-width: none;
	cursor: grab;
}

.h3-slider::-webkit-scrollbar {
	display: none;
}

.h3-slider.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.h3-slider:focus-visible {
	outline: 3px solid var(--h3-ink);
	outline-offset: 4px;
	border-radius: var(--h3-radius);
}

.h3-slide {
	flex: 0 0 auto;
	/* Deutlich grösser als auf Startseite 2 (dort 20–26rem). */
	width: clamp(17rem, 68vw, 34rem);
	scroll-snap-align: start;
}

.h3-slide > article {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
	box-shadow:
		0 1px 3px oklch(0.19 0.008 90 / 0.05),
		0 18px 44px -28px oklch(0.19 0.008 90 / 0.3);
}

/*
 * Eine Höhe für alle. Das Seitenverhältnis sitzt am Rahmen, nicht am Bild –
 * so bleibt die Kante auch dann exakt, wenn ein Motiv anders zugeschnitten
 * ist als die übrigen.
 */
.h3-slide-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--h3-ground);
}

.h3-slide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.h3-slide-body {
	padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}

.h3-slide-index {
	margin: 0 0 var(--mi-space-2);
	color: var(--h3-ink-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.h3-slide-name {
	margin: 0 0 var(--mi-space-3);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-h3-size);
	line-height: 1.2;
}

.h3-slide-text {
	margin: 0;
	color: var(--h3-ink-muted);
	line-height: 1.6;
}

.h3-slider-hint {
	width: var(--h3-shell);
	/*
	 * Ohne diese Zeile zieht das Lesemass aus dem Grundstylesheet (p bekommt
	 * dort --mi-measure) den Hinweis auf 700 Pixel zusammen; die beiden auto-
	 * Ränder rückten ihn dann um 320 Pixel gegenüber dem Streifen ein.
	 */
	max-width: none;
	margin: var(--mi-space-4) auto 0;
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
}

/* ===========================================================================
   07  Grosse Bildmotivflächen
   ---------------------------------------------------------------------------
   Vom Team gewünscht: ein bis zwei Flächen im Auftritt des Kopfbereichs.
   =========================================================================== */
.h3-motiv {
	padding-block: var(--h3-section);
}

.h3-motiv-figure {
	position: relative;
	width: var(--h3-shell);
	margin: 0 auto;
}

.h3-motiv-img {
	display: block;
	width: 100%;
	height: clamp(16rem, 44vh, 30rem);
	object-fit: cover;
	border-radius: var(--h3-radius);
}

.h3-motiv-caption {
	display: grid;
	gap: var(--mi-space-2);
	width: min(100%, 34rem);
	margin: clamp(-3.5rem, -2rem - 2.5vw, -1.5rem) 0 0
		clamp(1rem, 0.6rem + 1.4vw, 2rem);
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
	position: relative;
	border-radius: calc(var(--h3-radius) * 0.75);
	background: var(--h3-surface);
	box-shadow:
		0 1px 3px oklch(0.19 0.008 90 / 0.05),
		0 18px 44px -28px oklch(0.19 0.008 90 / 0.3);
	line-height: 1.55;
}

.h3-motiv-caption .h3-kicker {
	margin: 0;
}

/* ===========================================================================
   08  Basic & Smart
   =========================================================================== */
.h3-system {
	padding-block: var(--h3-section);
}

.h3-system-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1rem, 0.8rem + 1.2vw, 1.75rem);
}

.h3-card {
	padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
	box-shadow:
		0 1px 3px oklch(0.19 0.008 90 / 0.05),
		0 18px 44px -30px oklch(0.19 0.008 90 / 0.28);
}

.h3-card-text {
	margin: 0;
	color: var(--h3-ink-muted);
	line-height: 1.65;
}

.h3-card > p:last-child {
	margin-bottom: 0;
	color: var(--h3-ink-muted);
	line-height: 1.65;
}

/*
 * Die Merkmale stehen jetzt in der Kachel, nicht mehr in einer Tabelle
 * darunter. Begriff links, Wert rechts, in beiden Kacheln dieselbe
 * Reihenfolge – der Vergleich entsteht aus der Anordnung nebeneinander.
 */
.h3-facts-list {
	display: grid;
	gap: 0;
	margin: var(--mi-space-5) 0 0;
	border-top: 1px solid var(--h3-line);
}

.h3-facts-list > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--mi-space-4);
	align-items: baseline;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--h3-line);
}

.h3-facts-list > div:last-child {
	border-bottom: 0;
}

.h3-facts-list dt {
	margin: 0;
	color: var(--h3-ink-muted);
	font-size: var(--mi-text-sm);
}

.h3-facts-list dd {
	margin: 0;
	font-size: var(--mi-text-sm);
	font-weight: 600;
}

@media (max-width: 30rem) {
	.h3-facts-list > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}
}

.h3-card-label {
	display: inline-block;
	margin: 0 0 var(--mi-space-4);
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.h3-table-wrap {
	margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
	overflow-x: auto;
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
	box-shadow: 0 0 0 1px var(--h3-line);
}

.h3-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mi-text-sm);
}

.h3-table :where(th, td) {
	padding: 1rem 1.1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--h3-line);
}

.h3-table thead th {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	white-space: nowrap;
}

.h3-table tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

.h3-table tbody th {
	font-weight: 600;
}

.h3-table tbody td {
	color: var(--h3-ink-muted);
}

/* ===========================================================================
   09  Leitfaden: vier Schritte, ein Haus
   ---------------------------------------------------------------------------
   Die graue Kurve liegt vollständig da; die gelbe steht in einem Fenster, das
   sich beim Scrollen öffnet. Fenster und Inhalt bewegen sich gegenläufig über
   transform – das läuft im Compositor, während stroke-dashoffset bei jedem
   Scrollschritt im Hauptthread neu gezeichnet werden müsste und dem Blick
   hinterherliefe.
   =========================================================================== */
.h3-guide {
	padding-block: var(--h3-section);
}

.h3-guide-body {
	position: relative;

	/*
	 * Eine Quelle für drei Dinge: Einzug der Schritte, Versatz der Knoten und
	 * Spalte der Kurve. Nur so liegt die Kurve auf jeder Fensterbreite exakt
	 * in der Mitte der Knoten.
	 */
	--h3-guide-indent: clamp(4.5rem, 14vw, 11rem);
	--h3-guide-col: clamp(80px, 12vw, 150px);
	--h3-guide-dot: 0.8rem;
}

.h3-guide-path {
	position: absolute;
	inset: 0;
	width: var(--h3-guide-col);
	pointer-events: none;
}

.h3-guide-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.h3-guide-reveal,
.h3-guide-reveal-inner {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.h3-guide-reveal {
	overflow: hidden;
}

.h3-guide-track,
.h3-guide-line {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.h3-guide-track {
	stroke: var(--h3-line);
}

.h3-guide-line {
	stroke: var(--h3-yellow);
	stroke-width: 3;
}

.h3-guide-steps {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--h3-guide-indent);
	list-style: none;
	display: grid;
	/*
	 * Gleich hohe Zeilen ohne Abstand: Nur so liegt die Mitte jedes Schrittes
	 * auf einem festen Bruchteil der Gesamthöhe – und nur dann trifft die
	 * Kurve die Knoten. Der Atem kommt aus dem Innenabstand der Schritte.
	 */
	grid-auto-rows: minmax(0, 1fr);
	gap: 0;
}

.h3-guide-step {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 46ch;
	padding-block: clamp(1.5rem, 1rem + 3vw, 4.5rem);
}

/*
 * Die Kurve schwingt zwischen 40 und 80 der 120 Kastenbreiten, abwechselnd je
 * Schritt. Ein Drittel und zwei Drittel der Pfadspalte – daher die Faktoren.
 */
.h3-guide-step:nth-child(odd)  { --h3-node-x: 0.3333; }
.h3-guide-step:nth-child(even) { --h3-node-x: 0.6667; }

.h3-guide-dot {
	position: absolute;
	/* Auf halber Höhe des Schrittes – und damit auf der Kurve. */
	top: calc(50% - var(--h3-guide-dot) / 2);
	left: calc(
		var(--h3-guide-col) * var(--h3-node-x)
		- var(--h3-guide-indent)
		- var(--h3-guide-dot) / 2
	);
	width: var(--h3-guide-dot);
	height: var(--h3-guide-dot);
	border-radius: 50%;
	background: var(--h3-yellow);
	box-shadow: 0 0 0 3px var(--h3-ground);
}

.h3-guide-num {
	margin: 0 0 var(--mi-space-2);
	color: var(--h3-ink-muted);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.h3-guide-step > p:last-child {
	margin: 0;
	color: var(--h3-ink-muted);
	line-height: 1.65;
}

.h3-site {
	width: var(--h3-shell);
	margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
	padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	border-radius: var(--h3-radius);
	background: var(--h3-yellow);
	color: var(--h3-ink);
}

.h3-site .h3-kicker {
	color: oklch(0.32 0.05 88);
}

.h3-site-name {
	margin: 0 0 var(--mi-space-3);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-h3-size);
}

.h3-site p:last-child {
	margin: 0;
	max-width: 64ch;
	color: oklch(0.28 0.045 88);
	line-height: 1.65;
}

/* ===========================================================================
   10  Professionals
   =========================================================================== */
.h3-pro {
	padding-block: var(--h3-section);
}

/* ===========================================================================
   11  Team
   =========================================================================== */
.h3-team {
	padding-block: var(--h3-section);
}

.h3-team-grid {
	display: grid;
	/*
	 * 18rem statt 15: vier Spalten statt fünf. Bei acht Personen ergibt das
	 * zwei volle Reihen – und die Porträts bleiben gross genug, um Gesichter
	 * zu zeigen statt Briefmarken.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.h3-team-card {
	display: flex;
	flex-direction: column;
}

.h3-team-media {
	/*
	 * Quadratisch, nicht 4:5 hochkant.
	 *
	 * Die Vorlagen sind 1376 × 768 im Querformat. Ein 4:5-Ausschnitt daraus
	 * misst nur 614 × 768 px – bei 301 × 376 Anzeigegrösse braucht ein
	 * 2×-Display aber 602 × 753. Also praktisch keine Reserve, und das Bild
	 * wirkt weich. Quadratisch beträgt der Ausschnitt 768 × 768 gegen
	 * 602 × 602 Bedarf: rund 28 Prozent Luft.
	 *
	 * Eine Höhe für alle Porträts, Platzhalter eingeschlossen.
	 */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
}

/*
 * Die gelieferten Porträts sind bereits Schwarzweiss, vor weissem Grund und
 * einheitlich ausgeleuchtet. Der frühere Filter – entsättigen, beim Zeigen
 * Farbe zurück – hätte hier nichts mehr zu zeigen; er bliebe ein Versprechen
 * ohne Einlösung. Beim Zeigen bleibt die ruhige Vergrösserung.
 */
.h3-team-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--h3-ease);
}

.h3-team-card:hover .h3-team-media img {
	transform: scale(1.03);
}

/*
 * Platzhalter für ein fehlendes Porträt. Kein leeres graues Feld: Die
 * Initialen zeigen, dass hier eine Person steht, und die Beschriftung sagt,
 * dass das Bild noch aussteht. Der gelbe Rahmen macht die Lücke beim
 * Durchsehen auffindbar – sie soll auffallen, solange sie besteht.
 */
.h3-team-placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--mi-space-3);
	width: 100%;
	height: 100%;
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
	box-shadow: inset 0 0 0 2px var(--h3-yellow);
}

.h3-team-initials {
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 3rem + 2vw, 5rem);
	height: clamp(3.5rem, 3rem + 2vw, 5rem);
	border-radius: 50%;
	background: var(--h3-yellow);
	color: var(--h3-ink);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	letter-spacing: 0.02em;
}

.h3-team-placeholder-note {
	color: var(--h3-ink-muted);
	font-size: var(--mi-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.h3-team-name {
	margin: var(--mi-space-4) 0 0.15rem;
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--h3-h3-size);
	line-height: 1.2;
	letter-spacing: -0.018em;
}

/*
 * Die Rolle in Versalien mit weitem Sperrsatz – so setzt sie sich vom Namen
 * ab, ohne eine zweite Farbe zu brauchen. Gedämpfte Tinte statt Gelb: Gelb
 * erreichte hier nur 3,68 : 1.
 */
/*
 * Die Funktionsbezeichnung steht in normaler Schreibweise.
 *
 * Versalien waren hier eine Auszeichnung zu viel: "Produktmanagement ·
 * Kommunikation · Vertrieb" ist dafür zu lang, Screenreader buchstabieren
 * Versalsatz je nach Stimme, und Eigennamen wie Basic verlieren ihre Form.
 * Die Zeile tritt jetzt über Grösse und Farbe zurück, nicht über Grossbuchstaben.
 */
.h3-team-role {
	margin: 0 0 var(--mi-space-2);
	max-width: 32ch;
	color: var(--h3-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.h3-team-text {
	margin: 0;
	max-width: 36ch;
	color: var(--h3-ink-muted);
	font-size: var(--mi-text-sm);
	line-height: 1.6;
}

.h3-team-text--pending {
	font-style: italic;
}

/* ===========================================================================
   12  Fragen
   =========================================================================== */
.h3-faq {
	padding-block: var(--h3-section);
}

.h3-faq .h3-head {
	margin-bottom: 0;
}

/* ===========================================================================
   13  Kontakt – die einzige gelbe Fläche
   =========================================================================== */
.h3-kontakt {
	/* Dieselbe Kante wie alle übrigen Blöcke. */
	width: var(--h3-shell);
	margin: 0 auto var(--h3-section);
	padding: clamp(2.5rem, 1.8rem + 3.4vw, 5rem) clamp(1.5rem, 1.1rem + 2.4vw, 3.5rem);
	border-radius: var(--h3-radius);
	background: var(--h3-yellow);
	color: var(--h3-ink);
}

.h3-kontakt-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
	align-items: start;
}

.h3-kontakt .h3-kicker {
	color: oklch(0.32 0.05 88);
}

.h3-kontakt .h3-lead {
	color: oklch(0.28 0.045 88);
}

.h3-kontakt-facts {
	display: grid;
	gap: var(--mi-space-4);
	margin: clamp(2rem, 1.6rem + 1.6vw, 3rem) 0 0;
	padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-top: 1px solid oklch(0.19 0.008 90 / 0.16);
}

.h3-kontakt-facts div {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	gap: var(--mi-space-4);
	align-items: baseline;
}

.h3-kontakt-facts dt {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: oklch(0.32 0.05 88);
}

.h3-kontakt-facts dd {
	margin: 0;
	font-weight: 600;
}

.h3-kontakt-facts a {
	color: var(--h3-ink);
	text-decoration-color: oklch(0.19 0.008 90 / 0.35);
	text-underline-offset: 0.22em;
}

.h3-kontakt-facts a:hover {
	text-decoration-color: currentColor;
}

/* --- Das Formular auf gelbem Grund --------------------------------------- */
.h3-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mi-space-4);
	padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
	border-radius: var(--h3-radius);
	background: var(--h3-surface);
}

.h3-form .full {
	grid-column: 1 / -1;
}

.h3-form label {
	display: block;
	margin-bottom: var(--mi-space-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.h3-form :where(input, select, textarea) {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--h3-line);
	border-radius: calc(var(--h3-radius) * 0.4);
	background: var(--h3-ground);
	color: var(--h3-ink);
	font: inherit;
}

.h3-form :where(input, select, textarea):focus-visible {
	outline: 3px solid var(--h3-ink);
	outline-offset: 1px;
	border-color: transparent;
}

.h3-form textarea {
	resize: vertical;
}

.h3-form .field-help,
.h3-form .mi-required-note {
	margin: 0;
	color: var(--h3-ink-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

/* ===========================================================================
   15  Bewegung, Druck, schmale Geräte
   =========================================================================== */
@supports (animation-timeline: view()) {
	/*
	 * Der Zeichenpunkt läuft mit der Bildschirmmitte. Längenangaben statt
	 * Prozenten: `cover 50vh` ist der Moment, in dem der Kopf des Blocks die
	 * Mitte erreicht, `cover calc(100% - 50vh)` der, in dem sein Fuss sie
	 * verlässt. Prozente bezögen sich auf Blockhöhe plus Fensterhöhe und
	 * verschöben sich mit jeder Fenstergrösse.
	 */
	.h3-guide-body {
		view-timeline-name: --h3-guide;
		view-timeline-axis: block;
	}

	.h3-guide-reveal {
		animation: h3-reveal-window linear both;
		animation-timeline: --h3-guide;
		animation-range: cover 50vh cover calc(100% - 50vh);
	}

	.h3-guide-reveal-inner {
		animation: h3-reveal-content linear both;
		animation-timeline: --h3-guide;
		animation-range: cover 50vh cover calc(100% - 50vh);
	}

	@keyframes h3-reveal-window {
		from { transform: translateY(-100%); }
		to   { transform: translateY(0); }
	}

	@keyframes h3-reveal-content {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* Abschnittsköpfe und Karten blenden zurückhaltend auf. */
	.h3-head,
	.h3-card,
	.h3-team-card,
	.h3-motiv-figure {
		animation: h3-rise 620ms var(--h3-ease) both;
		animation-timeline: view();
		animation-range: entry 5% cover 22%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h3-guide-reveal,
	.h3-guide-reveal-inner {
		transform: none;
	}

	.h3-head,
	.h3-card,
	.h3-team-card,
	.h3-motiv-figure,
	.h3-menu,
	.h3-menu-nav li {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

body.a11y-reduced-motion .hybrid *,
body.a11y-reduced-motion .hybrid *::before,
body.a11y-reduced-motion .hybrid *::after,
body.a11y-reduced-motion .mi-shop-footer * {
	animation: none !important;
	transition-duration: 0.01ms !important;
}

body.a11y-reduced-motion .h3-guide-reveal,
body.a11y-reduced-motion .h3-guide-reveal-inner {
	transform: none;
}

@media print {
	.hybrid {
		background: #fff;
		color: #000;
	}

	.h3-guide-path,
	.h3-slider-hint {
		display: none !important;
	}

	.h3-slider {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
	}
}

@media (max-width: 60rem) {
	.h3-kontakt-inner {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (max-width: 48rem) {
	/* Ohne Platz für die Kurve trägt die Nummer den Schritt allein. */
	.h3-guide-path,
	.h3-guide-dot {
		display: none;
	}

	.h3-guide-steps {
		padding-left: 0;
		grid-auto-rows: auto;
		gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
	}

	.h3-guide-step {
		padding-block: 0;
	}

	.h3-menu-nav a {
		grid-template-columns: 2.5rem 1fr;
	}

	.h3-menu-note {
		display: none;
	}

	.h3-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.h3-motiv-caption {
		width: auto;
		margin-inline: clamp(0.75rem, 3vw, 1.5rem);
	}
}

@media (max-width: 40rem) {
	.mi-shop-footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.h3-kontakt-facts div {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mi-space-2);
	}
}

@media (max-width: 30rem) {
	/* Deutsche Komposita dürfen brechen, sonst schieben sie ihre Spalte auf. */
	.hybrid p,
	.hybrid li,
	.hybrid dd,
	.hybrid address,
	.mi-shop-footer p,
	.mi-shop-footer li,
	.mi-shop-footer address {
		overflow-wrap: break-word;
	}

	.h3-table {
		font-size: 0.8125rem;
		hyphens: auto;
	}

	.h3-table :where(th, td) {
		padding: 0.7rem 0.45rem;
		word-break: break-word;
	}

	.h3-btn {
		max-width: 100%;
		align-items: flex-start;
		padding-inline: 1.15rem;
		text-align: left;
	}
}