/*!
 * moebelinio – Design-System
 * ============================================================================
 * Ein Stylesheet, eine Kaskade, keine !important-Kette.
 *
 * Ersetzt die frühere design.css (33 angehängte Patch-Ebenen, 1094 !important,
 * zehnmal :root). Die visuelle Sprache des freigegebenen Entwurfs bleibt –
 * Markengelb, Filson Soft, ruhige helle Flächen, großzügige Radien – aber sie
 * steht jetzt auf einem Tokenfundament statt auf Überschreibungen.
 *
 * Inhalt
 *   01  Tokens
 *   02  Reset und Grundlagen
 *   03  Typografie
 *   04  Layout: Container, Abschnitte, Rhythmus
 *   05  Links, Buttons, Fokus
 *   06  Kopfbereich und Navigation
 *   07  Hero
 *   08  Raumgalerie
 *   09  Varianten, Themenwelt, Nachhaltigkeit
 *   10  Professionals: Aufklappbereiche
 *   11  Team
 *   12  Formulare
 *   13  Seitenübersicht und Footer
 *   14  Consent
 *   15  Barrierefreiheits-Panel
 *   16  Dialoge
 *   17  Geschützter Bereich
 *   18  Unterseiten, Suche, 404
 *   19  Bewegung
 *   20  Barrierefreiheits-Schalter, Druck
 * ========================================================================= */

/* ===========================================================================
   01  Tokens
   ---------------------------------------------------------------------------
   Farbstrategie: committed. Das Gelb trägt Fläche, es ist kein Akzenttupfer.
   Alle Neutraltöne sind zum Markenton hin getönt (Hue 90), damit Grau neben
   Gelb nicht kalt kippt. Kein reines #000 und kein reines #fff.
   =========================================================================== */
:root {
	/* Marke */
	--mi-yellow: oklch(0.876 0.152 89.5);          /* #FFD340 */
	--mi-yellow-hover: oklch(0.845 0.155 87);
	--mi-yellow-soft: oklch(0.955 0.055 92);

	/* Getönte Neutraltöne */
	--mi-ink: oklch(0.19 0.008 90);                /* Fließtext, Überschriften */
	--mi-ink-muted: oklch(0.44 0.012 90);          /* Sekundärtext */
	--mi-ink-faint: oklch(0.58 0.010 90);          /* Zeitangaben, Meta */
	--mi-paper: oklch(0.995 0.002 90);             /* Karten, Header */
	--mi-surface: oklch(0.958 0.004 90);           /* Seitenfläche */
	--mi-surface-2: oklch(0.938 0.006 90);         /* abgesetzte Abschnitte */
	--mi-line: oklch(0.895 0.006 90);
	--mi-line-strong: oklch(0.78 0.008 90);

	/* Signalfarben */
	--mi-danger: oklch(0.44 0.16 25);
	--mi-danger-bg: oklch(0.94 0.04 25);
	--mi-success-bg: var(--mi-yellow);

	/* Typografie */
	--mi-font: "Filson Soft", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--mi-font-display: "Filson Soft", "Segoe UI", system-ui, Arial, sans-serif;

	/*
	 * Nur zwei Schnitte lizenziert: Regular 400 und Black 900. Die Hierarchie
	 * muss deshalb über Größe, Farbe, Versalien und Abstand entstehen, nicht
	 * über Zwischengewichte. Das ist eine Einschränkung, keine Nachlässigkeit.
	 */
	--mi-weight-body: 400;
	--mi-weight-display: 900;

	--mi-text-xs: 0.8125rem;
	--mi-text-sm: 0.9375rem;
	--mi-text-base: 1rem;
	--mi-text-lead: clamp(1.0625rem, 1.0rem + 0.3vw, 1.25rem);
	--mi-text-h4: clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);
	--mi-text-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
	--mi-text-h2: clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem);
	--mi-text-h1: clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem);

	--mi-leading-tight: 1.06;
	--mi-leading-snug: 1.22;
	--mi-leading-body: 1.6;

	/* Zeilenlängen. Kein Fließtext über 68 Zeichen. */
	--mi-measure: 66ch;
	--mi-measure-lead: 58ch;
	--mi-measure-head: 20ch;

	/* Abstände: 4px-Raster, Abschnittsrhythmus fluid */
	--mi-space-1: 0.25rem;
	--mi-space-2: 0.5rem;
	--mi-space-3: 0.75rem;
	--mi-space-4: 1rem;
	--mi-space-5: 1.5rem;
	--mi-space-6: 2rem;
	--mi-space-7: 3rem;
	--mi-space-8: 4rem;
	--mi-section: clamp(3.5rem, 2rem + 6vw, 7rem);
	--mi-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);

	/* Maße */
	--mi-container: 1240px;
	--mi-container-wide: 1440px;
	--mi-gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--mi-header-h: 5rem;

	/* Radien: außen weicher als innen */
	--mi-radius-sm: 0.5rem;
	--mi-radius: 0.875rem;
	--mi-radius-lg: 1.25rem;
	--mi-radius-xl: 1.75rem;
	--mi-radius-pill: 999px;

	/*
	 * Schatten mit Markenton statt neutralem Schwarz. Ein grauer Schatten auf
	 * warmem Untergrund wirkt schmutzig.
	 */
	--mi-shadow-sm: 0 1px 2px oklch(0.19 0.008 90 / 0.05);
	--mi-shadow: 0 4px 16px -4px oklch(0.19 0.008 90 / 0.10);
	--mi-shadow-lg: 0 18px 48px -12px oklch(0.19 0.008 90 / 0.16);

	/* Bewegung */
	--mi-ease: cubic-bezier(0.25, 1, 0.5, 1);        /* quart out */
	--mi-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--mi-dur-fast: 120ms;
	--mi-dur: 220ms;
	--mi-dur-slow: 340ms;

	/* Ebenen */
	--mi-z-header: 100;
	--mi-z-nav: 110;
	--mi-z-a11y-btn: 700;
	--mi-z-backdrop: 900;
	--mi-z-dialog: 950;

	/* Vom Barrierefreiheits-Panel gesteuert */
	--a11y-scale: 1;
	--a11y-line: 1.6;
	--a11y-letter: 0em;
	--a11y-word: 0em;
}

/* ===========================================================================
   02  Reset und Grundlagen
   =========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Textgrößen-Schalter des Panels wirkt hier, damit jedes rem mitskaliert. */
	font-size: calc(100% * var(--a11y-scale, 1));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--mi-surface);
	color: var(--mi-ink);
	font-family: var(--mi-font);
	font-size: var(--mi-text-base);
	font-weight: var(--mi-weight-body);
	line-height: var(--a11y-line, var(--mi-leading-body));
	letter-spacing: var(--a11y-letter, 0);
	word-spacing: var(--a11y-word, 0);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

iframe {
	max-width: 100%;
	border: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
}

:where(ul, ol)[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Das hidden-Attribut bekommt sein display:none nur aus dem Browser-
 * Stylesheet. Jede eigene display-Angabe schlaegt es. Da Banner, Panel und
 * Kartenbereich hier display:grid tragen, muss die Regel ausdruecklich
 * zurueckgeholt werden - sonst stehen ausgeblendete Dialoge offen.
 */
[hidden] {
	display: none !important;
}

hr {
	border: 0;
	border-top: 1px solid var(--mi-line);
	margin: var(--mi-space-6) 0;
}

::selection {
	background: var(--mi-yellow);
	color: var(--mi-ink);
}

/* ===========================================================================
   03  Typografie
   ---------------------------------------------------------------------------
   Hierarchie über Größe, Farbe und Abstand. Nur zwei Schnitte verfügbar, also
   trägt der Größensprung die Arbeit: Verhältnis rund 1.3 zwischen den Stufen.
   =========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	line-height: var(--mi-leading-tight);
	letter-spacing: -0.022em;
	text-wrap: balance;
	margin: 0;
	color: var(--mi-ink);
}

/*
 * page-title nur an einer Ueberschrift, nie an einem Container. Im
 * Designpaket stand die Klasse auch auf <section> (dort war sie ein reiner
 * Scroll-Anker). Ohne die Elementeinschraenkung schnuerte die
 * Zeilenbegrenzung ganze Abschnitte auf 20 Zeichen Breite ein.
 */
h1,
h1.page-title,
h2.page-title {
	font-size: var(--mi-text-h1);
	max-width: var(--mi-measure-head);
}

h2 {
	font-size: var(--mi-text-h2);
	max-width: 24ch;
}

h3 {
	font-size: var(--mi-text-h3);
	line-height: var(--mi-leading-snug);
	letter-spacing: -0.012em;
}

h4 {
	font-size: var(--mi-text-h4);
	line-height: var(--mi-leading-snug);
	letter-spacing: -0.008em;
}

p {
	margin: 0 0 var(--mi-space-4);
	max-width: var(--mi-measure);
	text-wrap: pretty;
	hyphens: auto;
}

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

/*
 * Der Kicker über einer Überschrift. Bewusst sparsam eingesetzt: eine
 * wiederholte Kleinkapitälchen-Zeile über jedem Abschnitt wäre Gerüst, kein
 * Gestaltungsmittel. Hier markiert er den Themenwechsel.
 */
.eyebrow {
	display: inline-block;
	margin-bottom: var(--mi-space-2);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--mi-ink-muted);
}

