/* ==========================================================================
   ManiKa – zentrales Design
   Quelle: design_handoff_bueroreinigung_wien/README.md
   Aufbau: 1 Schrift · 2 Tokens · 3 Basis · 4 Bausteine · 5 Header · 6 Footer
           7 Seiten ohne Blöcke · 8 Animationen
   Block-spezifisches CSS liegt in /blocks/<name>/style.css
   ========================================================================== */

/* 1 · Schrift (lokal, kein Google-Server) ---------------------------------- */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

/* 2 · Tokens --------------------------------------------------------------- */
:root {
	/* Farben */
	--mk-ink: #141413;
	--mk-black: #000000;
	--mk-white: #FFFFFF;
	--mk-sand: #EFEDE9;
	--mk-card-grey: #F4F4F2;
	--mk-card-sand: linear-gradient(180deg, #FBF9F4 0%, #F4F2ED 100%);
	--mk-gold: #D6A742;          /* nur auf Dunkel, Linien, Icons */
	--mk-gold-dark: #8A6A1F;     /* Text auf Hell */
	--mk-gold-mid: #A07C2E;
	--mk-gold-head: #D6A742;     /* Goldwort in Überschriften H1–H3: überall derselbe Ton (Entscheidung Betrieb) */
	--mk-gold-muted: #8A7136;
	--mk-gold-link: #A2853F;
	--mk-gold-light: #F0C766;
	--mk-fortschritt: #A07C2E;   /* Scroll-Fortschritt: mittlere Helligkeit, dadurch auf Schwarz UND auf Weiß sichtbar (3,9:1 / 5,4:1) */
	--mk-orange: #FF5E29;        /* NUR Anfrage-Button */
	--mk-orange-hover: #E04A18;
	--mk-text: #3A3A37;
	--mk-text-strong: #1F1F1D;
	--mk-text-dark: #EDEBE5;
	--mk-text-dark-2: #DEDBD3;
	--mk-text-dark-3: #CFCBC1;
	--mk-head-dark: #F7F5F0;
	--mk-line: #DEDEDA;
	--mk-line-gold: rgba(214, 167, 66, 0.45);
	--mk-line-gold-soft: rgba(214, 167, 66, 0.28);
	--mk-line-gold-strong: rgba(214, 167, 66, 0.7); /* Rahmen Nebenbutton */
	--mk-gold-tint: rgba(214, 167, 66, 0.10);       /* aktive Zeile (mk-kinder, 0.17.13) */
	--mk-gold-flaeche-hell: color-mix(in srgb, var(--mk-gold) 10%, var(--mk-sand));     /* Rad-Segmente, Schrittpunkte (mk-fallanalyse, 0.17.16) */
	--mk-gold-flaeche-dunkel: color-mix(in srgb, var(--mk-gold) 22%, var(--mk-sand));
	--mk-card-edge: #E4DCD3;

	/* Formularfelder und Meldungen (0.27.0, Design „Kontakt.dc.html“) */
	--mk-field-edge: #CFCBC1;           /* Rahmen Feld, gestrichelte Upload-Fläche */
	--mk-field-fill: #FBFAF8;           /* Upload-Fläche */
	--mk-field-hover: #F4F2ED;          /* Hover Option, Upload-Fläche */
	--mk-placeholder: #B3AFA6;
	--mk-focus-ring: 0 0 0 3px rgba(214, 167, 66, 0.25);
	--mk-error: #B3341A;                /* Rahmen und Text am Feld */
	--mk-error-dark: #A2321C;           /* Text auf --mk-error-tint */
	--mk-error-tint: #FBEDEA;           /* „Geschlossen“, Fehlerbox */
	--mk-text-muted: #8A867E;           /* Tagname Sa/So */
	--mk-text-soft: #6B6862;            /* Kleintext Upload */
	--mk-grad-tel: linear-gradient(180deg, #5BF675 0%, #0CBD2A 100%);
	--mk-grad-mail: linear-gradient(180deg, #1E8CFF 0%, #1A5CF0 100%);
	--mk-shadow-app: 0 8px 18px -8px rgba(0, 0, 0, 0.35);                           /* App-Icons Telefon/Mail */
	--mk-shadow-kontakt: 0 0 0 1px var(--mk-card-edge), 0 24px 54px -24px rgba(20, 20, 19, 0.22);
	--mk-shadow-liste: 0 0 0 1px var(--mk-card-edge), 0 24px 50px -20px rgba(20, 20, 19, 0.35);

	/* Schrift */
	/* Fließtext in Systemschrift: vom Betriebssystem auf das Pixelraster optimiert, daher scharf.
	   Archivo nur für große Überschriften (H1–H3), dort ist die Webschrift scharf genug. */
	--mk-font-text: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--mk-font-head: "Archivo", Arial, "Helvetica Neue", Helvetica, sans-serif;
	--mk-font: var(--mk-font-text);
	--mk-fs-h1: 64px;
	/* Ab 1440 px wachsen H2 und Fließtext mit, bis 2560 px (vorher blieben sie bei 1440 stehen) */
	--mk-fs-h2: clamp(44px, 2.6vw, 66px);
	--mk-fs-h3: 21px;
	--mk-fs-body: clamp(18px, calc(12px + 0.4167vw), 22px);
	--mk-fs-card: 15.5px;
	--mk-fs-nav: 15px;          /* 0.17.1: Navigation größer als vorher (13,5 px) */

	/* Raster */
	--mk-max: 1440px;
	--mk-gutter: 90px;
	--mk-gutter-hero: 40px;
	--mk-header-pad: 32px;      /* Rand der Kopfleiste: Logo steht weiter links als vorher (40 px) */
	--mk-nav-gap: 38px;         /* Abstand zwischen den Navigationspunkten */
	--mk-measure: 680px;
	--mk-pad-top: 72px;
	--mk-pad-bottom: 64px;
	--mk-header-h: 88px;        /* 0.17.1: höher als vorher (74 px) */

	/* Form */
	--mk-r-card: 12px;
	--mk-r-img: 8px;
	--mk-r-ctrl: 6px;

	/* Schatten */
	--mk-shadow-form: 0 0 0 1px var(--mk-card-edge), 0 24px 54px -20px rgba(255, 94, 41, 0.3);
	--mk-shadow-card: 0 0 0 1px var(--mk-card-edge);
	--mk-shadow-tile: 0 18px 40px -24px rgba(20, 20, 19, 0.25);
	--mk-shadow-tile-hover: 0 28px 54px -24px rgba(20, 20, 19, 0.34);
	--mk-shadow-neben: 0 10px 22px -10px rgba(138, 106, 31, 0.75);   /* Nebenbutton Hover: weicher Schatten in --mk-gold-dark */

	/* Bewegung */
	--mk-t-color: 160ms ease;
	--mk-t-line: 200ms ease;
	--mk-t-tile: 320ms ease;
}

@media (max-width: 900px) {
	:root {
		--mk-fs-h1: 40px;
		--mk-fs-h2: 30px;
		--mk-fs-h3: 18px;
		--mk-fs-body: 16px;
		--mk-fs-card: 14.5px;
		--mk-gutter: 22px;
		--mk-gutter-hero: 22px;
		--mk-pad-top: 34px;
		--mk-pad-bottom: 30px;
		--mk-header-h: 68px;
	}
}

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sprungziele (0.19.1): Abstand oben = Höhe des Headers (Desktop 88 px, mobil 68 px, angemeldet + Admin-Leiste),
   damit #sprungname und #anfrage direkt unter dem Header landen. Am Dokument statt an jeder Sektion:
   ein Wert für alle Sprünge, und der Zoom des Hero ab 1280 px vergrößert ihn nicht mit. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--mk-header-h) + var(--wp-admin--admin-bar--height, 0px));
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }   /* bei „Bewegung reduzieren“ springt die Seite ohne Animation */
}
#anfrage { scroll-margin-top: 16px; }   /* Formular im Hero: Luft wie bisher (vorher +16 px am Dokument) */

