/* ═══════════════════════════════════════════════════════════════════════════
   mpm-unterseite.css — das gemeinsame Stylesheet ALLER Leistungs-Unterseiten
   Stand 03.10.2026

   WOFUER: die sechs Unterseiten hinter den Kacheln der Startseite.
     amazon-ppc-agentur/ · google-ads-agentur/ · marktplatz-agentur/
     amazon-strategie-portfolio/ · amazon-listing-seo/ · amazon-content-brand/

   WARUM EINE DATEI: vorher trug jede Unterseite ihr eigenes <style> mit eigenen
   Farbwerten. Dadurch standen sie nach dem Brand-Umbau der Startseite auf dem
   alten Fast-Schwarz und auf ZWEI Verlaeufen. Jetzt liegt das Design an EINER
   Stelle - eine Aenderung wirkt auf alle sechs Seiten.

   DESIGN-QUELLE: mpm_intern/mpm_branding/ (verbindlich).
   Farben 1:1 aus mpm_farben/mpm-farben.css, Raum aus mpm-corporate-design.html.
   Hier wird NICHTS erfunden. Fehlt ein Wert, wird er dort ergaenzt - nicht hier.

   BAUSTEINE: Kopfleiste, Fullscreen-Menue, Ladebutton, Hero, helle und dunkle
   Sektion, Karten, Prozess-Schritte, Founder-Box, Preis-Box, FAQ, Termin,
   Verlaufs-Footer. Alle 1:1 nach dem Muster der Startseite (index.html) -
   bei Widerspruch gewinnt index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BRAND TOKENS — 1:1 aus mpm_intern/mpm_branding (Stand 25.09.2026)
   VERBINDLICH. Hier nichts anpassen.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Brand */
  --vi:#5729A0;   /* Violet  rgb(87,41,160)  NUR im Verlauf        */
  --pk:#E81C86;   /* Pink    rgb(232,28,134)                       */
  --og:#FE9600;   /* Orange  rgb(254,150,0)                        */

  /* Neutrale und Rollen — helles Theme */
  --card:#FFFFFF;  /* Karte, Kasten                                 */
  --bg:#EAEAEA;    /* Seitenflaeche, der EINE Hellgrauton           */
  --line:#E5E7EB;  /* Rahmen                                        */
  --line2:#EEF0F3; /* feine Trennlinie                              */
  --ink:#111827;   /* Haupttext                                     */
  --ink2:#374151;  /* Sekundaertext                                 */
  --mut:#6B7280;   /* gedaempft                                     */
  --mut2:#9CA3AF;  /* Meta, Label                                   */
  --dk:#222228;    /* der EINE Dunkelton, ersetzt reines Schwarz    */

  /* Zweckfarben — tragen eine Aussage, nie Dekoration */
  --pos:#0E8467; --posf:#16BF95; --posd:#35D399;
  --neg:#C9345E; --negf:#E5416A; --negd:#FF7091;
  --wrn:#B45309; --wrnf:#FE9600; --wrnd:#FFA94D;

  /* DER Verlauf — es gibt nur diesen einen */
  --grad:linear-gradient(135deg,#5729A0 0%,#E81C86 55%,#FE9600 100%);
}

/* Dunkle Flaechen. --d3 ist der Marken-Dunkelton (= --dk). */
:root{
  --d0:#09090b; --d1:#111114; --d2:#18181c; --d3:#222228; --d4:#2e2e36;
  --g1:#4a4a54; --g2:#7a7a88; --g3:#a8a8b8;

  /* Schrift AUF dunklem Grund. --ink/--ink2/--mut gelten NUR auf hell. */
  --ink-dk:#FFFFFF;
  --ink2-dk:rgba(255,255,255,.78);
  --mut-dk:rgba(255,255,255,.55);
}

/* Abstands- und Schriftstufen. Nie feste Pixel - rem waechst mit der
   Nutzereinstellung, clamp() mit der Fensterbreite. */
:root{
  --s1:.375rem;   /*   6px  Feinabstand        */
  --s2:.75rem;    /*  12px  Rasterabstand      */
  --s3:1rem;      /*  16px  Headline zur Copy  */
  --s4:1.375rem;  /*  22px  innerer Kasten     */
  --s5:2.125rem;  /*  34px  zwischen Gruppen   */
  --s6:3.25rem;   /*  52px  Kasten innen       */
  --s7:6.5rem;    /* 104px  Auftakt            */

  --pad-box:clamp(1.875rem,4.5vw,var(--s6));
  --pad-box-x:clamp(1.5rem,5vw,3.375rem);
  --gap-copy:clamp(1.5rem,3vw,2.125rem);

  --t-body:1.031rem;                       /* 16.5 px Fliesstext   */
  --t-h1:clamp(2.063rem,5.2vw,3.375rem);
  --t-h2:clamp(1.875rem,4vw,2.75rem);
  --t-h3:clamp(1.375rem,2.4vw,1.625rem);

  --r:16px;   /* Karte, Box          */
  --rs:10px;  /* innerer Kasten      */
}

/* ═══════════════════════════════════════════════════════════════
   SEITEN-TOKENS — Rollen dieser Website auf die Brand-Tokens gelegt.
   Identisch mit index.html. Alles hier ist Abbildung, kein neuer Wert.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --mm-purple:var(--vi);
  --mm-pink:var(--pk);
  --mm-orange:var(--og);
  --mm-white:var(--card);
  --mm-light:var(--bg);
  --mm-black:var(--dk);        /* dunkle Flaeche = #222228, NICHT --d0 */
  --mm-gray-2:var(--mut-dk);
  --mm-gray-3:var(--ink2-dk);
  --mm-body-gray:var(--ink2);
  --mm-radius-card:var(--r);
  --mm-radius-sm:var(--rs);
  --mm-radius-pill:999px;

  /* Von den Guidelines nicht geregelt — mit Nadine abzustimmen */
  --sec:clamp(5.5rem,12vw,12.5rem);
  /* Die Kopfleiste liegt fix und transparent ueber der Seite, jede Sektion
     haelt ihre Hoehe selbst frei. EIN Wert fuer die ganze Seite. */
  --nav-h:108px;
  --pad-sec-top:calc(var(--nav-h) + clamp(var(--s5),5vw,var(--s7)));
  --nav-stagger:45;
  --mm-ease:cubic-bezier(.22,1,.36,1);
  --mm-maxw:1372px;
  --mm-pad-x:clamp(24px, 6vw, 80px);
  --liquid:.9s cubic-bezier(.135,.9,.15,1);
  --lade-kreis:2.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
em,i,cite,address,dfn,var{font-style:normal}
html{
  scroll-behavior:smooth;scroll-padding-top:0;overflow-x:clip;
}
/* ── SENKRECHTER SNAP: seit 04.10.2026 NICHT mehr nativ ─────────────────────
   Gleichgezogen mit der Startseite (UEBERGABE 37). War scroll-snap-type:y
   proximity. Das Tempo des nativen Snaps laesst sich nicht einstellen, er
   rastet hart ein - Banjo: "die Seite soll sich weich anfuehlen". Den Snap
   macht jetzt eine Schleife in mpm-unterseite.js ("WEICHER SNAP").
   scroll-snap-align / scroll-margin-top an den Sektionen bleiben stehen: sie
   sind die Markierung, WO eingerastet wird - die Schleife liest beides aus. */
