/* =========================================================================
   MH-DESIGN  ·  main.css
   Kreatives, verspieltes Aurora-Design-System
   -------------------------------------------------------------------------
   Inhalt:
   1. Design-Tokens          6. Aurora & Blobs        11. Arbeiten
   2. Reset & Base           7. Hero                  12. Über mich
   3. Typografie             8. Marquee               13. CTA
   4. Layout & Utilities     9. Leistungen            14. CTA
   5. Header & Navigation   10. Warum / Versprechen   15. Kontakt & Form
   16. Footer · 17. 404 · 18. Blog/Page · 19. Reveal · 20. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) DESIGN-TOKENS
   ---------------------------------------------------------------------- */
:root {
	/* Farben – Basis */
	--ink:        #0B0B12;   /* Grundfläche (indigo-schwarz)   */
	--ink-2:      #13131F;   /* leicht erhöhte Fläche          */
	--ink-3:      #1C1B2C;   /* Cards auf dunkel               */
	--paper:      #F5F3FF;   /* helle Sektionen (weich-lila)   */
	--paper-2:    #FFFFFF;   /* Cards auf hell                 */

	/* Text */
	--fg:         #EEEAFF;   /* Text auf dunkel                */
	--fg-dark:    #14121F;   /* Text auf hell                  */
	--muted:      #A7A2C6;   /* gedämpft auf dunkel            */
	--muted-dark: #575273;   /* gedämpft auf hell              */

	/* Linien */
	--line:       rgba(238,234,255,.12);
	--line-dark:  rgba(20,18,31,.12);

	/* Aurora-Verlauf (Signature) */
	--g1: #FF5E7E;   /* Koralle */
	--g2: #A855F7;   /* Violett */
	--g3: #4F7BFF;   /* Blau    */
	--g4: #35E0C8;   /* Mint    */
	--grad:      linear-gradient(100deg, var(--g1), var(--g2) 38%, var(--g3) 70%, var(--g4));
	--grad-soft: linear-gradient(135deg, var(--g2), var(--g3));

	/* Radien */
	--r-sm: 12px;
	--r:    20px;
	--r-lg: 30px;
	--r-pill: 999px;

	/* Typo */
	--f-display: "Sora", "Segoe UI", system-ui, sans-serif;
	--f-body:    "Inter", system-ui, -apple-system, sans-serif;
	--f-label:   "Space Grotesk", "Inter", sans-serif;

	/* Layout */
	--container: 1180px;
	--narrow:    760px;
	--gutter:    clamp(1.2rem, 4vw, 2.4rem);
	--section-y: clamp(4.5rem, 9vw, 8rem);

	/* Effekte */
	--shadow:      0 24px 60px -28px rgba(0,0,0,.55);
	--shadow-soft: 0 20px 50px -30px rgba(79,123,255,.5);
	--ease:        cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------------------------
   2) RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* scroll-margin sorgt dafür, dass Anker-Ziele nicht unter dem Header liegen */
:target { scroll-margin-top: 100px; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--fg);
	font-family: var(--f-body);
	font-size: clamp(1rem, .96rem + .25vw, 1.075rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

::selection { background: var(--g2); color: #fff; }

/* -------------------------------------------------------------------------
   3) TYPOGRAFIE
   ---------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.02em;
	margin: 0;
}

/* Akzent-Wörter in Überschriften: klarer, aufrechter Gradient
   (font-style: normal verhindert synthetisches Kursiv, das die letzte
   Buchstaben-Glyphe unter background-clip:text abschneiden würde;
   padding-right + box-decoration-break geben zusätzlichen Sicherheitsabstand) */
.mh-accent-serif {
	font-style: normal;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	padding-right: .08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Gradient-Text-Utility */
.mh-grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------------------------------
   4) LAYOUT & UTILITIES
   ---------------------------------------------------------------------- */
.mh-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mh-container--narrow { max-width: var(--narrow); }

.mh-section { padding-block: var(--section-y); position: relative; }

/* Helle Sektionen */
.mh-services,
.mh-process,
.mh-about,
.mh-contact { background: var(--paper); color: var(--fg-dark); }

.mh-section__head { max-width: 640px; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.mh-section__head--center { margin-inline: auto; text-align: center; }
.mh-section__head--split {
	max-width: none; display: flex; align-items: flex-end;
	justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.mh-section__title { font-size: clamp(2.5rem, 1.4rem + 3vw, 3.4rem); }
.mh-section__lead { margin-top: 1rem; color: var(--muted-dark); font-size: 1.1rem; max-width: 46ch; }

/* Eyebrow (Label) */
.mh-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--f-label);
	font-size: .8rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em;
	margin: 0 0 1.1rem;
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mh-eyebrow--dark { color: var(--g2); background: none; -webkit-text-fill-color: initial; }
.mh-eyebrow__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--grad); flex: none;
}

/* Chips */
.mh-chip {
	display: inline-flex; align-items: center;
	padding: .5rem .95rem;
	font-family: var(--f-label); font-size: .82rem; font-weight: 500;
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: rgba(238,234,255,.04);
	backdrop-filter: blur(6px);
}

/* Buttons */
.mh-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .85rem 1.4rem;
	font-family: var(--f-label); font-weight: 600; font-size: .95rem;
	border-radius: var(--r-pill);
	color: inherit;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease),
	            background .3s var(--ease), border-color .3s var(--ease);
	will-change: transform;
}
.mh-btn--lg { padding: 1.05rem 1.8rem; font-size: 1rem; }

.mh-btn--solid {
	background: var(--grad);
	background-size: 160% 160%;
	color: #0B0B12;
	box-shadow: var(--shadow-soft);
	animation: mh-gradShift 8s ease infinite;
}
.mh-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -18px rgba(168,85,247,.55); }

.mh-btn--ghost {
	border: 1.5px solid color-mix(in srgb, currentColor 26%, transparent);
	color: inherit;
	background: color-mix(in srgb, currentColor 4%, transparent);
}
.mh-btn--ghost:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, currentColor 55%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.mh-btn__arrow { transition: transform .3s var(--ease); }
.mh-btn:hover .mh-btn__arrow { transform: translateX(4px); }

@keyframes mh-gradShift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* Accessibility-Helfer */
.mh-visually-hidden, .mh-skip-link {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mh-skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 1000;
	width: auto; height: auto; clip: auto; margin: 0;
	padding: .8rem 1.2rem; background: var(--ink-2); color: var(--fg);
	border-radius: var(--r-sm); box-shadow: var(--shadow);
}

/* -------------------------------------------------------------------------
   5) HEADER & NAVIGATION
   ---------------------------------------------------------------------- */
.mh-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	padding-block: 1.1rem;
	transition: background .4s var(--ease), padding .4s var(--ease),
	            border-color .4s var(--ease);
	border-bottom: 1px solid transparent;
}
.mh-header.is-scrolled {
	background: rgba(11,11,18,.72);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--line);
	padding-block: .7rem;
}
.mh-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	justify-content: space-between;
}

/* Logo */
.mh-logo { display: inline-flex; align-items: center; gap: .65rem; }
.mh-logo__mark { flex: none; transition: transform .5s var(--ease); }
.mh-logo:hover .mh-logo__mark { transform: rotate(-8deg) scale(1.05); }
.mh-logo__word {
	font-family: var(--f-display); font-weight: 800; font-size: 1.25rem;
	letter-spacing: -.02em;
}
.mh-logo__accent { font-weight: 500; opacity: .72; }

/* Hochgeladenes Logo aus „Website-Informationen“ (custom-logo) */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { height: 40px; width: auto; display: block; }
.mh-footer .custom-logo { height: 36px; }
.mh-maint__logo .custom-logo { height: 54px; }

/* Desktop-Nav */
.mh-nav { margin-left: auto; }
.mh-nav__list { display: flex; align-items: center; gap: 2rem; }
.mh-nav__list a {
	font-family: var(--f-label); font-size: .95rem; font-weight: 500;
	color: var(--fg); position: relative; padding-block: .3rem;
}
.mh-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 2px; border-radius: 2px;
	background: var(--grad); transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--ease);
}
.mh-nav__list a:hover::after { transform: scaleX(1); }

.mh-header__cta { flex: none; }

/* Burger */
.mh-burger { display: none; width: 46px; height: 46px; border-radius: 50%;
	align-items: center; justify-content: center; flex: none;
	border: 1px solid var(--line); background: rgba(238,234,255,.04); }
.mh-burger__box { position: relative; width: 20px; height: 14px; }
.mh-burger__line {
	position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
	background: var(--fg); transition: transform .35s var(--ease), opacity .2s;
}
.mh-burger__line:nth-child(1) { top: 0; }
.mh-burger__line:nth-child(2) { bottom: 0; }
.mh-burger[aria-expanded="true"] .mh-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mh-burger[aria-expanded="true"] .mh-burger__line:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile-Menü */
.mh-mobile {
	position: fixed; inset: 0; z-index: 99;
	background: rgba(11,11,18,.96);
	backdrop-filter: blur(20px);
	display: grid; place-items: center;
	opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.mh-mobile.is-open { opacity: 1; visibility: visible; }
.mh-mobile[hidden] { display: none; }
.mh-mobile__inner { text-align: center; display: grid; gap: 2rem; }
.mh-mobile__list { display: grid; gap: 1.4rem; }
.mh-mobile__list a {
	font-family: var(--f-display); font-weight: 700; font-size: 2rem;
	color: var(--fg);
}
.mh-mobile__list a:hover { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mh-mobile__cta { justify-self: center; }

/* -------------------------------------------------------------------------
   6) AURORA & BLOBS
   ---------------------------------------------------------------------- */
.mh-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; will-change: transform, opacity; }
.mh-aurora__blob {
	position: absolute; border-radius: 50%;
	filter: blur(80px); opacity: .55;
	will-change: transform;
}
.mh-aurora__blob--1 {
	width: 44vw; height: 44vw; max-width: 620px; max-height: 620px;
	top: -12%; left: -8%;
	background: radial-gradient(circle at 30% 30%, var(--g1), transparent 70%);
	animation: mh-float1 20s ease-in-out infinite;
}
.mh-aurora__blob--2 {
	width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
	top: 8%; right: -10%;
	background: radial-gradient(circle at 60% 40%, var(--g2), transparent 70%);
	animation: mh-float2 26s ease-in-out infinite;
}
.mh-aurora__blob--3 {
	width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
	bottom: -22%; left: 24%;
	background: radial-gradient(circle at 50% 50%, var(--g3), transparent 68%);
	animation: mh-float3 30s ease-in-out infinite;
}
.mh-aurora__grain {
	position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

@keyframes mh-float1 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6%,8%) scale(1.12);} }
@keyframes mh-float2 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-7%,5%) scale(1.08);} }
@keyframes mh-float3 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(4%,-6%) scale(1.1);} }

/* -------------------------------------------------------------------------
   7) HERO
   ---------------------------------------------------------------------- */