body {
	margin: 0;
	font-family: var(--mk-font);
	font-size: var(--mk-fs-body);
	line-height: 1.65;
	color: var(--mk-text);
	background: var(--mk-white);
	-webkit-font-smoothing: auto;      /* schärfer als "antialiased", Text wirkt kräftiger */
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
}
@media (max-width: 900px) { body { line-height: 1.62; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* PC-/Mobil-Foto (mk_bild(), 0.19.0): <picture> erzeugt keine eigene Box, das Block-CSS am <img> wirkt wie bisher */
picture.mk-bild { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--mk-ink); text-wrap: balance; }
h1, h2, h3, .mk-h1, .mk-h2, .mk-h3, .mk-page__title, .mk-logo__text { font-family: var(--mk-font-head); }
p { text-wrap: pretty; }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.mk-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--mk-white); color: var(--mk-ink); padding: 10px 16px; border-radius: var(--mk-r-ctrl);
	font-weight: 600;
}
.mk-skip:focus { top: 12px; }

/* 4 · Bausteine für alle Sektionen ----------------------------------------- */

/* Sektion und Inhaltsbreite */
.mk-section { position: relative; padding: var(--mk-pad-top) 0 var(--mk-pad-bottom); overflow: hidden; }
.mk-wrap { max-width: var(--mk-max); margin-inline: auto; padding-inline: var(--mk-gutter); }

.mk-bg-white { background: var(--mk-white); }
.mk-bg-sand  { background: var(--mk-sand); }
.mk-bg-black { background: var(--mk-black); color: var(--mk-text-dark); font-weight: 450; }
.mk-bg-black h1, .mk-bg-black h2, .mk-bg-black h3 { color: var(--mk-head-dark); }

/* Überschriften */
.mk-h1 {
	font-size: var(--mk-fs-h1); line-height: 0.96; letter-spacing: -0.04em;
	text-transform: uppercase; font-weight: 700; color: var(--mk-ink);
}
.mk-h2 {
	font-size: var(--mk-fs-h2); line-height: 1.04; letter-spacing: -0.035em;
	font-weight: 900; max-width: 709px;
}
.mk-h3 { font-size: var(--mk-fs-h3); line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }

