/* ===== Mobile Navigationen zur Auswahl (mobilnav.py): gemeinsames Grundgerüst ===== */
.mn { display: none; }
@media (max-width: 900px) { html[data-mnav="schublade"] .mn-schublade, html[data-mnav="karte"] .mn-karte, html[data-mnav="ebenen"] .mn-ebenen, html[data-mnav="blatt"] .mn-blatt { display: block; } }
html:not([data-mnav="liste"]) .s-mobil { display: none !important; }
/* Burger wird zum Kreuz wie beim bisherigen Menü; jede Variante darf ihn unter html[data-mnav="<name>"] eigens gestalten */
.s-kopf.z-mnav .s-burger span:nth-child(1) { translate: 0 3.5px; rotate: 45deg; }
.s-kopf.z-mnav .s-burger span:nth-child(2) { translate: 0 -3.5px; rotate: -45deg; }
/* in den Rahmen der Übersicht keine lokalen Umschalter */
html[data-im-rahmen] :is(.pf-kopf-schalter, .pf-cstufen) { display: none !important; }
html.z-mnav-auf :is(.pf-kopf-schalter, .pf-cstufen) { display: none !important; }   /* lokale Umschalter nicht über dem offenen Menü */
/* ===== Variante «schublade» (mnav_schublade.py) ===== */
html[data-mnav="schublade"] {
  --mn-sb-w: min(86vw, 26rem);          /* Breite der Schublade */
  --mn-sb-s: .9;                        /* so klein wird die Seite */
  --mn-sb-x: -6px;                      /* so weit rückt sie nach links */
  --mn-sb-r: 28px;                      /* Rundung von Schublade und Seitenkarte */
  --mn-sb-feder: cubic-bezier(.32, .72, 0, 1);
  --mn-sb-zu: cubic-bezier(.4, 0, .2, 1);
  --mn-sb-grund: #0b1d2b;
  --mn-sb-blatt: var(--papier);
}
html[data-mnav="schublade"][data-thema="dunkel"] { --mn-sb-grund: #1a3145; --mn-sb-blatt: #0f1e2a; }
/* Symbolkreis und Abstand als Masse, damit «Alle …» immer bündig unter den Eintragstiteln steht */
html[data-mnav="schublade"] { --mn-sb-ico-b: 2.25rem; --mn-sb-ico-l: .85rem; }
@media (max-height: 759px) { html[data-mnav="schublade"] { --mn-sb-ico-b: 2.125rem; } }
/* sehr schmale Handys (320 px): engere Abstände und etwas kleinere Schrift, damit lange Wörter wie «Prozessmanagement» Platz haben */
@media (max-width: 359px) { html[data-mnav="schublade"] { --mn-sb-luecke: .625rem; --mn-sb-ico-l: .7rem; } }

/* --- Seite weicht zurück: Kopf hebt sich über die Schublade, nur der Burger bleibt bedienbar --- */
/* Kopffläche bleibt durchsichtig, bis die Seite wieder ganz an ihrem Platz ist (sonst liegt beim Schliessen eine halbdurchsichtige
   Fläche ohne Unschärfe über der Karte und Text scheint hinter dem Logo durch); danach blendet sie über die Seiten-Transition ein */
html[data-mnav="schublade"]:is(.z-mnav-auf, .mn-sb-tief) .s-kopf { z-index: 60; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: transparent; box-shadow: none; }
html[data-mnav="schublade"]:is(.z-mnav-auf, .mn-sb-tief) .s-kopf .s-burger { pointer-events: auto; }
html[data-mnav="schublade"] .s-kopf .s-kopf-zeile > .s-logo { transition: opacity 260ms ease 460ms, translate 420ms var(--mn-sb-zu) 300ms, visibility 0s; }   /* kommt mit der Kopffläche zurück, wenn die Seite wieder an ihrem Platz ist */
html[data-mnav="schublade"].z-mnav-auf .s-kopf .s-kopf-zeile > .s-logo { opacity: 0; translate: -10px 0; visibility: hidden;
  transition: opacity 160ms ease, translate 420ms var(--mn-sb-feder), visibility 0s linear 160ms; }
html[data-mnav="schublade"]:is(.z-mnav-auf, .mn-sb-tief) .s-kopf-fortschritt { opacity: 0; }
/* Burger: im offenen Zustand ein Kreuz in einem ruhigen Kreis */
html[data-mnav="schublade"] .s-kopf .s-burger { border-radius: 50%; transition: background-color 300ms ease, box-shadow 300ms ease; }
html[data-mnav="schublade"] .s-kopf.z-mnav .s-burger { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
html[data-mnav="schublade"] .s-kopf .s-burger:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Seite als Karte: Drehpunkt und Ausschnitt setzt das Skript (Fenstermitte bzw. sichtbares Fenster je Element) */
html[data-mnav="schublade"].mn-sb-tief :is(main, .s-fuss) {
  transform-origin: var(--mn-sb-ox, 50%) var(--mn-sb-oy, 50%);
  clip-path: inset(var(--mn-sb-ct, 0px) 0 var(--mn-sb-cb, 0px) 0 round 0px);
  will-change: translate, scale;
  transition: translate 440ms var(--mn-sb-zu), scale 440ms var(--mn-sb-zu), clip-path 440ms var(--mn-sb-zu); }
html[data-mnav="schublade"].mn-sb-tief.mn-sb-auf :is(main, .s-fuss) {
  translate: var(--mn-sb-x) 0; scale: var(--mn-sb-s);
  clip-path: inset(var(--mn-sb-ct, 0px) 0 var(--mn-sb-cb, 0px) 0 round var(--mn-sb-r));
  transition: translate 680ms var(--mn-sb-feder), scale 680ms var(--mn-sb-feder), clip-path 680ms var(--mn-sb-feder); }
html[data-mnav="schublade"].mn-sb-tief.mn-sb-wisch :is(main, .s-fuss) { transition-duration: 340ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
html[data-mnav="schublade"].mn-sb-zieht :is(main, .s-fuss) { transition: none; }
/* eigene Fläche für die Dauer des Effekts (die Abschnitte sind sonst durchsichtig); Raster deckungsgleich mit body */
html[data-mnav="schublade"].mn-sb-tief main::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--mn-sb-vor, 0px));
  background: radial-gradient(circle at center, var(--punkt) .7px, transparent 1.1px) center top / var(--punkt-abstand) var(--punkt-abstand), var(--papier); pointer-events: none; }
html[data-mnav="schublade"].mn-sb-tief .s-fuss { background: radial-gradient(circle at center, var(--punkt) .7px, transparent 1.1px) center var(--mn-sb-by, 0px) / var(--punkt-abstand) var(--punkt-abstand), var(--papier); }

/* --- Ebenen der Schublade (die nav selbst bleibt ohne Stapelkontext, damit der Grund unter die Seite kommt) --- */
.mn-schublade .mn-sb-grund { position: fixed; inset: 0; z-index: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(70% 45% at 0% 100%, rgb(83 193 170 / .22), transparent 70%), radial-gradient(60% 40% at 0% 0%, rgb(137 170 239 / .18), transparent 70%), var(--mn-sb-grund); }
html[data-mnav="schublade"].mn-sb-tief .mn-schublade .mn-sb-grund { visibility: visible; }
.mn-schublade .mn-sb-schleier { position: fixed; inset: 0; z-index: 30; background: rgb(4 13 20 / .42); opacity: 0; visibility: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity 380ms ease, visibility 0s linear 380ms; }
.mn-schublade.z-auf .mn-sb-schleier { opacity: 1; visibility: visible; transition: opacity 460ms ease, visibility 0s; }
html[data-mnav="schublade"].mn-sb-zieht .mn-schublade .mn-sb-schleier { transition: none; }

.mn-schublade .mn-sb-lade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: var(--mn-sb-w);
  display: grid; grid-template-rows: var(--mn-sb-kh, var(--kopf-h)) minmax(0, 1fr) auto; overflow: clip; isolation: isolate;
  border-radius: var(--mn-sb-r) 0 0 var(--mn-sb-r); color: var(--tinte); font-family: var(--font);
  background: radial-gradient(circle at center, var(--punkt) .7px, transparent 1.1px) 0 0 / var(--punkt-abstand) var(--punkt-abstand), var(--mn-sb-blatt);
  box-shadow: -30px 0 70px -20px rgb(2 10 16 / .45), -1px 0 0 rgb(11 29 43 / .05);
  touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
  translate: calc(100% + 80px) 0; visibility: hidden; transition: translate 400ms var(--mn-sb-zu), visibility 0s linear 400ms; }
.mn-schublade.z-auf .mn-sb-lade { translate: 0 0; visibility: visible; transition: translate 600ms var(--mn-sb-feder), visibility 0s; }
html[data-mnav="schublade"].mn-sb-wisch .mn-schublade .mn-sb-lade { transition-duration: 300ms, 0s; transition-delay: 0s, 300ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1), linear; }
html[data-mnav="schublade"].mn-sb-zieht .mn-schublade .mn-sb-lade { transition: none; cursor: grabbing; }

/* weiche Farbwolke hinter dem Fuss: steigt bis zur Kontakt-Pille, damit die Luft über dem Fuss gewollt wirkt */
.mn-schublade .mn-sb-wolke { position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -12%; height: 54%; pointer-events: none; filter: blur(30px);
  background: radial-gradient(34% 40% at 28% 66%, rgb(83 193 170 / .52), transparent 70%), radial-gradient(30% 38% at 62% 76%, rgb(177 157 231 / .4), transparent 70%),
    radial-gradient(34% 36% at 86% 46%, rgb(137 170 239 / .38), transparent 70%), radial-gradient(40% 30% at 50% 40%, rgb(145 232 242 / .22), transparent 72%);
  opacity: 0; translate: 0 2.5rem; transition: opacity 300ms ease, translate 0s linear 300ms; }
.mn-schublade.z-auf .mn-sb-wolke { opacity: 1; translate: 0 0; transition: opacity 900ms ease 160ms, translate 1100ms var(--mn-sb-feder) 120ms; }

/* Kopfzeile: Logo links auf Höhe des Seitenlogos, rechts steht das Kreuz des Seitenkopfs */
.mn-schublade .mn-sb-kopf { display: flex; align-items: center; padding-inline: 1.75rem max(1.25rem, env(safe-area-inset-right)); }
.mn-schublade .mn-sb-logo { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: .5rem; }
.mn-schublade .mn-sb-logo svg { width: 6.75rem; height: auto; }
.mn-schublade .mn-sb-logo:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }

/* Mitte: scrollt nur, wenn es nicht reicht */
.mn-schublade .mn-sb-mitte { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; scrollbar-width: thin; }
.mn-schublade .mn-sb-mitte.z-mehr { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent); }
.mn-schublade .mn-sb-gruppen { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem;
  padding: .25rem max(.75rem, env(safe-area-inset-right)) 1.5rem .75rem; }