.lead {
	font-size: var(--mi-text-lead);
	line-height: 1.5;
	max-width: var(--mi-measure-lead);
	color: var(--mi-ink-muted);
	margin-top: var(--mi-space-4);
}

.field-help,
.description {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	max-width: var(--mi-measure);
}

address {
	font-style: normal;
}

strong,
b {
	font-weight: var(--mi-weight-display);
}

/* ===========================================================================
   04  Layout
   =========================================================================== */
.container {
	width: min(100% - (var(--mi-gutter) * 2), var(--mi-container));
	margin-inline: auto;
}

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

/*
 * Rhythmus statt Gleichmaß: Zwei helle Abschnitte hintereinander bekommen
 * keine Trennlinie, sondern einen Flächenwechsel.
 */
.section--soft {
	background: var(--mi-surface-2);
}

.section > .container > .eyebrow + h2 {
	margin-bottom: var(--mi-space-3);
}

.section-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* ===========================================================================
   05  Links, Buttons, Fokus
   =========================================================================== */
a {
	color: inherit;
	text-decoration: none;
}

/*
 * Links im Fließtext bleiben unterstrichen. Farbe allein reicht nicht
 * (WCAG 1.4.1), und in Fließtext ist die Unterstreichung das einzige
 * verlässliche Signal.
 */
.entry-content :where(p, li, dd, blockquote, address) a,
.lead a,
.field-help a,
.cookie-note a,
.faq-panel-inner a,
.mi-prose a {
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--mi-line-strong);
	transition: text-decoration-color var(--mi-dur) var(--mi-ease);
}

.entry-content :where(p, li, dd) a:hover,
.lead a:hover,
.faq-panel-inner a:hover,
.mi-prose a:hover {
	text-decoration-color: var(--mi-ink);
	text-decoration-thickness: 0.12em;
}

/* Basis für alle Schaltflächen */
.button,
.cookie-btn,
.professional-primary-button,
.professional-contact-button,
.pro-login-submit,
.footer-shop-button,
.didacta-button,
.google-map-load,
.sitemap-close,
.portal-file-action,
.portal-logout,
.portal-appointment,
.appointment-open-secondary,
.newsletter-row button,
.mi-search-form button,
.a11y-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mi-space-2);
	min-height: 2.75rem;
	padding: 0.6875rem 1.25rem;
	border: 0;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-surface-2);
	color: var(--mi-ink);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-sm);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		color var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur-fast) var(--mi-ease),
		box-shadow var(--mi-dur) var(--mi-ease);
}

.button:hover,
.cookie-btn:hover,
.professional-contact-button:hover,
.footer-shop-button:hover,
.didacta-button:hover,
.google-map-load:hover,
.sitemap-close:hover,
.portal-logout:hover,
.portal-appointment:hover,
.appointment-open-secondary:hover,
.a11y-reset:hover {
	background: var(--mi-yellow);
}

/* Primäraktion: die einzige gefüllte gelbe Fläche im jeweiligen Kontext. */
.button--primary,
.cookie-btn--primary,
.professional-primary-button,
.pro-login-submit,
.footer-shop-button,
.newsletter-row button,
.mi-search-form button {
	background: var(--mi-yellow);
}

.button--primary:hover,
.cookie-btn--primary:hover,
.professional-primary-button:hover,
.pro-login-submit:hover,
.newsletter-row button:hover,
.mi-search-form button:hover {
	background: var(--mi-yellow-hover);
}

.button--quiet {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--mi-line-strong);
}

.button--quiet:hover {
	background: var(--mi-yellow);
	box-shadow: inset 0 0 0 1px transparent;
}

/* Taktile Rückmeldung beim Drücken. */
.button:active,
.cookie-btn:active,
.professional-primary-button:active,
.professional-contact-button:active,
.pro-login-submit:active,
.footer-shop-button:active,
.appointment-open-secondary:active,
.newsletter-row button:active,
.mi-search-form button:active {
	transform: translateY(1px);
}

button[disabled],
.portal-file-action[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--mi-surface-2);
}

button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/*
 * Fokus. Das Designpaket entfernte jede Kontur und füllte stattdessen mit
 * #f2f2ef – exakt der Seitenfarbe, der Indikator war also unsichtbar. Die
 * Idee "Fokus ist eine Fläche" bleibt, aber die Fläche ist jetzt Markengelb
 * und trägt zusätzlich einen dunklen Ring (WCAG 2.4.13, 3:1).
 */
:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--mi-ink);
	outline-offset: 2px;
	border-radius: var(--mi-radius-sm);
}

/*
 * Die gelbe Flaeche gilt nur fuer wirklich bedienbare Elemente.
 *
 * [tabindex] traf auch die Sprungziele: Ueberschriften mit tabindex="-1"
 * nehmen nach einem Ankersprung den Fokus auf, damit die Tastatur dort
 * weitermacht – bedienbar sind sie nicht. Sie bekamen dadurch eine gelbe
 * Flaeche mit dunklem Rahmen quer ueber die halbe Buehne, was wie ein Fehler
 * aussah. Der Ring aus :focus-visible bleibt ihnen; er zeigt die Stelle, ohne
 * eine Bedienbarkeit zu behaupten, die es nicht gibt.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	background-color: var(--mi-yellow);
	color: var(--mi-ink);
}

body.a11y-focus-strong :focus-visible {
	outline-width: 5px;
	outline-offset: 3px;
}

/* Eingabefelder behalten ihre Feldfarbe, sonst wird der Text unlesbar. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	background-color: var(--mi-paper);
	outline-offset: 0;
}

@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid CanvasText;
	}
}

/* Sprungziele dürfen nicht unter dem klebenden Header landen. */
[id] {
	scroll-margin-top: calc(var(--mi-header-h) + var(--mi-space-5));
}

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

.skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: var(--mi-radius);
	background: var(--mi-yellow);
	color: var(--mi-ink);
	font-weight: var(--mi-weight-display);
	box-shadow: var(--mi-shadow-lg);
}

.skip-link:focus,
.skip-link:focus-visible {
	left: var(--mi-space-3);
	top: var(--mi-space-3);
}

/* ===========================================================================
   06  Kopfbereich und Navigation
   ---------------------------------------------------------------------------
   Vorher: fünf verschiedene Behandlungen nebeneinander (drei Pillenformen,
   ein Icon-Kreis, nackter Text), Abstand 1 px, und interne Anker trugen den
   Pfeil für externe Ziele. Jetzt: eine Textebene, ein Icon, eine gefüllte
   Aktion. Der Shop ist die einzige gelbe Fläche im Header.
   =========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--mi-z-header);
	background: oklch(0.995 0.002 90 / 0.88);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--mi-dur) var(--mi-ease),
		box-shadow var(--mi-dur) var(--mi-ease);
}

/* Der Header bekommt erst beim Scrollen eine Kante, nicht schon im Ruhezustand. */
.site-header[data-scrolled="true"] {
	border-bottom-color: var(--mi-line);
	box-shadow: var(--mi-shadow-sm);
}

.header-row {
	display: flex;
	align-items: center;
	gap: var(--mi-space-5);
	min-height: var(--mi-header-h);
}

.brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	border-radius: var(--mi-radius-sm);
}

.brand img {
	width: clamp(122px, 10vw, 152px);
	height: auto;
	transition: opacity var(--mi-dur) var(--mi-ease);
}