/* Goldene Auszeichnung in Überschriften (Hell: dunkles Gold, Dunkel: helles Gold) */
.mk-mark { color: var(--mk-gold-head); }
.mk-bg-black .mk-mark { color: var(--mk-gold); }

/* Eyebrow */
.mk-eyebrow {
	display: block; margin-bottom: 14px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mk-gold-dark);
}
.mk-bg-black .mk-eyebrow { color: var(--mk-gold); }
@media (max-width: 900px) { .mk-eyebrow { font-size: 11px; } }

/* Fließtext */
.mk-text { max-width: var(--mk-measure); }
.mk-text > * + * { margin-top: 1em; }
.mk-text a, .mk-inline-link {
	color: var(--mk-gold-dark); font-weight: 600;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: color var(--mk-t-color);
}
.mk-text a:hover, .mk-inline-link:hover { color: var(--mk-ink); }
.mk-bg-black .mk-text a { color: var(--mk-gold); }

/* Textlinks aus [mk_link] in allen Sektionen (0.17.11): Stil wie Sektion 2, Farbe an hellen/dunklen Grund angepasst */
.mk-section a.mk-link {
	font-weight: 700; text-decoration: none;
	color: var(--mk-gold-dark);
	border-bottom: 1px solid var(--mk-gold);
	transition: color var(--mk-t-color);
}
.mk-section a.mk-link:hover, .mk-section a.mk-link:focus-visible { color: var(--mk-ink); }
.mk-bg-black a.mk-link { color: var(--mk-gold); }
.mk-bg-black a.mk-link:hover, .mk-bg-black a.mk-link:focus-visible { color: var(--mk-white); }

/* Goldlinien */
.mk-rule { display: block; width: 64px; height: 2px; background: var(--mk-gold); border: 0; margin: 18px 0; }
.mk-rule--thin { height: 1px; }
.mk-rule--center { margin-inline: auto; }

/* Icons */
.mk-icon { flex: 0 0 auto; }
.mk-gold { color: var(--mk-gold); }

/* Orange Anfrage-Button – der einzige Ort für Orange */
.mk-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--mk-r-ctrl);
	background: var(--mk-orange); color: var(--mk-white);
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	cursor: pointer; text-align: center;
	transition: background-color var(--mk-t-color), box-shadow var(--mk-t-color), transform var(--mk-t-color);
}
.mk-cta:hover, .mk-cta:focus-visible {
	background: var(--mk-orange-hover); color: var(--mk-white);
	box-shadow: 0 0 0 1px rgba(255, 94, 41, 0.35); transform: translateY(-1px);
}
.mk-cta--full { display: flex; width: 100%; }

/* Neutraler Button (z. B. LV-Download) – nie Orange */
.mk-btn-ink {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--mk-r-ctrl);
	background: var(--mk-ink); color: var(--mk-white);
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	transition: background-color var(--mk-t-color), color var(--mk-t-color);
}
.mk-btn-ink:hover { background: var(--mk-gold); color: var(--mk-ink); }

/* Nebenbutton (0.17.12, Standard für alle Nebenaktionen: LV-Download, Branchen-Links, Borlabs …).
   Nur das Aussehen – Größe, Abstand und Schrift legt der Block fest. Nie Orange.
   Ruhe: Goldrahmen, Text Dunkelgold. Hover/Fokus: Füllung Dunkelgold, Schrift Weiß, weicher Schatten.
   Der Rahmen wird beim Hover nicht dicker (nur seine Farbe ändert sich). Für helle Gründe. */
.mk-btn-neben {
	border: 1px solid var(--mk-line-gold-strong); border-radius: var(--mk-r-ctrl);
	background: var(--mk-white); color: var(--mk-gold-dark);
	box-shadow: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.mk-btn-neben:hover, .mk-btn-neben:focus-visible {
	background: var(--mk-gold-dark); border-color: var(--mk-gold-dark); color: var(--mk-white);
	box-shadow: var(--mk-shadow-neben);
}
.mk-btn-neben .mk-icon { color: currentColor; }

/* Zwei dunkle Sektionen hintereinander: Goldlinie an der Oberkante der zweiten (0.17.12).
   Gleiche Linie wie an der Oberkante des Footers. */
.mk-section.mk-bg-black + .mk-section.mk-bg-black { border-top: 1px solid var(--mk-line-gold-soft); }

/* Abschluss mit Triggersatz, CTA und 3 Punkten (mk_cta_gruppe(), 0.17.16).
   Maße in em: der Block setzt die Schriftgröße (--mk-fs-body), die Ausrichtung setzt der Block. */
.mk-cta-gruppe__trigger {
	margin: 0 0 18px;
	font-size: 1.111em; line-height: 1.35; font-weight: 700; text-wrap: balance;   /* 20 px */
	color: var(--mk-gold-dark);
}
.mk-cta-gruppe__punkte {
	display: flex; align-items: center; justify-content: center; gap: 1.45em;
	margin: 0.67em 0 0; padding: 0; list-style: none;
	font-size: 0.7em; line-height: 1.2; color: var(--mk-text-strong);
}
.mk-cta-gruppe__punkte li { display: flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.mk-cta-gruppe__punkte li + li::before { content: ""; width: 1px; height: 1.3em; margin-right: 0.9em; background: var(--mk-line-gold-strong); }
.mk-cta-gruppe__punkte .mk-icon { width: 1.28em; height: 1.28em; color: var(--mk-gold); }
@media (max-width: 900px) {
	.mk-cta-gruppe__trigger { margin-bottom: 16px; font-size: 1.125em; }             /* 18 px */
	.mk-cta-gruppe__punkte { gap: 10px; margin-top: 12px; font-size: 11px; }
	.mk-cta-gruppe__punkte li + li::before { margin-right: 4px; }
}
@media (max-width: 360px) {
	.mk-cta-gruppe__punkte { flex-wrap: wrap; row-gap: 6px; }
}

/* Drei Punkte unter dem CTA */
.mk-points {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
	margin: 14px 0 0; padding: 0; list-style: none;
	font-size: 11.5px; font-weight: 600; color: var(--mk-text-strong);
}
.mk-points li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-points .mk-icon { color: var(--mk-gold); }
@media (max-width: 900px) { .mk-points { font-size: 10.5px; gap: 6px 10px; } }

/* 5 · Header (0.17.1) ------------------------------------------------------ */
.mk-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--mk-black);
	color: var(--mk-white);
}
/* Scrolltiefe: Balken an der Unterkante der Leiste (nicht des Headers,
   sonst wandert er beim Öffnen des Suchfelds mit nach unten, 0.17.6) */