/* Gruppe: Ton je Gruppe, offene Gruppe als Pastell-Kachel */
.mn-schublade .mn-sb-mint { --mn-sb-kr: var(--g-mint-kraeftig); --mn-sb-ti: var(--g-mint-tief); --mn-sb-pa: var(--g-mint-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, color-mix(in oklch, var(--g-mint-pastell) 58%, #fff) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, color-mix(in oklch, var(--g-blau-pastell) 48%, #fff) 0%, transparent 66%), #f2f8fa; }
.mn-schublade .mn-sb-tuerkis { --mn-sb-kr: var(--g-tuerkis-kraeftig); --mn-sb-ti: var(--g-tuerkis-tief); --mn-sb-pa: var(--g-tuerkis-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, color-mix(in oklch, var(--g-tuerkis-pastell) 56%, #fff) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, color-mix(in oklch, var(--g-himmel-pastell) 50%, #fff) 0%, transparent 66%), #f1f8fb; }
.mn-schublade .mn-sb-blau { --mn-sb-kr: var(--g-blau-kraeftig); --mn-sb-ti: var(--g-blau-tief); --mn-sb-pa: var(--g-blau-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, color-mix(in oklch, var(--g-blau-pastell) 58%, #fff) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, color-mix(in oklch, var(--g-violett-pastell) 52%, #fff) 0%, transparent 66%), #f4f6fc; }
.mn-schublade .mn-sb-gruppe { position: relative; min-width: 0; border-radius: 1.5rem; }
/* Kachel der offenen Gruppe: liegt in der Gruppe, wächst und schrumpft also genau mit ihr, und blendet im Ton der Gruppe ein */
.mn-schublade .mn-sb-gruppe::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mn-sb-kachel); pointer-events: none;
  opacity: 0; scale: .97; transition: opacity 240ms ease, scale 360ms var(--mn-sb-zu); }
.mn-schublade .mn-sb-gruppe.z-offen::before { opacity: 1; scale: 1; transition: opacity 380ms ease, scale 560ms var(--mn-sb-feder); }
.mn-schublade .mn-sb-h { margin: 0; font: inherit; }
.mn-schublade .mn-sb-schalter { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--mn-sb-luecke, .75rem); width: 100%; min-height: 3.5rem;
  padding: .5rem .5rem .5rem 1rem; border-radius: 1.5rem; cursor: pointer; color: var(--tinte); -webkit-tap-highlight-color: transparent;
  font: 500 min(1.3125rem, 5.4vw)/1.2 var(--font); letter-spacing: -.018em; }   /* auf 320 px etwas kleiner, sonst ragt «Dienstleistungen» aus der Schublade */
.mn-schublade .mn-sb-schalter:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.mn-schublade .mn-sb-titel { flex: 1; min-width: 0; white-space: nowrap; }
.mn-schublade .mn-sb-form { flex: none; width: 1rem; height: 1rem; overflow: visible; fill: transparent; stroke: var(--mn-sb-kr); stroke-width: 9; stroke-linejoin: round;
  transition: fill 240ms ease; }
.mn-schublade .mn-sb-schalter[aria-expanded="true"] .mn-sb-form { fill: var(--mn-sb-kr); animation: mn-sb-passt 520ms var(--mn-sb-feder); }
@keyframes mn-sb-passt { 35% { scale: 1.28; } }
.mn-schublade .mn-sb-winkel { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); transition: background-color 300ms ease, box-shadow 300ms ease; }
.mn-schublade .mn-sb-winkel svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: rotate 380ms var(--mn-sb-feder); }
.mn-schublade .mn-sb-schalter[aria-expanded="true"] .mn-sb-winkel { background: #fff; box-shadow: 0 1px 2px rgb(11 29 43 / .08); }
.mn-schublade .mn-sb-schalter[aria-expanded="true"] .mn-sb-winkel svg { rotate: 180deg; }
/* Punkt am Gruppentitel: hier liegt die aktuelle Seite */
.mn-schublade .mn-sb-gruppe.z-hier .mn-sb-titel::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .45rem; vertical-align: .3em;
  border-radius: 50%; background: var(--mn-sb-kr); }

/* Inhalt: Höhe gleitet auf (0fr → 1fr), zu = nicht erreichbar */
.mn-schublade .mn-sb-inhalt { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 360ms var(--mn-sb-zu), visibility 0s linear 360ms; }
.mn-schublade .mn-sb-gruppe.z-offen > .mn-sb-inhalt { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 520ms var(--mn-sb-feder), visibility 0s; }
.mn-schublade .mn-sb-inhalt > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 160ms ease; }   /* beim Zuklappen erst ausblenden */
.mn-schublade .mn-sb-gruppe.z-offen > .mn-sb-inhalt > div { opacity: 1; transition: opacity 100ms ease; }
.mn-schublade .mn-sb-liste { margin: 0; padding: 0 .5rem; list-style: none; }
.mn-schublade .mn-sb-gruppe.z-offen :is(.mn-sb-liste li, .mn-sb-alle) { animation: mn-sb-zeile 460ms var(--mn-sb-feder) both; animation-delay: calc(70ms + var(--j, 0) * 35ms); }
@keyframes mn-sb-zeile { from { opacity: 0; translate: 0 -.4rem; } }
.mn-schublade .mn-sb-liste a { position: relative; display: flex; align-items: center; gap: var(--mn-sb-ico-l); min-height: 3rem; padding: .375rem 1.5rem .375rem .5rem;
  border-radius: 1rem; color: var(--tinte); -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease, box-shadow 200ms ease; }
.mn-schublade .mn-sb-ico { flex: none; display: grid; place-items: center; width: var(--mn-sb-ico-b); height: var(--mn-sb-ico-b); padding: .5rem; border-radius: 50%;
  background: #fff; color: var(--mn-sb-ti); box-shadow: 0 1px 2px rgb(11 29 43 / .07); transition: background-color 200ms ease; }
.mn-schublade .mn-sb-ico svg { width: 100%; height: 100%; }
.mn-schublade .me-ico, .mn-schublade .me-ico * { animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }   /* wie im Dropdown: Symbole ruhig */
.mn-schublade .mn-sb-text { display: grid; gap: .1rem; min-width: 0; }
.mn-schublade .mn-sb-text b { font-weight: 500; font-size: min(1rem, 4.6vw); line-height: 1.3; letter-spacing: -.005em; -webkit-hyphens: auto; hyphens: auto; }
.mn-schublade .mn-sb-kurz { display: none; font-size: .8125rem; line-height: 1.4; color: var(--grau); }
.mn-schublade .mn-sb-liste a:focus-visible, .mn-schublade .mn-sb-alle:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
@media (hover: hover) { .mn-schublade .mn-sb-liste a:hover { background: rgb(255 255 255 / .6); } .mn-schublade .mn-sb-schalter:hover .mn-sb-winkel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mn-sb-kr) 55%, transparent); } }
/* aktuelle Seite: hell hinterlegt, Symbolkreis in Pastell, Punkt rechts */
.mn-schublade .mn-sb-liste a[aria-current="page"] { background: rgb(255 255 255 / .82); box-shadow: 0 1px 2px rgb(11 29 43 / .06), 0 6px 16px -10px rgb(11 29 43 / .25); }
.mn-schublade .mn-sb-liste a[aria-current="page"] .mn-sb-ico { background: var(--mn-sb-pa); color: var(--tinte); box-shadow: none; }
.mn-schublade .mn-sb-liste a[aria-current="page"]::after { content: ""; position: absolute; right: .7rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; border-radius: 50%; background: var(--mn-sb-ti); }
.mn-schublade .mn-sb-alle { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin: 0 .5rem .5rem; padding: 0 .5rem 0 calc(.5rem + var(--mn-sb-ico-b) + var(--mn-sb-ico-l)); border-radius: 1rem; white-space: nowrap;
  font: 500 min(.9375rem, 4.4vw)/1.2 var(--font); color: var(--mn-sb-ti); }
.mn-schublade .mn-sb-alle[aria-current="page"] { background: rgb(255 255 255 / .82); }
.mn-schublade .mn-sb-alle:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.mn-schublade .mn-sb-alle:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }

/* Fuss: Kontakt und direkte Wege */
.mn-schublade .mn-sb-fuss { display: grid; gap: .25rem; padding: .75rem max(1.25rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) 1.25rem; }
.mn-schublade .mn-sb-kontakt { justify-content: center; width: 100%; padding-block: 1rem; font-size: 1rem; }
.mn-schublade .mn-sb-kontakt:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.mn-schublade .mn-sb-kontakt[aria-current="page"] { box-shadow: 0 0 0 3px var(--mn-sb-blatt), 0 0 0 4.5px var(--g-mint-kraeftig); }
.mn-schublade .mn-sb-direkt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin: 0; padding-inline: .5rem; }
.mn-schublade .mn-sb-direkt a { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: .4rem; font-size: .875rem;
  color: color-mix(in srgb, var(--grau) 70%, var(--tinte)); transition: color 200ms ease; }   /* etwas dunkler als Grau: liegt auf der Farbwolke (AA) */
.mn-schublade .mn-sb-direkt a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (hover: hover) { .mn-schublade .mn-sb-direkt a:hover { color: var(--tinte); } }

/* gestaffeltes Einblenden beim Öffnen (nicht beim Schliessen) */
.mn-schublade.z-auf :is(.mn-sb-logo, .mn-sb-gruppe, .mn-sb-fuss) { animation: mn-sb-rein 700ms var(--mn-sb-feder) both; animation-delay: calc(90ms + var(--i, 0) * 50ms); }
@keyframes mn-sb-rein { from { opacity: 0; translate: 2.25rem 0; } }