.brand:hover img {
	opacity: 0.72;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: var(--mi-space-1);
	margin-left: auto;
}

/*
 * Reiner Technik-Wrapper um die Menuelinks. display:contents laesst die Links
 * direkte Flex-Kinder der Navigation bleiben – das Layout aendert sich nicht.
 */
.main-nav-links {
	display: contents;
}

.main-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--mi-radius-sm);
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	white-space: nowrap;
	transition: color var(--mi-dur) var(--mi-ease);
}

.main-nav a:hover {
	color: var(--mi-ink);
}

/*
 * Der Unterstrich wächst aus der Mitte statt einzublenden. Bewegung nur über
 * transform, damit nichts umbricht.
 */
.main-nav a::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.55rem;
	height: 2px;
	border-radius: 2px;
	background: var(--mi-ink);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--mi-dur) var(--mi-ease);
}

.main-nav a:hover::after {
	transform: scaleX(1);
}

/* Aktive Seite: dauerhaft markiert, in Markengelb statt Schwarz. */
.main-nav a[aria-current="page"],
.main-nav .current-menu-item > a {
	color: var(--mi-ink);
}

.main-nav a[aria-current="page"]::after,
.main-nav .current-menu-item > a::after {
	background: var(--mi-yellow);
	transform: scaleX(1);
	height: 3px;
}

/* Diese drei tragen eigene Bedeutung und dürfen keinen Unterstrich bekommen. */
.professional-lock-nav::after,
/*
 * Kein Unterstrich unter den beiden Knopf-artigen Eintraegen.
 *
 * Die Regel stand vorher als .shop-nav-link::after da und verlor gegen
 * .main-nav a::after – zwei Typen schlagen eine Klasse. Der Unterstrich fuhr
 * deshalb quer durch die Pille. Mit dem zusaetzlichen .main-nav gewinnt sie.
 */
.main-nav .shop-nav-link::after,
.main-nav .professionals-nav-link::after {
	content: none;
}

.professionals-nav-link {
	color: var(--mi-ink);
}

.professional-lock-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: var(--mi-radius-pill);
	color: var(--mi-ink-muted);
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		color var(--mi-dur) var(--mi-ease);
}

.professional-lock-nav:hover {
	background: var(--mi-surface-2);
	color: var(--mi-ink);
}

.shop-nav-link {
	margin-left: var(--mi-space-2);
	padding: 0.625rem 1.125rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-yellow);
	color: var(--mi-ink);
	font-weight: var(--mi-weight-display);
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur-fast) var(--mi-ease);
}

.shop-nav-link:hover {
	background: var(--mi-yellow-hover);
}

.shop-nav-link:active {
	transform: translateY(1px);
}

/* Sprachumschalter */
.lang-switcher {
	position: relative;
}

.lang-switcher summary {
	display: inline-flex;
	align-items: center;
	gap: var(--mi-space-1);
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--mi-radius-sm);
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	list-style: none;
	cursor: pointer;
	transition: color var(--mi-dur) var(--mi-ease);
}

.lang-switcher summary::-webkit-details-marker {
	display: none;
}

.lang-switcher summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--mi-dur) var(--mi-ease);
}

.lang-switcher[open] summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.lang-switcher summary:hover {
	color: var(--mi-ink);
}

.lang-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: var(--mi-z-nav);
	display: grid;
	gap: 2px;
	min-width: 10rem;
	padding: var(--mi-space-2);
	border-radius: var(--mi-radius);
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-lg);
}

.lang-option {
	display: block;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--mi-radius-sm);
	background: transparent;
	text-align: left;
	font-size: var(--mi-text-sm);
	transition: background-color var(--mi-dur-fast) var(--mi-ease);
}

.lang-option:hover {
	background: var(--mi-surface-2);
}

.lang-option.is-active {
	background: var(--mi-yellow);
	font-weight: var(--mi-weight-display);
}

/* Mobiler Umschalter */
.mobile-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	border: 0;
	border-radius: var(--mi-radius-sm);
	background: transparent;
	font-size: 1.25rem;
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.mobile-menu-btn:hover {
	background: var(--mi-surface-2);
}

@media (max-width: 62rem) {
	.main-nav {
		display: none;
	}

	.mobile-menu-btn {
		display: inline-flex;
	}

	.site-header[data-nav-open="true"] {
		border-bottom-color: var(--mi-line);
	}

	.site-header[data-nav-open="true"] .main-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: var(--mi-z-nav);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		max-height: calc(100dvh - var(--mi-header-h));
		padding: var(--mi-space-4) var(--mi-gutter) var(--mi-space-6);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--mi-paper);
		box-shadow: var(--mi-shadow-lg);
		animation: mi-nav-in var(--mi-dur-slow) var(--mi-ease-expo) both;
	}

	.site-header[data-nav-open="true"] .main-nav a,
	.site-header[data-nav-open="true"] .lang-switcher summary {
		min-height: 3rem;
		padding-inline: var(--mi-space-3);
		font-size: var(--mi-text-base);
	}

	/* Im Auszug ist der Unterstrich sinnlos, die Fläche übernimmt. */
	.site-header[data-nav-open="true"] .main-nav a::after {
		content: none;
	}

	.site-header[data-nav-open="true"] .main-nav a:hover,
	.site-header[data-nav-open="true"] .main-nav a[aria-current="page"] {
		background: var(--mi-surface-2);
	}

	.shop-nav-link {
		margin-left: 0;
		margin-top: var(--mi-space-2);
		justify-content: center;
	}

	.lang-menu {
		position: static;
		box-shadow: none;
		background: var(--mi-surface-2);
		margin-top: var(--mi-space-1);
	}

	.professional-lock-nav {
		width: 100%;
		justify-content: flex-start;
		gap: var(--mi-space-3);
		padding-inline: var(--mi-space-3);
	}

	.professional-lock-nav .sr-only {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		font-size: var(--mi-text-base);
	}
}

@keyframes mi-nav-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

/* ===========================================================================
   07  Hero
   ---------------------------------------------------------------------------
   Ein Bild, eine Aussage. Die Textfläche liegt nicht mittig über dem Motiv,
   sondern sitzt asymmetrisch links unten und überlappt die Bildkante.
   =========================================================================== */
.hero {
	position: relative;
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/*
 * Das Motiv im Format 16:9 waere auf einem 1440er Schirm 765 px hoch. Zusammen
 * mit dem Kopfbereich stuende die Hauptaussage dann unterhalb der Falz – die
 * Kernbotschaft waere beim Laden unsichtbar. Die Hoehe wird deshalb an das
 * Sichtfenster gebunden, das Motiv beschnitten statt gestaucht.
 */
.hero > img {
	width: min(100% - (var(--mi-gutter) * 2), var(--mi-container-wide));
	height: clamp(20rem, 52vh, 34rem);
	margin-inline: auto;
	object-fit: cover;
	object-position: center 42%;
	border-radius: var(--mi-radius-xl);
}

@media (max-width: 48rem) {
	.hero > img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

.hero-overlay-copy {
	position: relative;
	/*
	 * Die Karte greift in die Bildkante hinein, statt darunter zu stehen –
	 * aber nur mit ihrem oberen Drittel. Ein zu grosser Versatz laesst sie das
	 * Motiv verschlucken, das hier das eigentliche Argument ist.
	 */
	margin-top: clamp(-5rem, -3rem - 3vw, -2rem);
}

.hero-copy {
	/*
	 * 58rem, nicht 46: Bei schmalerer Karte passt "Entscheidungen mit
	 * Weitblick." nicht mehr in eine Zeile und die gesetzte Zweizeiligkeit
	 * zerfaellt. Die Alternative waere gewesen, die Hero-Ueberschrift unter
	 * die Groesse der Abschnittsueberschriften zu druecken - also die
	 * Hierarchie umzukehren.
	 */
	max-width: min(100% - (var(--mi-gutter) * 2), 58rem);
	margin-inline: auto;
	margin-inline-start: max(var(--mi-gutter), calc((100vw - var(--mi-container)) / 2));
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-yellow);
	box-shadow: var(--mi-shadow-lg);
}

.hero-copy .eyebrow {
	color: oklch(0.35 0.06 85);
}

/*
 * Die beiden Zeilen der Hauptaussage stehen als eigene Blöcke, damit der
 * Umbruch nicht vom Zufall abhängt. Die allgemeine Zeilenbegrenzung für h1
 * (20 Zeichen) muss hier weichen, sonst bricht "Entscheidungen mit Weitblick."
 * ein drittes Mal um und die gesetzte Zweizeiligkeit geht verloren.
 */
.hero-title {
	max-width: none;
	/* Bleibt ueber der h2-Groesse (2.875rem), damit die Hierarchie stimmt. */
	font-size: clamp(2rem, 1.4rem + 2.7vw, 3.25rem);
}

.hero-title span {
	display: block;
}

.hero-copy p {
	margin-top: var(--mi-space-5);
	margin-bottom: 0;
	max-width: 56ch;
	font-size: var(--mi-text-base);
	line-height: 1.55;
	color: oklch(0.28 0.04 85);
}

@media (max-width: 48rem) {
	.hero-overlay-copy {
		margin-top: -2rem;
	}

	.hero-copy {
		margin-inline: var(--mi-gutter);
		max-width: none;
	}
}

/* ===========================================================================
   08  Raumgalerie
   ---------------------------------------------------------------------------
   Vierzehn Aufnahmen sind das eigentliche Argument der Seite. Sie liegen
   deshalb in einem Mauerwerksatz mit wechselnden Formaten, nicht in einem
   Raster gleicher Kacheln.
   Die Spalten entstehen über CSS-Spalten: dadurch bleibt die Quelltext-
   reihenfolge die Lesereihenfolge (WCAG 1.3.2), ohne `order`-Tricks.
   =========================================================================== */
.room-gallery {
	columns: 2;
	column-gap: var(--mi-gap);
	margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.room-card {
	break-inside: avoid;
	margin: 0 0 var(--mi-gap);
	/* inline-block verhindert, dass Karten über die Spaltengrenze brechen. */
	display: inline-block;
	width: 100%;
}

.room-card figure,
.room-card .room-media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mi-radius-lg);
	background: var(--mi-surface-2);
}