.mk-header__fortschritt {
	position: absolute; left: 0; right: 0; top: calc(var(--mk-header-h) - 4px); height: 4px;
	background: rgba(255, 255, 255, 0.10);
	overflow: hidden;
}
.mk-header__fortschritt span {
	display: block; height: 100%; width: 0;
	background: var(--mk-fortschritt);
	transform-origin: left center;
	transition: width 80ms linear, background-color 200ms ease, box-shadow 200ms ease;
}
/* 0.22.4: Liegt unter dem Header eine helle Section (Weiß/Sand), wird der Balken hell-gold
   und leuchtet leicht – sonst geht er an der Kante Schwarz/Weiß unter. Erkennung: assets/js/main.js */
.mk-header[data-mk-unter="hell"] .mk-header__fortschritt { background: rgba(255, 255, 255, 0.16); }
.mk-header[data-mk-unter="hell"] .mk-header__fortschritt span {
	background: var(--mk-gold-light);
	box-shadow: 0 0 8px rgba(240, 199, 102, 0.75);
}
@media (prefers-reduced-motion: reduce) {
	.mk-header__fortschritt span { transition: none; }
}

/* Leiste: Logo links · Navigation mittig · Kontakt rechts.
   Die Navigation nimmt den freien Platz und steht darin mittig: dadurch ist der Abstand
   Logo → „Leistungen“ immer genauso groß wie „Preise“ → Mail-Icon. */
.mk-header__bar {
	display: flex;
	align-items: center;
	height: var(--mk-header-h);
	max-width: var(--mk-max);
	margin-inline: auto;
	padding-inline: var(--mk-header-pad);
}
.mk-header__burger { display: none; }
.mk-header__brand { flex: 0 0 auto; }

.mk-logo { display: inline-flex; align-items: center; height: 48px; }
.mk-logo--header .mk-logo__img { width: auto; max-width: 210px; max-height: 48px; object-fit: contain; }
.mk-logo__text { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; color: var(--mk-white); }

/* Navigation */
.mk-header__nav {
	flex: 1 1 auto;
	display: flex; align-items: center; justify-content: center; gap: var(--mk-nav-gap);
	font-size: var(--mk-fs-nav); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
	color: #F5F4F1;
}
.mk-header__link {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
	font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; font-family: inherit;
	color: inherit;
	transition: color var(--mk-t-color);
}
/* Strich unter dem Punkt: bei Hover und auf der aktiven Seite.
   Sitzt am Wort selbst (.mk-header__txt), nicht am ganzen Link: so ist er genau so breit wie der Titel,
   ohne Pfeil und ohne den Nachlauf der Laufweite am letzten Buchstaben (0.17.8). */
.mk-header__txt { position: relative; display: inline-block; }
.mk-header__txt::after {
	content: ""; position: absolute; left: 0; right: 0.10em; bottom: -7px; height: 2px;
	background: currentColor; opacity: 0; transform: scaleX(0.4); transform-origin: left center;
	transition: opacity var(--mk-t-line), transform var(--mk-t-line);
}
.mk-header__link:hover, .mk-header__link:focus-visible { color: var(--mk-gold); }
.mk-header__link:hover .mk-header__txt::after, .mk-header__link:focus-visible .mk-header__txt::after { opacity: 0.85; transform: scaleX(1); }
.mk-header__link[aria-current] { color: var(--mk-gold); }
.mk-header__link[aria-current] .mk-header__txt::after { opacity: 1; transform: scaleX(1); }
.mk-mega { display: inline-flex; }
.mk-mega__toggle .mk-icon { transition: transform var(--mk-t-line); }
.mk-mega.is-open .mk-mega__toggle { color: var(--mk-gold); }
.mk-mega.is-open .mk-mega__toggle .mk-icon { transform: rotate(180deg); }