/* hohe Fenster: mehr Luft zwischen den Zeilen */
@media (min-height: 760px) {
  .mn-schublade .mn-sb-gruppen { gap: .375rem; }
  .mn-schublade .mn-sb-schalter { min-height: 3.75rem; }
  .mn-schublade .mn-sb-liste a { min-height: 3.25rem; }
}
/* mittlere Höhen (z. B. 375 × 667): dichter (Tippflächen bleiben 44 px), damit auch bei offenen «Branchen» alle drei Gruppen sichtbar sind */
@media (max-height: 759px) {
  .mn-schublade .mn-sb-gruppen { padding-bottom: .25rem; }
  .mn-schublade .mn-sb-schalter { min-height: 3rem; }
  .mn-schublade .mn-sb-liste a { min-height: 2.75rem; padding-block: .25rem; }
  .mn-schublade .mn-sb-alle { margin-bottom: .25rem; }
  .mn-schublade .mn-sb-fuss { gap: 0; padding-top: .5rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .mn-schublade .mn-sb-kontakt { padding-block: .875rem; }
}
/* breite und hohe Fenster (Tablet): Kurztexte dazu */
@media (min-width: 560px) and (min-height: 820px) {
  .mn-schublade .mn-sb-kurz { display: block; }
  .mn-schublade .mn-sb-liste a { align-items: flex-start; padding-block: .6rem; }
  .mn-schublade .mn-sb-ico { margin-top: .1rem; }
}
/* niedrige Fenster (Querformat, kleine Handys, 360 × 640): die ganze Schublade scrollt, der Fuss läuft mit; so bleiben alle drei Gruppen sichtbar */
@media (max-height: 659px) {
  .mn-schublade .mn-sb-lade { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }   /* x: die Wolke ragt seitlich hinaus */
  /* Kopfzeile bleibt stehen: sonst läuft der Inhalt unter das Kreuz, und ein Tipp auf einen Gruppen-Pfeil träfe das Kreuz */
  .mn-schublade .mn-sb-lade { scroll-padding-top: var(--mn-sb-kh, var(--kopf-h)); }
  .mn-schublade .mn-sb-kopf { position: sticky; top: 0; z-index: 2; height: var(--mn-sb-kh, var(--kopf-h));
    background: radial-gradient(circle at center, var(--punkt) .7px, transparent 1.1px) 0 0 / var(--punkt-abstand) var(--punkt-abstand), var(--mn-sb-blatt); }   /* Raster deckungsgleich mit der Lade */
  .mn-schublade .mn-sb-mitte { overflow: visible; }
  .mn-schublade .mn-sb-mitte.z-mehr { -webkit-mask-image: none; mask-image: none; }
  .mn-schublade .mn-sb-gruppen { padding-bottom: .5rem; }
  .mn-schublade .mn-sb-wolke { position: absolute; bottom: auto; top: 55%; height: 60%; left: 0; right: 0; }
}

/* Dunkel: dunkle Flächen statt Weiss */
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-lade { color: var(--text-hell); box-shadow: -30px 0 70px -20px rgb(0 0 0 / .7), -1px 0 0 rgb(255 255 255 / .06); }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-schleier { background: rgb(0 4 8 / .26); }   /* die dunkle Seite soll als Karte lesbar bleiben, nicht schwarz */
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade :is(.mn-sb-schalter, .mn-sb-liste a) { color: var(--text-hell); }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-mint { --mn-sb-ti: var(--g-mint-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, rgb(83 193 170 / .2) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, rgb(137 170 239 / .14) 0%, transparent 66%), #13263a; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-tuerkis { --mn-sb-ti: var(--g-tuerkis-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, rgb(69 190 203 / .2) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, rgb(96 182 228 / .15) 0%, transparent 66%), #13263a; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-blau { --mn-sb-ti: var(--g-blau-pastell);
  --mn-sb-kachel: radial-gradient(120% 80% at 0% 100%, rgb(137 170 239 / .2) 0%, transparent 62%), radial-gradient(110% 70% at 100% 0%, rgb(177 157 231 / .16) 0%, transparent 66%), #14243a; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-winkel { background: #16283a; box-shadow: inset 0 0 0 1px var(--linie); }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-schalter[aria-expanded="true"] .mn-sb-winkel { background: rgb(255 255 255 / .1); box-shadow: none; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-ico { background: rgb(255 255 255 / .08); box-shadow: none; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade :is(.mn-sb-liste a[aria-current="page"], .mn-sb-alle[aria-current="page"]) { background: rgb(255 255 255 / .1); box-shadow: none; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-liste a[aria-current="page"] .mn-sb-ico { background: color-mix(in srgb, var(--mn-sb-kr) 40%, transparent); color: var(--text-hell); }
@media (hover: hover) { html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-liste a:hover { background: rgb(255 255 255 / .06); } }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-wolke { opacity: 0; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade.z-auf .mn-sb-wolke { opacity: .55; }
html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-direkt a { color: var(--grau); }
@media (hover: hover) { html[data-mnav="schublade"][data-thema="dunkel"] .mn-schublade .mn-sb-direkt a:hover { color: var(--text-hell); } }
html[data-mnav="schublade"][data-thema="dunkel"] .s-kopf.z-mnav .s-burger { background: #16283a; box-shadow: inset 0 0 0 1px var(--linie); }

/* Bewegung reduzieren: nichts fährt, nichts weicht zurück, nur Ein- und Ausblenden */
@media (prefers-reduced-motion: reduce) {
  .mn-schublade .mn-sb-lade { translate: none; opacity: 0; transition: opacity 220ms ease, visibility 0s linear 220ms; }
  .mn-schublade.z-auf .mn-sb-lade { opacity: 1; transition: opacity 220ms ease, visibility 0s; }
  html[data-mnav="schublade"].mn-sb-tief :is(main, .s-fuss) { translate: none !important; scale: none !important; clip-path: none !important; transition: none !important; will-change: auto; }
  html[data-mnav="schublade"].mn-sb-tief main::before { content: none; }
  html[data-mnav="schublade"].mn-sb-tief .s-fuss { background: none; }
  html[data-mnav="schublade"].mn-sb-tief .mn-schublade .mn-sb-grund { visibility: hidden; }
  .mn-schublade .mn-sb-schleier, .mn-schublade.z-auf .mn-sb-schleier { transition-duration: 220ms, 0s; }
  .mn-schublade :is(.mn-sb-logo, .mn-sb-gruppe, .mn-sb-fuss, .mn-sb-liste li, .mn-sb-alle, .mn-sb-form) { animation: none !important; }
  .mn-schublade :is(.mn-sb-inhalt, .mn-sb-winkel svg, .mn-sb-wolke) { transition-property: opacity, visibility !important; transition-duration: 0s !important; translate: none; scale: none; }
  .mn-schublade .mn-sb-gruppe::before { scale: none; transition: opacity 160ms ease; }
  html[data-mnav="schublade"] .s-kopf .s-kopf-zeile > .s-logo { translate: none !important; transition: opacity 200ms ease 220ms, visibility 0s; }
}
/* ===== Variante «karte» (mnav_karte.py) ===== */
/* Ebene und Farben der Karte; dunkel über html[data-mnav="karte"][data-thema="dunkel"] */
.mn-karte { --ka-rand: 8px; --ka-radius: 28px; --ka-pad: 16px; --ka-auf: cubic-bezier(.2, .8, .2, 1); --ka-wachsen: cubic-bezier(.3, .75, .1, 1); --ka-zu: cubic-bezier(.4, 0, .2, 1);
  --ka-bg: #fff; --ka-sockel: #f2f6f9; --ka-text: var(--tinte); --ka-leise: var(--grau); --ka-akzent: var(--g-mint-tief);
  --ka-pille: #f2f6f9; --ka-pille-hover: #e7eef3; --ka-ico-bg: rgb(255 255 255 / .8); --ka-kachel-grund: #f5f8fb;
  --ka-schleier: rgb(11 29 43 / .3); --ka-schatten: rgb(11 29 43 / .22); --ka-wolke: color-mix(in oklch, var(--g-mint-wolke) 80%, transparent);
  position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; transition: visibility 0s linear 480ms;
  font-family: var(--font); color: var(--ka-text); -webkit-tap-highlight-color: transparent; }
.mn-karte.z-auf { visibility: visible; pointer-events: auto; transition: visibility 0s; }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte { --ka-bg: #0f1e2a; --ka-sockel: #16283a; --ka-text: var(--text-hell); --ka-akzent: var(--mint);
  --ka-pille: #16283a; --ka-pille-hover: #1d3346; --ka-ico-bg: rgb(255 255 255 / .1); --ka-kachel-grund: #132434;
  --ka-schleier: rgb(2 8 14 / .58); --ka-schatten: rgb(0 0 0 / .55); --ka-wolke: rgb(83 193 170 / .12); }
.mn-karte :is(ul, h2, p) { margin: 0; padding: 0; list-style: none; }
.mn-karte a { color: inherit; text-decoration: none; -webkit-user-drag: none; }
.mn-karte .mn-ka-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Schleier: Seite weich abgedunkelt und leicht unscharf; Tipp schliesst */
.mn-karte .mn-ka-schleier { position: absolute; inset: 0; background: var(--ka-schleier); -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15);
  opacity: 0; transition: opacity 360ms ease 60ms; touch-action: pinch-zoom; }
.mn-karte.z-auf .mn-ka-schleier { opacity: 1; transition: opacity 420ms ease; }

/* Karte: wächst per clip-path aus dem Burger (Ursprung --ka-t/r/b/l misst das Skript); Schatten auf der Hülle, damit clip-path ihn nicht abschneidet */
.mn-karte .mn-ka-karte { position: absolute; top: max(var(--ka-rand), env(safe-area-inset-top)); right: max(var(--ka-rand), env(safe-area-inset-right));
  width: min(100% - 2 * var(--ka-rand) - env(safe-area-inset-left) - env(safe-area-inset-right), 26rem);
  max-height: calc(100% - 2 * var(--ka-rand) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column; isolation: isolate;
  opacity: 0; translate: 0 var(--ka-zy, 0px);
  transition: opacity 140ms ease 330ms, translate 440ms var(--ka-zu); }
.mn-karte.z-auf .mn-ka-karte { opacity: 1; transition: opacity 120ms ease, translate 520ms var(--ka-auf); }
/* Schatten als eigene Ebene (kein filter: drop-shadow auf der wachsenden Fläche, das halbiert auf schwachen Handys den Bildtakt):
   er erscheint, wenn die Karte fast ausgewachsen ist – sie «landet» und schwebt; beim Schliessen geht er zuerst */
.mn-karte .mn-ka-karte::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--ka-radius); pointer-events: none;
  box-shadow: 0 30px 60px -18px var(--ka-schatten), 0 4px 12px rgb(11 29 43 / .08); opacity: 0; transition: opacity 120ms ease; }
.mn-karte.z-auf .mn-ka-karte::before { opacity: 1; transition: opacity 380ms ease 300ms; }
.mn-karte .mn-ka-karte.z-zieht { transition: none; user-select: none; -webkit-user-select: none; }
.mn-karte .mn-ka-karte:not(.z-rollt), .mn-karte .mn-ka-kopf { touch-action: pinch-zoom; }   /* Wischen nach oben ohne Seitenrollen */
.mn-karte .mn-ka-flaeche { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: hidden; border-radius: var(--ka-radius);
  background: radial-gradient(70% 150px at 100% 0%, var(--ka-wolke), transparent 72%) no-repeat, var(--ka-bg);
  clip-path: inset(var(--ka-t, 14px) var(--ka-r, 6px) var(--ka-b, calc(100% - 58px)) var(--ka-l, calc(100% - 50px)) round var(--ka-rad, 22px));
  transition: clip-path 440ms var(--ka-zu); }
.mn-karte.z-auf .mn-ka-flaeche { clip-path: inset(0 0 0 0 round var(--ka-radius)); transition: clip-path 640ms var(--ka-wachsen); }

/* Kopfzeile der Karte: Logo genau dort, wo es im Seitenkopf steht; rechts Platz für das Kreuz */
.mn-karte .mn-ka-kopf { flex: none; display: flex; align-items: center; height: calc(var(--kopf-h, 5.5rem) - 2 * var(--ka-rand)); padding: 0 64px 0 calc(1.5rem - var(--ka-rand));
  transition: box-shadow 200ms ease; }
.mn-karte .mn-ka-karte.z-gerollt .mn-ka-kopf { box-shadow: 0 1px 0 var(--linie); }
.mn-karte .mn-ka-logo { display: inline-flex; align-items: center; min-height: 44px; color: #4ab79e; border-radius: 8px; }
.mn-karte .mn-ka-logo svg { width: 7.5rem; height: auto; }
.mn-karte .mn-ka-roll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: var(--ka-rand); }
.mn-karte .mn-ka-roll::-webkit-scrollbar { display: none; }

/* Gruppen */
.mn-karte .mn-ka-gruppe { padding: 0 var(--ka-pad); }
.mn-karte .mn-ka-gruppe + .mn-ka-gruppe { margin-top: 14px; }
.mn-karte .mn-ka-zeile { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 4px; }
.mn-karte .mn-ka-titel { font: 500 .8125rem/1.2 var(--font); letter-spacing: .005em; color: var(--ka-leise); }
.mn-karte .mn-ka-alle { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin: -4px -10px -4px 0; padding: 0 10px;
  border-radius: 999px; font: 500 .8125rem/1 var(--font); color: var(--ka-akzent); }
/* aktuelle Seite = Übersicht (Alle Dienstleistungen / Alle Branchen): kleine Pille mit Ring wie die übrigen Markierungen,
   bündig mit der rechten Kante der Kacheln */
.mn-karte .mn-ka-alle[aria-current="page"] { margin-right: 0; }
.mn-karte .mn-ka-alle[aria-current="page"]::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 999px;
  background: var(--g-mint-wolke); box-shadow: inset 0 0 0 2px var(--ka-akzent); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-alle[aria-current="page"]::before { background: rgb(83 193 170 / .16); }

/* Dienstleistungen: Pastell-Kacheln mit Symbol, Titel und einer Passform-Form in der Ecke */
.mn-karte .mn-ka-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-karte .mn-ka-kachel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  height: 100%; min-height: 100px; padding: 12px 14px 13px 12px; border-radius: 18px; color: var(--ka-text);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, var(--ton-p) 60%, #fff) 0%, transparent 62%),
    radial-gradient(110% 100% at 0% 100%, var(--ton-w), transparent 70%), var(--ka-kachel-grund);
  transition: scale 160ms ease; }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-flaeche { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-kachel {
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ton-k) 26%, transparent) 0%, transparent 62%), var(--ka-kachel-grund); }
.mn-karte .mn-ka-kachel:active { scale: .97; }
.mn-karte .mn-ka-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ka-ico-bg); color: var(--ka-text);
  transition: background-color 200ms ease, color 200ms ease; }