.room-card img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--mi-aspect, 4 / 5);
	object-fit: cover;
	transition: transform var(--mi-dur-slow) var(--mi-ease);
}

.room-card:hover img {
	transform: scale(1.03);
}

/*
 * Die Beschriftung steht unter dem Bild, nicht darauf. Ein weißer Balken über
 * dem Foto war weder kontraststark noch nötig; hier gewinnt die Lesbarkeit,
 * und das Motiv bleibt unangetastet.
 */
.room-card .card-body {
	padding: var(--mi-space-3) var(--mi-space-1) 0;
}

.room-card h3 {
	margin-bottom: 0.2rem;
}

.room-card p {
	margin: 0;
	max-width: 44ch;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

@media (max-width: 48rem) {
	.room-gallery {
		columns: 1;
	}

	.room-card img {
		aspect-ratio: 4 / 3;
	}
}

/* ===========================================================================
   09  Varianten, Themenwelt, Nachhaltigkeit
   =========================================================================== */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--mi-gap);
	margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}

.feature {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-sm);
	transition:
		box-shadow var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur) var(--mi-ease);
}

.feature:hover {
	box-shadow: var(--mi-shadow);
	transform: translateY(-2px);
}

/* Die beiden Varianten unterscheiden sich, sonst sind sie kein Entscheidungsrahmen. */
.feature--smart {
	background: var(--mi-yellow-soft);
}

.feature h3 {
	margin-bottom: var(--mi-space-2);
}

.feature p {
	margin: 0;
	color: var(--mi-ink-muted);
}

.topic-color-section {
	background: var(--mi-paper);
	padding-block: var(--mi-section);
}

.topic-color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.topic-color-panel h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	max-width: 18ch;
}

.sustainability-container {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.sustainability-highlight {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.sustainability-site {
	display: grid;
	gap: var(--mi-space-2);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-yellow);
}

.sustainability-site span {
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: oklch(0.35 0.06 85);
}

.sustainability-site strong {
	font-size: var(--mi-text-h4);
	line-height: var(--mi-leading-snug);
}

.sustainability-site p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: oklch(0.28 0.04 85);
}

/*
 * Vier Schritte einer Kette. Sie werden nummeriert, damit die Reihenfolge
 * ablesbar ist, und stehen ohne Kartenrahmen: die Ziffer und der Abstand
 * gruppieren bereits.
 */
.sustainability-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	counter-reset: mi-step;
}

.sustainability-card {
	counter-increment: mi-step;
	padding-top: var(--mi-space-4);
	border-top: 2px solid var(--mi-ink);
}

.sustainability-card::before {
	content: counter(mi-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--mi-space-3);
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-h3);
	font-variant-numeric: tabular-nums;
	color: var(--mi-yellow);
}

.sustainability-kicker {
	display: block;
	margin-bottom: var(--mi-space-1);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--mi-ink-muted);
}

.sustainability-card h3 {
	margin-bottom: var(--mi-space-2);
	max-width: 20ch;
}

.sustainability-card p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

@media (max-width: 56rem) {
	.sustainability-highlight {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   10  Professionals: Aufklappbereiche
   =========================================================================== */
.section--professional {
	background: var(--mi-surface-2);
}

.professionals-intro {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.professional-accordion-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--mi-line-strong);
}

.professional-accordion {
	border-bottom: 1px solid var(--mi-line-strong);
}

.professional-accordion-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mi-space-4);
	padding-block: clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
	list-style: none;
	cursor: pointer;
	transition: color var(--mi-dur) var(--mi-ease);
}

.professional-accordion-summary::-webkit-details-marker {
	display: none;
}

.professional-accordion-summary:hover {
	color: var(--mi-ink-muted);
}

.professional-accordion-title {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-h3);
	line-height: var(--mi-leading-snug);
	letter-spacing: -0.012em;
}

/* Plus, das sich beim Öffnen zum Minus dreht. Reine transform-Animation. */
.professional-accordion-symbol {
	position: relative;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-paper);
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.professional-accordion-summary:hover .professional-accordion-symbol {
	background: var(--mi-yellow);
}

.professional-accordion-symbol::before,
.professional-accordion-symbol::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--mi-ink);
	transform: translate(-50%, -50%);
	transition: transform var(--mi-dur-slow) var(--mi-ease);
}

.professional-accordion-symbol::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.professional-accordion[open] .professional-accordion-symbol::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/*
 * Aufklapp-Animation.
 *
 * <details> laesst sich nativ nicht in der Hoehe animieren: Der Browser
 * schaltet zwischen 0 und Inhaltshoehe um, und 'auto' ist kein animierbarer
 * Wert. Das frueher hier stehende Keyframe blendete nur ein, waehrend die
 * Hoehe sprang - der Sprung blieb sichtbar.
 *
 * Der Panel-Inhalt liegt deshalb in einem Raster, dessen einzige Zeile von
 * 0fr auf 1fr waechst. Fraktionen sind animierbar, also laeuft die Hoehe
 * weich. Das Skript haelt das Element waehrend des Schliessens offen, damit
 * auch der Rueckweg zu sehen ist.
 */
.professional-accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	max-width: var(--mi-measure);
	transition: grid-template-rows var(--mi-dur-slow) var(--mi-ease);
}

.professional-accordion[open] .professional-accordion-panel,
.professional-accordion.is-closing .professional-accordion-panel {
	grid-template-rows: 1fr;
}

.professional-accordion.is-closing .professional-accordion-panel {
	grid-template-rows: 0fr;
}

.professional-accordion-panel > * {
	min-height: 0;
	overflow: hidden;
}

.professional-accordion-panel-inner {
	padding-bottom: var(--mi-space-6);
	opacity: 0;
	transform: translateY(-0.35rem);
	transition:
		opacity var(--mi-dur) var(--mi-ease) 80ms,
		transform var(--mi-dur) var(--mi-ease) 80ms;
}

.professional-accordion[open]:not(.is-closing) .professional-accordion-panel-inner {
	opacity: 1;
	transform: none;
}

.professional-accordion-panel p {
	color: var(--mi-ink-muted);
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}

.faq-intro {
	position: sticky;
	top: calc(var(--mi-header-h) + var(--mi-space-5));
}

.faq-intro .button {
	margin-top: var(--mi-space-5);
}

.faq-list {
	border-top: 1px solid var(--mi-line-strong);
}

.faq-item {
	border-bottom: 1px solid var(--mi-line-strong);
}