/* Mega-Menü: volle Breite, Grund Schwarz, Rahmen als Goldverlauf */
.mk-mega__panel {
	/* an der Unterkante der Leiste verankert, nicht am ganzen Header:
	   sonst rutscht das Menü nach unten, sobald das Suchfeld offen ist (0.17.6) */
	position: absolute; left: 0; right: 0; top: var(--mk-header-h); z-index: 20;
	background:
		linear-gradient(180deg, #0A0A09 0%, #000000 100%) padding-box,
		linear-gradient(90deg, rgba(214, 167, 66, 0) 0%, rgba(214, 167, 66, 0.75) 22%, rgba(214, 167, 66, 0.35) 62%, rgba(214, 167, 66, 0) 100%) border-box;
	border: 1px solid transparent;
	border-top: 0;
	box-shadow: 0 28px 60px -26px rgba(0, 0, 0, 0.85);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--mk-t-line), transform var(--mk-t-line), visibility 0s linear 200ms;
}
.mk-header:has(.mk-mega.is-open) .mk-mega__panel,
.mk-mega__panel:focus-within {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity var(--mk-t-line), transform var(--mk-t-line), visibility 0s;
}
/* Hover, Klick und Tastatur steuert main.js über die Klasse .is-open.
   Vorher öffnete Hover rein über CSS, dann stand am Schalter weiter aria-expanded="false" (0.17.6). */
@media (hover: hover) {
	.mk-mega:hover .mk-mega__toggle { color: var(--mk-gold); }
}
.mk-mega__inner {
	max-width: var(--mk-max); margin-inline: auto;
	padding: 28px var(--mk-header-pad) 40px;
}
.mk-mega__titel {
	display: inline-flex; align-items: center; gap: 10px;
	margin-bottom: 26px; padding-bottom: 10px;
	border-bottom: 1px solid var(--mk-line-gold-soft);
	font-family: var(--mk-font-head);
	font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--mk-head-dark);
	transition: color var(--mk-t-color), border-color var(--mk-t-line);
}
.mk-mega__titel .mk-icon { color: var(--mk-gold); transition: transform var(--mk-t-line); }
.mk-mega__titel:hover, .mk-mega__titel[aria-current] { color: var(--mk-gold); border-color: rgba(214, 167, 66, 0.7); }
.mk-mega__titel:hover .mk-icon { transform: translateX(4px); }
.mk-mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.mk-mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-mega__title {
	margin-bottom: 10px;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-mega__col a {
	position: relative;
	padding: 9px 0;
	font-size: 16px; font-weight: 500; color: var(--mk-text-dark);
	transition: color var(--mk-t-color);
}
/* gleicher Hover wie im Header und im Footer: Gold und Strich darunter (0.17.7) */
.mk-mega__col a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
	background: currentColor; opacity: 0; transform: scaleX(0.4); transform-origin: left center;
	transition: opacity var(--mk-t-line), transform var(--mk-t-line);
}
.mk-mega__col a:hover, .mk-mega__col a:focus-visible, .mk-mega__col a[aria-current] { color: var(--mk-gold); }
.mk-mega__col a:hover::after, .mk-mega__col a:focus-visible::after { opacity: 0.85; transform: scaleX(1); }
.mk-mega__col a[aria-current]::after { opacity: 1; transform: scaleX(1); }

/* Kontakt rechts */
.mk-header__contact {
	flex: 0 0 auto;
	display: flex; justify-content: flex-end; align-items: center; gap: 22px;
	font-size: 14.5px; font-weight: 500; color: #F5F4F1;
}
.mk-header__mail, .mk-header__phone {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	transition: color var(--mk-t-color);
}
.mk-header__phone { font-weight: 700; }
.mk-header__mail span, .mk-header__phone span {
	border-bottom: 1px solid transparent; padding-bottom: 2px;
	transition: border-color var(--mk-t-line);
}
.mk-header__mail:hover, .mk-header__phone:hover { color: var(--mk-gold); }
.mk-header__mail:hover span, .mk-header__phone:hover span { border-color: rgba(214, 167, 66, 0.7); }
.mk-header__search {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-right: -12px;
	border: 0; background: none; color: var(--mk-white); cursor: pointer;
	transition: color var(--mk-t-color);
}
.mk-header__search:hover, .mk-header__search[aria-expanded="true"] { color: var(--mk-gold); }

/* Suchleiste */
.mk-search { border-top: 1px solid var(--mk-line-gold-soft); padding: 14px var(--mk-header-pad); }
.mk-search .mk-searchform { max-width: 560px; margin-left: auto; }

.mk-searchform { display: flex; gap: 8px; margin: 18px 0; max-width: 560px; }
.mk-searchform input {
	flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
	border: 1px solid var(--mk-line); border-radius: var(--mk-r-ctrl);
	background: var(--mk-white); color: var(--mk-ink); font-size: 16px;
}
.mk-searchform button {
	min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--mk-r-ctrl);
	background: var(--mk-gold); color: var(--mk-ink); font-weight: 700; cursor: pointer;
}