.mn-karte .mn-ka-ico svg { width: 19px; height: 19px; }
.mn-karte .mn-ka-name { font: 500 .9375rem/1.2 var(--font); letter-spacing: -.012em; hyphens: manual; overflow-wrap: break-word; max-width: 100%; }
/* Form oben rechts im freien Feld neben dem Symbol (nicht hinter dem Titel), angeschnitten von der Kachelecke */
.mn-karte .mn-ka-form { position: absolute; right: -16px; top: -19px; z-index: -1; width: 78px; height: 78px; overflow: visible;
  fill: var(--ton-p); stroke: var(--ton-p); stroke-width: 6; stroke-linejoin: round; rotate: -14deg; transition: rotate 500ms var(--ka-auf), translate 500ms var(--ka-auf), scale 500ms var(--ka-auf); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-form { fill: color-mix(in srgb, var(--ton-k) 30%, #0f1e2a); stroke: color-mix(in srgb, var(--ton-k) 30%, #0f1e2a); }
@media (hover: hover) { .mn-karte .mn-ka-kachel:hover .mn-ka-form { rotate: -4deg; scale: 1.06; } }
/* aktuelle Seite: Symbol-Kreis dunkel, feiner Ring im Kachelton */
.mn-karte .mn-ka-kachel[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ton-t); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte :is(.mn-ka-kachel, .mn-ka-pille)[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ton-k); }
.mn-karte .mn-ka-kachel[aria-current="page"] .mn-ka-ico { background: var(--tinte); color: #fff; }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-kachel[aria-current="page"] .mn-ka-ico { background: var(--mint); color: #0b1d2b; }

/* Branchen: ruhige Pillen, zweispaltig, Symbol im Ton der Branche */
.mn-karte .mn-ka-pillen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mn-karte .mn-ka-pille { display: flex; align-items: center; gap: 7px; height: 100%; min-height: 46px; padding: 5px 10px 5px 6px; border-radius: 999px;
  background: var(--ka-pille); font: 500 .8125rem/1.2 var(--font); letter-spacing: -.005em; transition: background-color 200ms ease, scale 160ms ease; }
.mn-karte .mn-ka-pille:active { scale: .97; }
@media (hover: hover) { .mn-karte .mn-ka-pille:hover { background: var(--ka-pille-hover); } }
.mn-karte .mn-ka-pille-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in oklch, var(--ton-p) 70%, #fff); color: var(--tinte); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-pille-ico { background: color-mix(in srgb, var(--ton-k) 30%, #16283a); color: var(--text-hell); }
.mn-karte .mn-ka-pille-ico svg { width: 17px; height: 17px; }
.mn-karte .mn-ka-pille-name { min-width: 0; hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: break-word; }
.mn-karte .mn-ka-pille[aria-current="page"] { background: color-mix(in oklch, var(--ton-p) 45%, #fff); box-shadow: inset 0 0 0 2px var(--ton-t); }
html[data-mnav="karte"][data-thema="dunkel"] .mn-karte .mn-ka-pille[aria-current="page"] { background: color-mix(in srgb, var(--ton-k) 18%, #16283a); }

/* Sockel: helle Platte unten mit MINT-Leiste, Kontakt, Telefon und Mail */
.mn-karte .mn-ka-sockel { margin: 16px var(--ka-rand) 0; padding: 6px 8px 4px; border-radius: calc(var(--ka-radius) - var(--ka-rand)); background: var(--ka-sockel); }
.mn-karte .mn-ka-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.mn-karte .mn-ka-leiste-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 100%; min-height: 62px; padding: 6px 2px;
  border-radius: 14px; text-align: center; font: 500 .75rem/1.2 var(--font); letter-spacing: -.005em; transition: background-color 200ms ease; }
@media (hover: hover) { .mn-karte .mn-ka-leiste-link:hover { background: var(--ka-bg); } }
.mn-karte .mn-ka-leiste-link:active { background: var(--ka-bg); }
.mn-karte .mn-ka-leiste-ico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ka-leise); }
.mn-karte .mn-ka-leiste-ico svg { width: 22px; height: 22px; }
.mn-karte .mn-ka-leiste-name { text-wrap: balance; }
.mn-karte .mn-ka-leiste-link[aria-current="page"] { background: var(--ka-bg); box-shadow: inset 0 0 0 2px var(--ka-akzent); }
.mn-karte .mn-ka-leiste-link[aria-current="page"] .mn-ka-leiste-ico { color: var(--ka-akzent); }
.mn-karte .mn-ka-kontaktfeld { margin-top: 6px; }
.mn-karte .mn-ka-kontakt { display: flex; justify-content: center; gap: .5rem; width: 100%; min-height: 50px; font-size: .9375rem; color: #fff; }
.mn-karte .mn-ka-kontakt[aria-current="page"] { box-shadow: 0 0 0 2px var(--ka-sockel), 0 0 0 4px var(--g-mint-kraeftig); }
.mn-karte .mn-ka-direkt { display: flex; justify-content: space-between; gap: 8px; padding: 0 6px; }
.mn-karte .mn-ka-direkt a { display: inline-flex; align-items: center; min-height: 44px; font: 400 .8125rem/1.2 var(--font); color: var(--ka-leise); border-radius: 6px; }
@media (hover: hover) { .mn-karte .mn-ka-direkt a:hover { color: var(--ka-text); } }

/* Pfeile wie auf der Seite: Schaft fährt aus */
.mn-karte .mn-ka-alle:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.mn-karte .mn-ka-alle:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }

/* Fokus */
.mn-karte :is(a, button):focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.mn-karte .mn-ka-kachel:focus-visible { outline-offset: 3px; }

/* Gestaffeltes Erscheinen in Wuchsrichtung (vom Burger diagonal nach links unten); beim Schliessen alles zugleich und schnell */
.mn-karte .mn-ka-stufe { opacity: 0; translate: 0 10px; transition: opacity 220ms ease, translate 0s linear 480ms, scale 0s linear 480ms; }
.mn-karte .mn-ka-pop { scale: .9; }
.mn-karte.z-auf .mn-ka-stufe { opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 300ms ease calc(30ms + var(--v, 0) * 36ms), translate 560ms var(--ka-auf) calc(30ms + var(--v, 0) * 36ms),
    scale 560ms cubic-bezier(.3, 1.4, .5, 1) calc(30ms + var(--v, 0) * 36ms); }
/* die Form rastet nach der Kachel ein; sie kommt aus der Richtung des Burgers (oben rechts) */
.mn-karte:not(.z-auf) .mn-ka-form { rotate: -56deg; translate: 18px -22px; scale: .7; transition: rotate 0s 220ms, translate 0s 220ms, scale 0s 220ms; }
.mn-karte.z-auf .mn-ka-form { transition: rotate 820ms cubic-bezier(.3, 1.35, .5, 1) calc(160ms + var(--v, 0) * 36ms), translate 820ms var(--ka-auf) calc(160ms + var(--v, 0) * 36ms),
  scale 820ms var(--ka-auf) calc(160ms + var(--v, 0) * 36ms); }
@media (hover: hover) { .mn-karte.z-auf .mn-ka-kachel:hover .mn-ka-form { transition: rotate 500ms var(--ka-auf), translate 500ms var(--ka-auf), scale 500ms var(--ka-auf); } }

/* Seitenkopf, solange die Karte offen ist oder sich schliesst: über der Karte, ohne Fläche; nur das Kreuz bleibt bedienbar.
   Das Logo blendet erst aus, wenn die Karte es überdeckt (dort steht ihr eigenes Logo deckungsgleich). */
html[data-mnav="karte"]:is(.z-mnav-auf, .z-ka-zu) .s-kopf { z-index: 90; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; transition: background-color 160ms ease; }
html[data-mnav="karte"]:is(.z-mnav-auf, .z-ka-zu) .s-kopf .s-burger { pointer-events: auto; }
html[data-mnav="karte"]:is(.z-mnav-auf, .z-ka-zu) .s-kopf-fortschritt { opacity: 0; }
html[data-mnav="karte"] .s-kopf .s-logo { transition: opacity 200ms ease; }
html[data-mnav="karte"].z-mnav-auf .s-kopf .s-logo { opacity: 0; visibility: hidden; transition: opacity 120ms ease 400ms, visibility 0s linear 520ms; }
/* ab 433 px ist die Karte schmaler als das Fenster (26rem + 2 × 8 px) und deckt das Seitenlogo nicht: dann sofort ausblenden, sonst stünde es doppelt */
@media (min-width: 433px) { html[data-mnav="karte"].z-mnav-auf .s-kopf .s-logo { transition: opacity 160ms ease, visibility 0s linear 160ms; } }
/* Burger: beim Öffnen ein weicher Kreis hinter dem Kreuz */
html[data-mnav="karte"] { --ka-x: #e9eff4; }
html[data-mnav="karte"][data-thema="dunkel"] { --ka-x: rgb(255 255 255 / .1); }
html[data-mnav="karte"] .s-burger { transition: background-color 300ms ease, border-radius 300ms ease, translate 420ms var(--ka-auf-k, cubic-bezier(.2, .8, .2, 1)); -webkit-tap-highlight-color: transparent; }
html[data-mnav="karte"] .s-burger { translate: 0 0; }
html[data-mnav="karte"] .s-kopf.z-mnav .s-burger { background: var(--ka-x); border-radius: 50%; translate: -6px 0; }   /* gleich viel Luft oben und rechts in der Karte */
@media (hover: hover) { html[data-mnav="karte"] .s-burger:hover { background: var(--ka-x); } }

/* 360–374 px: Pillen eine Spur kleiner, damit «Versicherungen» nicht getrennt wird */
@media (max-width: 374px) { .mn-karte .mn-ka-pille { gap: 6px; padding-right: 8px; font-size: .78rem; } }
/* Schmale Handys: Branchen untereinander, sonst brechen die Namen mehrfach */
@media (max-width: 359px) {
  .mn-karte { --ka-pad: 14px; }
  .mn-karte .mn-ka-pillen { grid-template-columns: minmax(0, 1fr); }
  .mn-karte .mn-ka-pille { min-height: 44px; }
  .mn-karte .mn-ka-name { font-size: .875rem; }
  .mn-karte .mn-ka-direkt { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* Niedrige Hochformat-Fenster (375×667, iPhone-Safari mit Leiste ≈ 390×664): etwas dichter, damit Kontakt, Telefon und Mail ohne Rollen
   sichtbar bleiben; Tippflächen bleiben ≥ 44 px. Die Kopfzeile der Karte wird niedriger, darum blendet das Seitenlogo hier sofort aus. */
@media (max-height: 760px) and (max-width: 599px) {
  .mn-karte .mn-ka-kopf { height: 64px; }
  html[data-mnav="karte"].z-mnav-auf .s-kopf .s-logo { transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .mn-karte .mn-ka-zeile { margin-bottom: 2px; }
  .mn-karte .mn-ka-gruppe + .mn-ka-gruppe { margin-top: 8px; }
  .mn-karte .mn-ka-kacheln { gap: 6px; }
  .mn-karte .mn-ka-kachel { gap: 6px; min-height: 86px; padding-block: 10px 11px; }
  .mn-karte .mn-ka-ico { width: 30px; height: 30px; }
  .mn-karte .mn-ka-ico svg { width: 17px; height: 17px; }
  .mn-karte .mn-ka-pillen { gap: 4px 6px; }
  .mn-karte .mn-ka-pille { min-height: 44px; }
  .mn-karte .mn-ka-sockel { margin-top: 10px; padding-block: 4px 2px; }
  .mn-karte .mn-ka-leiste-link { min-height: 52px; gap: 3px; padding-block: 4px; }
  .mn-karte .mn-ka-kontaktfeld { margin-top: 4px; }
  .mn-karte .mn-ka-kontakt { min-height: 46px; }
}
/* Quer gehaltene Handys: breitere Karte, Dienstleistungen und Branchen nebeneinander, Sockel zweispaltig */
@media (max-height: 520px) and (min-width: 600px) {
  .mn-karte .mn-ka-karte { width: min(100% - 2 * var(--ka-rand) - env(safe-area-inset-left) - env(safe-area-inset-right), 46rem); }
  .mn-karte .mn-ka-roll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; padding-inline: var(--ka-pad); align-items: start; }
  .mn-karte .mn-ka-gruppe { padding: 0; }
  .mn-karte .mn-ka-gruppe + .mn-ka-gruppe { margin-top: 0; }
  .mn-karte .mn-ka-kachel { min-height: 84px; }
  .mn-karte .mn-ka-sockel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 16px calc(var(--ka-rand) - var(--ka-pad)) 0; padding: 6px 8px; }
  .mn-karte .mn-ka-kontaktfeld { margin-top: 0; }
}

/* Weniger Bewegung: nichts wächst oder fliegt, die Karte blendet nur ein und aus. Hinweis: stripe.css schaltet bei «Bewegung reduzieren»
   zusätzlich alle Übergänge mit !important ab – dann erscheint und verschwindet die Karte ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {
  .mn-karte { transition: visibility 0s linear 200ms; }
  .mn-karte .mn-ka-flaeche, .mn-karte.z-auf .mn-ka-flaeche { clip-path: none; transition: none; }
  .mn-karte .mn-ka-karte, .mn-karte.z-auf .mn-ka-karte { transition: opacity 200ms ease; }
  .mn-karte .mn-ka-schleier, .mn-karte.z-auf .mn-ka-schleier { transition: opacity 200ms ease; }
  .mn-karte .mn-ka-stufe, .mn-karte.z-auf .mn-ka-stufe { opacity: 1; translate: none; scale: none; transition: none; }
  .mn-karte .mn-ka-form, .mn-karte:not(.z-auf) .mn-ka-form, .mn-karte.z-auf .mn-ka-form { rotate: -14deg; translate: none; scale: none; transition: none; }
  .mn-karte :is(.mn-ka-kachel, .mn-ka-pille):active { scale: none; }
  html[data-mnav="karte"].z-mnav-auf .s-kopf .s-logo { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  html[data-mnav="karte"] .s-burger { transition: none; }
}
/* ===== Variante «ebenen» (mnav_ebenen.py) ===== */
/* Raum: Vollbild unter dem Kopf (Kopf liegt mit Logo und Kreuz darüber), Punkteraster und Farbwolken wie im Einstieg */
.mn-ebenen { --mn-eb-feder: cubic-bezier(.2, .8, .2, 1);
  --mn-eb-l: max(1.5rem, env(safe-area-inset-left)); --mn-eb-r: max(1.5rem, env(safe-area-inset-right));
  --mn-eb-m1: #d3dce4; --mn-eb-m2: #e6ecf1; --mn-eb-m3: #f1f5f8; --mn-eb-schrift: var(--tinte);
  --mn-eb-grau: #4b5c6e;   /* etwas dunkler als --grau: Kurztexte stehen teils auf den Wolken (AA ≥ 4.5:1) */
  position: fixed; inset: 0; z-index: 9; overflow: hidden; color: var(--mn-eb-schrift); font-family: var(--font);
  background-color: var(--papier); background-image: radial-gradient(circle at center, var(--punkt, #d4dce3) .7px, transparent 1.1px);
  background-size: var(--punkt-abstand, 24px) var(--punkt-abstand, 24px); background-position: center top;
  visibility: hidden; opacity: 0; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.mn-ebenen.z-auf { visibility: visible; opacity: 1; transition: opacity 220ms ease, visibility 0s; }
.mn-ebenen .mn-eb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mn-ebenen .mn-eb-g-mint { --mn-eb-ton: var(--g-mint-kraeftig); --mn-eb-wolke: var(--g-mint-wolke); --mn-eb-tief: var(--g-mint-tief); }
.mn-ebenen .mn-eb-g-tuerkis { --mn-eb-ton: var(--g-tuerkis-kraeftig); --mn-eb-wolke: var(--g-tuerkis-wolke); --mn-eb-tief: var(--g-tuerkis-tief); }
.mn-ebenen .mn-eb-g-blau { --mn-eb-ton: var(--g-blau-kraeftig); --mn-eb-wolke: var(--g-blau-wolke); --mn-eb-tief: var(--g-blau-tief); }

.mn-ebenen .mn-eb-wolken { position: absolute; inset: 0; pointer-events: none; }
.mn-ebenen .mn-eb-wolken span { position: absolute; aspect-ratio: 1; border-radius: 50%; }
/* Hauptwolke eng um den Burger: dort beginnt der Kreis; Logo und Kurztexte bleiben auf hellem Grund */
.mn-ebenen .mn-eb-wolken span:nth-child(1) { --w: clamp(22rem, 100vw, 38rem); width: var(--w); right: calc(var(--w) * -.45); top: calc(var(--w) * -.55);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g-mint-kraeftig) 62%, transparent) 20%, transparent); }
.mn-ebenen .mn-eb-wolken span:nth-child(2) { width: max(80vw, 26rem); right: max(-42vw, -14rem); top: 34%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g-tuerkis-kraeftig) 26%, transparent), transparent); }
.mn-ebenen .mn-eb-wolken span:nth-child(3) { width: max(110vw, 32rem); left: max(-55vw, -16rem); bottom: max(-50vw, -16rem);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g-violett-kraeftig) 26%, transparent), transparent); }