.mh-hero {
	position: relative; overflow: hidden;
	min-height: 100svh; display: flex; align-items: center;
	padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 8vh, 6rem);
	background: radial-gradient(120% 90% at 50% 0%, #171528 0%, var(--ink) 60%);
}
.mh-hero__inner { position: relative; z-index: 2; max-width: 940px; }

.mh-hero__title {
	font-size: clamp(2.9rem, 1.6rem + 6.5vw, 6.4rem);
	font-weight: 800; margin-bottom: 1.6rem;
}
.mh-hero__line { display: block; }

/* Rotierendes Wort (Signature) */
.mh-rotator { display: inline-grid; vertical-align: bottom; }
.mh-rotator__word {
	grid-area: 1 / 1;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: 0; transform: translateY(.4em) rotate(2deg);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mh-rotator__word.is-active { opacity: 1; transform: none; }

.mh-hero__sub {
	max-width: 42ch; color: var(--muted);
	font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); margin-bottom: 2.2rem;
}
.mh-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; }
.mh-hero__chips { display: flex; flex-wrap: wrap; gap: .7rem; }

/* -------------------------------------------------------------------------
   8) MARQUEE
   ---------------------------------------------------------------------- */
.mh-marquee {
	background: var(--grad); background-size: 200% 100%;
	animation: mh-gradShift 10s ease infinite;
	padding-block: 1rem; overflow: hidden;
}
.mh-marquee__track { display: flex; width: max-content; animation: mh-marquee 34s linear infinite; }
.mh-marquee__group { display: flex; align-items: center; }
.mh-marquee__item, .mh-marquee__sep {
	font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
	color: #0B0B12; padding-inline: 1rem; white-space: nowrap;
}
.mh-marquee__sep { opacity: .5; }
@keyframes mh-marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------------
   9) LEISTUNGEN (Services)
   ---------------------------------------------------------------------- */
.mh-services__grid {
	display: grid; gap: 1.4rem;
	grid-template-columns: repeat(3, 1fr);
}
.mh-scard {
	position: relative; overflow: hidden;
	padding: 2.2rem 1.9rem;
	background: var(--paper-2);
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mh-scard:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(80,60,160,.45); }
.mh-scard__num {
	font-family: var(--f-label); font-weight: 600; font-size: .85rem;
	letter-spacing: .1em; color: var(--muted-dark);
}
.mh-scard__title { font-size: 1.5rem; margin: .7rem 0 .8rem; color: var(--fg-dark); }
.mh-scard__text { color: var(--muted-dark); margin: 0 0 1.4rem; }
.mh-scard__list { display: grid; gap: .55rem; }
.mh-scard__list li {
	position: relative; padding-left: 1.5rem;
	font-family: var(--f-label); font-size: .92rem; color: var(--fg-dark);
}
.mh-scard__list li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 8px; height: 8px; border-radius: 50%; background: var(--grad);
}
.mh-scard__glow {
	position: absolute; inset: auto -40% -60% -40%; height: 60%;
	background: var(--grad); filter: blur(60px); opacity: 0;
	transition: opacity .5s var(--ease); pointer-events: none;
}
.mh-scard:hover .mh-scard__glow { opacity: .22; }

/* -------------------------------------------------------------------------
   10) WARUM / VERSPRECHEN
   ---------------------------------------------------------------------- */
.mh-why { background: radial-gradient(120% 100% at 50% 0%, #17152a, var(--ink) 65%); }
.mh-why__grid {
	display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr);
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.mh-promise {
	padding: 2.2rem 1.9rem;
	background: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.mh-promise:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--g2) 45%, transparent); }
.mh-promise__key {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 3.4rem; height: 3.4rem; padding-inline: .7rem;
	font-family: var(--f-display); font-weight: 800; font-size: 1.4rem;
	border-radius: var(--r); margin-bottom: 1.2rem;
	background: var(--grad); color: #0B0B12;
}
.mh-promise__title { font-size: 1.4rem; margin-bottom: .6rem; }
.mh-promise__text { color: var(--muted); margin: 0; }

.mh-why__claim {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
	text-align: center; font-family: var(--f-display); font-weight: 800;
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); margin: 0;
}
.mh-why__claim span { color: var(--fg); }

/* -------------------------------------------------------------------------
   11) ABLAUF (Process)
   ---------------------------------------------------------------------- */
.mh-process__list {
	display: grid; gap: 1.2rem;
	grid-template-columns: repeat(4, 1fr);
	counter-reset: none;
}
.mh-step {
	position: relative; padding: 2rem 1.6rem;
	background: var(--paper-2);
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
}
.mh-step__num {
	display: block; font-family: var(--f-display); font-weight: 800;
	font-size: 2.6rem; line-height: 1; margin-bottom: 1rem;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mh-step__title { font-size: 1.25rem; margin-bottom: .5rem; color: var(--fg-dark); }
.mh-step__text { color: var(--muted-dark); margin: 0; font-size: .96rem; }

/* -------------------------------------------------------------------------
   12) ARBEITEN (Work)
   ---------------------------------------------------------------------- */
.mh-work { background: var(--ink); }
.mh-work__grid {
	display: grid; gap: 1.4rem;
	grid-template-columns: repeat(2, 1fr);
}
.mh-project {
	position: relative;
	border-radius: var(--r-lg); overflow: hidden;
	background: var(--ink-2); border: 1px solid var(--line);
	transition: transform .4s var(--ease);
}
.mh-project:hover { transform: translateY(-6px); }
.mh-project__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mh-project__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	filter: saturate(.58) brightness(.94) contrast(1.02);
	transition: transform .6s var(--ease), filter .5s var(--ease);
}
.mh-project:hover .mh-project__thumb img,
.mh-project:focus-within .mh-project__thumb img { filter: saturate(1) brightness(1) contrast(1); }
.mh-project:hover .mh-project__thumb img { transform: scale(1.06); }

/* Stretched-Link: ganze Kachel klickbar */
.mh-project__link { position: absolute; inset: 0; z-index: 3; }

/* Browser-Mockup als Platzhalter (Verlauf je nach data-grad) */
/* Screenshot (automatisch via mShots oder eigenes Beitragsbild) */
.mh-project__shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.mh-project:hover .mh-project__shot { transform: scale(1.04); }

/* Farbiger Ladezustand hinter Screenshots & Fläche des Browser-Mockups */
.mh-project[data-grad="1"] .mh-project__thumb { background: linear-gradient(135deg, var(--g1), var(--g2)); }
.mh-project[data-grad="2"] .mh-project__thumb { background: linear-gradient(135deg, var(--g2), var(--g3)); }
.mh-project[data-grad="3"] .mh-project__thumb { background: linear-gradient(135deg, var(--g3), var(--g4)); }
.mh-project[data-grad="4"] .mh-project__thumb { background: linear-gradient(135deg, var(--g4), var(--g1)); }
.mh-project__browser { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.1rem 1.1rem 0; }
.mh-project__chrome {
	display: flex; align-items: center; gap: .4rem;
	background: rgba(255,255,255,.94); border-radius: 10px 10px 0 0; padding: .55rem .7rem;
}
.mh-project__chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,18,31,.22); flex: none; }
.mh-project__url {
	margin-left: .5rem; flex: 1; min-width: 0;
	background: rgba(20,18,31,.08); border-radius: var(--r-pill); padding: .22rem .7rem;
	font-family: var(--f-label); font-size: .72rem; color: rgba(20,18,31,.62);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-project__screen {
	flex: 1; background: rgba(255,255,255,.85); border-radius: 0 0 4px 4px;
	padding: 1rem; display: grid; align-content: start; gap: .55rem; overflow: hidden;
}
.mh-project__screen span { height: 9px; border-radius: 5px; background: rgba(20,18,31,.14); }
.mh-project__screen span:nth-child(1) { width: 55%; height: 16px; background: rgba(20,18,31,.28); }
.mh-project__screen span:nth-child(2) { width: 100%; }
.mh-project__screen span:nth-child(3) { width: 78%; }
.mh-project__shine {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
	transform: translateX(-120%); transition: transform .8s var(--ease);
}
.mh-project:hover .mh-project__shine { transform: translateX(120%); }
.mh-project__meta { position: relative; z-index: 2; padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.mh-project__title { font-size: 1.25rem; color: var(--fg); }
.mh-project__ext { display: inline-block; margin-left: .35rem; opacity: .7; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.mh-project:hover .mh-project__ext { transform: translate(2px, -2px); opacity: 1; }
.mh-project__cat { font-family: var(--f-label); font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

/* -------------------------------------------------------------------------
   13) ÜBER MICH
   ---------------------------------------------------------------------- */
.mh-about__inner {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: .85fr 1.15fr; align-items: center;
}
.mh-about__media { position: relative; }
.mh-about__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.mh-about__card {
	aspect-ratio: 4 / 5; border-radius: var(--r-lg);
	background: var(--grad); background-size: 180% 180%;
	animation: mh-gradShift 9s ease infinite;
	display: grid; place-items: center; box-shadow: var(--shadow);
}
.mh-about__mono { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 12vw, 8rem); color: rgba(11,11,18,.85); }
.mh-about__content { max-width: 52ch; }
.mh-about__text { color: var(--muted-dark); margin: 0 0 1.1rem; }
.mh-about__facts {
	display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem;
	padding-top: 1.6rem; border-top: 1px solid var(--line-dark);
}
.mh-about__facts li { display: grid; }
.mh-about__facts strong { font-family: var(--f-display); font-size: 1.4rem; color: var(--fg-dark); }
.mh-about__facts span { font-family: var(--f-label); font-size: .82rem; color: var(--muted-dark); }

/* -------------------------------------------------------------------------
   15) CTA
   ---------------------------------------------------------------------- */
.mh-cta { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7.5rem);
	background: radial-gradient(120% 120% at 50% 50%, #1a1730, var(--ink) 70%); text-align: center; }
.mh-aurora--cta .mh-aurora__blob { opacity: .5; }
.mh-cta__inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.mh-cta__title { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 3.6rem); margin-bottom: 1rem; }
.mh-cta__text { color: var(--muted); font-size: 1.15rem; margin: 0 auto 2.2rem; max-width: 46ch; }
.mh-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* -------------------------------------------------------------------------
   16) KONTAKT & FORMULAR
   ---------------------------------------------------------------------- */
.mh-contact__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1.1fr; align-items: start; }
.mh-contact__lead { color: var(--muted-dark); margin: 1rem 0 2rem; }
.mh-contact__details { display: grid; gap: 1.3rem; }
.mh-contact__details li { display: grid; gap: .2rem; }
.mh-contact__label { font-family: var(--f-label); font-size: .78rem; text-transform: uppercase;
	letter-spacing: .12em; color: var(--muted-dark); }
.mh-contact__details a, .mh-contact__details span { font-size: 1.15rem; color: var(--fg-dark); font-weight: 500; }
.mh-contact__details a:hover { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.mh-contact__formwrap {
	background: var(--paper-2); border: 1px solid var(--line-dark);
	border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 30px 60px -40px rgba(80,60,160,.4);
}
.mh-form { display: grid; gap: 1.2rem; }
.mh-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mh-field { display: grid; gap: .5rem; }
.mh-field__label { font-family: var(--f-label); font-size: .85rem; font-weight: 600; color: var(--fg-dark); }
.mh-field__input {
	width: 100%; padding: .95rem 1.1rem; font: inherit; color: var(--fg-dark);
	background: var(--paper); border: 1.5px solid var(--line-dark); border-radius: var(--r-sm);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease); resize: vertical;
}
.mh-field__input::placeholder { color: var(--muted-dark); opacity: .7; }
.mh-field__input:focus { outline: none; border-color: var(--g2);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--g2) 18%, transparent); }
.mh-form__submit { justify-self: start; margin-top: .3rem; }
.mh-form__note { font-size: .82rem; color: var(--muted-dark); margin: 0; }
.mh-consent { margin-top: .2rem; }
.mh-consent__label { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--muted-dark); cursor: pointer; line-height: 1.5; }
.mh-consent__label input { margin-top: .15rem; width: 18px; height: 18px; flex: none; accent-color: var(--g2); }
.mh-consent__label a { color: var(--g3); text-decoration: underline; }