/* Mobile Navigation */
.mk-mnav {
	max-height: calc(100dvh - var(--mk-header-h));
	overflow-y: auto; overscroll-behavior: contain;
	padding: 0 0 24px;
	border-top: 1px solid var(--mk-line-gold-soft);
	background: var(--mk-black);
}
.mk-mnav__titel {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px var(--mk-gutter-hero);
	background: #0A0A09;
	border-bottom: 1px solid var(--mk-line-gold-soft);
	font-family: var(--mk-font-head); font-size: 18px; font-weight: 800; color: var(--mk-head-dark);
}
.mk-mnav__titel .mk-icon { color: var(--mk-gold); }
.mk-mnav__titel[aria-current] { color: var(--mk-gold); }
.mk-mnav__scroll { padding-inline: var(--mk-gutter-hero); }
.mk-mnav__group { border-bottom: 1px solid var(--mk-line-gold-soft); }
.mk-mnav__title {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	min-height: 52px; cursor: pointer; list-style: none;
	font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mk-gold);
}
.mk-mnav__title::-webkit-details-marker { display: none; }
.mk-mnav__title .mk-icon { transition: transform var(--mk-t-line); }
.mk-mnav__group[open] .mk-mnav__title .mk-icon { transform: rotate(180deg); }
.mk-mnav__links { padding-bottom: 10px; }
.mk-mnav a {
	display: flex; align-items: center; gap: 10px; min-height: 44px;
	font-size: 16px; font-weight: 600; color: var(--mk-head-dark);
}
.mk-mnav__links a:hover, .mk-mnav a[aria-current] { color: var(--mk-gold); }
.mk-mnav__extra { padding: 8px 0; border-bottom: 1px solid var(--mk-line-gold-soft); }
.mk-mnav__extra a { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }
.mk-mnav__contact { padding-top: 10px; }
.mk-mnav__suche .mk-searchform { margin-top: 6px; }

@media (min-width: 901px) {
	.mk-mnav { display: none !important; }
}

@media (max-width: 900px) {
	.mk-header__bar { padding-inline: 8px; gap: 0; }
	.mk-header__burger {
		display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
		width: 44px; height: 44px; border: 0; background: none; color: var(--mk-white); cursor: pointer;
	}
	.mk-header__burger .mk-icon--close { display: none; }
	.mk-header__burger[aria-expanded="true"] .mk-icon--open { display: none; }
	.mk-header__burger[aria-expanded="true"] .mk-icon--close { display: block; }

	.mk-header__brand { flex: 1 1 auto; display: flex; justify-content: center; }
	.mk-logo { height: 36px; }
	.mk-logo--header .mk-logo__img { max-width: 160px; max-height: 36px; }
	.mk-logo__text { font-size: 21px; }

	.mk-header__nav, .mk-header__mail, .mk-header__search, .mk-search, .mk-mega__panel { display: none !important; }
	.mk-header__contact { gap: 0; }
	.mk-header__phone { justify-content: center; width: 44px; height: 44px; }
	.mk-header__phone span { display: none; }
	.mk-header__phone .mk-icon { width: 22px; height: 22px; }

	body.mk-menu-open { overflow: hidden; }
}

/* 6 · Footer (0.17.2) ------------------------------------------------------ */
.mk-footer {
	background: var(--mk-black); color: var(--mk-head-dark);
	border-top: 1px solid var(--mk-line-gold-soft);   /* dezente Kante wie über der Abschlusszeile */
}

/* Sechs Silos in einer Reihe, das Logo steht links neben Silo 1 (Kontakt) */
.mk-footer__grid {
	/* Breite ausnutzen: Logo an der linken Kante, die letzte Gruppe an der rechten,
	   die Silos verteilen sich mit gleichem Abstand dazwischen (0.17.7) */
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 56px;
	max-width: var(--mk-max);
	margin-inline: auto;
	padding: 64px var(--mk-header-pad) 44px;
}
.mk-footer__grid > * { flex: 0 1 auto; min-width: 0; }
.mk-footer__silo--kontakt { flex: 0 0 auto; }
.mk-footer__logo { display: flex; align-items: flex-start; justify-content: flex-start; }
.mk-logo--footer { height: auto; }
.mk-logo--footer .mk-logo__img { width: auto; max-width: 180px; max-height: 150px; object-fit: contain; }
.mk-logo--footer .mk-logo__text { font-size: 34px; }

/* Silos: ab 901 px immer offen, der Aufklapp-Pfeil ist nur mobil sichtbar */
.mk-footer__silo { min-width: 0; }
.mk-footer__title {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-bottom: 18px;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mk-gold);
	list-style: none;
}
.mk-footer__title::-webkit-details-marker { display: none; }
.mk-footer__title .mk-icon { display: none; }
/* Ab 901 px: jeder Silotitel ist zwei Zeilen hoch, auch wenn er in eine passt.
   Dadurch beginnen „Über uns“, „Büroreinigung“, „Garagenreinigung“, „Bodenreinigung“ und
   „Baureinigung“ auf derselben Höhe (0.17.8). */