/* Bühne mit den Ebenen; jede Ebene scrollt bei Bedarf für sich */
/* Titelgrösse an der Breite der Ebene: «Dienstleistungen» (7.96 em) passt mit Form, Abständen und Pfeil (4.8 rem) immer in eine Zeile */
.mn-ebenen .mn-eb-buehne { position: absolute; inset: var(--kopf-h, 5.5rem) 0 0; overflow: hidden; }
.mn-ebenen .mn-eb-ebene { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  container-type: inline-size; --mn-eb-gross: clamp(1.4rem, 12.1cqi - .6rem, 2.75rem);
  touch-action: pan-y; padding: clamp(.25rem, 2.5vh, 2rem) var(--mn-eb-r) calc(1.25rem + env(safe-area-inset-bottom)) var(--mn-eb-l);
  -webkit-mask-image: linear-gradient(transparent, #000 .75rem, #000 calc(100% - 1rem), transparent); mask-image: linear-gradient(transparent, #000 .75rem, #000 calc(100% - 1rem), transparent);
  transition: opacity 220ms ease, visibility 0s linear 220ms; }
.mn-ebenen .mn-eb-ebene > * { flex: none; width: 100%; max-width: 34rem; }
.mn-ebenen .mn-eb-unter { visibility: hidden; opacity: 0; }
.mn-ebenen .mn-eb-unter.z-an { visibility: visible; opacity: 1; transition: opacity 220ms ease, visibility 0s; }
.mn-ebenen.z-tief .mn-eb-haupt { visibility: hidden; opacity: 0; }
.mn-ebenen.z-sofort * { transition: none !important; }
.mn-ebenen.z-zug .mn-eb-ebene { transition: none !important; }

/* Hauptebene: drei grosse Titel */
.mn-ebenen .mn-eb-liste { margin: 0; padding: 0; list-style: none; }
.mn-ebenen .mn-eb-tor { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; grid-template-areas: "form titel pfeil" ". vor ."; column-gap: .9rem; align-items: center;
  width: calc(100% + 1.5rem); margin-inline: -.75rem; padding: clamp(.6rem, 7.6vh - 2.4rem, 1.75rem) .75rem; border-radius: 1.25rem;   /* hohe Fenster: mehr Luft, weniger Loch über dem Kontakt */ color: var(--mn-eb-schrift); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, scale 200ms ease; }
.mn-ebenen .mn-eb-zeichen { grid-area: form; position: relative; width: 2rem; height: 2rem; }
.mn-ebenen .mn-eb-form { display: block; width: 100%; height: 100%; overflow: visible; }
.mn-ebenen :is(.mn-eb-form, .mn-eb-teil) { fill: var(--mn-eb-ton); stroke: var(--mn-eb-ton); stroke-width: 6; stroke-linejoin: round; }
.mn-ebenen .mn-eb-ring { position: absolute; inset: -.42rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mn-eb-ton); opacity: 0; }
.mn-ebenen .mn-eb-tor-titel { grid-area: titel; display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em;
  font: 500 var(--mn-eb-gross)/1.08 var(--font); letter-spacing: -.03em; white-space: nowrap; }
.mn-ebenen .mn-eb-tor-titel > span { display: block; }
.mn-ebenen .mn-eb-vor { grid-area: vor; margin-top: .35rem; font: 400 .8125rem/1.45 var(--font); letter-spacing: 0; color: var(--mn-eb-grau); text-wrap: pretty; }
.mn-ebenen .mn-eb-tor .s-chev { grid-area: pfeil; width: 1rem; height: 1rem; stroke-width: 1.3; }
.mn-ebenen .mn-eb-tor:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* Kontakt unten, in Reichweite des Daumens */
.mn-ebenen .mn-eb-kontakt { margin-top: auto; padding-top: 1.75rem; display: grid; gap: .5rem; }
.mn-ebenen .mn-eb-knopf { justify-content: space-between; width: 100%; min-height: 3.25rem; padding: .9rem 1.35rem; font-size: 1rem; }
.mn-ebenen .mn-eb-knopf .s-chev { width: .8rem; height: .8rem; }
.mn-ebenen .mn-eb-knopf[aria-current="page"] { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--g-mint-kraeftig); }
.mn-ebenen .mn-eb-direkt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin: 0; padding-inline: .35rem; }
.mn-ebenen .mn-eb-direkt a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 .875rem/1.3 var(--font); color: var(--mn-eb-schrift);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, currentColor 28%, transparent); border-radius: .4rem; }
.mn-ebenen .mn-eb-direkt a:focus-visible, .mn-ebenen .mn-eb-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* Zweite Ebene: Zurück, grosser Titel mit Mulde, Einträge */
.mn-ebenen .mn-eb-zurueck { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .55rem; width: auto; min-height: 2.75rem; margin-left: -.6rem; padding: 0 .9rem 0 .6rem;
  border-radius: 999px; font: 500 .9375rem/1 var(--font); color: var(--mn-eb-schrift); cursor: pointer; align-self: flex-start; -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease; }
.mn-ebenen .mn-eb-zurueck .s-chev { width: .8rem; height: .8rem; rotate: 180deg; }
.mn-ebenen .mn-eb-zurueck:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; }
.mn-ebenen .mn-eb-kopf { display: flex; align-items: center; gap: .9rem; margin: .6rem 0 1rem; font: 500 var(--mn-eb-gross)/1.08 var(--font); letter-spacing: -.03em; color: var(--mn-eb-schrift); outline: none; }
.mn-ebenen .mn-eb-mulde { position: relative; flex: none; width: 2.75rem; height: 2.75rem; }
.mn-ebenen .mn-eb-mulde svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mn-ebenen .mn-eb-loch { fill: url(#mn-eb-mulde-v); stroke: url(#mn-eb-mulde-v); stroke-width: 6; stroke-linejoin: round; transition: filter 600ms ease; }
/* Form sitzt: die Mulde leuchtet kurz in der Gruppenfarbe auf wie die Mulden der Platte in formen.py (.pf-mulde.z-voll) */
.mn-ebenen .mn-eb-mulde.z-sitzt .mn-eb-loch { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mn-eb-ton) 60%, transparent)); transition-duration: 180ms; }
.mn-ebenen .mn-eb-eintraege { margin: 0; padding: 0; list-style: none; display: grid; gap: .125rem; }
.mn-ebenen .mn-eb-eintraege a { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .9rem; align-items: start;
  margin-inline: -.75rem; padding: .7rem .75rem; border-radius: 1rem; color: var(--mn-eb-schrift); -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease, scale 200ms ease; }
.mn-ebenen .mn-eb-eintraege a.mn-eb-kurzlos { align-items: center; }
.mn-ebenen .mn-eb-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: .75rem; background: var(--mn-eb-wolke); color: var(--mn-eb-tief); transition: background-color 200ms ease, color 200ms ease; }
.mn-ebenen .mn-eb-ico svg { width: 100%; height: 100%; }
.mn-ebenen .me-ico, .mn-ebenen .me-ico * { animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }
.mn-ebenen .mn-eb-text { display: grid; gap: .2rem; padding-top: .55rem; }
.mn-ebenen .mn-eb-kurzlos .mn-eb-text { padding-top: 0; }
.mn-ebenen .mn-eb-text b { font: 500 1rem/1.3 var(--font); letter-spacing: -.01em; }
.mn-ebenen .mn-eb-text span { font: 400 .8125rem/1.45 var(--font); color: var(--mn-eb-grau); text-wrap: pretty; }
.mn-ebenen .mn-eb-eintraege a:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.mn-ebenen .mn-eb-alle { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; width: auto; min-height: 2.75rem; margin-top: .5rem; padding-inline: .1rem;
  font: 500 .9375rem/1 var(--font); color: color-mix(in oklab, var(--mn-eb-tief) 82%, var(--tinte)); border-radius: .4rem; }   /* tiefer Ton der Gruppe, leicht abgedunkelt (≥ 5:1 auch auf den Wolken); #1c8f78 hätte nur 4:1 */