.faq-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mi-space-4);
	padding-block: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
	list-style: none;
	cursor: pointer;
	transition: color var(--mi-dur) var(--mi-ease);
}

.faq-summary::-webkit-details-marker {
	display: none;
}

.faq-summary:hover {
	color: var(--mi-ink-muted);
}

.faq-question {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-h4);
	line-height: var(--mi-leading-snug);
	max-width: 40ch;
}

/* Chevron, der sich beim Oeffnen dreht. */
.faq-symbol {
	position: relative;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
}

.faq-symbol::before {
	content: "";
	position: absolute;
	top: 42%;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform var(--mi-dur-slow) var(--mi-ease);
}

.faq-item[open] .faq-symbol::before {
	transform: translate(-50%, -20%) rotate(-135deg);
}

.faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--mi-dur-slow) var(--mi-ease);
}

.faq-item[open] .faq-panel,
.faq-item.is-closing .faq-panel {
	grid-template-rows: 1fr;
}

.faq-item.is-closing .faq-panel {
	grid-template-rows: 0fr;
}

.faq-panel > * {
	min-height: 0;
	overflow: hidden;
}

.faq-panel-inner {
	padding-bottom: var(--mi-space-5);
	max-width: 62ch;
	color: var(--mi-ink-muted);
	opacity: 0;
	transform: translateY(-0.35rem);
	transition:
		opacity var(--mi-dur) var(--mi-ease) 80ms,
		transform var(--mi-dur) var(--mi-ease) 80ms;
}

.faq-item[open]:not(.is-closing) .faq-panel-inner {
	opacity: 1;
	transform: none;
}

@media (max-width: 56rem) {
	.faq-layout {
		grid-template-columns: 1fr;
	}

	.faq-intro {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
   Rechenaufgabe im Formular
   --------------------------------------------------------------------------- */
.mi-captcha {
	padding: var(--mi-space-4);
	border-radius: var(--mi-radius);
	background: var(--mi-surface-2);
}

.mi-captcha input {
	max-width: 8rem;
}

.mi-captcha-sum {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kontakt-form .mi-captcha,
.professional-form .mi-captcha,
.appointment-form .mi-captcha {
	background: var(--mi-paper);
}

.professional-contact-button {
	margin-top: var(--mi-space-4);
	background: var(--mi-paper);
}

@keyframes mi-panel-in {
	from {
		opacity: 0;
		transform: translateY(-0.35rem);
	}
}

/* ===========================================================================
   11  Team
   =========================================================================== */
.team-intro {
	max-width: 62ch;
	margin-top: var(--mi-space-4);
	font-size: var(--mi-text-lead);
	line-height: 1.5;
	color: var(--mi-ink-muted);
}

.team-grid {
	display: grid;
	/*
	 * 20rem statt 17: Bei sechs Personen ergeben vier Spalten ein
	 * unausgewogenes 4+2. Drei Spalten teilen sauber in 3+3, und die
	 * Portraets bekommen mehr Flaeche.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.team-media {
	overflow: hidden;
	border-radius: var(--mi-radius-lg);
	background: var(--mi-surface-2);
	aspect-ratio: 4 / 3;
}

.team-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Die Porträts sind Renderings mit hellem Hintergrund. Ein leichter
	 * Graufilter im Ruhezustand macht die Reihe ruhiger; bei Hover kommt die
	 * Farbe zurück.
	 */
	filter: saturate(0.82);
	transition:
		filter var(--mi-dur-slow) var(--mi-ease),
		transform var(--mi-dur-slow) var(--mi-ease);
}

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

.team-card .card-body {
	padding-top: var(--mi-space-4);
}

.team-card h3 {
	margin-bottom: 0.15rem;
}

.team-role {
	margin: 0 0 var(--mi-space-2);
	max-width: 32ch;
	line-height: 1.45;
	font-size: 0.9375rem;
	color: var(--mi-ink-muted);
}

.team-copy {
	margin: 0;
	font-size: var(--mi-text-sm);
	line-height: 1.55;
	color: var(--mi-ink-muted);
}

/* ===========================================================================
   12  Formulare
   =========================================================================== */
.kontakt-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}

.kontakt-copy {
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-yellow);
	position: sticky;
	top: calc(var(--mi-header-h) + var(--mi-space-5));
}

.kontakt-copy .eyebrow {
	color: oklch(0.35 0.06 85);
}

.kontakt-copy .lead {
	color: oklch(0.28 0.04 85);
}

@media (max-width: 56rem) {
	.kontakt-layout {
		grid-template-columns: 1fr;
	}

	.kontakt-copy {
		position: static;
	}
}

.feedback-form,
.professional-form,
.appointment-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--mi-space-4);
	align-items: start;
}

.feedback-form .full,
.professional-form .full,
.appointment-form .full {
	grid-column: 1 / -1;
}

:where(.feedback-form, .professional-form, .appointment-form, .pro-login-form, .newsletter-row) label {
	display: block;
	margin-bottom: var(--mi-space-2);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
}

:where(.feedback-form, .professional-form, .appointment-form, .pro-login-form) :where(input, select, textarea) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: var(--mi-radius);
	background: var(--mi-paper);
	box-shadow: inset 0 0 0 1px var(--mi-line-strong);
	font-size: max(1rem, 16px);
	transition: box-shadow var(--mi-dur) var(--mi-ease);
}

:where(.feedback-form, .professional-form, .appointment-form, .pro-login-form) :where(input, select, textarea):hover {
	box-shadow: inset 0 0 0 1px var(--mi-ink-faint);
}

:where(.feedback-form, .professional-form, .appointment-form, .pro-login-form) textarea {
	min-height: 8.5rem;
	resize: vertical;
}

/* Kontrollkästchen: Feld und Beschriftung in einer Reihe, Klickfläche groß. */
.mi-check-row,
.professional-check-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mi-space-3);
	align-items: start;
}

.mi-check-row input[type="checkbox"],
.professional-check-row input[type="checkbox"] {
	width: 1.375rem;
	min-height: 1.375rem;
	height: 1.375rem;
	margin-top: 0.15rem;
	padding: 0;
	accent-color: var(--mi-ink);
	box-shadow: none;
}

.mi-check-row label,
.professional-check-row label {
	margin: 0;
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-body);
	line-height: 1.5;
}

.mi-required-note {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.mi-field-error {
	display: block;
	margin: var(--mi-space-2) 0 0;
	padding: 0.5rem 0.7rem;
	border-radius: var(--mi-radius-sm);
	background: var(--mi-danger-bg);
	color: var(--mi-danger);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
}

:where(input, select, textarea)[aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px var(--mi-danger);
}

.mi-form-status {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--mi-radius);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-sm);
}

.mi-form-status:empty {
	display: none;
}

.mi-form-status[data-state="success"] {
	background: var(--mi-success-bg);
}

.mi-form-status[data-state="error"] {
	background: var(--mi-danger-bg);
	color: var(--mi-danger);
}

.mi-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===========================================================================
   13  Seitenübersicht und Footer
   =========================================================================== */
#seitenuebersicht {
	padding-block: var(--mi-section);
	background: var(--mi-paper);
}

.sitemap-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--mi-space-5);
	margin-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.sitemap-head .eyebrow {
	margin-bottom: var(--mi-space-1);
}

.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--mi-gap);
}

.sitemap-group h3 {
	margin-bottom: var(--mi-space-3);
	font-size: var(--mi-text-h4);
}

.sitemap-group nav {
	display: grid;
}

.sitemap-group a,
.footer-navigation-grid nav a {
	display: flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	transition:
		color var(--mi-dur) var(--mi-ease),
		padding-left var(--mi-dur) var(--mi-ease);
}

.sitemap-group a:hover,
.footer-navigation-grid nav a:hover {
	color: var(--mi-ink);
	padding-left: 0.35rem;
}

.site-footer {
	padding-block: var(--mi-section) var(--mi-space-6);
	background: var(--mi-surface-2);
}

.footer-lead-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-bottom: 1px solid var(--mi-line-strong);
}

.footer-overline {
	margin: 0 0 var(--mi-space-3);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--mi-ink-muted);
}

.footer-moebelinio-mark img {
	width: clamp(130px, 12vw, 168px);
	height: auto;
	margin-bottom: var(--mi-space-4);
}

.footer-brand-panel h2 {
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	max-width: 17ch;
	margin-bottom: var(--mi-space-3);
}