@media (min-width: 901px) {
	.mk-footer__title { align-items: flex-start; line-height: 1.45; min-height: calc(2 * 1.45em); }
}
.mk-footer__company { margin-bottom: 12px; font-size: 17px; font-weight: 700; color: var(--mk-white); }
.mk-footer__address { margin-bottom: 22px; font-size: 15px; line-height: 1.6; color: var(--mk-text-dark-3); }
.mk-footer__lines { display: flex; flex-direction: column; gap: 14px; }
.mk-footer__lines a {
	display: flex; align-items: center; gap: 12px;
	font-size: 15px; font-weight: 700; color: var(--mk-white);
	transition: color var(--mk-t-color);
}
.mk-footer__lines a span:last-child { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--mk-t-line); }
.mk-footer__lines a:hover { color: var(--mk-gold); }
.mk-footer__lines a:hover span:last-child { border-color: rgba(214, 167, 66, 0.7); }
.mk-footer__lines a:hover .mk-ring { border-color: var(--mk-gold); }
.mk-ring {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid rgba(214, 167, 66, 0.7); color: var(--mk-gold);
	transition: border-color var(--mk-t-line);
}

/* Links in den Silos: gleicher Hover wie im Header (Gold plus Strich) */
.mk-footer__links { display: flex; flex-direction: column; }
.mk-footer__links a {
	position: relative;
	padding: 9px 0;
	white-space: nowrap;
	font-size: 15px; font-weight: 600; color: var(--mk-head-dark);
	transition: color var(--mk-t-color);
}
/* Hover wie im Header: Gold und ein Strich darunter, kein Zeichen davor (0.17.7) */
.mk-footer__links a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
	background: currentColor; opacity: 0; transform: scaleX(0.4); transform-origin: left center;
	transition: opacity var(--mk-t-line), transform var(--mk-t-line);
}
.mk-footer__links a:hover, .mk-footer__links a:focus-visible, .mk-footer__links a[aria-current] { color: var(--mk-gold); }
.mk-footer__links a:hover::after, .mk-footer__links a:focus-visible::after { opacity: 0.85; transform: scaleX(1); }
.mk-footer__links a[aria-current]::after { opacity: 1; transform: scaleX(1); }

/* Rechtszeile: Links links, Social rechts */
.mk-footer__recht {
	/* beide Gruppen zur Mitte: Rechtslinks von links, Social von rechts (0.17.8) */
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 72px;
	max-width: var(--mk-max); margin-inline: auto;
	padding: 0 var(--mk-header-pad) 22px;
}
.mk-footer__rechtlinks {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.mk-footer__rechtlinks a, .mk-footer__cookies {
	padding: 6px 0; border: 0; background: none; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600; color: var(--mk-text-dark-3);
	border-bottom: 1px solid transparent;
	transition: color var(--mk-t-color), border-color var(--mk-t-line);
}
.mk-footer__rechtlinks a:hover, .mk-footer__rechtlinks a[aria-current], .mk-footer__cookies:hover {
	color: var(--mk-gold); border-color: rgba(214, 167, 66, 0.7);
}
.mk-footer__social { display: flex; align-items: center; gap: 10px; }
.mk-footer__social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--mk-line-gold-soft); color: var(--mk-text-dark-2);
	transition: color var(--mk-t-color), border-color var(--mk-t-line), background-color var(--mk-t-line);
}
.mk-footer__social-link:hover { color: var(--mk-black); background: var(--mk-gold); border-color: var(--mk-gold); }
/* Aufbau-Modus: Kanal ohne Adresse, sichtbar für das Layout, aber nicht klickbar */
.mk-footer__social-link.is-platzhalter { opacity: 0.4; cursor: help; }
.mk-footer__social-link.is-platzhalter:hover { color: var(--mk-text-dark-2); background: none; border-color: var(--mk-line-gold-soft); }

/* Abschlusszeile mit Trennlinie darüber */
.mk-footer__legal { border-top: 1px solid var(--mk-line-gold-soft); padding: 20px var(--mk-header-pad); text-align: center; }
.mk-footer__legal p { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--mk-gold-dark); }

/* Ab 901 px sind alle Silos offen und lassen sich nicht zuklappen */
@media (min-width: 901px) {
	.mk-footer__silo .mk-footer__title { pointer-events: none; }
}

@media (max-width: 1280px) {
	.mk-footer__grid { flex-wrap: wrap; gap: 36px 44px; }
	.mk-footer__logo { flex: 0 0 100%; }
}