/* Waehrend eines Ankersprungs haelt der weiche Snap still. */
html.springt{scroll-snap-type:none}
body{
  font-family:'Host Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;background:var(--bg);color:var(--ink);
  line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
main > section{position:relative}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.mm-wrap{max-width:var(--mm-maxw);margin:0 auto;padding-left:var(--mm-pad-x);padding-right:var(--mm-pad-x)}
.mono{font-family:'JetBrains Mono',monospace;font-weight:400}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   NAV + FULLSCREEN-MENUE — 1:1 aus index.html
   Stand 04.10.2026, zweiter Abgleich (Banjo: "Menuebar der Unterseiten
   und Burgermenue ist alt -> bitte auf den neuen Stand wie bei der
   Homeseite bringen"). Der Block ist eine WOERTLICHE Kopie aus dem
   <style> der Startseite, Zeilen "NAV" bis Ende "FULLSCREEN-MENUE".
   Hier NICHTS einzeln nachpflegen - wenn die Startseite sich aendert,
   wird dieser Block wieder komplett ersetzt. Alles andere laeuft
   auseinander, genau das war der Stand vor heute: andere Schriftgroesse
   im Menue, fehlende EN-Typo, aelteres Burger-Verhalten.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
.mm-nav-outer{
  position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none;
  transition:background .3s var(--mm-ease),border-color .3s var(--mm-ease);
  border-bottom:1px solid transparent;
}
/* Die Leiste bleibt immer transparent - statt einer Glasflaeche darunter
   dreht sie ihre eigenen Farben, sobald eine helle Sektion unter ihr liegt
   (siehe body.nav-hell weiter unten). */
body.nav-open .mm-nav-outer{z-index:1400;background:transparent;border-bottom-color:transparent}
.mm-nav{
  pointer-events:auto;display:flex;align-items:center;gap:20px;
  width:100%;max-width:var(--mm-maxw);margin:0 auto;
  padding:18px var(--mm-pad-x);
}
.mm-logo{display:flex;align-items:center;flex-shrink:0}
.mm-logo img{height:72px;width:auto;display:block;object-fit:contain}
/* Drei Logo-Varianten, je nachdem was hinter der Leiste liegt:
   negativ auf dunkel (Standard) - positiv auf hell - white auf dem Verlauf
   des offenen Menues. So schreiben es die Guidelines vor. */
.mm-logo .l-white,.mm-logo .l-positiv{display:none}

/* --- ueber einer hellen Sektion: alles dreht ins Dunkle --- */
body.nav-hell .mm-logo .l-color{display:none}
body.nav-hell .mm-logo .l-positiv{display:block}
body.nav-hell .mm-menu-btn{color:var(--dk)}
body.nav-hell .mm-menu-btn:hover{color:#000}
body.nav-hell .mm-nav-outer .lade.hell .lade-text,
body.nav-hell .mm-nav-outer .lade.hell .lade-kreis{background:var(--dk);color:#fff}
body.nav-hell .mm-nav-outer .lade.hell .lade-kreis svg{stroke:#fff}
body.nav-hell .mm-menu-btn:focus-visible{outline-color:rgba(0,0,0,.45)}

/* --- offenes Menue gewinnt immer: Verlauf im Ruecken, alles in Weiss --- */
body.nav-open .mm-logo .l-color,
body.nav-open .mm-logo .l-positiv{display:none}
body.nav-open .mm-logo .l-white{display:block}
body.nav-open.nav-hell .mm-menu-btn{color:#fff}
body.nav-open.nav-hell .mm-nav-outer .lade.hell .lade-text,
body.nav-open.nav-hell .mm-nav-outer .lade.hell .lade-kreis{background:#fff;color:var(--dk)}
body.nav-open.nav-hell .mm-nav-outer .lade.hell .lade-kreis svg{stroke:var(--dk)}
/* 26px: der Kreis des Termin-Knopfes faehrt beim Hover 16px nach rechts -
   bei engerem Abstand liefe er dem Burger in die Striche. */
.mm-nav-right{margin-left:auto;display:flex;align-items:center;gap:26px}

/* ---- Sprachwechsel "EN" - reine Typo, kein Schalter -----------------------
   Banjo 04.10.2026: der Pillen-Schalter DE|EN ist raus. Die Seite IST deutsch,
   also braucht es kein "de" daneben - nur das Angebot "EN", gesetzt wie die
   Schrift im Termin-Knopf (.875rem / 700), ohne Flaeche, ohne Rahmen, ohne
   Trennstrich. Noch ohne Funktion (siehe Kasten im Markup).
   Er faerbt sich mit der Kopfleiste mit: auf dunklem Grund weiss, ueber einer
   hellen Sektion dunkel, im offenen Menue wieder weiss - dieselben drei
   Zustaende wie Logo, Burger und Termin-Knopf. */
.mm-lang-btn{
  appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:700;letter-spacing:.005em;
  line-height:1;
  color:rgba(255,255,255,.72);
  transition:color .25s var(--mm-ease)}
.mm-lang-btn:hover{color:#fff}
.mm-lang-btn:focus-visible{outline:2px solid var(--pk);outline-offset:4px;border-radius:4px}
body.nav-hell .mm-lang-btn{color:rgba(34,34,40,.62)}
body.nav-hell .mm-lang-btn:hover{color:var(--dk)}
body.nav-open .mm-lang-btn{color:rgba(255,255,255,.72)}
body.nav-open .mm-lang-btn:hover{color:#fff}
@media (max-width:620px){ .mm-lang-btn{display:none} }

/* ---- Termin-Knopf = Ladebutton aus den Brand Guidelines --------------------
   Zwei getrennte Formen - Pille und Kreis - laufen durch den SVG-Filter
   #mmGooey und verschmelzen dadurch zu einer Form. Beim Hover faehrt der Kreis
   nach rechts, die Verbindung zieht sich wie ein Tropfen lang und reisst ab;
   der Pfeil dreht dabei aus der Diagonale in die Waagerechte.
   Auf dunklem Grund traegt der Knopf .hell: weisse Flaeche, dunkle Schrift. */
:root{ --liquid:.9s cubic-bezier(.135,.9,.15,1); --lade-kreis:2.75rem }
.lade{display:inline-flex;align-items:center;justify-content:flex-start;text-decoration:none;
  white-space:nowrap;filter:url(#mmGooey);-webkit-tap-highlight-color:transparent}
.lade-text{background:var(--dk);color:#FFFFFF;border-radius:3rem;
  padding:0 1.45rem;height:var(--lade-kreis);display:flex;align-items:center;
  font-size:.875rem;font-weight:700;letter-spacing:.005em}
.lade-kreis{background:var(--dk);border-radius:50%;
  width:var(--lade-kreis);height:var(--lade-kreis);flex:0 0 auto;margin-left:-.25rem;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--liquid)}
.lade-kreis svg{width:1.1rem;height:1.1rem;fill:none;stroke:#FFFFFF;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg);
  transition:transform var(--liquid)}
.lade:hover .lade-kreis{transform:translateX(1rem)}
.lade:hover .lade-kreis svg{transform:rotate(0deg)}
.lade:focus-visible{outline:2px solid var(--pk);outline-offset:3px;border-radius:3rem}
.lade.hell .lade-text,.lade.hell .lade-kreis{background:#FFFFFF;color:var(--dk)}
.lade.hell .lade-kreis svg{stroke:var(--dk)}
@media(prefers-reduced-motion:reduce){
  .lade-kreis,.lade-kreis svg{transition:none}
  .lade:hover .lade-kreis{transform:none}
}


/* Termin-Knopf: auf dunklem Grund weisse Flaeche, dunkelgraue Schrift (Button-Regel) */
.mm-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--card);color:var(--dk)!important;
  padding:13px 22px;border-radius:var(--mm-radius-pill);
  font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:transform .2s var(--mm-ease),box-shadow .2s var(--mm-ease);
}
.mm-cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.mm-cta-btn .arrow{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s var(--mm-ease)}
.mm-cta-btn:hover .arrow{transform:translate(2px,-2px)}

/* Menue-Knopf — traegt zugleich den Schliessen-Zustand */
/* Nur noch das Zeichen - keine Pille, kein Rahmen, kein Wort.
   Das Padding bleibt als Trefferflaeche stehen (42x42 px, fingertauglich),
   und weil der sichtbare Rahmen weg ist, traegt der Knopf einen eigenen
   Fokusring - sonst waere er per Tastatur unsichtbar. */
.mm-menu-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;padding:10px;
  color:var(--ink2-dk);
  transition:color .2s var(--mm-ease);
}
.mm-menu-btn:hover{color:var(--ink-dk)}
body.nav-open .mm-menu-btn{color:#fff}
.mm-menu-btn:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:3px;border-radius:6px}
/* Burger-Zeichen — Variante "menu--2" (cross) nach Tamino Martinius.
   Die drei Striche sind Teilstuecke EINES laengeren Pfades: beim Oeffnen wandert
   das sichtbare Fenster (stroke-dashoffset) an den diagonalen Pfadanfang, die
   Mittellinie schrumpft auf 0 - daraus entsteht das X, ohne Rotation.
   Die dasharray-/dashoffset-Werte sind 1:1 die des Originals; den Zustand
   liefert hier body.nav-open statt einer Checkbox.
   Der viewBox ist auf den genutzten Bereich (36..64) beschnitten, sonst stuende
   das Zeichen im Knopf nur ein Viertel so gross. */
/* Dasselbe Zeichen traegt das Schliessen-X im Case-Popup (Banjo 03.10.2026):
   gleiche Groesse, gleicher Strich, gleiche Bewegung. Deshalb stehen beide
   Knoepfe in denselben Selektoren - wer hier dreht, dreht beide. */
.mm-menu-btn .mm-burger,.case-modal-close .mm-burger{display:block;width:26px;height:26px;flex:none}
.mm-menu-btn .mm-burger svg,.case-modal-close .mm-burger svg{display:block;width:100%;height:100%;overflow:visible}
.mm-menu-btn .mm-burger path,.case-modal-close .mm-burger path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  --length:24;--offset:-38;
  stroke-dasharray:var(--length) var(--total-length);
  stroke-dashoffset:var(--offset);
  transition:all .55s cubic-bezier(.645,.045,.355,1);
}
.mm-menu-btn .mm-burger .line--1,.case-modal-close .mm-burger .line--1,
.mm-menu-btn .mm-burger .line--3,.case-modal-close .mm-burger .line--3{--total-length:111.22813415527344;--offset:-50.22813415527344}
.mm-menu-btn .mm-burger .line--2,.case-modal-close .mm-burger .line--2{--total-length:99}
body.nav-open .mm-menu-btn .mm-burger path{transform:translateX(30px)}
body.nav-open .mm-menu-btn .mm-burger .line--1,
body.nav-open .mm-menu-btn .mm-burger .line--3{--length:22.627416998;--offset:-16.9705627485}
body.nav-open .mm-menu-btn .mm-burger .line--2{--length:0;--offset:-20}
/* "menue"/"schliessen" bleiben im Markup, nur unsichtbar: ein Knopf aus drei
   Strichen haette sonst keinen vorlesbaren Namen. Der Zustandswechsel laeuft
   weiter ueber body.nav-open, also ohne Eingriff ins JS. */
.mm-menu-btn .lbl-open,.mm-menu-btn .lbl-close{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.mm-menu-btn .lbl-close{display:none}
body.nav-open .mm-menu-btn .lbl-open{display:none}
body.nav-open .mm-menu-btn .lbl-close{display:inline}

/* ═══════════════════ FULLSCREEN-MENUE ═══════════════════ */
.mm-overlay{
  position:fixed;inset:0;z-index:1200;background:var(--grad);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  /* 04.10.2026 (Banjo: "braucht ewig bis es scrollt"): AUFBLENDEN und
     ABBLENDEN sind jetzt verschieden schnell. Die Uebergangszeit kommt immer
     aus dem Zustand, in den etwas laeuft - diese Grundregel gilt also beim
     SCHLIESSEN, die Regel darunter beim Oeffnen.
     Warum das der Kern war: beim Klick auf einen Menuepunkt startete der
     Seitensprung sofort, lief aber 380 ms lang HINTER dem noch sichtbaren
     Verlaufs-Vorhang ab. Man klickte, sah eine knappe halbe Sekunde nichts,
     und wenn der Vorhang weg war, war der Sprung fast vorbei. Jetzt ist der
     Vorhang nach 160 ms weg und man sieht die Bewegung. */
  transition:opacity .16s var(--mm-ease),visibility .16s var(--mm-ease);
}
body.nav-open .mm-overlay{opacity:1;visibility:visible;
  transition:opacity .38s var(--mm-ease),visibility .38s var(--mm-ease)}

/* Waehrend eines Ankersprungs ist der Snap aus: er faengt sonst die laufende
   Bewegung ab und zieht sie zurueck (UEBERGABE 31.5). */
html.springt{scroll-snap-type:none}
.mm-overlay-inner{
  /* ueber dem Filmkorn (Sammelregel "VERLAUF = RAUSCHEN"): das ::after des
     Overlays ist absolut gesetzt und laege sonst auf der Schrift. Dasselbe
     macht .footer-inner im Footer. */
  position:relative;z-index:1;
  width:100%;max-width:var(--mm-maxw);margin:0 auto;
  padding:120px var(--mm-pad-x) var(--pad-box);
  flex:1;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;
}
/* stretch, damit die rechte Spalte genauso hoch ist wie die Eintragsliste -
   nur so sitzt Impressum/Datenschutz unten auf der Kante von "06 kontakt". */
.mm-overlay-grid{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:stretch}

.mm-ov-nav{display:flex;flex-direction:column}
.mm-ov-nav a{
  display:flex;align-items:baseline;gap:22px;
  padding:clamp(8px,1vw,14px) 0;
  font-size:clamp(34px,5.6vw,68px);line-height:1.05;letter-spacing:-.033em;
  text-transform:lowercase;font-weight:500;color:rgba(255,255,255,.85);
  opacity:0;transform:translateY(16px);
  transition:color .2s var(--mm-ease),opacity .5s var(--mm-ease),transform .5s var(--mm-ease);
}
body.nav-open .mm-ov-nav a{opacity:1;transform:none}
.mm-ov-nav a .n{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;font-weight:600;
  color:rgba(255,255,255,.6);flex:none;transition:color .2s var(--mm-ease);
}
.mm-ov-nav a:hover{color:#fff}
/* Die Nummer wird beim Hover einfach weiss - der Verlauf-Trick von frueher
   waere auf der Verlaufsflaeche selbst unsichtbar. */
.mm-ov-nav a:hover .n{color:#fff}

/* space-between statt flex-end (04.10.2026): die Spalte traegt jetzt drei
   Bloecke - Services oben, Kontakt in der Mitte, Impressum/Datenschutz unten
   auf der Kante des letzten Eintrags links. */
.mm-ov-meta{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);min-width:262px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--mm-ease) .28s,transform .5s var(--mm-ease) .28s;
}
body.nav-open .mm-ov-meta{opacity:1;transform:none}
.mm-ov-meta .lbl{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:var(--s1);
}
.mm-ov-meta .val{font-size:17px;color:#fff;line-height:1.5}
.mm-ov-meta .val a:hover{opacity:.72}
/* Die Service-Unterseiten: eine Stufe groesser als .val, damit sie als
   eigener Weg lesbar sind und nicht als Fussnote. Der Pfeil ist derselbe wie
   am CTA-Knopf der Kopfleiste - er sagt "verlaesst diese Seite". */
.mm-ov-services{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mm-ov-services a{
  display:inline-flex;align-items:baseline;gap:9px;
  font-size:clamp(18px,1.5vw,22px);line-height:1.34;letter-spacing:-.015em;
  color:rgba(255,255,255,.85);
  transition:color .2s var(--mm-ease)}
.mm-ov-services a::after{
  content:'\2197';font-size:.72em;opacity:.55;
  transition:opacity .2s var(--mm-ease),transform .2s var(--mm-ease)}
.mm-ov-services a:hover{color:#fff}
.mm-ov-services a:hover::after{opacity:1;transform:translate(2px,-2px)}
/* Leistungspunkt ohne Seite: steht mit im Menue, ist aber kein Link - gleiche
   Schrift, ohne Pfeil und ohne Mauszeiger-Wechsel. Sobald die Seite steht,
   wird aus dem <span> wieder ein <a>.
   04.10.2026 abends (Banjo, Go-Live): die drei Service-Unterseiten sind blind
   geschaltet, ALLE DREI Punkte tragen hier jetzt diese Klasse - und sie stehen
   WEISS, nicht gedimmt ("Typofarbe der Leistungen im Menue nicht ausgegraut
   sondern weiss"). Gedimmt hiesse "dieser Punkt ist kaputt"; es fehlt aber nur
   die Unterseite, nicht die Leistung. Dass nichts klickbar ist, sagt das
   fehlende \2197 und cursor:default.
   DIESE DATEI UND index.html GEHOEREN ZUSAMMEN: jede Menue-Aenderung wird in
   BEIDEN gemacht (Dauerregel Banjo 04.10.2026). */
.mm-ov-services .noch-nicht{
  display:inline-flex;align-items:baseline;
  font-size:clamp(18px,1.5vw,22px);line-height:1.34;letter-spacing:-.015em;
  color:#fff;cursor:default}

/* Impressum + Datenschutz stehen unten in der rechten Spalte, ohne Trennlinie. */
.mm-ov-legal{display:flex;gap:26px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.mm-ov-legal a:hover{color:#fff}


body.nav-open,html.nav-open{overflow:hidden}

@media (max-width:860px){
  .mm-logo img{height:54px;width:auto;max-width:62vw}
  .mm-nav{padding:14px var(--mm-pad-x)}
  .mm-menu-btn{padding:9px}
  .mm-overlay-grid{grid-template-columns:1fr;gap:var(--s5)}
  .mm-overlay-inner{padding-top:104px;justify-content:flex-start}
  .mm-ov-foot{flex-direction:column;align-items:flex-start;gap:var(--s2)}
}
@media (max-width:560px){
  .mm-nav-right .mm-cta-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mm-ov-nav a,.mm-ov-meta,.mm-ov-foot{transition:none;opacity:1;transform:none}
  .mm-menu-btn .mm-burger path{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   HERO der Unterseite — dunkel, linksbuendig, unten gerundet.
   Dasselbe Prinzip wie der Hero der Startseite, nur flacher: eine
   Unterseite ist kein Auftakt, sie muss nicht das ganze Fenster fuellen.
   Raster identisch (--mm-maxw + --mm-pad-x innen), damit Eyebrow und
   Headline exakt auf der linken Kante des Logos sitzen.
   ═══════════════════════════════════════════════════════════════ */
.us-hero{
  position:relative;background:var(--dk);color:var(--ink-dk);
  overflow:hidden;display:flex;flex-direction:column;
  /* dunkel, darunter hellgrau -> unten rund (Regel 3.1) */
  border-bottom-left-radius:var(--r);
  border-bottom-right-radius:var(--r);
  z-index:2;
}
.us-hero-body{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-height:min(74vh,760px);
  padding:clamp(130px,16vh,185px) var(--mm-pad-x) clamp(70px,9vh,110px);
  max-width:var(--mm-maxw);margin:0 auto;width:100%;
  position:relative;z-index:2;
}
/* Brotkrume: wo bin ich. Fuehrt zurueck zur Startseite, ohne die Kopfleiste
   mit einem zweiten Zurueck-Link zu belasten. */
.us-krume{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut-dk);margin:0 0 var(--s5);
}
.us-krume a{color:var(--mut-dk);transition:color .2s var(--mm-ease)}
.us-krume a:hover{color:#fff}
.us-krume .sep{opacity:.5}
.us-krume [aria-current="page"]{color:var(--ink2-dk)}
.us-hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-gray-3);margin:0 0 24px}
/* Headline klein geschrieben wie alle grossen Sektions-Headlines (Regel 3.5).
   Im Markup steht der normale Satz, klein stellt das CSS - so lesen
   Screenreader und Suchmaschinen den richtigen Text. */
.us-hero-title{
  font-size:clamp(38px,5.6vw,76px);
  font-weight:500;line-height:.98;letter-spacing:-.035em;
  text-transform:lowercase;margin:0 0 var(--s5);max-width:20ch;
}
.us-hero-title .grad-text{
  display:inline-block;padding-bottom:.14em;margin-bottom:-.14em;line-height:1.15;
}
.us-hero-sub{
  color:var(--mm-gray-3);font-size:var(--t-body);font-weight:400;
  max-width:62ch;margin:0;line-height:1.62;
}
.us-hero-sub strong{color:#fff;font-weight:500}
.us-hero-ctas{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6)}
/* Zweitlink ohne Knopf: EIN Knopf pro Bildschirm, sonst schreien zwei
   gleich laut. Der Unterstrich waechst beim Hover von links. */
.us-textlink{
  position:relative;font-size:14.5px;font-weight:500;color:var(--ink2-dk);
  padding-bottom:3px;transition:color .2s var(--mm-ease);
}
.us-textlink::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--mm-ease);
}
.us-textlink:hover{color:#fff}
.us-textlink:hover::after{transform:scaleX(1)}

/* ---- Schmuckelement: die angeschnittene Bildmarke als duenne Kontur,
   rechts unten an der Hero-Kante, vom overflow:hidden angeschnitten.
   Quelle: mpm_logos/mpm_bildmarke/mpm_logo_bildmarke_RGB_schmuckelement_1.svg
   non-scaling-stroke haelt die Kontur bei jeder Groesse gleich duenn. ---- */
.us-hero .deko{
  position:absolute;right:0;bottom:0;z-index:1;pointer-events:none;
  height:82%;aspect-ratio:389/597;opacity:.7;
}
/* Als <img> eingebunden (assets/mpm-deko-bildmarke.svg), nicht inline: die
   Kontur bringt ihren Verlauf selbst mit, so steht sie nur an EINER Stelle
   fuer alle sechs Unterseiten. */
.us-hero .deko img,.us-hero .deko svg{width:100%;height:100%;display:block}
.us-hero .deko path{stroke-width:1.4px}
@media print{.us-hero .deko{display:none}}

/* ═══════════════════════════════════════════════════════════════
   SEKTIONEN — zwei Flaechen, mehr nicht: hellgrau (--bg) und dunkel (--dk).
   Weisse Karten (--card) stehen auf der hellen, Box-in-Box nach den
   Guidelines. Jede Sektion traegt ihre Luft unter der Kopfleiste selbst
   ueber --pad-sec-top (Regel 3.4) - EIN Token fuer die ganze Seite.
   ═══════════════════════════════════════════════════════════════ */
.us-hell{
  background:var(--bg);color:var(--ink);
  position:relative;z-index:1;
  scroll-snap-align:start;
}
/* Dunkle Insel zwischen zwei hellen Flaechen bzw. gegen den Verlaufs-Footer
   -> RUNDUM gerundet (Regel 3.1). clip-path, damit auch der Inhalt
   innerhalb der Rundung bleibt. */
.us-dunkel{
  background:var(--dk);color:var(--ink-dk);
  position:relative;z-index:1;
  border-radius:var(--r);
  overflow:hidden;clip-path:inset(0 0 0 0 round var(--r));
  scroll-snap-align:start;
}
/* Zwei gleichfarbige Flaechen hintereinander verschmelzen zu einer - getrennt
   wird ueber das grosse obere Polster, nicht ueber eine Kante. Dafuer traegt
   die FOLGESEKTION dann kein zweites Polster oben. */
.us-wrap{
  max-width:var(--mm-maxw);margin:0 auto;width:100%;
  padding:var(--pad-sec-top) var(--mm-pad-x) clamp(var(--s7),8vw,7.5rem);
}
/* Anschluss-Sektion: gleiche Farbe wie die darueber. Die Kopfleiste ist dort
   schon freigehalten, also faellt die Leistenhoehe weg - es bleibt der reine
   Gruppenabstand. Volles --pad-sec-top waere hier falsch: zusammen mit dem
   unteren Polster der Vorgaengerin klafften rund 330 px Leere zwischen zwei
   Themen, die auf derselben Flaeche stehen. */
.us-wrap.anschluss{padding-top:clamp(var(--s6),5vw,var(--s7))}
.us-wrap.schmal{max-width:calc(900px + 2 * var(--mm-pad-x))}

/* ---- Sektionskopf: Eyebrow, Headline, Lead ---- */
.us-kopf{margin:0 0 clamp(var(--s6),5vw,5rem);max-width:60ch}
/* 04.10.2026 (Banjo): EINE Eyebrow-Typo fuer alles. Vorlage ist die Signatur
   "BENEDIKT DENKER" in der Benny-Sektion der Startseite (.seller-sig):
   JetBrains Mono, 11.5px, Laufweite .1em, Versalien. Vorher liefen hier drei
   Fassungen nebeneinander - 11.5px/.16em in der Sektion, 15px ohne Mono im
   Hero, 12.5px/.17em auf der Startseite. */
.us-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:0 0 var(--s3)}
.us-dunkel .us-eyebrow{color:var(--mut-dk)}
/* Grosse Sektions-Headline: klein geschrieben (Regel 3.5). Gleiche Stufe wie
   .zus-title auf der Startseite - EINE Titelgroesse fuer die ganze Seite. */
.us-title{
  font-size:clamp(34px,4.2vw,58px);font-weight:500;line-height:1.02;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--dk);margin:0;
}
.us-dunkel .us-title{color:var(--ink-dk)}
.us-lead{
  font-size:var(--t-body);line-height:1.62;color:var(--ink2);
  max-width:62ch;margin:var(--s5) 0 0;
}
.us-dunkel .us-lead{color:var(--ink2-dk)}
.us-lead strong{color:var(--dk);font-weight:500}
.us-dunkel .us-lead strong{color:#fff}

/* ---- Karten: weiss auf hellgrau, Muster der Startseiten-Kachel (.ak).
   Ohne Link-Hover (Verlauf + Pfeil) - diese Karten sind Information,
   kein Ziel. Wer sie klickbar macht, nimmt .uk.ist-link dazu. ---- */
.us-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.us-karten.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.us-karten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.uk{
  background:var(--card);border-radius:var(--r);
  padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  position:relative;overflow:hidden;
}
.uk-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin:0 0 var(--s2);
}
.uk h3{
  font-size:clamp(18px,1.45vw,21px);font-weight:500;line-height:1.25;letter-spacing:-.018em;
  color:var(--dk);margin:0;
}
/* :not([class]) trifft NUR den Fliesstext-Absatz. Ohne das schluege `.uk p`
   (0,1,1) die Klasse `.uk-tag` (0,1,0) und das Kuerzel stuende in Fliesstext-
   groesse - derselbe Fehler lauert ueberall, wo ein Baustein eine p-Regel UND
   Absaetze mit eigener Klasse hat. */
.uk p:not([class]){font-size:15px;line-height:1.62;color:var(--ink2);margin:0}
/* Klickbare Variante: dann gilt der Kachel-Hover der Startseite. Der Verlauf
   liegt als eigene ::before-Ebene, weil sich ein background-image nicht
   animieren laesst - so wird nur die Opazitaet ueberblendet, auf der GPU. */
.uk.ist-link{transition:transform .3s var(--mm-ease),box-shadow .3s var(--mm-ease)}
.uk.ist-link:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(87,41,160,.18)}
.uk.ist-link::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--grad);opacity:0;
  transition:opacity .4s var(--mm-ease);z-index:0;
}
.uk.ist-link:hover::before{opacity:1}
.uk.ist-link > *{position:relative;z-index:1}
.uk.ist-link h3,.uk.ist-link p,.uk.ist-link .uk-tag{transition:color .4s var(--mm-ease)}
.uk.ist-link:hover h3,.uk.ist-link:hover p,.uk.ist-link:hover .uk-tag{color:#fff}
.uk:focus-visible{outline:2px solid var(--pk);outline-offset:3px}

/* ---- Prozess-Schritte: eine weisse Karte, innen getrennt durch feine
   Linien. Kein Kasten pro Schritt - die Abfolge ist EINE Sache. ---- */
.us-schritte{
  background:var(--card);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
}
.us-schritt{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  align-items:start;padding:var(--s5) var(--pad-box-x);
  border-top:1px solid var(--line2);
}
.us-schritt:first-child{border-top:0}
.us-schritt .nr{
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;
  letter-spacing:.1em;color:var(--pk);padding-top:4px;
}
.us-schritt h3{
  font-size:clamp(17px,1.35vw,19.5px);font-weight:500;letter-spacing:-.015em;
  color:var(--dk);margin:0 0 var(--s1);
}
.us-schritt p{font-size:15px;line-height:1.62;color:var(--ink2);margin:0;max-width:72ch}

/* ---- Founder-Box: dunkle Box-in-Box auf der hellen Flaeche. Muster der
   Seller-Box der Startseite. Das Portraet ist vor dunklem Studiohintergrund
   fotografiert - es verschmilzt mit der Box.
   WICHTIG: diese Klasse gehoert in die Liste dunkleBoxen() im JS, sonst
   bleibt die Kopfleiste hell und das dunkle Logo steht auf dunklem Grund. ---- */
.us-founder{
  background:var(--dk);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin-top:clamp(var(--s7),9vw,9rem);
  /* eigener Snappoint; als Box kann sie die Leistenhoehe nicht ueber
     padding freihalten, deshalb scroll-margin-top. */
  scroll-snap-align:start;scroll-margin-top:var(--pad-sec-top);
}
/* Hoehe bewusst knapper als die Seller-Box der Startseite: die traegt zwei
   Absaetze plus Knopf, hier stehen nur Zitat und Signatur. Mit 620 px riss
   zwischen beiden ein Loch auf. */
.us-founder-bild{position:relative;min-height:clamp(340px,28vw,440px);background:var(--dk)}
.us-founder-bild img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;display:block;
}
.us-founder-text{
  padding:clamp(var(--s6),4vw,5rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);
}
/* Das Zitat traegt die Box - es darf gross stehen. Zu klein gesetzt blieb
   zwischen ihm und der Signatur ein Loch, weil die Hoehe vom Bild kommt. */
.us-founder-zitat{
  font-size:clamp(20px,2vw,28px);line-height:1.45;letter-spacing:-.018em;
  color:#fff;margin:0;
}
/* Signatur: Name links, Rolle rechts, auf voller Textbreite. */
.us-founder-sig{
  display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:.75rem;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.4;letter-spacing:.1em;
  text-transform:uppercase;margin:0;
}
.us-founder-sig strong{color:#fff;font-weight:500}
.us-founder-sig span{color:rgba(255,255,255,.45);font-weight:400;text-align:right}

/* ---- Preis-Box: ein Kasten, kein Vergleichsraster. Es gibt EIN Modell. ---- */
.us-preis{
  background:var(--card);border-radius:var(--r);
  padding:clamp(var(--s6),4vw,4.5rem) var(--pad-box-x);
  max-width:760px;
}
.us-dunkel .us-preis{background:rgba(255,255,255,.055)}
.us-preis-lbl{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin:0 0 var(--s3);
}
.us-dunkel .us-preis-lbl{color:var(--mut-dk)}
/* JetBrains Mono nur an Zahlen - Host Grotesk traegt alles andere. */
.us-preis-zahl{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:-.02em;
  color:var(--dk);margin:0 0 var(--s4);line-height:1.1;
}
.us-dunkel .us-preis-zahl{color:var(--ink-dk)}
.us-preis-zahl .einheit{font-size:.38em;font-weight:400;color:var(--mut);letter-spacing:.02em}
.us-dunkel .us-preis-zahl .einheit{color:var(--mut-dk)}
/* :not([class]) — sonst schluege `.us-preis p` die Klassen --preis-zahl und
   --preis-lbl und die Zahl stuende in Fliesstextgroesse da. */
.us-preis p:not([class]){font-size:var(--t-body);line-height:1.62;color:var(--ink2);margin:0 0 var(--s6);max-width:58ch}
.us-dunkel .us-preis p:not([class]){color:var(--ink2-dk)}

/* ---- FAQ: nummeriert, ohne Kaesten. Das Pluszeichen dreht zum X. ---- */
.us-faq{border-top:1px solid rgba(17,24,39,.12)}
.us-dunkel .us-faq{border-top-color:rgba(255,255,255,.14)}
.us-faq details{border-bottom:1px solid rgba(17,24,39,.12)}
.us-dunkel .us-faq details{border-bottom-color:rgba(255,255,255,.14)}
.us-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em;color:var(--dk);
  transition:color .2s var(--mm-ease);
}
.us-dunkel .us-faq summary{color:var(--ink-dk)}
.us-faq summary::-webkit-details-marker{display:none}
.us-faq summary:hover{color:var(--pk)}
.us-faq summary::after{
  content:'';flex:0 0 auto;width:22px;height:22px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--pk);transition:transform .3s var(--mm-ease);
}
.us-faq details[open] summary::after{transform:rotate(135deg)}
.us-faq .antwort{
  font-size:var(--t-body);line-height:1.68;color:var(--ink2);
  max-width:76ch;padding:0 0 var(--s5);
}
.us-dunkel .us-faq .antwort{color:var(--ink2-dk)}
@media (prefers-reduced-motion:reduce){.us-faq summary::after{transition:none}}

/* ---- Chip-Liste: kurze Aufzaehlungen, die keine Karte verdienen ---- */
.us-chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:var(--s5) 0 0}
.us-chips li{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);
  background:var(--card);border-radius:var(--mm-radius-pill);padding:9px 16px;
}
.us-dunkel .us-chips li{background:rgba(255,255,255,.08);color:var(--ink2-dk)}

/* ---- Kennzahlen-Band: der Track Record. Freistehend, keine Kaesten -
   die Zahl traegt, nicht ein Rahmen um sie herum. JetBrains Mono NUR an
   der Zahl, Host Grotesk an Label und Quelle. ---- */
.us-zahlen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--s5),4vw,var(--s7));
  margin:0 0 clamp(var(--s6),5vw,5rem);
}
.us-zahl .wert{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:-.025em;line-height:1.05;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin:0 0 var(--s3);padding-bottom:.08em;
}
.us-zahl .label{font-size:15px;line-height:1.5;color:var(--ink2);margin:0}
.us-dunkel .us-zahl .label{color:var(--ink2-dk)}
.us-zahl .quelle{
  display:block;margin-top:var(--s2);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);
}
.us-dunkel .us-zahl .quelle{color:var(--mut-dk)}
@media (max-width:860px){.us-zahlen{grid-template-columns:1fr;gap:var(--s5)}}

/* ---- Marktplatz-Listen: je Region eine weisse Karte, innen die Plattformen
   als zweispaltige Zeilen (Name links, Einordnung rechts). ---- */
.us-mp-gruppe{
  background:var(--card);border-radius:var(--r);
  padding:var(--pad-box) var(--pad-box-x);
  margin-bottom:var(--s2);
}
.us-dunkel .us-mp-gruppe{background:rgba(255,255,255,.055)}
.us-mp-gruppe > h3{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin:0 0 var(--s4);font-weight:500;
}
.us-dunkel .us-mp-gruppe > h3{color:var(--mut-dk)}
.us-mp-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6)}
.us-mp{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line2);
}
.us-dunkel .us-mp{border-bottom-color:rgba(255,255,255,.1)}
.us-mp .name{font-size:16px;font-weight:500;color:var(--dk)}
.us-dunkel .us-mp .name{color:var(--ink-dk)}
.us-mp .was{font-size:13px;color:var(--mut);text-align:right;line-height:1.4}
.us-dunkel .us-mp .was{color:var(--mut-dk)}
@media (max-width:760px){.us-mp-liste{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   TERMIN — Calendly auf dunkler Flaeche. Das Widget bringt seinen
   eigenen weissen Grund mit, deshalb steht es als heller Kasten in
   der dunklen Sektion.
   ═══════════════════════════════════════════════════════════════ */
.us-termin{scroll-margin-top:0}
.us-termin-kopf{max-width:70ch;margin:0 0 clamp(var(--s6),5vw,4.5rem)}
.us-termin-meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.us-termin-meta span{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut-dk);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--mm-radius-pill);padding:8px 14px;
}
.us-wer{display:flex;align-items:center;gap:16px;margin-top:var(--s5)}
.us-wer img{
  width:56px;height:56px;border-radius:999px;object-fit:cover;
  border:2px solid rgba(255,255,255,.18);flex-shrink:0;
}
.us-wer p{font-size:15px;line-height:1.5;color:var(--ink2-dk);margin:0}
.us-wer p strong{color:#fff;font-weight:500}
.us-kalender{
  background:#fff;color:var(--ink);border-radius:var(--r);overflow:hidden;
  position:relative;min-height:720px;display:flex;flex-direction:column;
}
.us-kalender .calendly-inline-widget{flex:1 1 auto;min-height:720px;width:100%}
.us-kalender-platzhalter{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:40px;color:var(--mut);pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.us-termin-fuss{
  display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;
  margin-top:var(--s5);font-size:15px;color:var(--mut-dk);
}
.us-termin-fuss a{color:var(--ink2-dk);transition:color .2s var(--mm-ease)}
.us-termin-fuss a:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   QUERVERWEISE — die anderen Leistungen am Fuss der Seite.
   Verlaufs-Hover wie die Kacheln der Startseite, inklusive des grossen
   Eck-Zeichens: Ruhezustand -45 Grad, beim Hover auf 0.
   ═══════════════════════════════════════════════════════════════ */
/* Die Spaltenzahl richtet sich nach der Menge: solange erst drei der sechs
   Leistungs-Unterseiten existieren, bleiben auf einer Seite nur zwei
   Querverweise - in einem Dreierraster stuende daneben eine leere Spalte.
   :has() faellt auf das Dreierraster zurueck, wo es fehlt. */
.us-weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.us-weiter:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* 04.10.2026: seit der dritte Leistungspunkt (Listing, SEO & Brand) noch nicht
   gebaut ist, steht hier auf service/performance/ nur EINE Schwesterkachel.
   Ohne diese Zeile bekaeme sie ein Drittel der Breite und stuende verloren da. */
.us-weiter:has(> :first-child:last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.uw{
  background:var(--card);border-radius:var(--r);
  padding:var(--s6) var(--s5);
  min-height:clamp(190px,15vw,220px);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);
  position:relative;overflow:hidden;
  transition:transform .3s var(--mm-ease),box-shadow .3s var(--mm-ease);
}
.uw:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(87,41,160,.18)}
.uw::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--grad);opacity:0;
  transition:opacity .4s var(--mm-ease);z-index:0;
}
.uw:hover::before{opacity:1}
.uw > *{position:relative;z-index:1}
.uw h3{
  font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;
  color:var(--dk);margin:0;transition:color .4s var(--mm-ease);
}
.uw-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.uw p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0;max-width:26ch;transition:color .4s var(--mm-ease)}
.uw:hover h3,.uw:hover p{color:#fff}
/* Dasselbe Zeichen und dieselbe Kurve wie der Kreis im Ladebutton (--liquid) -
   daran erkennt man, dass es dieselbe Familie ist. */
.uw-pfeil{
  flex:0 0 auto;align-self:flex-end;
  width:clamp(34px,3vw,46px);height:clamp(34px,3vw,46px);
  color:var(--dk);transition:color .4s var(--mm-ease);
}
.uw-pfeil svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(-45deg);transition:transform var(--liquid);
}
.uw:hover .uw-pfeil{color:#fff}
.uw:hover .uw-pfeil svg{transform:rotate(0deg)}
.uw:focus-visible{outline:2px solid var(--pk);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.uw-pfeil svg{transition:none}}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — 1:1 aus index.html
   ═══════════════════════════════════════════════════════════════ */
.mm-footer{
  background:var(--grad);color:#fff;
  padding:clamp(80px,9vw,140px) var(--mm-pad-x) 40px;
  position:relative;overflow:hidden;
  border-top-left-radius:var(--r);
  border-top-right-radius:var(--r);
  min-height:780px;
  display:flex;flex-direction:column;
}
.mm-footer .footer-inner{flex:1;display:flex;flex-direction:column}
.mm-footer .footer-bottom{margin-top:auto}
.mm-footer::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.15), transparent 50%);
  pointer-events:none;
}
/* Filmkorn, damit die grosse Verlaufsflaeche nicht flach wirkt */
.mm-footer::after{
  content:'';position:absolute;inset:0;
  pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
.footer-inner{max-width:var(--mm-maxw);margin:0 auto;position:relative;z-index:1;width:100%}
.footer-top{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  margin-bottom:clamp(80px,12vw,160px);align-items:start;
}
.footer-logo img{width:350px;max-width:100%;height:auto;display:block}
.footer-contact{
  display:flex;flex-direction:column;gap:8px;
  font-size:clamp(28px,3.2vw,40px);font-weight:400;line-height:1.4;letter-spacing:-.01em;
}
.footer-contact a{color:#fff;transition:opacity .2s}
.footer-contact a:hover{opacity:.75}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  flex-wrap:wrap;gap:16px;opacity:.85;
}
.footer-legal{display:flex;gap:32px}
/* Wortmarke steht klein - nie Versalien (Brand Guidelines, Logo-Regeln) */
.footer-copy{text-transform:none;letter-spacing:.08em}
.footer-legal a:hover{opacity:.7}
.footer-credit{letter-spacing:.2em;font-weight:500}
@media (max-width:720px){
  .mm-footer{min-height:500px;padding:80px var(--mm-pad-x) 32px}
  .footer-top{grid-template-columns:1fr;gap:40px;margin-bottom:48px}
  .footer-logo img{width:250px}
  .footer-contact{font-size:23px;line-height:1.4}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-bottom > *{margin-top:10px;margin-bottom:10px}
  .footer-bottom > *:first-child{margin-top:0}
  .footer-bottom > *:last-child{margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════
   SEKTIONS-KANTEN (Regel 3.1)
   Zwei Hintergrundfarben stossen NIE als gerade Kante aneinander.
   Radius ist --r (16px) aus den Guidelines.
   ═══════════════════════════════════════════════════════════════ */
main > section{border-radius:0}
.us-hero{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
.us-dunkel{border-radius:var(--r)}

/* ═══════════════════════════════════════════════════════════════
   REVEAL — Texte faden beim Scrollen ein und schieben von unten hoch.
   --rd ist der Versatz: Geschwister einer Gruppe bekommen ihn per JS
   gestaffelt. will-change nur auf dem Weg dahin.
   Ohne JS wird .reveal gar nicht vergeben - die Seite ist also nie
   unsichtbar, wenn etwas schiefgeht.
   ═══════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--mm-ease),transform .8s var(--mm-ease);
  transition-delay:var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL — Breakpoints wie die Startseite: 1000 / 860 / 640 / 560
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .us-karten,.us-karten.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .us-weiter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .us-founder{grid-template-columns:1fr}
  .us-founder-bild{min-height:clamp(300px,58vw,420px)}
}
@media (max-width:860px){
  .us-hero-body{min-height:0;padding-top:clamp(120px,22vh,150px)}
  .us-wrap{padding-bottom:clamp(var(--s6),10vw,5rem)}
  .us-kopf{margin-bottom:var(--s6)}
  .us-schritt{grid-template-columns:1fr;gap:var(--s3)}
  .us-schritt .nr{padding-top:0}
}
@media (max-width:640px){
  .us-karten,.us-karten.zwei,.us-karten.vier{grid-template-columns:1fr}
  .us-weiter{grid-template-columns:1fr}
  .uk,.uw{min-height:0}
  .us-termin-fuss{flex-direction:column;gap:var(--s2)}
  /* Auf Touch gibt es kein Hover: das Zeichen bliebe sonst fuer immer
     diagonal und der Verlauf erschiene nie. Also waagerecht stellen. */
  .uw-pfeil svg{transform:rotate(0deg)}
}


/* ── Noch nicht verlinkte Leistung im Menue ──────────────────────────────
   Steht im Overlay mit, bekommt aber keinen Link, solange die Seite nicht
   existiert bzw. blind geschaltet ist.
   04.10.2026 abends (Banjo): das opacity:.45 ist RAUS - es lag ueber der
   Farbregel oben und machte die weissen Leistungen wieder grau. Genau das war
   nicht gewollt. Es bleibt nur der Mauszeiger, damit niemand draufklickt. */
.mm-ov-meta .noch-nicht{cursor:default}


/* ═══════════════════════════════════════════════════════════════════════════
   RECHTSTEXTE (.us-legal) — Impressum und Datenschutz (04.10.2026)

   Die beiden Rechtsseiten liefen bis hierher auf einer EIGENEN, veralteten
   Kopie des Designs: alte Kopfleiste mit Textlinks und Burger-Dropdown, eigene
   Token im <style>, kein Fullscreen-Menue. Sie haengen jetzt an derselben
   Datei wie die Leistungs-Unterseiten - eine Design-Aenderung trifft ab sofort
   alle Unterseiten gleichzeitig.

   Der Fliesstext ist bewusst SCHMAL (.us-wrap.schmal, 900px): Rechtstexte
   werden gelesen, nicht ueberflogen, und 110 Zeichen pro Zeile liest niemand.
   Kasten-Elemente (Adresse, Hinweis, Cookie-Tabelle) stehen als weisse Boxen
   auf dem Hellgrau - Box-in-Box wie ueberall sonst.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 04.10.2026 (Banjo): "Kacheln jeweils ueber die ganze Breite (innerhalb des
   Rahmens)." Die Kachel nimmt also die volle Rasterbreite (--mm-maxw abzueglich
   Seitenpolster), nicht mehr 72ch.
   Die ZEILE darf das nicht mitmachen - 1200px Fliesstext liest niemand. Deshalb
   ist die Breite jetzt am TEXT begrenzt statt an der Kachel (siehe
   .us-legal-kachel > p/ul/h*). Kastenelemente duerfen voll laufen: Adresse,
   Hinweis und Cookie-Tabelle sind Bloecke, keine Absaetze. */
.us-legal{max-width:none}
.us-legal > section{margin-bottom:clamp(var(--s7),9vw,8.5rem)}
.us-legal > section:last-child{margin-bottom:0}
/* Die Linie ueber jeder Hauptueberschrift ersetzt die Abschnittsnummerierung
   als Gliederung - beim Datenschutz mit 15 Abschnitten ist das der einzige
   Halt beim Scrollen. Der erste Abschnitt bekommt sie nicht, er steht schon
   unter dem Hero. */
.us-legal h2{
  font-weight:500;font-size:clamp(26px,2.6vw,36px);
  letter-spacing:-.022em;line-height:1.18;color:var(--ink);
  margin:0 0 var(--s5);padding-top:var(--s6);
  border-top:1px solid rgba(17,24,39,.12)}
.us-legal > section:first-child h2{border-top:none;padding-top:0}
.us-legal h3{
  font-weight:500;font-size:clamp(19px,1.6vw,23px);
  letter-spacing:-.012em;line-height:1.25;color:var(--ink);
  margin:var(--s6) 0 var(--s3)}
.us-legal h4{
  font-weight:500;font-size:clamp(16px,1.2vw,18px);line-height:1.4;
  color:var(--ink);margin:var(--s5) 0 var(--s2)}
.us-legal p{
  font-size:var(--t-body);line-height:1.62;color:var(--mm-body-gray);
  margin:0 0 var(--s3)}
.us-legal p:last-child{margin-bottom:0}
.us-legal strong{color:var(--ink);font-weight:500}
/* Link mit pinker Unterlaenge: auf einer Seite voller Paragraphen ist ein
   farbiges Wort zu laut, eine Unterlinie reicht. */
.us-legal a{
  color:var(--ink);border-bottom:1px solid rgba(232,28,134,.5);
  padding-bottom:1px;word-break:break-word;
  transition:border-color .2s var(--mm-ease)}
.us-legal a:hover{border-color:var(--og)}
.us-legal ul{
  margin:var(--s2) 0 var(--s4) var(--s4);
  font-size:var(--t-body);line-height:1.62;color:var(--mm-body-gray)}
.us-legal li{margin-bottom:var(--s2)}
.us-legal .addr{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rs);padding:var(--s4) var(--s5);
  font-size:var(--t-body);line-height:1.65;color:var(--ink);
  margin:var(--s2) 0 var(--s3)}
.us-legal .addr strong{display:block;margin-bottom:4px;font-weight:500}
.us-legal .emphasis{
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--pk);border-radius:var(--rs);
  padding:var(--s4) var(--s5);margin:var(--s3) 0;
  font-size:.95rem;line-height:1.58;color:var(--ink)}
.us-legal .cookie-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--rs);overflow:hidden;
  margin:var(--s3) 0 var(--s4);font-size:.95rem;text-align:left}