.footer-brand-panel p {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	max-width: 46ch;
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-2);
	margin: var(--mi-space-5) 0;
}

.social-text {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.5rem 0.9rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-paper);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur-fast) var(--mi-ease);
}

.social-text:hover {
	background: var(--mi-yellow);
	transform: translateY(-1px);
}

.footer-brand-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mi-space-3);
}

.footer-website-link,
.footer-ms-website {
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--mi-line-strong);
	transition: text-decoration-color var(--mi-dur) var(--mi-ease);
}

.footer-website-link:hover,
.footer-ms-website:hover {
	text-decoration-color: var(--mi-ink);
}

.footer-contact-panel {
	display: grid;
	gap: var(--mi-space-2);
	align-content: start;
	font-size: var(--mi-text-sm);
}

.footer-ms-logo img {
	width: 132px;
	height: auto;
	margin-bottom: var(--mi-space-3);
}

.footer-contact-panel a {
	color: var(--mi-ink-muted);
	transition: color var(--mi-dur) var(--mi-ease);
}

.footer-contact-panel a:hover {
	color: var(--mi-ink);
}

.footer-contact-didacta {
	margin-top: var(--mi-space-3);
}

.didacta-button {
	font-size: var(--mi-text-xs);
	background: var(--mi-paper);
	text-align: left;
}

.footer-map-panel .footer-map-consent {
	display: grid;
	gap: var(--mi-space-2);
	align-content: center;
	justify-items: start;
	min-height: 15rem;
	padding: var(--mi-space-5);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-paper);
}

.footer-map-address {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.footer-map-privacy {
	margin: 0;
	font-size: var(--mi-text-xs);
	color: var(--mi-ink-muted);
	max-width: 34ch;
}

.footer-map-wrap {
	min-height: 15rem;
	border-radius: var(--mi-radius-lg);
	overflow: hidden;
}

.footer-map-wrap iframe {
	width: 100%;
	height: 100%;
	min-height: 15rem;
}

.footer-navigation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--mi-gap);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.footer-newsletter {
	grid-column: span 2;
	max-width: 30rem;
}

.footer-newsletter h3 {
	margin-bottom: var(--mi-space-2);
}

.footer-newsletter p {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	margin-bottom: var(--mi-space-4);
}

.newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-2);
}

.newsletter-row input {
	flex: 1 1 12rem;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: var(--mi-radius);
	background: var(--mi-paper);
	box-shadow: inset 0 0 0 1px var(--mi-line-strong);
	font-size: max(1rem, 16px);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--mi-space-3);
	padding-top: var(--mi-space-5);
	/*
	 * Platz fuer den schwebenden Barrierefreiheits-Knopf unten rechts, sonst
	 * verdeckt er die letzte Zeile des Impressumsstreifens.
	 */
	padding-bottom: 3.5rem;
	border-top: 1px solid var(--mi-line-strong);
	font-size: var(--mi-text-xs);
	color: var(--mi-ink-muted);
}

.footer-bottom p {
	margin: 0;
	max-width: none;
}

@media (max-width: 56rem) {
	.footer-lead-grid {
		grid-template-columns: 1fr;
	}

	.footer-newsletter {
		grid-column: auto;
	}
}

/* ===========================================================================
   14  Consent
   ---------------------------------------------------------------------------
   Ablehnen ist genauso leicht erreichbar und gleich groß wie Zustimmen.
   =========================================================================== */
.cookie-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--mi-z-backdrop);
	background: oklch(0.19 0.008 90 / 0.45);
	animation: mi-fade-in var(--mi-dur) var(--mi-ease) both;
}

.cookie-banner {
	position: fixed;
	left: 50%;
	bottom: var(--mi-space-4);
	z-index: calc(var(--mi-z-backdrop) + 10);
	display: grid;
	gap: var(--mi-space-4);
	width: min(100% - var(--mi-space-6), 46rem);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-lg);
	transform: translateX(-50%);
	animation: mi-slide-up var(--mi-dur-slow) var(--mi-ease-expo) both;
}

.cookie-banner h2 {
	font-size: var(--mi-text-h3);
	max-width: none;
	margin-bottom: var(--mi-space-2);
}

.cookie-banner p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	max-width: none;
}

.cookie-banner__eyebrow {
	margin-bottom: var(--mi-space-1) !important;
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
}

.cookie-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--mi-space-2);
}

.cookie-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: calc(var(--mi-z-backdrop) + 20);
	display: grid;
	gap: var(--mi-space-5);
	width: min(100% - var(--mi-space-6), 44rem);
	max-height: min(88dvh, 52rem);
	overflow-y: auto;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-lg);
	transform: translate(-50%, -50%);
	animation: mi-dialog-in var(--mi-dur-slow) var(--mi-ease-expo) both;
}

.cookie-panel__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--mi-space-4);
}

.cookie-panel__head h2 {
	font-size: var(--mi-text-h3);
	max-width: none;
	margin-bottom: var(--mi-space-2);
}

.cookie-panel__head p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.cookie-close,
.a11y-panel__close,
.appointment-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-surface-2);
	font-size: 1.35rem;
	line-height: 1;
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.cookie-close:hover,
.a11y-panel__close:hover,
.appointment-close:hover {
	background: var(--mi-yellow);
}

.cookie-category-list {
	display: grid;
	gap: var(--mi-space-2);
}

.cookie-category {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mi-space-4);
	align-items: start;
	padding: var(--mi-space-4);
	border-radius: var(--mi-radius);
	background: var(--mi-surface);
}

.cookie-category h3 {
	font-size: var(--mi-text-h4);
	margin-bottom: 0.15rem;
}

.cookie-category p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
	max-width: none;
}

.cookie-detail {
	grid-column: 1 / -1;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.cookie-detail summary {
	cursor: pointer;
	font-weight: var(--mi-weight-display);
	padding-block: var(--mi-space-1);
}

/* Schalter */
.cookie-switch {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	cursor: pointer;
}

.cookie-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.cookie-switch__track {
	display: block;
	width: 3.25rem;
	height: 1.875rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-line-strong);
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.cookie-switch__track::after {
	content: "";
	display: block;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0.25rem;
	border-radius: 50%;
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-sm);
	transition: transform var(--mi-dur) var(--mi-ease);
}

.cookie-switch input:checked + .cookie-switch__track {
	background: var(--mi-ink);
}

.cookie-switch input:checked + .cookie-switch__track::after {
	transform: translateX(1.375rem);
}

.cookie-switch input:disabled + .cookie-switch__track {
	background: var(--mi-yellow);
	opacity: 0.75;
}

.cookie-switch input:focus-visible + .cookie-switch__track {
	outline: 3px solid var(--mi-ink);
	outline-offset: 2px;
}

.cookie-panel__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--mi-space-2);
}

.cookie-note {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

body.mi-consent-open {
	overflow: hidden;
}

.mi-consent-placeholder {
	display: grid;
	gap: var(--mi-space-3);
	align-content: center;
	justify-items: start;
	min-height: 13rem;
	padding: var(--mi-space-5);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-surface-2);
}

/* ===========================================================================
   15  Barrierefreiheits-Panel
   =========================================================================== */
.a11y-toggle {
	position: fixed;
	/*
	 * Rechts statt links: Die Hero-Karte sitzt linksbuendig, dort verdeckte
	 * der Knopf beim Laden die Hauptaussage.
	 */
	right: var(--mi-space-4);
	bottom: var(--mi-space-4);
	z-index: var(--mi-z-a11y-btn);
	display: inline-flex;
	align-items: center;
	gap: var(--mi-space-2);
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 0;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-yellow);
	color: var(--mi-ink);
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-sm);
	box-shadow: var(--mi-shadow-lg);
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur) var(--mi-ease);
}

.a11y-toggle:hover {
	background: var(--mi-yellow-hover);
	transform: translateY(-2px);
}

.a11y-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.a11y-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--mi-z-backdrop);
	background: oklch(0.19 0.008 90 / 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mi-dur) var(--mi-ease);
}