.mn-ebenen .mn-eb-alle:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
/* aktuelle Seite: Eintrag mit Kachelverlauf und gefülltem Kästchen in der Gruppenfarbe, Ring um die Form der Gruppe */
.mn-ebenen .mn-eb-eintraege a[aria-current="page"] { background: var(--pf-nav-hover, var(--flaeche)); }
.mn-ebenen .mn-eb-eintraege a[aria-current="page"] .mn-eb-ico { background: var(--mn-eb-ton); color: var(--tinte); }
.mn-ebenen .mn-eb-eintraege a[aria-current="page"] .mn-eb-text b::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .5rem; border-radius: 50%; background: var(--mn-eb-ton); vertical-align: .1em; }
.mn-ebenen .mn-eb-alle[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.mn-ebenen:has(#mn-eb-dienste [aria-current="page"]) [aria-controls="mn-eb-dienste"] .mn-eb-ring,
.mn-ebenen:has(#mn-eb-branchen [aria-current="page"]) [aria-controls="mn-eb-branchen"] .mn-eb-ring,
.mn-ebenen:has(#mn-eb-mint [aria-current="page"]) [aria-controls="mn-eb-mint"] .mn-eb-ring { opacity: 1; }

/* Berühren und Überfahren: derselbe Kachelverlauf wie die Hover-Kästchen der Navigation oben, Pfeil wie auf der Seite */
.mn-ebenen :is(.mn-eb-tor, .mn-eb-eintraege a):active { background: var(--pf-nav-hover, var(--flaeche)); scale: .985; transition-duration: 120ms; }
.mn-ebenen .mn-eb-zurueck:active { background: var(--pf-nav-hover, var(--flaeche)); }
.mn-ebenen :is(.mn-eb-tor, .mn-eb-zurueck, .mn-eb-alle, .mn-eb-knopf):focus-visible .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.mn-ebenen :is(.mn-eb-tor, .mn-eb-zurueck, .mn-eb-alle, .mn-eb-knopf):focus-visible .s-chev .s-spitze { transform: translateX(1.2px); }
@media (hover: hover) {
  .mn-ebenen :is(.mn-eb-tor, .mn-eb-eintraege a, .mn-eb-zurueck):hover { background: var(--pf-nav-hover, var(--flaeche)); }
  .mn-ebenen .mn-eb-eintraege a:hover .mn-eb-ico { background: #fff; }
  .mn-ebenen .mn-eb-eintraege a[aria-current="page"]:hover .mn-eb-ico { background: var(--mn-eb-ton); }
  .mn-ebenen :is(.mn-eb-tor, .mn-eb-zurueck, .mn-eb-alle, .mn-eb-knopf):hover .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
  .mn-ebenen :is(.mn-eb-tor, .mn-eb-zurueck, .mn-eb-alle, .mn-eb-knopf):hover .s-chev .s-spitze { transform: translateX(1.2px); }
  .mn-ebenen .mn-eb-direkt a:hover { text-decoration-color: currentColor; }
}

/* Kopf über dem offenen Menü: durchsichtig, damit Logo und Kreuz auf den Wolken stehen; Kreuz in einer hellen Scheibe */
html[data-mnav="ebenen"].z-mnav-auf .s-kopf { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: blur(0px) saturate(1); backdrop-filter: blur(0px) saturate(1);
  transition: background-color 220ms ease 260ms, box-shadow 220ms ease 260ms, -webkit-backdrop-filter 220ms ease 260ms, backdrop-filter 220ms ease 260ms; }   /* erst wenn der Kreis unter dem Kopf durch ist */
html[data-mnav="ebenen"].z-mnav-auf .s-kopf-fortschritt { opacity: 0; }
/* beim Schliessen bleibt der Kopf durchsichtig, bis der Kreis zu ist (sonst steht auf gerollter Seite kurz der weisse Balken über den Wolken) */
html[data-mnav="ebenen"].mn-eb-schliesst .s-kopf { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
html[data-mnav="ebenen"].mn-eb-schliesst .s-kopf-fortschritt { opacity: 0; }
html[data-mnav="ebenen"] .s-burger { border-radius: 50%; transition: background-color 300ms ease; }
html[data-mnav="ebenen"] .s-kopf.z-mnav .s-burger { background: rgb(255 255 255 / .6); }

/* Dunkel: Flächen nie weiss, Wolken leiser, Mulde dunkel mit hellerer Unterkante, damit die Vertiefung sichtbar bleibt */
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen { --mn-eb-schrift: var(--text-hell, #e7eef3); --mn-eb-grau: var(--grau); --mn-eb-m1: #030a10; --mn-eb-m2: #0f2131; --mn-eb-m3: #2a4258; }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-wolken span:nth-child(1) { background: radial-gradient(closest-side, rgb(83 193 170 / .3) 20%, transparent); }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-wolken span:nth-child(2) { background: radial-gradient(closest-side, rgb(69 190 203 / .13), transparent); }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-wolken span:nth-child(3) { background: radial-gradient(closest-side, rgb(177 157 231 / .14), transparent); }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-alle { color: var(--mn-eb-ton); }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-ico { background: color-mix(in srgb, var(--mn-eb-ton) 16%, #0f1e2a); color: var(--mn-eb-ton); }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-eintraege a[aria-current="page"] .mn-eb-ico { background: var(--mn-eb-ton); color: #0b1d2b; }
html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-knopf[aria-current="page"] { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--mint); }
@media (hover: hover) { html[data-mnav="ebenen"][data-thema="dunkel"] .mn-ebenen .mn-eb-eintraege a:not([aria-current]):hover .mn-eb-ico { background: #16283a; } }   /* aktueller Eintrag behält sein gefülltes Kästchen, sonst verschwindet das dunkle Symbol */
html[data-mnav="ebenen"][data-thema="dunkel"] .s-kopf.z-mnav .s-burger { background: rgb(255 255 255 / .08); }

/* Querformat und niedrige Fenster: Vorschau weg, Kontakt neben die Titel */
@media (max-height: 600px) {
  .mn-ebenen .mn-eb-vor { display: none; }
  .mn-ebenen .mn-eb-tor { padding-block: .6rem; }
  .mn-ebenen .mn-eb-kontakt { padding-top: 1rem; }
  .mn-ebenen .mn-eb-text span { display: none; }
  .mn-ebenen .mn-eb-text { padding-top: 0; }
  .mn-ebenen .mn-eb-eintraege a { align-items: center; padding-block: .45rem; }
  .mn-ebenen .mn-eb-kopf { margin-block: .25rem .5rem; }
}
@media (max-height: 600px) and (min-width: 600px) {
  .mn-ebenen .mn-eb-haupt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); column-gap: 3rem; align-content: start; }
  .mn-ebenen .mn-eb-haupt > * { max-width: none; }
  .mn-ebenen .mn-eb-kontakt { margin-top: 0; padding-top: .6rem; align-content: start; }
  .mn-ebenen .mn-eb-unter .mn-eb-eintraege { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .mn-ebenen .mn-eb-unter > * { max-width: 46rem; }
}
/* Tablet hochkant: Titel dürfen grösser werden («Dienstleistungen» passt bis 3.5rem in die 34rem breite Spalte) */
@media (min-width: 600px) and (min-height: 900px) {
  .mn-ebenen .mn-eb-ebene { --mn-eb-gross: clamp(1.4rem, 12.1cqi - .6rem, 3.5rem); }
  .mn-ebenen .mn-eb-tor { grid-template-columns: 2.75rem minmax(0, 1fr) 1rem; }   /* Form wächst mit, so gross wie die Mulde der Unterebene */
  .mn-ebenen .mn-eb-zeichen { width: 2.75rem; height: 2.75rem; }
}

/* Bewegung reduzieren: Die Seite schaltet dort alle Übergänge ab (stripe.css: * { transition: none !important }).
   Menü und Ebenen sollen trotzdem weich ein- und ausblenden, ohne jede Bewegung; z-sofort (stilles Zurücksetzen) bleibt ausgenommen. */
@media (prefers-reduced-motion: reduce) {
  .mn-ebenen { transition: opacity 200ms ease, visibility 0s linear 200ms !important; }
  .mn-ebenen.z-auf { transition: opacity 200ms ease, visibility 0s !important; }
  .mn-ebenen.z-tief:not(.z-sofort) .mn-eb-haupt, .mn-ebenen:not(.z-sofort) .mn-eb-unter { transition: opacity 160ms ease, visibility 0s linear 160ms !important; }
  .mn-ebenen:not(.z-sofort, .z-tief) .mn-eb-haupt, .mn-ebenen:not(.z-sofort) .mn-eb-unter.z-an { transition: opacity 220ms ease 100ms, visibility 0s !important; }
}

/* Bewegung (nur ohne «Bewegung reduzieren»): Kreis aus dem Burger, Formen drehen sich an ihren Platz, Titel steigen aus ihrer Zeile;
   Ebenen schieben seitlich, die gewählte Form fliegt in ihre Mulde (Skript) */
@media (prefers-reduced-motion: no-preference) {
  .mn-ebenen { opacity: 1; clip-path: circle(0px at var(--mn-eb-x, calc(100% - 2.5rem)) var(--mn-eb-y, 2.75rem));
    transition: clip-path 460ms cubic-bezier(.6, 0, .8, .2), visibility 0s linear 460ms; }
  .mn-ebenen.z-auf { opacity: 1; clip-path: circle(var(--mn-eb-rad, 150vmax) at var(--mn-eb-x, calc(100% - 2.5rem)) var(--mn-eb-y, 2.75rem));
    transition: clip-path 740ms cubic-bezier(.6, 0, .15, 1), visibility 0s; }
  .mn-ebenen.z-auf .mn-eb-wolken span { animation: mn-eb-treiben 18s ease-in-out infinite alternate; }
  .mn-ebenen.z-auf .mn-eb-wolken span:nth-child(2) { animation-duration: 23s; animation-delay: -7s; }
  .mn-ebenen.z-auf .mn-eb-wolken span:nth-child(3) { animation-duration: 27s; animation-delay: -12s; }
  .mn-ebenen .mn-eb-tor-titel > span { translate: 0 112%; transition: translate 0s linear 470ms; }
  .mn-ebenen.z-auf .mn-eb-tor-titel > span { translate: 0 0; transition: translate 760ms var(--mn-eb-feder) calc(130ms + var(--i) * 70ms); }
  .mn-ebenen .mn-eb-zeichen { scale: .25; rotate: -120deg; opacity: 0; transition: scale 0s 470ms, rotate 0s 470ms, opacity 0s 470ms; }
  .mn-ebenen.z-auf .mn-eb-zeichen { scale: 1; rotate: 0deg; opacity: 1;
    transition: scale 650ms cubic-bezier(.3, 1.35, .55, 1) calc(200ms + var(--i) * 70ms), rotate 820ms var(--mn-eb-feder) calc(200ms + var(--i) * 70ms), opacity 160ms ease calc(200ms + var(--i) * 70ms); }
  .mn-ebenen :is(.mn-eb-vor, .mn-eb-tor .s-chev) { opacity: 0; transition: opacity 0s 470ms; }
  .mn-ebenen.z-auf :is(.mn-eb-vor, .mn-eb-tor .s-chev) { opacity: 1; transition: opacity 500ms ease calc(320ms + var(--i) * 70ms); }
  .mn-ebenen .mn-eb-kontakt { opacity: 0; transition: opacity 0s 470ms; }
  .mn-ebenen.z-auf .mn-eb-kontakt { opacity: 1; transition: opacity 500ms ease 440ms; }
  /* Ebenen: Hauptebene weicht nach links und blendet aus, die Unterebene schiebt sich von rechts darüber */
  .mn-ebenen .mn-eb-ebene { transition: translate 620ms var(--mn-eb-feder), opacity 420ms ease 120ms, visibility 0s; }
  .mn-ebenen .mn-eb-unter { translate: 100% 0; opacity: 1; transition: translate 620ms var(--mn-eb-feder), visibility 0s linear 620ms; }
  .mn-ebenen .mn-eb-unter.z-an { translate: 0 0; transition: translate 620ms var(--mn-eb-feder), visibility 0s; }
  .mn-ebenen.z-tief .mn-eb-haupt { translate: -30% 0; opacity: 0; transition: translate 620ms var(--mn-eb-feder), opacity 150ms ease-out, visibility 0s linear 620ms; }
  .mn-ebenen .mn-eb-unter .mn-eb-eintraege li { translate: calc(1.25rem + var(--j) * .9rem) 0; transition: translate 0s 620ms; }
  .mn-ebenen .mn-eb-unter.z-an .mn-eb-eintraege li { translate: 0 0; transition: translate 760ms var(--mn-eb-feder) calc(var(--j) * 30ms); }
  .mn-ebenen .mn-eb-flieger { position: fixed; z-index: 3; margin: 0; pointer-events: none; overflow: visible; will-change: transform; }
  .mn-ebenen .mn-eb-zeichen .mn-eb-form, .mn-ebenen .mn-eb-zeichen { transform-origin: 50% 50%; }
  @media (hover: hover) { .mn-ebenen .mn-eb-tor .mn-eb-form { transition: rotate 500ms var(--mn-eb-feder); }
    .mn-ebenen .mn-eb-tor:hover .mn-eb-form { rotate: 12deg; } }
}
@keyframes mn-eb-treiben { to { translate: -6vw 5%; scale: 1.1; } }
/* ===== Variante «blatt» (mnav_blatt.py) ===== */
@property --mn-bl-ton { syntax: "<color>"; inherits: true; initial-value: #98ead7; }
/* Grundwerte und Gruppentöne */
.mn-blatt { --mn-bl-grund: var(--papier); --mn-bl-sanft: cubic-bezier(.2, .8, .2, 1); --mn-bl-feder: linear(0, 0.0194, 0.0692, 0.1390, 0.2207, 0.3078, 0.3956, 0.4808, 0.5608, 0.6344, 0.7005, 0.7588, 0.8095, 0.8529, 0.8893, 0.9195, 0.9441, 0.9638, 0.9792, 0.9911, 0.9999, 1.0062, 1.0105, 1.0132, 1.0147, 1.0152, 1.0150, 1.0143, 1.0133, 1.0120, 1.0107, 1.0094, 1.0081, 1.0069, 1.0057, 1.0047, 1.0038, 1.0030, 1.0023, 1.0018, 1); }
.mn-blatt [data-ton="mint"] { --mn-bl-pastell: var(--g-mint-pastell); --mn-bl-wolke: var(--g-mint-wolke); --mn-bl-kraeftig: var(--g-mint-kraeftig); --mn-bl-tief: var(--g-mint-tief); }
.mn-blatt [data-ton="himmel"] { --mn-bl-pastell: var(--g-himmel-pastell); --mn-bl-wolke: var(--g-himmel-wolke); --mn-bl-kraeftig: var(--g-himmel-kraeftig); --mn-bl-tief: var(--g-himmel-tief); }
.mn-blatt [data-ton="violett"] { --mn-bl-pastell: var(--g-violett-pastell); --mn-bl-wolke: var(--g-violett-wolke); --mn-bl-kraeftig: var(--g-violett-kraeftig); --mn-bl-tief: var(--g-violett-tief); }

/* Ebene über der Seite: geschlossen unsichtbar und ohne Klicks */
.mn-blatt { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s linear 380ms; }
.mn-blatt.z-auf { visibility: visible; transition: none; }
.mn-blatt .mn-bl-schleier { position: absolute; inset: 0; background: rgb(6 17 26 / .52); opacity: 0; -webkit-tap-highlight-color: transparent;
  transition: opacity 300ms cubic-bezier(.4, 0, .75, .2); }   /* gleiche Kurve wie das Blatt: die Seite hellt erst auf, wenn das Blatt wirklich geht */
.mn-blatt.z-auf .mn-bl-schleier { opacity: 1; transition: opacity 420ms ease; }

/* Das Blatt: von unten, grosser Radius oben, Farbwolke im Ton des Reiters */
.mn-blatt .mn-bl-blatt { position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto; display: flex; flex-direction: column;
  max-height: min(88vh, 100vh - 5rem); max-height: min(88dvh, 100dvh - 5rem);
  padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right));
  border-radius: 1.75rem 1.75rem 0 0; color: var(--tinte);
  background: radial-gradient(75% 42% at 100% 0%, color-mix(in oklch, var(--mn-bl-ton) 55%, transparent), transparent 72%),
    radial-gradient(55% 30% at 0% 0%, color-mix(in oklch, var(--mn-bl-ton) 22%, transparent), transparent 70%), var(--mn-bl-grund);
  box-shadow: 0 -18px 50px -22px rgb(4 14 22 / .5);
  transform: translateY(calc(100% + 3rem)); transition: transform 300ms cubic-bezier(.4, 0, .75, .2), --mn-bl-ton 500ms ease; will-change: transform; }
.mn-blatt.z-auf .mn-bl-blatt { transform: none; transition: transform 640ms var(--mn-bl-feder), --mn-bl-ton 500ms ease; }
.mn-blatt .mn-bl-blatt::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 4rem; background: var(--mn-bl-grund); }   /* Überlänge: beim Überschwingen kein Spalt */
.mn-blatt .mn-bl-blatt[data-ton="mint"] { --mn-bl-ton: var(--g-mint-pastell); }
.mn-blatt .mn-bl-blatt[data-ton="himmel"] { --mn-bl-ton: var(--g-himmel-pastell); }
.mn-blatt .mn-bl-blatt[data-ton="violett"] { --mn-bl-ton: var(--g-violett-pastell); }
.mn-blatt.z-zieht .mn-bl-blatt, .mn-blatt.z-zieht .mn-bl-schleier { transition: none; }
/* Inhalt folgt dem Blatt mit kleinem Nachlauf (nur beim Öffnen) */
.mn-blatt.z-auf :is(.mn-bl-mulde, .mn-bl-tafeln, .mn-bl-fuss) { animation: mn-bl-rein 620ms var(--mn-bl-sanft) both; }
.mn-blatt.z-auf .mn-bl-mulde { animation-delay: 60ms; }
.mn-blatt.z-auf .mn-bl-tafeln { animation-delay: 110ms; }
.mn-blatt.z-auf .mn-bl-fuss { animation-delay: 160ms; }
@keyframes mn-bl-rein { from { opacity: 0; translate: 0 22px; } }

/* Kopf: Griff zum Ziehen, darunter die Reiter */
.mn-blatt .mn-bl-kopf { flex: none; padding: .55rem .25rem .75rem; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.mn-blatt.z-zieht .mn-bl-kopf { cursor: grabbing; }
.mn-blatt .mn-bl-griff { display: block; width: 2.5rem; height: 5px; margin: 0 auto .7rem; border-radius: 99px; background: rgb(11 29 43 / .16); }

/* Reiter als Mulde, die aktive Pille ist das Teil darin */
.mn-blatt .mn-bl-mulde { position: relative; display: flex; padding: 4px; border-radius: 999px; isolation: isolate;
  background: rgb(11 29 43 / .055); box-shadow: inset 0 1px 2px rgb(11 29 43 / .1), inset 0 -1px 0 rgb(255 255 255 / .7); }
.mn-blatt .mn-bl-reiter { all: unset; position: relative; z-index: 1; flex: 1 1 auto; display: grid; place-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px;
  font: 500 .9375rem/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap; color: var(--grau); cursor: pointer; transition: color 300ms ease; -webkit-tap-highlight-color: transparent; }
.mn-blatt .mn-bl-reiter[aria-selected="true"], .mn-blatt .mn-bl-reiter:hover { color: var(--tinte); }
.mn-blatt .mn-bl-reiter:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.mn-blatt .mn-bl-teil { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: var(--mn-bl-l, 4px); right: var(--mn-bl-r, 66%); border-radius: 999px;
  background: color-mix(in oklch, var(--mn-bl-ton) 78%, #fff);
  box-shadow: 0 1px 2px rgb(11 29 43 / .12), 0 6px 14px -6px rgb(11 29 43 / .3), inset 0 1px 0 rgb(255 255 255 / .6); }
/* elastisch: die vordere Kante läuft voraus, die hintere zieht nach */
.mn-blatt .mn-bl-mulde.z-vor .mn-bl-teil { transition: right 340ms var(--mn-bl-sanft), left 420ms var(--mn-bl-sanft) 80ms; }
.mn-blatt .mn-bl-mulde.z-zurueck .mn-bl-teil { transition: left 340ms var(--mn-bl-sanft), right 420ms var(--mn-bl-sanft) 80ms; }
/* beim Öffnen setzt sich das Teil in seine Mulde */
.mn-blatt.z-auf .mn-bl-teil { animation: mn-bl-setzen 520ms var(--mn-bl-sanft) 300ms both; }
@keyframes mn-bl-setzen { from { scale: 1.05 1.12; translate: 0 -2px; box-shadow: 0 2px 4px rgb(11 29 43 / .1), 0 14px 22px -8px rgb(11 29 43 / .32), inset 0 1px 0 rgb(255 255 255 / .6); } }

/* Tafeln: alle in derselben Zelle, Höhe = grösste Tafel; zu wenig Platz → nur die Tafel scrollt */
.mn-blatt .mn-bl-tafeln { position: relative; flex: 0 1 auto; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.mn-blatt .mn-bl-tafel { grid-area: 1 / 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y;
  padding: .25rem 0 .5rem; visibility: hidden; opacity: 0; }
.mn-blatt .mn-bl-tafel::-webkit-scrollbar { display: none; }
.mn-blatt .mn-bl-tafel.z-aktiv { visibility: visible; opacity: 1; }
.mn-blatt .mn-bl-tafel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mn-blatt .mn-bl-tafel a { -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
.mn-blatt .mn-bl-tafel li a { position: relative; display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: .6rem .75rem; border-radius: 1rem; color: var(--tinte);
  transition: background-color 200ms ease; }
.mn-blatt .mn-bl-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: .8rem;
  background: var(--mn-bl-wolke); color: var(--mn-bl-tief); transition: background-color 200ms ease; }
.mn-blatt .mn-bl-ico svg { width: 100%; height: 100%; }
.mn-blatt .mn-bl-text { display: grid; gap: .1rem; min-width: 0; }
.mn-blatt .mn-bl-text b { font-weight: 500; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; }
.mn-blatt .mn-bl-text span { font-size: .8125rem; line-height: 1.45; color: var(--grau); }
.mn-blatt .mn-bl-tafel li a:is(:hover, :focus-visible, :active) { background: var(--pf-nav-hover, var(--flaeche)); }
.mn-blatt .mn-bl-tafel li a:is(:hover, :focus-visible, :active) .mn-bl-ico { background: #fff; }
.mn-blatt .mn-bl-tafel a:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
/* aktuelle Seite: Fläche im Ton, Titel tief, Punkt rechts */
.mn-blatt .mn-bl-tafel li a[aria-current="page"] { background: color-mix(in oklch, var(--mn-bl-wolke) 85%, transparent); padding-right: 2rem; }
.mn-blatt .mn-bl-tafel li a[aria-current="page"] b { color: var(--mn-bl-tief); }
.mn-blatt .mn-bl-tafel li a[aria-current="page"] .mn-bl-ico { background: #fff; }
.mn-blatt .mn-bl-tafel li a[aria-current="page"]::after { content: ""; position: absolute; right: .9rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--mn-bl-kraeftig); }
/* Kacheln (Gruppe ohne Kurztexte, MINT): zwei Spalten, die Kacheln wachsen bis zur Höhe der grössten Tafel, damit unter den Einträgen
   keine leere Fläche bleibt; Pastell-Kachel mit weicher Wolke in der Ecke wie auf der Seite */
.mn-blatt .mn-bl-kacheln { display: flex; flex-direction: column; padding-top: .35rem; container-type: inline-size; }
/* Grundmass 0 und Mindesthöhe: die Kacheln zählen nicht zur Blatthöhe, sie füllen nur, was die grösste Tafel vorgibt – höchstens etwa quadratisch */
.mn-blatt .mn-bl-kacheln ul { flex: 1 1 0; min-height: 13.5rem; max-height: 112cqi; padding-inline: .25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .5rem; }   /* bündig mit Mulde und Fuss */
.mn-blatt .mn-bl-tafel.mn-bl-kacheln li a { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .75rem; height: 100%; min-height: 0; padding: .875rem;
  border-radius: 1.25rem; background: radial-gradient(120% 85% at 100% 100%, color-mix(in oklch, var(--mn-bl-pastell) 80%, transparent), transparent 68%), var(--mn-bl-wolke);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mn-bl-kraeftig) 14%, transparent); transition: box-shadow 200ms ease; }
.mn-blatt .mn-bl-tafel.mn-bl-kacheln li a:is(:hover, :focus-visible, :active) { background: radial-gradient(130% 95% at 100% 100%, var(--mn-bl-pastell), transparent 72%), var(--mn-bl-wolke);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mn-bl-kraeftig) 30%, transparent); }
.mn-blatt .mn-bl-kacheln .mn-bl-ico { width: 2.75rem; height: 2.75rem; padding: .6rem; background: #fff; box-shadow: 0 1px 2px rgb(11 29 43 / .06); }
.mn-blatt .mn-bl-kacheln .mn-bl-text b { font-size: 1.0625rem; line-height: 1.25; }
.mn-blatt .mn-bl-kacheln li a > .s-chev { position: absolute; top: 1.05rem; right: 1rem; color: var(--mn-bl-tief); }
.mn-blatt .mn-bl-kacheln li a:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.mn-blatt .mn-bl-kacheln li a:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }
.mn-blatt .mn-bl-tafel.mn-bl-kacheln li a[aria-current="page"] { padding-right: .875rem; box-shadow: inset 0 0 0 2px var(--mn-bl-kraeftig); }
.mn-blatt .mn-bl-tafel.mn-bl-kacheln li a[aria-current="page"]::after { top: auto; bottom: 1.1rem; right: 1rem; margin-top: 0; }
.mn-blatt .mn-bl-alle { display: flex; align-items: center; gap: .4rem; width: fit-content; min-height: 44px; margin-top: .15rem; padding: 0 .75rem; border-radius: 999px;
  font: 500 .9375rem/1.2 var(--font); color: var(--mn-bl-tief); }
.mn-blatt .mn-bl-alle[aria-current="page"] { background: color-mix(in oklch, var(--mn-bl-wolke) 85%, transparent); }
.mn-blatt .mn-bl-alle:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.mn-blatt .mn-bl-alle:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }

/* Fuss fest im Blatt: Kontakt und Telefon */
.mn-blatt .mn-bl-fuss { position: relative; flex: none; display: flex; gap: .5rem; padding: .75rem .25rem max(.9rem, env(safe-area-inset-bottom)); background: var(--mn-bl-grund); }
.mn-blatt .mn-bl-fuss::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.25rem; pointer-events: none; background: linear-gradient(to top, var(--mn-bl-grund), transparent);
  opacity: 0; transition: opacity 200ms ease; }
.mn-blatt .mn-bl-blatt.z-mehr .mn-bl-fuss::before { opacity: 1; }   /* Ausblendverlauf nur, wenn in der Tafel noch etwas folgt */
.mn-blatt .mn-bl-kontakt { flex: 1 1 auto; justify-content: center; min-height: 48px; padding-block: 0; font-size: 1rem; }
.mn-blatt .mn-bl-tel { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem; border-radius: 999px; font: 500 .9375rem/1 var(--font);
  color: var(--tinte); background: color-mix(in oklch, var(--g-mint-pastell) 30%, #fff); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 200ms ease; }
.mn-blatt .mn-bl-tel:hover { background: color-mix(in oklch, var(--g-mint-pastell) 50%, #fff); }
.mn-blatt .mn-bl-tel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.mn-blatt .mn-bl-kontakt[aria-current="page"] { box-shadow: 0 0 0 2px var(--mn-bl-grund), 0 0 0 4px var(--mint); }

/* Kopf der Seite, solange das Blatt offen ist: über dem Schleier, ohne eigene Fläche; nur das Kreuz bleibt hell. Das Logo blendet aus:
   halb durchsichtig über dem Schleier lag es sonst als Geisterbild über dem Seiteninhalt (sichtbar, sobald die Seite gerollt ist) */
@media (max-width: 900px) {
  html[data-mnav="blatt"] .s-kopf { transition: background-color 300ms ease, box-shadow 300ms ease, z-index 0s linear 380ms; }
  html[data-mnav="blatt"].z-mnav-auf .s-kopf { z-index: 61; pointer-events: none; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background-color 300ms ease, box-shadow 300ms ease, z-index 0s; }
  html[data-mnav="blatt"] .s-kopf .s-logo { transition: opacity 260ms ease; }
  html[data-mnav="blatt"].z-mnav-auf .s-kopf .s-logo { opacity: 0; }
  html[data-mnav="blatt"].z-mnav-auf .s-kopf-fortschritt { opacity: 0; }
  html[data-mnav="blatt"] .s-burger { border-radius: 50%; transition: background-color 300ms ease, box-shadow 300ms ease; }
  html[data-mnav="blatt"].z-mnav-auf .s-burger { pointer-events: auto; background: var(--papier); color: var(--tinte); box-shadow: 0 8px 24px -8px rgb(0 0 0 / .45); }
}

/* breitere Fenster (Querformat, Tablet): Blatt mittig, das Kreuz rechts bleibt frei */
@media (min-width: 640px) { .mn-blatt .mn-bl-blatt { width: min(34rem, 100% - 9rem); } }
@media (min-width: 640px) and (max-height: 520px) { .mn-blatt .mn-bl-blatt { width: min(40rem, 100% - 9rem); max-height: calc(100vh - .75rem); max-height: calc(100dvh - .75rem); }
  .mn-blatt .mn-bl-tafel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .25rem; }   /* Querformat: zwei Spalten, alles auf einen Blick */
  .mn-blatt .mn-bl-kacheln ul { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .5rem; min-height: 7rem; max-height: none; } }   /* Kacheln: eine Reihe */
/* niedrige Fenster: Kurztexte weglassen, damit alles auf einen Bildschirm passt */
@media (max-height: 740px) { .mn-blatt .mn-bl-text span { display: none; } .mn-blatt .mn-bl-tafel li a { min-height: 3.25rem; padding-block: .4rem; } }
@media (max-height: 620px) { .mn-blatt .mn-bl-tafel li a { min-height: 3rem; padding-block: .25rem; } .mn-blatt .mn-bl-ico { width: 2.25rem; height: 2.25rem; padding: .5rem; } }
@media (max-height: 520px) { .mn-blatt .mn-bl-kopf { padding-top: .4rem; padding-bottom: .5rem; } .mn-blatt .mn-bl-griff { margin-bottom: .45rem; } }
/* niedrig und schmal (z. B. 568×320): Kacheln flach wie Zeilen, damit möglichst wenig gescrollt werden muss */
@media (max-height: 520px) and (max-width: 639px) {
  .mn-blatt .mn-bl-kacheln ul { min-height: 0; max-height: none; grid-auto-rows: auto; }
  .mn-blatt .mn-bl-tafel.mn-bl-kacheln li a { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 3rem; padding: .25rem 2rem .25rem .375rem; border-radius: 1rem; }
  .mn-blatt .mn-bl-kacheln .mn-bl-ico { width: 2.25rem; height: 2.25rem; padding: .5rem; }
  .mn-blatt .mn-bl-kacheln .mn-bl-text b { font-size: 1rem; }
  .mn-blatt .mn-bl-kacheln li a > .s-chev { top: 50%; margin-top: -.35rem; right: .9rem; }
  .mn-blatt .mn-bl-tafel.mn-bl-kacheln li a[aria-current="page"]::after { display: none; } }
/* sehr schmal: Reiter enger */
@media (max-width: 359px) { .mn-blatt .mn-bl-reiter { padding: 0 .5rem; font-size: .8125rem; } .mn-blatt .mn-bl-tel { padding: 0 .9rem; font-size: .875rem; } }

/* Dunkel */
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt { --mn-bl-grund: #0f1e2a; }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-schleier { background: rgb(0 0 0 / .62); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-blatt { color: var(--text-hell); box-shadow: 0 -18px 50px -22px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06);
  background: radial-gradient(75% 42% at 100% 0%, color-mix(in oklch, var(--mn-bl-ton) 20%, transparent), transparent 72%),
    radial-gradient(55% 30% at 0% 0%, color-mix(in oklch, var(--mn-bl-ton) 9%, transparent), transparent 70%), var(--mn-bl-grund); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-griff { background: rgb(255 255 255 / .2); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-mulde { background: rgb(0 0 0 / .28); box-shadow: inset 0 1px 2px rgb(0 0 0 / .45), inset 0 -1px 0 rgb(255 255 255 / .05); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-reiter:hover { color: var(--text-hell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-reiter[aria-selected="true"] { color: #0b1d2b; }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-teil { background: color-mix(in srgb, var(--mn-bl-ton) 88%, #0f1e2a); box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -6px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .35); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel li a { color: var(--text-hell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-ico { background: color-mix(in oklch, var(--mn-bl-kraeftig) 18%, transparent); color: var(--mn-bl-pastell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel li a:is(:hover, :focus-visible, :active) .mn-bl-ico,
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel li a[aria-current="page"] .mn-bl-ico { background: rgb(255 255 255 / .08); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel li a[aria-current="page"],
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-alle[aria-current="page"] { background: color-mix(in oklch, var(--mn-bl-kraeftig) 16%, transparent); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel li a[aria-current="page"] b, html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-alle { color: var(--mn-bl-pastell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel.mn-bl-kacheln li a { background: radial-gradient(120% 85% at 100% 100%, color-mix(in oklch, var(--mn-bl-kraeftig) 24%, transparent), transparent 68%), rgb(255 255 255 / .035);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel.mn-bl-kacheln li a:is(:hover, :focus-visible, :active) { background: radial-gradient(130% 95% at 100% 100%, color-mix(in oklch, var(--mn-bl-kraeftig) 36%, transparent), transparent 72%), rgb(255 255 255 / .05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tafel.mn-bl-kacheln li a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--mn-bl-kraeftig); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-kacheln .mn-bl-ico { background: rgb(255 255 255 / .08); box-shadow: none; }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-kacheln li a > .s-chev { color: var(--mn-bl-pastell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tel { background: rgb(255 255 255 / .07); color: var(--text-hell); }
html[data-mnav="blatt"][data-thema="dunkel"] .mn-blatt .mn-bl-tel:hover { background: rgb(255 255 255 / .12); }
html[data-mnav="blatt"][data-thema="dunkel"].z-mnav-auf .s-burger { background: #16283a; color: var(--text-hell); box-shadow: 0 8px 24px -8px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .08); }

/* Bewegung reduzieren: nichts gleitet, nur ein- und ausblenden */
@media (prefers-reduced-motion: reduce) {
  .mn-blatt .mn-bl-blatt, .mn-blatt.z-auf .mn-bl-blatt { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .mn-blatt.z-auf .mn-bl-blatt { opacity: 1; }
  .mn-blatt.z-zieht .mn-bl-blatt { opacity: 1; }
  .mn-blatt.z-auf :is(.mn-bl-mulde, .mn-bl-tafeln, .mn-bl-fuss, .mn-bl-teil) { animation: none; }
  .mn-blatt .mn-bl-mulde:is(.z-vor, .z-zurueck) .mn-bl-teil { transition: none; }
  .mn-blatt .mn-bl-reiter { transition: none; }
  html[data-mnav="blatt"] .s-burger { transition: none; }
}