@media (max-width: 900px) {
	/* Zwei Silos nebeneinander, Silo 1 offen, Silo 2 bis 6 als Akkordeon */
	.mk-footer__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 18px;
		padding: 36px var(--mk-gutter-hero) 24px;
	}
	.mk-footer__logo { grid-column: 1 / -1; margin-bottom: 8px; }
	.mk-footer__links a { white-space: normal; }
	.mk-footer__rechtlinks { margin-left: 0; }
	.mk-logo--footer .mk-logo__img { max-width: 120px; max-height: 96px; }
	.mk-logo--footer .mk-logo__text { font-size: 24px; }

	.mk-footer__silo--kontakt { grid-column: 1 / -1; margin-bottom: 10px; }
	.mk-footer__silo:not(.mk-footer__silo--kontakt) {
		border-top: 1px solid var(--mk-line-gold-soft);
	}
	.mk-footer__silo:not(.mk-footer__silo--kontakt) .mk-footer__title {
		margin-bottom: 0; min-height: 48px; cursor: pointer;
	}
	.mk-footer__title .mk-icon { display: block; color: var(--mk-gold); transition: transform var(--mk-t-line); }
	.mk-footer__silo[open] .mk-footer__title .mk-icon { transform: rotate(180deg); }
	.mk-footer__links { padding-bottom: 10px; }
	.mk-footer__links a { min-height: 40px; display: flex; align-items: center; padding-left: 0; }
	.mk-footer__links a::before { display: none; }

	.mk-footer__recht { padding: 4px var(--mk-gutter-hero) 18px; justify-content: flex-start; gap: 14px 24px; }
	.mk-footer__legal { padding-inline: var(--mk-gutter-hero); }
}

/* 7 · Seiten ohne Blöcke (AGB, Impressum, Suche, 404) ---------------------- */
.mk-page__title { font-size: var(--mk-fs-h2); line-height: 1.04; letter-spacing: -0.035em; font-weight: 900; margin-bottom: 28px; }
.mk-prose { max-width: var(--mk-measure); }
.mk-prose > * + * { margin-top: 1em; }
.mk-prose h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; margin-top: 1.8em; }
.mk-prose h3 { font-size: 20px; font-weight: 700; margin-top: 1.5em; }
.mk-prose a { color: var(--mk-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.mk-prose ul, .mk-prose ol { padding-left: 1.2em; }
.mk-list-item { padding: 18px 0; border-bottom: 1px solid var(--mk-line); max-width: var(--mk-measure); }
.mk-list-item__title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.mk-list-item__title a:hover { color: var(--mk-gold-dark); }

/* 8 · Animationen (von mehreren Blöcken genutzt) --------------------------- */
@keyframes mkFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mkSpin    { to { transform: rotate(360deg); } }
@keyframes mkRing    { 0%, 100% { transform: rotate(-9deg); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes mkPulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes mkBreathe { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes mkGlowLight {
	0%, 100% { box-shadow: 0 0 0 5px rgba(214,167,66,0.1), 0 12px 24px -12px rgba(20,20,19,0.28), inset 0 1px 6px rgba(255,255,255,0.9); }
	50%      { box-shadow: 0 0 0 9px rgba(214,167,66,0.18), 0 18px 34px -14px rgba(20,20,19,0.34), inset 0 1px 8px rgba(255,255,255,1); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Nach oben (0.20.3, rechts seit 0.21.7): runder Knopf rechts unten, erscheint nach dem ersten Bildschirm (main.js setzt .is-sichtbar) */
/* 0.22.4: Navigationseintrag ohne fertige Zielseite – Text ohne Link, nicht klickbar, kein Hover */
.mk-header a[aria-disabled="true"],
.mk-footer a[aria-disabled="true"] { pointer-events: none; cursor: default; }

.mk-nach-oben {
	position: fixed; z-index: 90;
	right: 20px; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	border: 1px solid var(--mk-line-gold-strong); border-radius: 50%;
	background: var(--mk-black); color: var(--mk-gold);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
	cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms, background-color var(--mk-t-color), color var(--mk-t-color);
}
.mk-nach-oben .mk-icon { transform: rotate(180deg); }
.mk-nach-oben.is-sichtbar { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s, background-color var(--mk-t-color), color var(--mk-t-color); }
.mk-nach-oben:hover, .mk-nach-oben:focus-visible { background: var(--mk-gold); color: var(--mk-black); border-color: var(--mk-gold); }
body.mk-menu-open .mk-nach-oben { display: none; }
@media (max-width: 900px) { .mk-nach-oben { right: 14px; width: 44px; height: 44px; } }
@media print { .mk-nach-oben { display: none; } }

/* Formular: Häkchen AGB/Datenschutz (beide Formulare, Markup in inc/form.php) */
.mk-form__consent {
	display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 5px;
	align-items: start; margin: 0;
	font-size: 13.5px; line-height: 1.45; color: var(--mk-text);
}
.mk-form__consent input[type="checkbox"] {
	width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mk-gold-dark); cursor: pointer;
}
.mk-form__consent input.is-error { outline: 2px solid #B3341A; outline-offset: 1px; }
.mk-form__consent label { cursor: pointer; }
.mk-form__consent a { color: var(--mk-gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mk-form__consent [data-mk-error] { grid-column: 2; }

/* Formular: Meldung nach Rückleitung vom Server (inc/anfrage.php) */
.mk-form__status {
	margin: 0; padding: 12px 14px;
	border: 1px solid #B3341A; border-radius: var(--mk-r-ctrl); background: #FDF6F4;
	font-size: 14px; line-height: 1.45; color: #B3341A;
}

/* Formular: Fangfeld (Spamschutz), für Menschen unsichtbar */
.mk-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Formular: während des Sendens (doppeltes Absenden verhindert, view.js) */
.mk-form .mk-cta[disabled] { opacity: 0.75; cursor: progress; }