.a11y-backdrop[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

.a11y-panel {
	position: fixed;
	right: var(--mi-space-4);
	bottom: var(--mi-space-4);
	z-index: var(--mi-z-dialog);
	display: grid;
	gap: var(--mi-space-5);
	width: min(100% - var(--mi-space-6), 25rem);
	max-height: min(85dvh, 46rem);
	overflow-y: auto;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-lg);
	opacity: 0;
	transform: translateY(1rem) scale(0.98);
	pointer-events: none;
	transition:
		opacity var(--mi-dur-slow) var(--mi-ease),
		transform var(--mi-dur-slow) var(--mi-ease-expo);
}

.a11y-panel[data-open="true"] {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.a11y-panel__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--mi-space-3);
}

.a11y-panel__head h2 {
	font-size: var(--mi-text-h3);
	max-width: none;
}

.a11y-panel__intro {
	margin: var(--mi-space-2) 0 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.a11y-legal-note {
	margin: 0;
	padding: var(--mi-space-3);
	border-radius: var(--mi-radius);
	background: var(--mi-yellow-soft);
	font-size: var(--mi-text-sm);
}

.a11y-group {
	margin: 0;
	padding: 0;
	border: 0;
}

.a11y-group legend {
	padding: 0 0 var(--mi-space-3);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--mi-ink-muted);
}

.a11y-size-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mi-space-2);
}

.a11y-size-controls button {
	min-height: 2.75rem;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--mi-radius-sm);
	background: var(--mi-surface-2);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
	transition: background-color var(--mi-dur-fast) var(--mi-ease);
}

.a11y-size-controls button:hover {
	background: var(--mi-yellow-soft);
}

.a11y-size-controls button[aria-pressed="true"] {
	background: var(--mi-ink);
	color: var(--mi-surface);
}

.a11y-switches {
	display: grid;
	gap: var(--mi-space-2);
}

.a11y-switch {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mi-space-3);
	min-height: 2.75rem;
	padding: var(--mi-space-2) var(--mi-space-3);
	border-radius: var(--mi-radius-sm);
	font-size: var(--mi-text-sm);
	cursor: pointer;
	transition: background-color var(--mi-dur-fast) var(--mi-ease);
}

.a11y-switch:hover {
	background: var(--mi-surface-2);
}

.a11y-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.a11y-switch__ui {
	display: block;
	width: 2.75rem;
	height: 1.625rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-line-strong);
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.a11y-switch__ui::after {
	content: "";
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.25rem;
	border-radius: 50%;
	background: var(--mi-paper);
	box-shadow: var(--mi-shadow-sm);
	transition: transform var(--mi-dur) var(--mi-ease);
}

.a11y-switch input:checked + .a11y-switch__ui {
	background: var(--mi-ink);
}

.a11y-switch input:checked + .a11y-switch__ui::after {
	transform: translateX(1.125rem);
}

.a11y-switch input:focus-visible + .a11y-switch__ui {
	outline: 3px solid var(--mi-ink);
	outline-offset: 2px;
}

.a11y-status {
	margin: var(--mi-space-3) 0 0;
	font-size: var(--mi-text-xs);
	color: var(--mi-ink-muted);
}

.a11y-reset {
	width: 100%;
}

@media (max-width: 40rem) {
	.a11y-panel {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 88dvh;
		border-radius: var(--mi-radius-xl) var(--mi-radius-xl) 0 0;
	}

	.a11y-toggle {
		right: var(--mi-space-3);
		bottom: var(--mi-space-3);
	}

	.a11y-toggle span {
		display: none;
	}

	.a11y-size-controls {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===========================================================================
   16  Dialoge
   =========================================================================== */
#appointmentDialog {
	width: min(100% - var(--mi-space-6), 44rem);
	max-height: 88dvh;
	padding: 0;
	border: 0;
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
	color: var(--mi-ink);
	box-shadow: var(--mi-shadow-lg);
	overflow: hidden;
}

#appointmentDialog::backdrop {
	background: oklch(0.19 0.008 90 / 0.45);
	backdrop-filter: blur(3px);
}

#appointmentDialog[open] {
	animation: mi-dialog-in var(--mi-dur-slow) var(--mi-ease-expo) both;
}

.appointment-shell {
	display: grid;
	gap: var(--mi-space-5);
	max-height: 88dvh;
	overflow-y: auto;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

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

.appointment-head h2 {
	font-size: var(--mi-text-h3);
	max-width: none;
	margin-bottom: var(--mi-space-2);
}

.appointment-head p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

/* ===========================================================================
   17  Geschützter Bereich
   =========================================================================== */
.pro-login-head,
.professional-access-head,
.professional-portal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--mi-space-5);
	margin-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.pro-login-actions,
.professional-access-actions,
.professional-portal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-2);
}

.professional-back-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.6875rem 1.25rem;
	border-radius: var(--mi-radius-pill);
	background: var(--mi-surface-2);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.professional-back-link:hover {
	background: var(--mi-yellow);
}

.pro-login-shell,
.professional-access-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	align-items: start;
}

.pro-login-context,
.pro-login-card,
.professional-access-info,
.professional-access-request,
.portal-work-card {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
}

.pro-login-card,
.professional-access-request {
	background: var(--mi-yellow-soft);
}

.pro-login-audience {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--mi-space-2);
	margin: var(--mi-space-4) 0;
	font-size: var(--mi-text-sm);
}

.pro-login-audience li {
	padding-left: 1.1rem;
	position: relative;
	color: var(--mi-ink-muted);
}

.pro-login-audience li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--mi-yellow);
}

.pro-login-private,
.professional-access-private,
.professional-access-proof,
.portal-toolbar-note,
.portal-rights-note {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.pro-login-form {
	display: grid;
	gap: var(--mi-space-4);
	margin-top: var(--mi-space-5);
}

.pro-login-meta,
.pro-login-access {
	margin-top: var(--mi-space-5);
	font-size: var(--mi-text-sm);
}

.pro-login-access {
	padding-top: var(--mi-space-5);
	border-top: 1px solid var(--mi-line-strong);
}

.pro-login-access h3 {
	margin-bottom: var(--mi-space-2);
}

.pro-login-support {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-3);
	margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}

.professional-access-intro {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.professional-access-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.professional-access-step {
	padding-top: var(--mi-space-4);
	border-top: 2px solid var(--mi-ink);
}

.step-kicker {
	display: block;
	margin-bottom: var(--mi-space-2);
	font-size: var(--mi-text-xs);
	font-weight: var(--mi-weight-display);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--mi-ink-muted);
}

.professional-access-step h3 {
	margin-bottom: var(--mi-space-2);
}

.professional-access-step p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.professional-info-dropdown {
	margin: var(--mi-space-5) 0;
	padding: var(--mi-space-4);
	border-radius: var(--mi-radius);
	background: var(--mi-surface-2);
}

.professional-info-dropdown summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mi-space-3);
	cursor: pointer;
	font-weight: var(--mi-weight-display);
	font-size: var(--mi-text-sm);
}

.professional-info-panel ul {
	columns: 2;
	column-gap: var(--mi-space-5);
	margin: var(--mi-space-4) 0;
	padding-left: 1.1rem;
	font-size: var(--mi-text-sm);
	list-style: disc;
}

.professional-info-panel p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

/* Portal */
.professional-portal-welcome {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--mi-radius-xl);
	background: var(--mi-paper);
	margin-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.portal-account-summary {
	display: grid;
	gap: var(--mi-space-2);
	align-content: start;
	padding: var(--mi-space-4);
	border-radius: var(--mi-radius);
	background: var(--mi-surface-2);
	font-size: var(--mi-text-sm);
}

.portal-account-row {
	display: flex;
	justify-content: space-between;
	gap: var(--mi-space-3);
	padding-block: var(--mi-space-1);
}

.portal-account-row span {
	color: var(--mi-ink-muted);
}

.portal-status {
	color: oklch(0.45 0.12 145);
}

.portal-toolbar {
	display: grid;
	gap: var(--mi-space-3);
	margin-bottom: var(--mi-space-5);
}

.portal-search input {
	width: min(100%, 26rem);
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: var(--mi-radius);
	background: var(--mi-paper);
	box-shadow: inset 0 0 0 1px var(--mi-line-strong);
	font-size: max(1rem, 16px);
}

.portal-search label {
	display: block;
	margin-bottom: var(--mi-space-2);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
}

.portal-library {
	display: grid;
	border-top: 1px solid var(--mi-line-strong);
}

.portal-library-item {
	border-bottom: 1px solid var(--mi-line-strong);
}

.portal-library-item > summary {
	list-style: none;
	cursor: pointer;
	padding-block: var(--mi-space-4);
}