.us-legal .cookie-table th,
.us-legal .cookie-table td{
  padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.us-legal .cookie-table tr:last-child th,
.us-legal .cookie-table tr:last-child td{border-bottom:none}
.us-legal .cookie-table thead th{
  font-weight:500;color:var(--ink);background:rgba(17,24,39,.035);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.us-legal .cookie-table tbody td{color:var(--mm-body-gray)}
.us-legal .cookie-table tbody td strong{color:var(--ink)}
/* Stand-Zeile am Fuss des Datenschutzes. */
.us-legal .us-legal-stand{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(17,24,39,.12);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
@media (max-width:640px){
  .us-legal .cookie-table{font-size:13px}
  .us-legal .cookie-table th,
  .us-legal .cookie-table td{padding:10px 12px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   RECHTSTEXT IN WEISSEN KACHELN (.us-legal-kachel) — 04.10.2026

   Vierter und letzter Stand dieser beiden Seiten. Der Weg dahin, damit niemand
   eine Zwischenstufe fuer das Ziel haelt:
     1. heller Text unter dunklem Hero          -> Kopf ohne Koerper
     2. ganze Seite dunkel                      -> "doch wieder hell"
     3. helle Seite, DUNKLE Kacheln
     4. helle Seite, WEISSE Kacheln             <- das hier
   Banjo: "Impressum und Datenschutz Hintergrund hellgrau und alle Kacheln
   weiss." Damit stehen die Rechtsseiten auf demselben Box-in-Box-Muster wie
   der Rest der Seite: Hellgrau als Flaeche, weisse Karten darauf (.uk, .ak).

   Aus jeder Trennlinie des alten Rechtstexts ist eine Kachelkante geworden
   (Banjo: "ueberall da, wo eine Trennlinie ist, einfach eine neue Kachel
   drunter haengen") - die Gliederung liegt in der Form, nicht in einem Strich.

   Die Kachel traegt NICHT mehr .us-dunkel: sie ist hell, und der
   nav-hell-Detektor darf sie nicht fuer eine dunkle Insel halten. Die ganze
   Seite ist jetzt eine einzige helle Flaeche - die Kopfleiste steht
   durchgehend in ihrer dunklen Fassung.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Der Selektor steht bewusst mit dem Elternteil davor: .us-legal > section
   setzt weiter oben den grossen Abschnittsabstand der FRUEHEREN Fassung
   (ohne Kacheln, mit Trennlinien). Ein blosses .us-legal-kachel haette
   dagegen verloren - live sah das aus wie 90px Luft zwischen Kacheln, die
   12px haben sollten. */
.us-legal > .us-legal-kachel{
  background:var(--card);color:var(--ink);
  border-radius:var(--r);
  padding:var(--pad-box) var(--pad-box-x);
  margin:0 0 var(--s2)}
.us-legal > .us-legal-kachel:last-child{margin-bottom:0}
/* Die Linie ueber h2 ist ERSETZT durch die Kachelkante - beides zusammen waere
   ein Strich in einem Kasten. */
.us-legal-kachel h2{border-top:none;padding-top:0;margin-top:0}
.us-legal-kachel h3:first-child,
.us-legal-kachel h4:first-child{margin-top:0}
/* Lesebreite: die Kachel ist breit, die Zeile bleibt es nicht. */
.us-legal-kachel > h2,
.us-legal-kachel > h3,
.us-legal-kachel > h4,
.us-legal-kachel > p,
.us-legal-kachel > ul{max-width:78ch}
/* Box-in-Box: der Kasten IN der weissen Kachel ist HELLGRAU. Weiss auf weiss
   waere unsichtbar - das ist dieselbe Umkehr wie bei .uk auf der hellen
   Flaeche, nur eine Stufe weiter innen. */
.us-legal-kachel .addr,
.us-legal-kachel .emphasis,
.us-legal-kachel .cookie-table{
  background:var(--bg);border-color:rgba(17,24,39,.08)}
.us-legal-kachel .cookie-table thead th{background:rgba(17,24,39,.05)}

/* Die Ueberschrift der Rechtsseite steht UEBER den Kacheln auf der hellen
   Flaeche und in NORMALER Gross-/Kleinschreibung (Banjo 04.10.2026) - die
   Regel "grosse Headlines klein schreiben" gilt fuer Marketing-Headlines,
   nicht fuer "Impressum". Punkt am Ende ebenfalls raus. */
.us-legal-titel{text-transform:none}

/* ---- Kontakt als Knoepfe statt als Zeilen (Banjo 04.10.2026). Derselbe
   Ladebutton wie auf der Startseite, hier in der DUNKLEN Grundfassung:
   .lade.hell waere eine weisse Pille auf einer weissen Kachel. ---- */
.us-legal-knoepfe{
  display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s3) 0 0}