.mh-alert { padding: 1rem 1.2rem; border-radius: var(--r-sm); margin-bottom: 1.4rem; font-weight: 500; }
.mh-alert--ok  { background: color-mix(in srgb, var(--g4) 22%, white); color: #0a3d34; border: 1px solid var(--g4); }
.mh-alert--err { background: color-mix(in srgb, var(--g1) 18%, white); color: #6d1027; border: 1px solid var(--g1); }

/* -------------------------------------------------------------------------
   17) FOOTER
   ---------------------------------------------------------------------- */
.mh-footer { background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.mh-footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.mh-footer__claim { font-family: var(--f-body); font-size: 1.1rem; color: var(--muted); margin: 1rem 0 0; max-width: 34ch; }
.mh-footer__heading { font-family: var(--f-label); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 1.1rem; }
.mh-footer__list { display: grid; gap: .7rem; }
.mh-footer__list a, .mh-footer__list li { color: var(--fg); }
.mh-footer__list a:hover { color: var(--g3); }
.mh-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem; }
.mh-footer__copy { color: var(--muted); font-size: .9rem; margin: 0; }
.mh-footer__legal { display: flex; gap: 1.5rem; }
.mh-footer__legal a { color: var(--muted); font-size: .9rem; }
.mh-footer__legal a:hover { color: var(--fg); }

/* -------------------------------------------------------------------------
   18) 404 · BLOG · PAGE
   ---------------------------------------------------------------------- */
.mh-404 { position: relative; overflow: hidden; min-height: 80svh; display: grid; place-items: center; text-align: center;
	background: radial-gradient(120% 90% at 50% 0%, #171528, var(--ink) 60%); }
.mh-404__inner { position: relative; z-index: 2; max-width: 620px; }
.mh-404__title { font-size: clamp(2.2rem, 1.4rem + 4vw, 4rem); margin-bottom: 1rem; }
.mh-404__text { color: var(--muted); margin: 0 0 2rem; }

.mh-blog, .mh-page { padding-top: clamp(7rem, 12vh, 10rem); background: var(--ink); }
.mh-page__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); margin-bottom: 2rem; color: var(--fg); }
.mh-page__content { color: rgba(238,234,255,.88); line-height: 1.8; }
.mh-page__content :where(h2,h3) { color: var(--fg); margin: 2rem 0 .8rem; }
.mh-page__content a { color: #9DBBFF; text-decoration: underline; }
.mh-page__content a:hover { color: #C9D8FF; }
.mh-page__content p { margin: 0 0 1rem; }
.mh-page__content strong { color: var(--fg); }
.mh-page__content h2 { font-size: 1.5rem; }
.mh-page__content h3 { font-size: 1.15rem; }
.mh-page__content ul, .mh-page__content ol { margin: 0 0 1rem 1.2rem; }
.mh-page__content li { margin: .3rem 0; }
.mh-page__content table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .95rem; }
.mh-page__content th, .mh-page__content td { border: 1px solid rgba(238,234,255,.16); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.mh-page__content th { background: rgba(238,234,255,.06); color: var(--fg); }
.mh-page__content .mh-legal-note {
	background: rgba(168,85,247,.14); border-left: 3px solid var(--g2); color: var(--fg);
	padding: 1rem 1.2rem; border-radius: 10px; margin: 0 0 1.8rem; font-size: .95rem;
}
.mh-posts { display: grid; gap: 2.5rem; }
.mh-post { display: grid; gap: 1rem; }
.mh-post__thumb img { border-radius: var(--r); }
.mh-post__title a { color: var(--fg-dark); }
.mh-post__meta { font-family: var(--f-label); font-size: .82rem; color: var(--muted-dark); }
.mh-pagination { margin-top: 3rem; }
.mh-pagination a, .mh-pagination .current { padding: .5rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--line-dark); color: var(--fg-dark); }
.mh-pagination .current { background: var(--grad); color: #0B0B12; border: 0; }

/* -------------------------------------------------------------------------
   19) REVEAL-ANIMATIONEN (Scroll)
   ---------------------------------------------------------------------- */
.mh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mh-reveal.is-visible { opacity: 1; transform: none; }
/* Gestaffelt innerhalb von Grids */
.mh-services__grid .mh-reveal:nth-child(2) { transition-delay: .08s; }
.mh-services__grid .mh-reveal:nth-child(3) { transition-delay: .16s; }
.mh-why__grid .mh-reveal:nth-child(2)      { transition-delay: .08s; }
.mh-why__grid .mh-reveal:nth-child(3)      { transition-delay: .16s; }
.mh-process__list .mh-reveal:nth-child(2)  { transition-delay: .07s; }
.mh-process__list .mh-reveal:nth-child(3)  { transition-delay: .14s; }
.mh-process__list .mh-reveal:nth-child(4)  { transition-delay: .21s; }

/* -------------------------------------------------------------------------
   20) RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
	/* Ab hier kompakter Burger-Header: volle Nav + Login raus, damit nichts überlappt. */
	.mh-nav { display: none; }
	.mh-burger { display: inline-flex; }
	.mh-header__contact { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; margin-left: auto; border-radius: 50%; }
	.mh-header__cta { display: inline-flex; padding: .5rem .9rem; font-size: .8rem; letter-spacing: 0; }
	.mh-loginwrap { display: none; }
	.mh-ctahint { display: none; }
	.mh-header__inner { gap: .55rem; }
}
@media (max-width: 980px) {
	.mh-services__grid,
	.mh-why__grid,
	.mh-process__list { grid-template-columns: repeat(2, 1fr); }
	.mh-work__grid { grid-template-columns: 1fr; }
	.mh-about__inner,
	.mh-contact__inner { grid-template-columns: 1fr; }
	.mh-about__media { max-width: 360px; }
	.mh-footer__top { grid-template-columns: 1fr 1fr; }
}
/* „Kontakt“ nur mobil (Desktop hat den Menüpunkt in der Nav) + A11y-Widget im Funnel aus. */
.mh-header__contact { display: none; }
body.mh-onb-page .mh-a11y { display: none; }

@media (max-width: 620px) {
	:root { --section-y: clamp(3.5rem, 12vw, 5rem); }
	.mh-services__grid,
	.mh-why__grid,
	.mh-process__list { grid-template-columns: 1fr; }
	.mh-section__head--split { align-items: flex-start; }
	.mh-hero__actions .mh-btn,
	.mh-cta__actions .mh-btn { width: 100%; justify-content: center; }
	.mh-footer__top { grid-template-columns: 1fr; }
	.mh-why__claim { gap: .4rem 1rem; }
}

/* -------------------------------------------------------------------------
   21) REDUCED MOTION – Barrierefreiheit
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.mh-reveal { opacity: 1; transform: none; }
	.mh-aurora__blob { animation: none; }
}

/* -------------------------------------------------------------------------
   22) WARTUNGSSEITE (maintenance.php)
   ---------------------------------------------------------------------- */
.mh-maint {
	position: relative; overflow: hidden;
	min-height: 100svh; display: grid; place-items: center; text-align: center;
	padding: 2rem;
	background: radial-gradient(120% 90% at 50% 0%, #171528, var(--ink) 60%);
}
.mh-maint__inner { position: relative; z-index: 2; max-width: 640px; }
.mh-maint__logo { display: inline-flex; justify-content: center; margin-bottom: 2.2rem; }
.mh-maint__logo .mh-logo__mark { width: 54px; height: 54px; }
.mh-maint__title { font-size: clamp(2.6rem, 1.4rem + 4vw, 4rem); margin-bottom: 1.1rem; }
.mh-maint__title .mh-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mh-maint__text { color: var(--muted); font-size: 1.15rem; margin: 0 auto 2.2rem; max-width: 46ch; }
.mh-maint__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.mh-maint__foot { margin-top: 2.6rem; font-family: var(--f-label); font-size: .85rem; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 620px) {
	.mh-maint__actions .mh-btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   23) COOKIE-HINWEIS
   ---------------------------------------------------------------------- */
.mh-cookie {
	position: fixed; right: 1rem; left: auto; bottom: 1rem; z-index: 200;
	width: min(400px, calc(100% - 2rem));
	background: var(--ink-2); color: var(--fg);
	border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--shadow); padding: 1.1rem 1.3rem;
	opacity: 0; transform: translateY(14px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mh-cookie.is-visible { opacity: 1; transform: none; }
.mh-cookie__inner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mh-cookie__text { margin: 0; font-size: .92rem; color: var(--muted); flex: 1; min-width: 220px; }
.mh-cookie__text a { color: var(--g3); text-decoration: underline; }
.mh-cookie__actions { display: flex; gap: .6rem; }
.mh-cookie__btn { padding: .6rem 1.1rem; font-size: .9rem; }
@media (max-width: 540px) {
	.mh-cookie__actions { width: 100%; }
	.mh-cookie__btn { flex: 1; justify-content: center; }
}

/* -------------------------------------------------------------------------
   24) BARRIEREFREIHEITS-WIDGET
   ---------------------------------------------------------------------- */
.mh-a11y { position: fixed; left: 1rem; bottom: 1rem; z-index: 210; }
.mh-a11y__toggle {
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	background: var(--grad); color: #0B0B12; box-shadow: var(--shadow-soft);
	transition: transform .3s var(--ease);
}
.mh-a11y__toggle:hover { transform: translateY(-2px); }
.mh-a11y__panel {
	position: absolute; left: 0; bottom: 64px; width: 250px;
	background: var(--ink-2); color: var(--fg);
	border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--shadow); padding: 1.1rem; display: grid; gap: .55rem;
}
.mh-a11y__panel[hidden] { display: none; } /* eingeklappt, bis der Button geklickt wird */
.mh-a11y__title { font-size: 1rem; margin: 0 0 .3rem; }
.mh-a11y__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.mh-a11y__btns { display: flex; gap: .4rem; }
.mh-a11y__btns button {
	width: 40px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
	background: rgba(238,234,255,.04); color: var(--fg); font-family: var(--f-label); font-weight: 600;
	transition: border-color .25s var(--ease);
}
.mh-a11y__opt, .mh-a11y__reset {
	text-align: left; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line);
	background: rgba(238,234,255,.04); color: var(--fg); font-size: .9rem; font-family: var(--f-body);
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.mh-a11y__opt[aria-pressed="true"] { background: var(--grad); color: #0B0B12; border-color: transparent; font-weight: 600; }
.mh-a11y__reset { text-align: center; color: var(--muted); }
.mh-a11y__btns button:hover, .mh-a11y__opt:hover, .mh-a11y__reset:hover {
	border-color: color-mix(in srgb, var(--g2) 45%, transparent);
}

/* Footer-Button, der wie ein Link aussieht */
.mh-footer__linkbtn { font: inherit; font-size: .9rem; color: var(--muted); padding: 0; cursor: pointer; }
.mh-footer__linkbtn:hover { color: var(--fg); text-decoration: underline; }

/* -------------------------------------------------------------------------
   25) A11Y-ZUSTÄNDE (werden vom Widget per Klasse auf <html> gesetzt)
   ---------------------------------------------------------------------- */

/* Links deutlich hervorheben */
html.mh-a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }

/* Bewegung reduzieren */
html.mh-a11y-reduce-motion *, html.mh-a11y-reduce-motion *::before, html.mh-a11y-reduce-motion *::after {
	animation-duration: .001ms !important; animation-iteration-count: 1 !important;
	transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.mh-a11y-reduce-motion .mh-reveal { opacity: 1 !important; transform: none !important; }
html.mh-a11y-reduce-motion .mh-aurora__blob { animation: none !important; }

/* Hoher Kontrast (Schwarz/Weiß, gelbe Links) */
html.mh-a11y-contrast body { background: #000 !important; color: #fff !important; }
html.mh-a11y-contrast .mh-hero, html.mh-a11y-contrast .mh-services, html.mh-a11y-contrast .mh-why,
html.mh-a11y-contrast .mh-process, html.mh-a11y-contrast .mh-work, html.mh-a11y-contrast .mh-about,
html.mh-a11y-contrast .mh-cta, html.mh-a11y-contrast .mh-contact, html.mh-a11y-contrast .mh-footer,
html.mh-a11y-contrast .mh-header.is-scrolled, html.mh-a11y-contrast .mh-mobile,
html.mh-a11y-contrast .mh-maint { background: #000 !important; color: #fff !important; }
html.mh-a11y-contrast .mh-aurora { display: none !important; }
html.mh-a11y-contrast .mh-scard, html.mh-a11y-contrast .mh-promise, html.mh-a11y-contrast .mh-step,
html.mh-a11y-contrast .mh-project, html.mh-a11y-contrast .mh-contact__formwrap,
html.mh-a11y-contrast .mh-cookie, html.mh-a11y-contrast .mh-a11y__panel {
	background: #000 !important; border-color: #fff !important;
}
html.mh-a11y-contrast p, html.mh-a11y-contrast li, html.mh-a11y-contrast span,
html.mh-a11y-contrast .mh-section__title, html.mh-a11y-contrast .mh-scard__title,
html.mh-a11y-contrast .mh-scard__text, html.mh-a11y-contrast .mh-section__lead,
html.mh-a11y-contrast .mh-about__text, html.mh-a11y-contrast .mh-hero__sub,
html.mh-a11y-contrast .mh-field__label, html.mh-a11y-contrast .mh-step__title { color: #fff !important; }
html.mh-a11y-contrast .mh-grad-text, html.mh-a11y-contrast .mh-accent-serif,
html.mh-a11y-contrast .mh-eyebrow, html.mh-a11y-contrast .mh-rotator__word,
html.mh-a11y-contrast .mh-step__num, html.mh-a11y-contrast .mh-hero__title,
html.mh-a11y-contrast .mh-maint__title .mh-accent {
	-webkit-text-fill-color: #fff !important; background: none !important; color: #fff !important;
}
html.mh-a11y-contrast a { color: #ff0 !important; }
html.mh-a11y-contrast .mh-btn--solid { background: #ff0 !important; color: #000 !important; box-shadow: none !important; }
html.mh-a11y-contrast .mh-btn--ghost { border-color: #fff !important; color: #fff !important; }
html.mh-a11y-contrast .mh-field__input { background: #000 !important; color: #fff !important; border-color: #fff !important; }

/* -------------------------------------------------------------------------
   26) „NACH OBEN“ – SCROLL-FORTSCHRITTS-RING (Aurora)
   ---------------------------------------------------------------------- */
.mh-totop {
	position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 205;
	width: 54px; height: 54px; display: grid; place-items: center;
	border-radius: 50%; background: rgba(19,19,31,.82);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid var(--line); color: var(--fg); cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, box-shadow .3s var(--ease);
}
.mh-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mh-totop:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(168,85,247,.55); }
.mh-totop:focus-visible { outline: 2px solid var(--g3); outline-offset: 3px; }

.mh-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mh-totop__track { fill: none; stroke: rgba(238,234,255,.14); stroke-width: 2.5; }
.mh-totop__prog  { fill: none; stroke: url(#mh-totop-grad); stroke-width: 2.5; stroke-linecap: round;
	transition: stroke-dashoffset .12s linear; }

.mh-totop__arrow { position: relative; width: 22px; height: 22px; color: var(--fg);
	transition: transform .3s var(--ease); }
.mh-totop:hover .mh-totop__arrow { transform: translateY(-2px); }

@media (max-width: 600px) {
	.mh-totop { width: 48px; height: 48px; right: 1rem; bottom: 1rem; }
	.mh-totop__arrow { width: 20px; height: 20px; }
}

/* Reduzierte Bewegung: kein Aufsteigen, nur Ein-/Ausblenden */
html.mh-a11y-reduce-motion .mh-totop { transition: opacity .2s linear, visibility .2s; transform: none !important; }
html.mh-a11y-reduce-motion .mh-totop.is-visible { transform: none !important; }

/* Hoher Kontrast */
html.mh-a11y-contrast .mh-totop { background: #000 !important; border-color: #fff !important; }
html.mh-a11y-contrast .mh-totop__arrow { color: #fff !important; }

/* -------------------------------------------------------------------------
   27) PARTNER-HINWEIS (z. B. Der Hacker)
   ---------------------------------------------------------------------- */
.mh-partner__card {
	position: relative; display: flex; align-items: center; gap: 1.8rem;
	background: var(--ink-2); color: var(--fg);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 2rem 2.4rem; overflow: hidden;
}
/* Aurora-Kante links */
.mh-partner__card::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--grad); }
/* dezenter Aurora-Schimmer oben rechts */
.mh-partner__card::before { content: ""; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(168,85,247,.22), transparent 70%); pointer-events: none; }

.mh-partner__icon { position: relative; flex: none; width: 58px; height: 58px; border-radius: 16px;
	display: grid; place-items: center; background: var(--grad); color: #0B0B12; }
.mh-partner__icon svg { width: 30px; height: 30px; }

.mh-partner__body { position: relative; flex: 1; min-width: 0; }
.mh-partner__title { font-size: clamp(1.6rem, 1rem + 1.3vw, 1.8rem); margin: .3rem 0 .5rem; color: var(--fg); }
.mh-partner__text { color: var(--muted); margin: 0; max-width: 62ch; }
.mh-partner__btn { position: relative; flex: none; }

@media (max-width: 760px) {
	.mh-partner__card { flex-direction: column; align-items: flex-start; gap: 1.3rem; padding: 1.7rem; }
	.mh-partner__btn { width: 100%; justify-content: center; }
}

/* Hoher Kontrast */
html.mh-a11y-contrast .mh-partner__card { background: #000 !important; border-color: #fff !important; }
html.mh-a11y-contrast .mh-partner__title, html.mh-a11y-contrast .mh-partner__text { color: #fff !important; }

/* --- Dezente „Übergabe“-Animation (Verweis zu Der Hacker) ---------------- */
.mh-partner__card {
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.mh-partner__card:hover,
.mh-partner__card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(168,85,247,.5);
	box-shadow: 0 22px 55px -24px rgba(168,85,247,.55), 0 0 0 1px rgba(168,85,247,.14);
}
/* sanft driftender Aurora-Schimmer (ambient) */
.mh-partner__card::before { animation: mh-partner-drift 16s ease-in-out infinite alternate; }
@keyframes mh-partner-drift {
	from { transform: translate(0, 0) scale(1); opacity: .9; }
	to   { transform: translate(-26px, 18px) scale(1.14); opacity: .55; }
}

/* Play-Icon: feine „Broadcast“-Ringe – nur bei Hover/Fokus (Motion-Anspielung) */
.mh-partner__icon { overflow: visible; }
.mh-partner__icon svg { position: relative; z-index: 1; }
.mh-partner__icon::before,
.mh-partner__icon::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	border: 2px solid rgba(168,85,247,.55); opacity: 0; pointer-events: none;
}
.mh-partner__card:hover .mh-partner__icon::before,
.mh-partner__card:focus-within .mh-partner__icon::before { animation: mh-partner-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.mh-partner__card:hover .mh-partner__icon::after,
.mh-partner__card:focus-within .mh-partner__icon::after { animation: mh-partner-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite 1.2s; }
@keyframes mh-partner-ping {
	0%   { transform: scale(1);   opacity: .65; }
	70%  { opacity: 0; }
	100% { transform: scale(1.85); opacity: 0; }
}

/* Button-Pfeil: Übergabe-Geste nach außen */
.mh-partner__btn .mh-btn__arrow { transition: transform .3s var(--ease); }
.mh-partner__card:hover .mh-partner__btn .mh-btn__arrow,
.mh-partner__card:focus-within .mh-partner__btn .mh-btn__arrow { transform: translate(3px, -3px); }

/* Impulswelle rund um das Partner-Kasterl (dezent, immer an) */
.mh-partner__pulse {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	animation: mh-partner-wave 4.2s ease-in-out infinite;
}
@keyframes mh-partner-wave {
	0%       { box-shadow: inset 0 0 0 1px rgba(168,85,247,.05), inset 0 0 18px rgba(168,85,247,.03); }
	12%      { box-shadow: inset 0 0 0 1.5px rgba(168,85,247,.40), inset 0 0 46px rgba(168,85,247,.18); }
	60%, 100%{ box-shadow: inset 0 0 0 1px rgba(168,85,247,.05), inset 0 0 18px rgba(168,85,247,.03); }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	.mh-partner__card, .mh-partner__card::before, .mh-partner__pulse,
	.mh-partner__icon::before, .mh-partner__icon::after { animation: none !important; }
	.mh-partner__card:hover, .mh-partner__card:focus-within { transform: none; }
}
html.mh-a11y-reduce-motion .mh-partner__card::before,
html.mh-a11y-reduce-motion .mh-partner__pulse,
html.mh-a11y-reduce-motion .mh-partner__icon::before,
html.mh-a11y-reduce-motion .mh-partner__icon::after { animation: none !important; }

/* -------------------------------------------------------------------------
   28) SOCIAL-ICONS (Footer)
   ---------------------------------------------------------------------- */
.mh-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: .6rem; }
.mh-social__link {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--line); color: var(--fg);
	transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.mh-social__link:hover {
	transform: translateY(-3px); color: #0B0B12; border-color: transparent;
	background: var(--grad);
}
html.mh-a11y-contrast .mh-social__link { border-color: #fff !important; color: #fff !important; }

/* Social in der (hellen) Kontakt-Sektion */
.mh-contact__social { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.mh-contact__social .mh-social { margin: 0; }
.mh-social--dark .mh-social__link { border-color: var(--line-dark); color: var(--fg-dark); }
.mh-social--dark .mh-social__link:hover { color: #0B0B12; border-color: transparent; background: var(--grad); }
html.mh-a11y-contrast .mh-social--dark .mh-social__link { border-color: #000 !important; color: #000 !important; }

/* -------------------------------------------------------------------------
   29) SCROLLBAR – an das dunkle Design anpassen (statt weißer Systemleiste)
   ---------------------------------------------------------------------- */
html { scrollbar-width: thin; scrollbar-color: #3a3654 var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
	background: #34314c; border-radius: 999px; border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: #4a4570; }
::-webkit-scrollbar-corner { background: var(--ink); }

/* Hoher Kontrast */
html.mh-a11y-contrast { scrollbar-color: #fff #000; }
html.mh-a11y-contrast ::-webkit-scrollbar-track,
html.mh-a11y-contrast ::-webkit-scrollbar-corner { background: #000; }
html.mh-a11y-contrast ::-webkit-scrollbar-thumb { background: #fff; border-color: #000; }

/* -------------------------------------------------------------------------
   30) ARBEITEN – „Mehr anzeigen“ (Toggle)
   ---------------------------------------------------------------------- */
.mh-project--extra { display: none; }
.mh-work__grid.is-expanded .mh-project--extra {
	display: block;
	animation: mh-project-in .55s var(--ease) both;
}
@keyframes mh-project-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.mh-work__more { display: flex; justify-content: center; margin-top: 2.4rem; }
.mh-work__more-btn { gap: .55rem; position: relative; }
.mh-work__more-btn:hover {
	border-color: transparent;
	box-shadow: 0 0 0 1px rgba(168,85,247,.45), 0 16px 40px -18px rgba(168,85,247,.55);
}
.mh-work__more-chev { display: inline-flex; animation: mh-more-bounce 1.9s ease-in-out infinite; }
.mh-work__more-chev svg { transition: transform .35s var(--ease); }
.mh-work__more-btn:hover .mh-work__more-chev { animation: none; }
.mh-work__more-btn[aria-expanded="true"] .mh-work__more-chev { animation: none; }
.mh-work__more-btn[aria-expanded="true"] .mh-work__more-chev svg { transform: rotate(180deg); }
@keyframes mh-more-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
	.mh-work__grid.is-expanded .mh-project--extra { animation: none; opacity: 1; }
	.mh-work__more-chev { animation: none !important; }
}
html.mh-a11y-reduce-motion .mh-work__more-chev { animation: none !important; }

/* -------------------------------------------------------------------------
   31) PARTNER-BUTTON – Logo/Schimmer erscheint beim Hover dahinter
   ---------------------------------------------------------------------- */
.mh-partner__cta { position: relative; flex: none; display: inline-flex; }
.mh-partner__btn { position: relative; z-index: 1; }
.mh-partner__ghostlogo {
	position: absolute; left: 50%; top: 50%; z-index: 0;
	width: 190%; height: 250%;
	transform: translate(-50%, -50%) scale(.72);
	background: var(--mh-partner-logo, radial-gradient(ellipse at center, rgba(168,85,247,.55), rgba(79,123,255,.32) 45%, transparent 72%)) center / contain no-repeat;
	filter: blur(1px);
	mix-blend-mode: screen;
	opacity: 0; pointer-events: none;
	transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.mh-partner__cta:hover .mh-partner__ghostlogo,
.mh-partner__cta:focus-within .mh-partner__ghostlogo {
	opacity: .5; transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 760px) { .mh-partner__cta { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
	.mh-partner__ghostlogo { transition: opacity .3s ease; transform: translate(-50%, -50%) scale(1); }
}
html.mh-a11y-reduce-motion .mh-partner__ghostlogo { transition: opacity .3s ease; }

/* -------------------------------------------------------------------------
   32) PARTNER-KARTE – „Der Hacker“-Teaser blendet beim Hover ein
   ---------------------------------------------------------------------- */
.mh-partner__teaser {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
	opacity: 0; transform: scale(1.06);
	transition: opacity .6s var(--ease), transform .9s var(--ease);
}
/* Variante: atmosphärisches Bild (Cover, rechts) */
.mh-partner__teaser--image {
	background:
		linear-gradient(90deg, var(--ink-2), rgba(28,27,44,.35) 55%, transparent 92%),
		var(--mh-partner-teaser, none) right center / cover no-repeat;
}
/* Variante: Logo (dezent, rechts eingepasst) */
.mh-partner__teaser--logo {
	background:
		linear-gradient(90deg, var(--ink-2) 8%, transparent 42%),
		var(--mh-partner-teaser, none) right center / contain no-repeat;
}
.mh-partner__card:hover .mh-partner__teaser--image,
.mh-partner__card:focus-within .mh-partner__teaser--image { opacity: .42; transform: scale(1); }
.mh-partner__card:hover .mh-partner__teaser--logo,
.mh-partner__card:focus-within .mh-partner__teaser--logo { opacity: .3; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
	.mh-partner__teaser { transition: opacity .4s ease; transform: none; }
}
html.mh-a11y-reduce-motion .mh-partner__teaser { transition: opacity .4s ease; transform: none; }
html.mh-a11y-contrast .mh-partner__teaser { display: none !important; }

/* -------------------------------------------------------------------------
   33) MOBILE-FEINSCHLIFF – größere Texte (ab 980px = Burger-Menü) + Buttons
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	/* Global spürbar größer auf dem Handy – NUR die Referenz-Kacheln bleiben. */
	body { font-size: 1.15rem; line-height: 1.65; }

	.mh-hero__sub { font-size: 1.3rem; line-height: 1.6; }
	.mh-chip { font-size: 1.02rem; }

	.mh-section__lead { font-size: 1.28rem; }

	.mh-scard__num { font-size: 1.2rem; }
	.mh-scard__title { font-size: 1.7rem; }
	.mh-scard__text { font-size: 1.15rem; }
	.mh-scard__list { font-size: 1.05rem; }

	.mh-promise__title { font-size: 1.5rem; }
	.mh-promise__text { font-size: 1.15rem; }

	.mh-step__title { font-size: 1.4rem; }
	.mh-step__text { font-size: 1.15rem; }

	.mh-about__text { font-size: 1.22rem; }

	.mh-cta__text { font-size: 1.25rem; }

	.mh-partner__text { font-size: 1.18rem; }

	.mh-contact__lead, .mh-contact__note { font-size: 1.28rem; }
	.mh-contact__details a, .mh-contact__details span { font-size: 1.22rem; }

	.mh-field__label { font-size: 1.05rem; }
	.mh-field__input { font-size: 1.1rem; }

	.mh-btn { font-size: 1.15rem; padding: 1.05rem 1.7rem; }
	.mh-mobile__list a { font-size: 1.9rem; }

	.mh-footer__claim { font-size: 1.2rem; }
	.mh-footer__list a, .mh-footer__list li { font-size: 1.1rem; }

	/* Wartungsseite (eigene Styles) ebenfalls größer */
	.mh-maint__text { font-size: 1.3rem; }
	.mh-maint__foot { font-size: 1rem; }
	.mh-maint__actions .mh-btn { width: 100%; justify-content: center; font-size: 1.15rem; }

	/* Referenzen (.mh-project* / .mh-work*) absichtlich unverändert. */

	/* „Nach oben“- und Barrierefreiheits-Button überdecken den Footer nicht mehr */
	.mh-footer { padding-bottom: 5.5rem; }
	.mh-totop { width: 46px; height: 46px; right: .9rem; bottom: .9rem; }
	.mh-a11y { left: .9rem; bottom: .9rem; }
	.mh-a11y__toggle { width: 46px; height: 46px; }
}

/* -------------------------------------------------------------------------
   34) KUNDENBEREICH – Login & Datei-Liste
   ---------------------------------------------------------------------- */
.mh-clientlogin {
	max-width: 560px; margin: 2rem auto; padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--fg);
}
.mh-clientarea { max-width: 1180px; margin: 0 auto; color: var(--fg); }
.mh-clientlogin__title, .mh-clientarea__title { margin: 0 0 .5rem; font-family: "Sora", sans-serif; }
.mh-clientlogin__lead { color: var(--muted); margin: 0 0 1.4rem; }
.mh-clientlogin__msg {
	background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.35);
	color: var(--fg); padding: .8rem 1rem; border-radius: var(--r); margin: 0 0 1.2rem;
}
.mh-clientlogin__form .mh-field { margin-bottom: 1.1rem; }
.mh-clientlogin .mh-field__input {
	background: var(--ink); color: var(--fg); border-color: var(--line);
}
.mh-clientlogin__again { margin-top: 1rem; }

.mh-clientarea__note {
	background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1rem 1.2rem; color: var(--fg); margin: 0 0 1.6rem;
}
.mh-clientarea__sub { margin: 1.6rem 0 .8rem; }
.mh-clientfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.mh-clientfiles__item {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.2rem; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
}
.mh-clientfiles__desc { color: var(--muted); margin: .3rem 0; font-size: .95rem; }
.mh-clientfiles__name { color: var(--muted); font-size: .82rem; font-family: "Space Grotesk", sans-serif; }
.mh-clientfiles__btn { flex: none; }
.mh-clientarea__logout { margin-top: 1.8rem; }
@media (max-width: 600px) {
	.mh-clientfiles__item { flex-direction: column; align-items: stretch; }
	.mh-clientfiles__btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   35) DEZENTER KUNDENBEREICH-LINK (Footer)
   ---------------------------------------------------------------------- */
.mh-footer__client { display: inline-flex; align-items: center; gap: .38rem; }
.mh-footer__client svg { opacity: .65; transition: opacity .25s var(--ease); }
.mh-footer__client:hover svg { opacity: 1; }
.mh-footer__client.is-in { color: var(--g4); }
.mh-footer__client.is-in::after {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--g4); box-shadow: 0 0 8px var(--g4); margin-left: .1rem;
}

/* -------------------------------------------------------------------------
   36) KUNDENBEREICH-SEITE – im Homepage-Look (Aurora)
   ---------------------------------------------------------------------- */
.mh-clientpage__section {
	position: relative; overflow: hidden; background: var(--ink);
	padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 9vh, 7rem);
	min-height: 78vh; display: flex; align-items: center;
}
.mh-clientpage__inner { position: relative; z-index: 1; width: 100%; }
.mh-clientpage__head { text-align: center; margin-bottom: 1.4rem; }
.mh-clientpage__head .mh-eyebrow { display: inline-flex; }
.mh-clientpage__title {
	font-family: "Sora", sans-serif; font-weight: 800;
	font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
	line-height: 1.05; margin: .5rem 0 0; color: var(--fg);
}
.mh-clientpage__body .mh-clientlogin,
.mh-clientpage__body .mh-clientarea { margin-top: 0; }

/* -------------------------------------------------------------------------
   37) KUNDENBEREICH – Datei-Kacheln im Referenzen-Stil
   ---------------------------------------------------------------------- */
.mh-clientgrid { margin-top: 1.2rem; }
.mh-clientcard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mh-clientcard__ph span {
	font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: .1em;
	font-size: 1.5rem; color: #fff; opacity: .92;
}
.mh-clientcard__ph[data-grad="1"] { background: linear-gradient(135deg, #FF5E7E, #A855F7); }
.mh-clientcard__ph[data-grad="2"] { background: linear-gradient(135deg, #A855F7, #4F7BFF); }
.mh-clientcard__ph[data-grad="3"] { background: linear-gradient(135deg, #4F7BFF, #35E0C8); }
.mh-clientcard__ph[data-grad="4"], .mh-clientcard__ph[data-grad="0"] { background: linear-gradient(135deg, #35E0C8, #FF5E7E); }
.mh-clientarea__logout { margin-top: 2rem; text-align: center; }

/* -------------------------------------------------------------------------
   38) KUNDEN-REGISTRIERUNG (Formular)
   ---------------------------------------------------------------------- */
.mh-reg {
	max-width: 640px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--fg);
}
.mh-reg .mh-field { margin-bottom: 1.1rem; }
.mh-reg .mh-field__input { background: var(--ink); color: var(--fg); border-color: var(--line); }
.mh-reg .mh-field__label,
.mh-clientlogin .mh-field__label,
.mh-annos__add .mh-field__label { color: var(--fg); }
.mh-reg .mh-field__input::placeholder,
.mh-clientlogin .mh-field__input::placeholder,
.mh-annos__add .mh-field__input::placeholder { color: var(--muted); opacity: 1; }
.mh-reg textarea.mh-field__input { min-height: 130px; resize: vertical; }
.mh-field--check label {
	display: block; position: relative; padding-left: 1.9rem;
	font-size: .96rem; color: var(--muted); line-height: 1.55;
}
.mh-field--check input { position: absolute; left: 0; top: .18rem; }
.mh-field--check a { color: var(--fg); text-decoration: underline; }
.mh-reg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mh-clientlogin__reg { margin: 1.4rem 0 0; text-align: center; color: var(--muted); font-size: .95rem; }
.mh-clientlogin__reg a { color: var(--fg); }
.mh-reg__done { text-align: center; }

/* -------------------------------------------------------------------------
   39) STARTSEITEN-REGISTRIERUNG (Section)
   ---------------------------------------------------------------------- */
.mh-homereg { background: var(--ink); }
.mh-homereg__head { text-align: center; margin-bottom: 2.2rem; }
.mh-homereg__head .mh-eyebrow { display: inline-flex; }
.mh-homereg__lead { color: var(--muted); max-width: 52ch; margin: 1rem auto 0; }

/* -------------------------------------------------------------------------
   40) KUNDENBEREICH – Detail-Ansicht + Anmerkungen
   ---------------------------------------------------------------------- */
.mh-clientcard__ann {
	position: absolute; left: .8rem; top: .8rem; z-index: 2;
	background: rgba(11,11,18,.72); color: #fff; font: 600 .72rem/1 "Space Grotesk", sans-serif;
	padding: .35rem .55rem; border-radius: 999px; backdrop-filter: blur(6px);
	border: 1px solid rgba(238,234,255,.18);
}
.mh-clientcard__ann.has-open::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #FF5E7E; margin-right: .35rem; vertical-align: middle; }
.mh-clientdetail__back { display: inline-block; margin-bottom: 1.2rem; color: var(--muted); }
.mh-clientdetail__back:hover { color: var(--fg); }
.mh-clientdetail__head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 1.6rem; align-items: start; }
.mh-clientdetail__preview { position: relative; aspect-ratio: 16/10; max-height: 280px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.mh-clientdetail__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-clientdetail__desc { color: var(--muted); margin: .4rem 0 1.2rem; }
.mh-annos { margin-top: 2.2rem; }
.mh-annos__hint { color: var(--muted); font-size: .86rem; margin: 0 0 .8rem; }
.mh-annos__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.mh-anno { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); }
.mh-anno.is-done { border-color: rgba(53,224,200,.4); background: rgba(53,224,200,.06); }
.mh-anno__main { display: flex; gap: .7rem; align-items: flex-start; }
.mh-anno__check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #0B0B12; font-weight: 700; margin-top: .1rem; }
.mh-anno.is-done .mh-anno__check { background: var(--g4); border-color: var(--g4); }
.mh-anno__text { margin: 0; }
.mh-anno__date { color: var(--muted); font-size: .8rem; }
.mh-anno__reply { margin-top: .5rem; padding: .5rem .7rem; background: var(--ink-2); border-radius: 8px; font-size: .92rem; color: var(--fg); }
.mh-anno__del button { background: transparent; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.mh-anno__del button:hover { color: #FF5E7E; }
.mh-annos__add .mh-field__input { background: var(--ink); color: var(--fg); border-color: var(--line); }
@media (max-width: 720px) { .mh-clientdetail__head { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   41) HEADER-LOGIN-BUTTON + KONTAKT-HINWEIS
   ---------------------------------------------------------------------- */
.mh-header__login {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-left: 1rem; padding: .5rem .9rem; border-radius: 999px;
	border: 1px solid rgba(238,234,255,.22); color: var(--fg);
	font-family: var(--f-label, "Space Grotesk", sans-serif); font-weight: 600; font-size: .92rem;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.mh-header__login:hover { border-color: rgba(238,234,255,.5); background: rgba(238,234,255,.06); }
.mh-header__login svg { opacity: .8; }
.mh-mobile__login {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	margin-top: 1rem; color: var(--fg); font-weight: 600; font-size: 1.2rem;
}
/* Kontakt: Unverbindlich-Hinweis (dezent) */
.mh-contact__note {
	display: flex; align-items: flex-start; gap: .5rem;
	margin: 1rem 0 2rem; padding: 0; background: none; border: none;
	color: var(--muted-dark); line-height: 1.55;
}
.mh-contact__note-ic {
	flex: none; margin-top: .15rem; color: var(--g4, #35E0C8);
	font-weight: 700;
}
.mh-clientarea__adminhint { margin-top: 2rem; color: var(--muted); }
.mh-clientarea__adminhint a { color: var(--fg); text-decoration: underline; }

/* -------------------------------------------------------------------------
   42) ADMIN-VORSCHAU-LEISTE (im Kundenbereich, nur für Admin sichtbar)
   ---------------------------------------------------------------------- */
.mh-adminbar {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin: 0 0 1.4rem; padding: .6rem 1rem; border-radius: 999px;
	background: rgba(255,94,126,.12); border: 1px solid rgba(255,94,126,.4);
	color: var(--fg); font-size: .9rem;
}
.mh-adminbar span { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; color: #FF9DB0; }
.mh-adminbar a { color: var(--fg); text-decoration: underline; }

/* -------------------------------------------------------------------------
   43) LOGIN-HINWEIS-POPOVER + WERDE-KUNDE-PILLS
   ---------------------------------------------------------------------- */
.mh-loginwrap { position: relative; display: inline-flex; }
.mh-loginhint {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	background: rgba(20,18,30,.97); border: 1px solid var(--line); border-radius: 10px;
	padding: .5rem .7rem; white-space: nowrap; font-size: .8rem; color: var(--muted);
	box-shadow: 0 10px 26px rgba(0,0,0,.4); opacity: 0; transform: translateY(-4px); pointer-events: none;
	transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.mh-loginhint::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 10px; }
.mh-loginhint::after {
	content: ""; position: absolute; top: -5px; right: 22px; width: 9px; height: 9px;
	background: rgba(20,18,30,.97); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
	transform: rotate(45deg);
}
.mh-loginhint a { color: var(--fg); font-weight: 600; margin-left: .25rem; }
.mh-loginwrap:hover .mh-loginhint, .mh-loginwrap:focus-within .mh-loginhint {
	opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mh-homereg__bullets {
	list-style: none; margin: 1.4rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.mh-homereg__bullets li {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .9rem; border-radius: 999px;
	background: rgba(238,234,255,.05); border: 1px solid var(--line);
	color: var(--fg); font-size: .9rem; font-family: var(--f-label, "Space Grotesk", sans-serif);
}
.mh-homereg__bullets li::before { content: "✦"; color: var(--g2, #A855F7); }

/* -------------------------------------------------------------------------
   44) PROJEKT-STATUS-BADGES (Frontend)
   ---------------------------------------------------------------------- */
.mh-statusbadge {
	position: absolute; right: .8rem; top: .8rem; z-index: 2;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .32rem .62rem; border-radius: 999px;
	font: 600 .7rem/1 "Space Grotesk", sans-serif; backdrop-filter: blur(6px);
}
.mh-statuspill {
	display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .7rem;
	padding: .35rem .8rem; border-radius: 999px; font: 600 .82rem/1 "Space Grotesk", sans-serif;
}
.mh-statusbadge::before, .mh-statuspill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.mh-statusbadge.mh-status--warten, .mh-statuspill.mh-status--warten { background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.5); color: #fcd777; }
.mh-statusbadge.mh-status--warten::before, .mh-statuspill.mh-status--warten::before { background: #f59e0b; }
.mh-statusbadge.mh-status--laufend, .mh-statuspill.mh-status--laufend { background: rgba(79,123,255,.18); border: 1px solid rgba(79,123,255,.5); color: #bcd0ff; }
.mh-statusbadge.mh-status--laufend::before, .mh-statuspill.mh-status--laufend::before { background: #4F7BFF; }
.mh-statusbadge.mh-status--abgeschlossen, .mh-statuspill.mh-status--abgeschlossen { background: rgba(53,224,200,.16); border: 1px solid rgba(53,224,200,.5); color: #a7f3e4; }
.mh-statusbadge.mh-status--abgeschlossen::before, .mh-statuspill.mh-status--abgeschlossen::before { background: #35E0C8; }

/* -------------------------------------------------------------------------
   45) GEFÜHRTES ERSTGESPRÄCH (Onboarding-Funnel)
   ---------------------------------------------------------------------- */
.mh-onbpage__section { position: relative; overflow: hidden; background: var(--ink); padding: clamp(5rem,10vh,7rem) 0 2rem; min-height: 100dvh; display: flex; align-items: center; }
.mh-onbpage__inner { position: relative; z-index: 1; width: 100%; }
.mh-onb { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; max-height: calc(100dvh - 8rem); }
.mh-onb__err { background: rgba(255,94,126,.12); border: 1px solid rgba(255,94,126,.4); color: var(--fg); padding: .7rem 1rem; border-radius: 12px; margin: 0 0 1rem; }
.mh-onb__progress { height: 5px; background: rgba(238,234,255,.1); border-radius: 999px; overflow: hidden; margin-bottom: 1.6rem; flex: none; }
.mh-onb__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#FF5E7E,#A855F7,#4F7BFF,#35E0C8); transition: width .4s var(--ease); }
.mh-onb__form { flex: 1 1 auto; min-height: 0; display: flex; }
.mh-onb__step { display: none; }
.mh-onb__step.is-active { display: flex; flex-direction: column; width: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: .3rem; animation: mhOnbIn .35s var(--ease); }
@keyframes mhOnbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mh-onb__eyebrow { color: var(--g2,#A855F7); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; font-family: var(--f-label,"Space Grotesk",sans-serif); margin: 0 0 .6rem; }
.mh-onb__q { font-family: "Sora",sans-serif; font-weight: 800; font-size: clamp(1.6rem,1.1rem + 1.6vw,2.2rem); line-height: 1.12; margin: 0 0 .5rem; color: var(--fg); }
.mh-onb__lead, .mh-onb__hint { color: var(--muted); margin: 0 0 1.1rem; line-height: 1.5; }
.mh-onb__hint { font-size: .95rem; }
.mh-onb__input { width: 100%; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; color: var(--fg); padding: .7rem 1rem; font: inherit; }
.mh-onb__input::placeholder { color: var(--muted); }
textarea.mh-onb__input { resize: vertical; min-height: 110px; }
.mh-onb__field { margin-bottom: .7rem; }
.mh-onb__field label { display: block; margin-bottom: .3rem; font-weight: 600; color: var(--fg); font-size: .86rem; }
.mh-onb__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.mh-onb__grid2 .mh-onb__field { margin-bottom: .7rem; }
@media (max-width:640px){ .mh-onb__grid2 { grid-template-columns: 1fr; } }
.mh-onb__choices { display: grid; gap: .5rem; }
.mh-onb__choice { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.mh-onb__choice:hover { border-color: rgba(238,234,255,.4); }
.mh-onb__choice input { accent-color: #A855F7; width: 18px; height: 18px; flex: none; }
.mh-onb__choice span { display: flex; flex-direction: column; color: var(--fg); }
.mh-onb__choice small { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.mh-onb__choice:has(input:checked) { border-color: var(--g2,#A855F7); background: rgba(168,85,247,.1); }
.mh-onb__colors { display: grid; gap: 1.2rem; }
.mh-onb__palette { display: flex; flex-wrap: wrap; gap: .6rem; }
.mh-onb__swatch { width: 48px; height: 48px; border-radius: 12px; background: var(--sw); border: 2px solid rgba(238,234,255,.2); cursor: grab; position: relative; touch-action: none; transition: transform .15s var(--ease); }
.mh-onb__swatch:hover { transform: translateY(-2px); }
.mh-onb__swatch:active { cursor: grabbing; }
.mh-onb__swatch.is-placed::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.mh-onb__swatch--custom { display: flex; align-items: center; justify-content: center; background: var(--ink-2); cursor: pointer; touch-action: auto; }
.mh-onb__swatch--custom span { color: var(--muted); font-size: 1.6rem; }
.mh-onb__swatch--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mh-onb__zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.mh-onb__zone { border: 1.5px dashed var(--line); border-radius: 14px; padding: .7rem; background: var(--ink-2); min-height: 118px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.mh-onb__zone.is-over { border-style: solid; }
.mh-onb__zone--like.is-over { border-color: #35E0C8; background: rgba(53,224,200,.08); }
.mh-onb__zone--neutral.is-over { border-color: #A855F7; background: rgba(168,85,247,.08); }
.mh-onb__zone--dislike.is-over { border-color: #FF5E7E; background: rgba(255,94,126,.08); }
.mh-onb__zonehead { display: flex; align-items: center; gap: .4rem; font: 600 .82rem/1 "Space Grotesk", sans-serif; color: var(--muted); margin-bottom: .6rem; }
.mh-onb__zoneic { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: #06231d; }
.mh-onb__zone--like .mh-onb__zoneic { background: #35E0C8; }
.mh-onb__zone--neutral .mh-onb__zoneic { background: #A855F7; color: #fff; }
.mh-onb__zone--dislike .mh-onb__zoneic { background: #FF5E7E; color: #fff; }
.mh-onb__zonedrop { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 40px; }
.mh-onb__chip { position: relative; width: 34px; height: 34px; border-radius: 9px; background: var(--sw); border: 2px solid rgba(255,255,255,.25); cursor: grab; touch-action: none; }
.mh-onb__chipx { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--ink); color: var(--fg); font-size: .72rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mh-onb__ghost { position: fixed; z-index: 9999; width: 40px; height: 40px; border-radius: 10px; background: var(--sw); border: 2px solid #fff; transform: translate(-50%,-50%); pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: .95; }
@media (max-width:560px){ .mh-onb__zones { grid-template-columns: 1fr; } }
.mh-onb__droparea { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--ink-2); cursor: pointer; text-align: center; color: var(--fg); transition: border-color .2s var(--ease); margin-top: 1rem; }
.mh-onb__droparea:hover, .mh-onb__droparea.is-drag { border-color: var(--g3,#4F7BFF); }
.mh-onb__droparea input { display: none; }
.mh-onb__dropic { font-size: 1.4rem; }
.mh-onb__droparea small { color: var(--muted); font-size: .82rem; }
.mh-onb__files { display: grid; gap: .6rem; margin-top: .9rem; }
.mh-onb__file { display: flex; align-items: center; gap: .8rem; padding: .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.mh-onb__filethumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink-3); font: 600 .7rem "Space Grotesk"; color: var(--muted); }
.mh-onb__filethumb img { width: 100%; height: 100%; object-fit: cover; }
.mh-onb__filemeta { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mh-onb__filemeta input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--fg); padding: .2rem 0; font: inherit; font-size: .9rem; }
.mh-onb__filemeta small { color: var(--muted); font-size: .75rem; }
.mh-onb__filedel { background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; flex: none; }
.mh-onb__filedel:hover { color: #FF5E7E; }
.mh-onb__consent { display: block; position: relative; padding-left: 1.9rem; color: var(--muted); font-size: .9rem; line-height: 1.45; margin: .6rem 0 .4rem; }
.mh-onb__consent input { position: absolute; left: 0; top: .18rem; }
.mh-onb__consent a { color: var(--fg); text-decoration: underline; }
.mh-onb__legal { color: var(--muted); font-size: .8rem; margin: .3rem 0 0; }
.mh-onb__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1.2rem 0 .2rem; background: transparent; }
.mh-onb__step > .mh-onb__nav:first-of-type { justify-content: flex-start; }
.mh-onb__back { background: none; border: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.mh-onb__back:hover { color: var(--fg); }
.mh-onb__skip { background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: inherit; font-weight: 600; padding: .7rem 1.4rem; cursor: pointer; }
.mh-onb__skip:hover { border-color: rgba(238,234,255,.5); }
.mh-onb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.mh-onb--done .mh-onb__card { text-align: center; max-width: 560px; margin: 0 auto; }
.mh-onb__donemark { width: 64px; height: 64px; border-radius: 50%; background: var(--g4,#35E0C8); color: #06231d; font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; }
.mh-onb--done h2 { font-family: "Sora",sans-serif; color: var(--fg); }
.mh-onb--done p { color: var(--muted); margin: .6rem 0 1.6rem; }
body.mh-onb-page .mh-footer { display: none; }
@media (max-width:720px){
	body.mh-onb-page .mh-header, body.mh-onb-page .mh-footer, body.mh-onb-page .mh-mobile { display: none !important; }
	body.mh-onb-page { background: var(--ink); }
	.mh-onbpage__section { min-height: 100dvh; padding: 1.1rem 0; align-items: stretch; }
	.mh-onbpage__inner { display: flex; }
	.mh-onb { max-height: calc(100dvh - 2.2rem); }
	.mh-onb__q { font-size: clamp(1.5rem,1.2rem + 3vw,2rem); }
}
.mh-contact__guided {
	display: inline-flex; align-items: center; gap: .8rem;
	margin: .2rem 0 1.8rem; padding: .8rem 1.1rem .8rem .9rem;
	border: 1px solid rgba(168,85,247,.28); border-radius: 14px;
	background: linear-gradient(120deg, rgba(168,85,247,.12), rgba(79,123,255,.09));
	color: var(--fg-dark); text-decoration: none; max-width: 30rem;
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mh-contact__guided:hover { border-color: rgba(168,85,247,.6); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79,123,255,.15); }
.mh-contact__guided-ic {
	flex: none; width: 38px; height: 38px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #A855F7, #4F7BFF); color: #fff;
}
.mh-contact__guided-txt { display: flex; flex-direction: column; gap: .15rem; line-height: 1.4; font-size: .86rem; color: var(--muted-dark); }
.mh-contact__guided-txt strong { font-size: .98rem; color: var(--fg-dark); }

/* -------------------------------------------------------------------------
   46) CTA-HINWEIS (was folgt beim „Jetzt anfragen“)
   ---------------------------------------------------------------------- */
.mh-ctawrap { position: relative; display: inline-flex; }
.mh-ctahint {
	position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); z-index: 60;
	width: 258px; background: rgba(20,18,30,.97); border: 1px solid var(--line); border-radius: 12px;
	padding: .7rem .9rem; font-size: .82rem; color: var(--muted); line-height: 1.4;
	box-shadow: 0 12px 30px rgba(0,0,0,.42); opacity: 0; pointer-events: none;
	transition: opacity .2s var(--ease), transform .2s var(--ease);
	display: flex; flex-direction: column; gap: .15rem; text-align: left;
}
.mh-ctahint strong { color: var(--fg); font-size: .9rem; }
.mh-ctahint::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.mh-ctahint::after { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -4px; width: 9px; height: 9px; background: rgba(20,18,30,.97); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.mh-ctawrap:hover .mh-ctahint, .mh-ctawrap:focus-within .mh-ctahint { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* -------------------------------------------------------------------------
   47) FARB-PICKER (eigene Farbe) + 2 ZONEN + ADMIN-UMSCHALTER
   ---------------------------------------------------------------------- */
.mh-onb__zones--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width:560px){ .mh-onb__zones--2 { grid-template-columns: 1fr; } }
.mh-onb__swatch--add { display: flex; align-items: center; justify-content: center; background: var(--ink-2); border-style: dashed; cursor: pointer; }
.mh-onb__swatch--add span { color: var(--muted); font-size: 1.6rem; line-height: 1; }
.mh-onb__swatch--add:hover { border-color: rgba(238,234,255,.5); }
.mh-onb__colors { position: relative; }
.mh-onb__picker { position: absolute; z-index: 40; display: grid; gap: .5rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: #16141f; max-width: 320px; width: 300px; box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.mh-onb__picker[hidden] { display: none; }
.mh-onb__pickertop { display: flex; align-items: center; gap: .5rem; }
.mh-onb__pickerprev { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); flex: none; }
.mh-onb__pickertop code { font-family: ui-monospace, monospace; color: var(--fg); background: rgba(238,234,255,.06); padding: .28rem .5rem; border-radius: 7px; font-size: .8rem; letter-spacing: .03em; }
.mh-onb__picker label { display: grid; gap: .18rem; font-size: .72rem; color: var(--muted); }
.mh-onb__range { -webkit-appearance: none; appearance: none; height: 9px; border-radius: 999px; outline: none; background: var(--track, #555); }
.mh-onb__range--hue { background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.mh-onb__range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #0B0B12; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.mh-onb__range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #0B0B12; cursor: pointer; }
.mh-onb__addbtn { margin-left: auto; background: linear-gradient(135deg,#A855F7,#4F7BFF); color: #fff; border: none; border-radius: 999px; padding: .4rem 1rem; font: 600 .82rem "Space Grotesk", sans-serif; cursor: pointer; }
.mh-onb__addbtn:hover { filter: brightness(1.08); }
/* Admin-Umschalter */
.mh-switcher { max-width: 640px; }
.mh-switcher__lead { color: var(--muted); margin: .4rem 0 1.2rem; line-height: 1.5; }
.mh-switcher__list { display: grid; gap: .7rem; }
.mh-switcher__item { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--fg); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.mh-switcher__item:hover { border-color: rgba(168,85,247,.5); transform: translateY(-2px); }
.mh-switcher__item.is-active { border-color: var(--g2,#A855F7); }
.mh-switcher__name { font-weight: 600; }
.mh-switcher__co { font-size: .85rem; color: var(--muted); }
.mh-switcher__empty { color: var(--muted); }
.mh-switcher__portal { margin-top: 1.4rem; }
.mh-switcher__portal a { color: var(--muted); text-decoration: underline; }
.mh-switcher__portal a:hover { color: var(--fg); }

/* -------------------------------------------------------------------------
   48) STATUS-BOARD (Anfrage / Laufend / Abgeschlossen, Drag & Drop)
   ---------------------------------------------------------------------- */
.mh-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; align-items: start; }
.mh-board__col { background: rgba(238,234,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: .9rem; transition: border-color .2s var(--ease), background .2s var(--ease); }
.mh-board__col.is-over { border-color: var(--g2,#A855F7); background: rgba(168,85,247,.07); }
.mh-board__head { display: flex; align-items: center; gap: .5rem; font: 600 .85rem/1 "Space Grotesk", sans-serif; color: var(--fg); margin-bottom: .8rem; }
.mh-board__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mh-board__col.mh-status--anfrage .mh-board__dot { background: #f59e0b; }
.mh-board__col.mh-status--laufend .mh-board__dot { background: #4F7BFF; }
.mh-board__col.mh-status--abgeschlossen .mh-board__dot { background: #35E0C8; }
.mh-board__count { margin-left: auto; background: rgba(238,234,255,.08); color: var(--muted); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; }
.mh-board__drop { display: grid; gap: .8rem; min-height: 70px; }
.mh-board__empty { color: var(--muted); font-size: .8rem; text-align: center; padding: 1.3rem .5rem; border: 1.5px dashed var(--line); border-radius: 12px; margin: 0; }
.mh-board--drag .mh-clientcard[data-drag] { cursor: grab; touch-action: none; }
.mh-clientcard.is-dragging { opacity: .35; }
.mh-project--ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%,-50%) rotate(-2deg); box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: .95; margin: 0; }
.mh-board__hint { color: var(--muted); font-size: .82rem; margin-top: 1rem; }
@media (max-width: 820px){ .mh-board { grid-template-columns: 1fr; } }
/* Anfrage-Farbe für Badge/Pill (wie vormals „warten“) */
.mh-statusbadge.mh-status--anfrage, .mh-statuspill.mh-status--anfrage { background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.5); color: #fcd777; }
.mh-statusbadge.mh-status--anfrage::before, .mh-statuspill.mh-status--anfrage::before { background: #f59e0b; }

/* -------------------------------------------------------------------------
   49) ADMIN-ANSICHT im Kundenbereich + Platz + Drag-Absicherung
   ---------------------------------------------------------------------- */
/* Nativen Drag/Selektion auf Board-Karten unterbinden */
.mh-board--drag .mh-clientcard, .mh-board--drag .mh-clientcard * { -webkit-user-drag: none; user-select: none; }
.mh-board--drag .mh-clientcard img { pointer-events: none; }
/* Mehr Luft im Kundenbereich */
.mh-clientpage__section { padding-top: clamp(6.5rem, 14vh, 10rem); }
.mh-clientarea__title { margin-bottom: 1.2rem; }
.mh-clientarea__sub { margin-top: 1.5rem; }
.mh-board { gap: 1.3rem; margin-top: 1.4rem; }
.mh-board__col { padding: 1.1rem; }
.mh-board__drop { gap: 1rem; }
/* Admin-Info-Panel */
.mh-clientadmin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg, rgba(255,94,126,.05), rgba(79,123,255,.04)); }
.mh-clientadmin__info { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.mh-clientadmin__info .k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .1rem; }
.mh-clientadmin__info .v { font-weight: 600; color: var(--fg); }
.mh-clientadmin__info .v a { color: var(--fg); }
.mh-clientadmin__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.mh-btn--sm { padding: .5rem 1rem; font-size: .85rem; }
/* Bearbeiten-Link auf Admin-Karten */
.mh-clientcard__edit { position: absolute; right: .7rem; bottom: .7rem; z-index: 5; padding: .3rem .7rem; border-radius: 999px; background: rgba(11,11,18,.8); color: #fff; font: 600 .72rem/1 "Space Grotesk", sans-serif; text-decoration: none; border: 1px solid rgba(238,234,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s var(--ease); }
.mh-clientcard:hover .mh-clientcard__edit { opacity: 1; }
.mh-clientcard__edit:hover { background: rgba(11,11,18,.95); border-color: rgba(238,234,255,.5); }

/* -------------------------------------------------------------------------
   50) KUNDEN-UPLOADS + KONVERSATION (Projekt-Detail)
   ---------------------------------------------------------------------- */
.mh-clientnotice { background: rgba(53,224,200,.12); border: 1px solid rgba(53,224,200,.4); color: var(--fg); padding: .7rem 1rem; border-radius: 12px; margin: 0 0 1.4rem; }
/* Uploads */
.mh-uploads { margin-top: 1.6rem; }
.mh-uploads__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.mh-uploads__item { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.mh-uploads__ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 .68rem/1 "Space Grotesk", sans-serif; color: #fff; background: linear-gradient(135deg,#A855F7,#4F7BFF); }
.mh-uploads__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mh-uploads__meta a { color: var(--fg); font-weight: 600; text-decoration: none; word-break: break-word; }
.mh-uploads__meta a:hover { text-decoration: underline; }
.mh-uploads__meta small { color: var(--muted); font-size: .78rem; }
.mh-uploads__del { margin-left: auto; }
.mh-uploads__del button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.mh-uploads__del button:hover { color: #FF5E7E; border-color: rgba(255,94,126,.5); }
.mh-uploads__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; padding: 1.1rem 1rem; border: 1.5px dashed var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.mh-uploads__drop:hover, .mh-uploads__drop.is-over { border-color: var(--g2,#A855F7); background: rgba(168,85,247,.06); }
.mh-uploads__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mh-uploads__droptxt { color: var(--muted); }
.mh-uploads__droptxt strong { color: var(--fg); }
.mh-uploads__chosen { color: #35E0C8; font-size: .85rem; }
.mh-uploads__note { color: var(--muted); font-size: .78rem; margin: .5rem 0 1rem; }
/* Konversation */
.mh-conv { margin-top: 1.6rem; }
.mh-conv__thread { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.mh-conv__msg { display: flex; flex-direction: column; gap: .25rem; max-width: 82%; }
.mh-conv__msg--client { align-self: flex-end; align-items: flex-end; }
.mh-conv__msg--admin { align-self: flex-start; align-items: flex-start; }
.mh-conv__bubble { padding: .7rem 1rem; border-radius: 16px; line-height: 1.5; }
.mh-conv__msg--client .mh-conv__bubble { background: linear-gradient(135deg, rgba(168,85,247,.92), rgba(79,123,255,.92)); color: #fff; border-bottom-right-radius: 4px; }
.mh-conv__msg--admin .mh-conv__bubble { background: var(--ink-2); border: 1px solid var(--line); color: var(--fg); border-bottom-left-radius: 4px; }
.mh-conv__metaline { font-size: .74rem; color: var(--muted); padding: 0 .3rem; }
.mh-conv__forms { display: grid; gap: .9rem; }
.mh-conv__add textarea { width: 100%; margin-bottom: .8rem; }
.mh-conv__send button { width: auto; }

/* Detail kompakter */
.mh-empty { color: var(--muted); font-size: .88rem; margin: 0; }
.mh-uploads__addrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.mh-uploads__addrow .mh-uploads__note { margin: 0; }
.mh-clientdetail__head { margin-bottom: .5rem; }
.mh-annos { margin-top: 1.5rem; }

/* Admin-Controls an Anmerkungen (kompakt, Häkchen vorne) */
.mh-anno__main { flex: 1; margin: 0; }
.mh-anno__toggle { flex: none; position: relative; cursor: pointer; margin-top: .1rem; }
.mh-anno__toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mh-anno__toggle .mh-anno__check { margin-top: 0; transition: border-color .15s var(--ease); }
.mh-anno__toggle:hover .mh-anno__check { border-color: var(--g4); }
.mh-anno__replyrow { display: flex; gap: .5rem; margin-top: .6rem; max-width: 34rem; }
.mh-anno__replyin { flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .7rem; color: var(--fg); font: inherit; font-size: .9rem; }
.mh-anno__replyin::placeholder { color: var(--muted); }
.mh-anno__replyin:focus { outline: none; border-color: rgba(168,85,247,.6); }
.mh-anno__replybtn { flex: none; background: linear-gradient(135deg,#A855F7,#4F7BFF); color: #fff; border: none; border-radius: 9px; padding: .5rem .9rem; font: 600 .82rem "Space Grotesk", sans-serif; cursor: pointer; }
.mh-anno__replybtn:hover { filter: brightness(1.08); }

/* Aufklappbare „Neue …“-Eingaben (details/summary) */
.mh-addbox { margin-top: 1rem; }
.mh-addbox > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: 600 .88rem "Space Grotesk", sans-serif; background: var(--ink-2); transition: border-color .2s var(--ease), background .2s var(--ease); user-select: none; }
.mh-addbox > summary::-webkit-details-marker { display: none; }
.mh-addbox > summary::marker { content: ""; }
.mh-addbox > summary:hover { border-color: rgba(168,85,247,.5); }
.mh-addbox[open] > summary { border-color: rgba(168,85,247,.6); background: rgba(168,85,247,.1); margin-bottom: .9rem; }
.mh-addbox .mh-form { margin: 0; }
.mh-addbox textarea { width: 100%; margin-bottom: .8rem; }

/* Schritt-für-Schritt-CTA am Ende des Ablaufs */
.mh-process__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
.mh-process__cta-note { color: var(--muted-dark); font-size: .92rem; }