.portal-library-item > summary::-webkit-details-marker {
	display: none;
}

.portal-library-title {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mi-space-4);
	align-items: start;
}

.portal-library-icon {
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-variant-numeric: tabular-nums;
	color: var(--mi-yellow);
}

.portal-library-title h3 {
	margin-bottom: 0.15rem;
	font-size: var(--mi-text-h4);
}

.portal-library-title p {
	margin: 0;
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.portal-library-panel {
	padding-bottom: var(--mi-space-5);
}

.portal-file-list {
	display: grid;
	gap: var(--mi-space-2);
}

.portal-file-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mi-space-3);
	padding: var(--mi-space-4);
	border-radius: var(--mi-radius);
	background: var(--mi-surface-2);
}

.portal-file-row h4 {
	margin-bottom: 0.1rem;
}

.portal-file-row p {
	margin: 0;
	font-size: var(--mi-text-xs);
	color: var(--mi-ink-muted);
}

.portal-empty {
	padding: var(--mi-space-6);
	text-align: center;
	color: var(--mi-ink-muted);
}

.portal-work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--mi-gap);
	margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}

.portal-rights {
	margin-top: clamp(2rem, 1rem + 3vw, 3rem);
	padding: var(--mi-space-5);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-surface-2);
}

.portal-rights > summary {
	cursor: pointer;
	font-weight: var(--mi-weight-display);
}

.portal-rights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--mi-gap);
	margin-block: var(--mi-space-5);
}

.portal-rights-grid p {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

@media (max-width: 56rem) {
	.pro-login-shell,
	.professional-access-layout,
	.professional-portal-welcome {
		grid-template-columns: 1fr;
	}

	.professional-info-panel ul {
		columns: 1;
	}
}

/* ===========================================================================
   18  Unterseiten, Suche, 404
   =========================================================================== */
.page-hero {
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--mi-surface-2);
}

.entry-content {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--mi-section);
}

.entry-content > .container > * {
	max-width: var(--mi-measure);
}

.entry-content h2 {
	margin: var(--mi-space-7) 0 var(--mi-space-3);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
}

.entry-content h2:first-child {
	margin-top: 0;
}

.entry-content h3 {
	margin: var(--mi-space-6) 0 var(--mi-space-2);
}

.entry-content :where(ul, ol) {
	margin: 0 0 var(--mi-space-4);
	padding-left: 1.35rem;
	max-width: var(--mi-measure);
}

.entry-content li + li {
	margin-top: var(--mi-space-2);
}

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

.entry-content :where(th, td) {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mi-line);
}

.error-404 {
	padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}

.error-code {
	display: block;
	font-family: var(--mi-font-display);
	font-weight: var(--mi-weight-display);
	font-size: clamp(4.5rem, 3rem + 12vw, 11rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--mi-yellow);
	margin-bottom: var(--mi-space-5);
}

.error-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-3);
	margin-block: var(--mi-space-6) var(--mi-space-7);
}

.error-404 h2 {
	margin: var(--mi-space-7) 0 var(--mi-space-4);
	font-size: var(--mi-text-h3);
}

.error-404-suggestions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--mi-space-3);
}

.error-404-suggestions a {
	display: block;
	padding: var(--mi-space-5);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-paper);
	transition:
		background-color var(--mi-dur) var(--mi-ease),
		transform var(--mi-dur) var(--mi-ease);
}

.error-404-suggestions a:hover {
	background: var(--mi-yellow);
	transform: translateY(-2px);
}

.error-404-suggestions strong {
	display: block;
	margin-bottom: var(--mi-space-1);
}

.error-404-suggestions span {
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.mi-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-2);
	max-width: 34rem;
}

.mi-search-form input[type="search"] {
	flex: 1 1 14rem;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: var(--mi-radius);
	background: var(--mi-paper);
	box-shadow: inset 0 0 0 1px var(--mi-line-strong);
	font-size: max(1rem, 16px);
}

.search-results-list {
	display: grid;
	gap: var(--mi-space-3);
	margin-top: var(--mi-space-6);
}

.search-results-list li {
	padding: var(--mi-space-5);
	border-radius: var(--mi-radius-lg);
	background: var(--mi-paper);
}

.search-results-list h2 {
	margin: 0 0 var(--mi-space-2);
	font-size: var(--mi-text-h4);
}

.mi-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mi-space-2);
	margin-top: var(--mi-space-7);
}

.mi-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--mi-space-3);
	border-radius: var(--mi-radius-pill);
	background: var(--mi-paper);
	font-size: var(--mi-text-sm);
	font-weight: var(--mi-weight-display);
	transition: background-color var(--mi-dur) var(--mi-ease);
}

.mi-pagination .page-numbers:hover {
	background: var(--mi-yellow);
}

.mi-pagination .page-numbers.current {
	background: var(--mi-ink);
	color: var(--mi-surface);
}

/* WordPress-Blockausrichtungen */
.alignwide {
	width: min(100%, var(--mi-container-wide));
}

.alignfull {
	width: 100%;
}

figcaption {
	margin-top: var(--mi-space-2);
	font-size: var(--mi-text-sm);
	color: var(--mi-ink-muted);
}

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* ===========================================================================
   19  Bewegung
   ---------------------------------------------------------------------------
   Ein orchestrierter Auftritt beim Scrollen, keine verstreuten Effekte. Die
   Klasse setzt das Skript per IntersectionObserver; ohne JavaScript ist alles
   sofort sichtbar.
   =========================================================================== */
@keyframes mi-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes mi-slide-up {
	from {
		opacity: 0;
		transform: translate(-50%, 1.5rem);
	}
}

@keyframes mi-dialog-in {
	from {
		opacity: 0;
		transform: translate(-50%, -46%) scale(0.97);
	}
}

[data-mi-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity 600ms var(--mi-ease-expo),
		transform 600ms var(--mi-ease-expo);
	transition-delay: calc(var(--mi-i, 0) * 60ms);
}

[data-mi-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ===========================================================================
   20  Barrierefreiheits-Schalter, Druck
   =========================================================================== */
body.a11y-high-contrast {
	--mi-ink: #000;
	--mi-ink-muted: #000;
	--mi-ink-faint: #1a1a1a;
	--mi-surface: #fff;
	--mi-surface-2: #f0f0f0;
	--mi-paper: #fff;
	--mi-line: #000;
	--mi-line-strong: #000;
}

body.a11y-grayscale {
	filter: grayscale(1);
}

body.a11y-underline-links a {
	text-decoration: underline;
}

body.a11y-readable-font,
body.a11y-readable-font :where(h1, h2, h3, h4, p, li, a, button, label, input, textarea, select) {
	font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
}

body.a11y-reading-width :where(p, li) {
	max-width: 55ch;
}

body.a11y-heading-highlight :where(h1, h2, h3) {
	background: var(--mi-yellow-soft);
	box-shadow: -0.35rem 0 0 var(--mi-yellow-soft), 0.35rem 0 0 var(--mi-yellow-soft);
}

body.a11y-large-targets :where(a, button, summary, input, select) {
	min-height: 2.75rem;
}

body.a11y-hide-decorative img[alt=""] {
	visibility: hidden;
}

body.a11y-text-spacing :where(main p, main li) {
	line-height: 1.5;
	letter-spacing: 0.12em;
	word-spacing: 0.16em;
}

/*
 * Reduzierte Bewegung. Nicht optional: Vestibuläre Störungen betreffen einen
 * erheblichen Teil der Nutzenden. Funktionale Übergänge bleiben, räumliche
 * Bewegung entfällt.
 */
@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;
	}

	[data-mi-reveal] {
		opacity: 1;
		transform: none;
	}
}

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

body.a11y-reduced-motion [data-mi-reveal] {
	opacity: 1;
	transform: none;
}

@media print {
	.site-header,
	.a11y-toggle,
	.a11y-panel,
	.a11y-backdrop,
	.cookie-banner,
	.cookie-panel,
	.cookie-backdrop,
	.skip-links,
	.mobile-menu-btn,
	.footer-newsletter,
	#appointmentDialog,
	#seitenuebersicht {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	.section {
		padding-block: 1rem;
		break-inside: avoid;
	}

	.room-gallery {
		columns: 2;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	[data-mi-reveal] {
		opacity: 1;
		transform: none;
	}
}