/* AI Værk, nav.css: Kopfzeile und Menue der Brand-Site (Praefix mn-).
   Laedt nach icons.css, nur ueber ai-vaerk/templates/head.php. Die ki-*-
   Regionalseiten behalten ihre alte Leiste (.site-nav, .nav-toggle in
   base.css) und laden diese Datei nicht.

   Aufbau:
   1. Werte               4. Linke Spalte          7. Bewegung
   2. Kopfzeile           5. Farbfeld              8. Unter 1100 px
   3. Blatt               6. Suche (Minimum)       9. Reduzierte Bewegung
   10. Mobilmenue (mit eigener Reduzierte-Bewegung-Variante)

   Desktop-Blatt nach "7R Farbfeld, ruhig" aus dem Menue-Labor
   (docs/superpowers/specs/2026-09-25-navigation-prototype.src.html).
   Farbe traegt genau einen Moment: das Feld. Alles andere bleibt Papier,
   Tinte und Stein. Hover nur unter (hover: hover). */

/* ── 1. Werte ──────────────────────────────────────────── */
/* --ease-out gibt es in tokens.css nicht; es lebt deshalb nur hier. */
.mn-header,
.mn-scrim {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mn-hh: 66px;
  --mn-field-h: 580px;
  /* Inhaltswechsel im offenen Blatt (nav.js liest die Werte, Abschnitt 7).
     Dauer in ms; Strecke seitlich (Bereiche, etwa eine Zeilenhoehe der
     31-px-Liste) und senkrecht (Punkte, Treffer); eine Mikro-Unschaerfe
     von 2 px (neu 2 -> 0, alt 0 -> 2), spuerbar, aber klein. Die Kurve
     gilt fuer Weg und Unschaerfe; sie laesst den Weg sichtbar, waehrend
     der neue Inhalt einblendet (Richtung lesbar). Die Deckkraft laeuft
     nach der Uhr (nav.js, run()): der alte Text weicht bis 58 % der
     Dauer, der neue trifft von 10 % bis 70 % ein. Beide ueberlappen, die
     Summe faellt nie unter etwa 0,9: keine Leerphase. Weg, Richtung und
     Unschaerfe halten sie im Ueberlapp auseinander. Der Fuss (Beleg,
     Knopf) bewegt sich nicht; nur sein Text blendet aus und ein. */
  --mn-swap-ms: 300;
  --mn-swap-dx: 28px;
  --mn-swap-dy: 14px;
  --mn-swap-blur: 2px;
  --mn-swap-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mn-swap-out-end: 0.58;
  --mn-swap-in-start: 0.1;
  --mn-swap-in-end: 0.7;
  --mn-foot-out-ms: 90;
  --mn-foot-in-ms: 160;
}

/* Der Glow ist eine registrierte Farbe: so gleitet er mit dem Ton an Ort
   und Stelle in die neue Farbe, statt zu fallen und neu aufzusteigen.
   Ohne @property (aeltere Browser) wechselt er sofort. */
@property --mn-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

/* Alles mit hidden-Attribut bleibt verborgen, auch wenn eine Regel unten
   display setzt. JS entfernt hidden, nicht CSS. */
.mn-header [hidden],
.mn-scrim[hidden] { display: none !important; }

.mn-header .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 2. Kopfzeile ──────────────────────────────────────── */
/* Gleiche Masse wie die alte .nav-row: 66 px plus die 1-px-Linie von
   .site-header. Sticky-Offsets anderer Seiten haengen daran. */
.mn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--mn-hh);
}
.mn-bar { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.mn-bar ul { display: flex; align-items: center; gap: 8px; list-style: none; }
.mn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 9px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.mn-trigger .mn-chev {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--stone);
  transition: rotate 0.3s var(--ease), color 0.2s var(--ease);
}
.mn-trigger[aria-expanded="true"] { color: var(--ink); background-color: rgba(33, 30, 26, 0.075); }
.mn-trigger[aria-expanded="true"] .mn-chev { rotate: 180deg; color: var(--ink); }

.mn-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.mn-search-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--ink-soft);
  background: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.mn-search-btn svg { width: 17px; height: 17px; }
.mn-search-btn[aria-expanded="true"] { color: var(--ink); background-color: rgba(33, 30, 26, 0.07); }
.mn-cta { flex: none; }

/* Zweistrich-Grafik wie die alte .nav-toggle; wird zum Kreuz. */
.mn-burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.mn-burger-box { display: block; position: relative; width: 20px; height: 12px; }
.mn-burger-box i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ink);
  transition: rotate 0.35s var(--ease), top 0.35s var(--ease);
}
.mn-burger-box i:first-child { top: 0; }
.mn-burger-box i:last-child { top: 10px; }
.mn-burger[aria-expanded="true"] .mn-burger-box i:first-child { top: 5px; rotate: 45deg; }
.mn-burger[aria-expanded="true"] .mn-burger-box i:last-child { top: 5px; rotate: -45deg; }

@media (hover: hover) {
  .mn-trigger:hover { color: var(--ink); background-color: rgba(33, 30, 26, 0.05); }
  .mn-trigger[aria-expanded="true"]:hover { background-color: rgba(33, 30, 26, 0.075); }
  .mn-search-btn:hover { color: var(--ink); background-color: rgba(33, 30, 26, 0.07); }
}

/* Zwischen 1100 und 1240 px wird die Leiste eng: Abstaende ruecken
   zusammen, statt dass etwas umbricht oder verschwindet. */
@media (min-width: 1100px) and (max-width: 1240px) {
  .mn-row { gap: 16px; }
  .mn-bar ul { gap: 5px; }
  .mn-trigger { padding-inline: 7px; gap: 5px; }
  .mn-actions { gap: 6px; }
}

/* ── 3. Blatt ──────────────────────────────────────────── */
/* Haengt direkt unter der Kopfzeile, volle Breite. top: 100% setzt es auf
   die Unterlinie der Kopfzeile: Kopf und Blatt verschmelzen. */
.mn-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--mn-hh) - 40px);
  max-height: calc(100dvh - var(--mn-hh) - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  box-shadow: 0 40px 60px -30px rgba(25, 23, 19, 0.3);
}
.mn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: stretch;
  gap: 40px;
  padding-block: 26px 30px;
}

/* Abdunkelung der Seite. Liegt unter der Kopfzeile (z 40), ueber main. */
.mn-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(25, 23, 19, 0.3);
}

/* Der schwebende Kontakt-Einstieg liegt ueber allem (z 90). Solange das
   Blatt offen ist, tritt er zurueck, statt hell ueber der Abdunkelung zu
   stehen. */
.fab { transition: opacity 0.3s var(--ease), visibility 0s linear 0s; }
html.mn-open-desktop .fab {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-exit), visibility 0s linear 0.2s;
}
/* Gleiches fuer den Sprach-Hinweis unten links (auch z 90). Seine eigene
   Transition aus base.css blendet ihn aus. */
html.mn-open-desktop .lang-hint { opacity: 0; pointer-events: none; }

/* ── 4. Linke Spalte ───────────────────────────────────── */
.mn-left { display: flex; flex-direction: column; min-width: 0; }
.mn-kicker { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--stone); }
.mn-list { list-style: none; }
.mn-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 5px 0;
  text-align: left;
  font-family: var(--font-brand);
  font-size: 31px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--stone-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.22s var(--ease);
}
.mn-item[aria-selected="true"] { color: var(--ink); }
.mn-item .mn-price {
  flex: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--stone-faint);
  translate: 0 -2px;
  transition: color 0.25s var(--ease);
}
.mn-item[aria-selected="true"] .mn-price { color: var(--stone); }
.mn-intro {
  margin-top: 20px;
  max-width: 36ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--stone);
}

/* Gruppentitel: klein, Stein, Fliesstext-Schrift. */
.mn-sheet .mn-grp {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--stone);
}

/* Kostenlose Werkzeuge: leise, ein Punkt und Text. */
.mn-tools { margin-top: auto; padding-top: 24px; }
.mn-tools .mn-grp { margin-bottom: 4px; }
.mn-tools ul { display: grid; justify-items: start; list-style: none; }
.mn-tools a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.mn-tools a i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t);
  box-shadow: 0 0 0 1px rgba(33, 30, 26, 0.14);
}

/* Link auf die Seite des Bereichs (z. B. /loesungen) unter der Liste: der
   Ausloeser oeffnet nur das Panel. Aussehen wie .mn-more im Feld, der
   Pfeil bewegt sich per site.js (data-go) wie ueberall. */
.mn-left .mn-ovlink {
  align-self: flex-start;
  margin: 14px 0 0;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.35s var(--ease);
}
.mn-ovlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (hover: hover) {
  .mn-ovlink:hover { text-decoration-color: rgba(33, 30, 26, 0.35); }
  .mn-item:hover { color: var(--ink-soft); }
  .mn-item[aria-selected="true"]:hover { color: var(--ink); }
  .mn-item:hover .mn-price { color: var(--stone); }
  .mn-tools a:hover { color: var(--ink); }
}

/* ── 5. Farbfeld ───────────────────────────────────────── */
/* Feste Hoehe fuer alle Punkte und Sprachen. Edge-Glow wie .feld-card in
   pages.css: ein weicher Verlauf im kraeftigeren Ton von der Unterkante.
   Das Feld ist Rahmen: beim Wechsel gleiten Flaeche und Glow gemeinsam
   in den neuen Ton (--mn-glow ist registriert, siehe Abschnitt 1); der
   Glow faellt nicht und bewegt sich nicht. Gleicher Ton: nichts passiert.
   Gemalt wird dabei nur, was die Flaechenfarbe ohnehin neu malt. */
.mn-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: var(--mn-field-h, 580px);
  border-radius: 22px;
  background-color: var(--mn-plate, var(--card));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background-color 0.5s var(--ease), --mn-glow 0.5s var(--ease);
}
.mn-field::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(92% 115% at 50% 110%, var(--mn-glow, transparent), transparent 74%);
}
/* Karten-Glow wie bei den Loesungsfeldern der Startseite (.feld-card::after
   in pages.css): zeigt man auf den Kopf der Platte, der zur Seite des
   Punkts fuehrt, steigt ein zweiter, hoeherer Glow im Ton des Felds weich
   auf und sinkt beim Verlassen weich zurueck. Nur Deckkraft, kein Lift. */
.mn-field::after {
  content: "";
  position: absolute;
  inset: 12% 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(96% 120% at 50% 112%, var(--mn-glow, transparent), transparent 78%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.mn-field:has(.mn-ph > .mn-more:focus-visible)::after { opacity: 1; }
@media (hover: hover) {
  .mn-field:has(.mn-ph > .mn-more:hover)::after { opacity: 1; }
}
.mn-field[data-tone="sage"]  { --mn-plate: var(--sage);  --mn-glow: rgba(154, 196, 85, 0.3); }
.mn-field[data-tone="slate"] { --mn-plate: var(--slate); --mn-glow: rgba(111, 163, 216, 0.28); }
.mn-field[data-tone="sand"]  { --mn-plate: var(--sand);  --mn-glow: rgba(235, 154, 95, 0.26); }
.mn-field[data-tone="clay"]  { --mn-plate: var(--clay);  --mn-glow: rgba(224, 122, 111, 0.24); }
.mn-field[data-tone="lilac"] { --mn-plate: var(--lilac); --mn-glow: rgba(157, 132, 216, 0.26); }
.mn-field[data-tone="rose"]  { --mn-plate: #f2dfe5;      --mn-glow: rgba(214, 112, 150, 0.22); }
.mn-field[data-tone="card"]  { --mn-plate: var(--card);  --mn-glow: rgba(179, 172, 159, 0.22); }

/* Feste Zonen: Kopf oben, Mitte, Beleg und naechster Schritt unten. Die
   Mitte wird nie gestaucht, sonst rutscht sie unbemerkt unter den Fuss. */
.mn-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 36px 28px;
}
.mn-plate[hidden] { display: none; }
/* Buehne: was sich im Feld bewegt (nav.js legt .mn-stage an). */
.mn-preview,
.mn-stage { position: absolute; inset: 0; }

/* Fuss des Felds (nav.js, "Fuss"): Beleg links, dunkler Knopf rechts,
   genau ueber dem Fuss der gezeigten Platte. Er gehoert zum Rahmen und
   wechselt nicht mit dem Inhalt; die Fuesse der Platten halten nur noch
   ihren Platz im Layout. */
.mn-foot-on .mn-plate .mn-pf { visibility: hidden; }
.mn-foot {
  position: absolute;
  right: 36px;
  bottom: 28px;
  left: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.mn-foot > * { pointer-events: auto; }
.mn-foot-proof { display: flex; min-width: 0; }
.mn-foot .btn { flex: none; }
.mn-act-t { display: inline-flex; flex: none; align-items: center; gap: 9px; }
/* Waehrend der Knopf auf seine neue Breite gleitet, bleibt der Pfeil
   rechts stehen; ueberstehender Text wird vom Knopf beschnitten. */
.mn-act.is-resizing { justify-content: flex-end; }
.mn-panel.is-out .mn-foot { visibility: hidden; }

.mn-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Das Kreuz von icon('close') fuellt nur ein Drittel seiner Box. */
.mn-x svg { width: 22px; height: 22px; }

/* Kopf: Titel, Preiszeile, Nutzen-Satz, Seitenlink. Rechts Platz fuer ✕. */
.mn-ph { flex: none; padding-right: 48px; }
.mn-ph h3 {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 560;
  letter-spacing: -0.024em;
  line-height: 1.15;
  color: var(--ink);
}
.mn-price-long {
  margin-top: 6px;
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 540;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}
.mn-desc {
  margin: 8px 0 18px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mn-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -6px 0 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

/* Hauptabsicht der Platte: der ganze Kopf (Titel, Satz, Link) fuehrt zur
   Seite des Punkts, nicht nur die kleine Zeile darunter. Ein Link, eine
   grosse Flaeche: das ::before des Links spannt ueber den Kopf (bleibt
   ein Tab-Halt, Vorleser hoeren einen Link). Rechts endet die Flaeche vor
   dem ✕. Kein Kasten beim Zeigen: der Titel bekommt eine feine
   Unterstreichung, die weich ein- und ausblendet, der Pfeil laeuft
   (site.js). Mit der Tastatur umrandet der Fokus die ganze Flaeche. */
.mn-ph { position: relative; }
.mn-ph > .mn-more::before {
  content: "";
  position: absolute;
  inset: -10px 20px 9px -14px;
  z-index: 1;
  border-radius: 14px;
}
.mn-ph > .mn-more:focus-visible { outline: none; }
.mn-ph > .mn-more:focus-visible::before { outline: 2px solid var(--accent); outline-offset: 0; }
.mn-ph h3 {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.35s var(--ease);
}
/* Der Pfeil zeigt die Richtung: er rueckt beim Zeigen 3 px vor (wie auf
   den Karten der Startseite) und bleibt dort, solange der Zeiger auf dem
   Kopf ist; dazu spielt die Pfeil-Geste aus icons.css (site.js, data-go),
   und das Feld leuchtet wie eine Karte (.mn-field::after). Weich hin und
   zurueck. */
.mn-ph > .mn-more .ai-ico { transition: translate 0.4s var(--ease); }
.mn-ph > .mn-more:focus-visible .ai-ico { translate: 3px 0; }
.mn-ph:has(> .mn-more:focus-visible) h3 { text-decoration-color: rgba(33, 30, 26, 0.45); }
@media (hover: hover) {
  .mn-ph:has(> .mn-more:hover) h3 { text-decoration-color: rgba(33, 30, 26, 0.45); }
  .mn-ph > .mn-more:hover .ai-ico { translate: 3px 0; }
}

/* Mitte: Seiten in zwei Spalten, Zusammenarbeit, Fakten, Schlagworte. */
.mn-pb { position: relative; flex-shrink: 0; min-height: 0; }

/* Zeiger-Licht (nav.js): ein heller Grund je Platte, der dem Zeiger von
   Zeile zu Zeile folgt und sich ihrer Groesse anpasst, statt dass jede
   Zeile ihren eigenen Kasten an- und ausschaltet. Weich hinein und
   hinaus. Material wie das Feld selbst: ein Hauch Weiss mit der gleichen
   Lichtkante oben, kein Rand, kein Schatten. z-index -1 legt es im
   Stapel des Felds unter den Text und ueber den Glow. */
.mn-light {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease),
    translate 0.38s var(--ease),
    width 0.38s var(--ease),
    height 0.38s var(--ease);
}
.mn-light.is-on { opacity: 1; transition-duration: 0.28s, 0.38s, 0.38s, 0.38s; }
/* Erscheinen an Ort und Stelle: nur die Deckkraft laeuft. */
.mn-light.is-placing { transition: opacity 0.28s var(--ease); }
.mn-pb > .mn-grp { color: var(--ink-soft); }
.mn-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px; /* Zeilen mit Hover-Flaeche nie aneinander */
  margin: 0 0 12px;
  list-style: none;
}
.mn-cols a {
  display: block;
  height: 100%;
  margin-inline: -12px;
  padding: 7px 12px;
  border-radius: 11px;
  text-decoration: none;
}
.mn-cols b {
  display: block;
  font-size: 15.5px;
  font-weight: 520;
  line-height: 1.35;
  color: var(--ink);
}
.mn-cols a > span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: 0.8;
}

.mn-chip {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.62);
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.mn-collab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.mn-sheet .mn-collab .mn-grp { margin: 0 8px 0 0; color: var(--ink-soft); }

.mn-gets { display: grid; gap: 8px; margin: 0 0 4px; list-style: none; }
.mn-gets li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.mn-gets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
}

.mn-notes-block,
.mn-tags-block { margin-top: 14px; }
.mn-pb > :first-child { margin-top: 0; }
.mn-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 18px;
}
.mn-notes dt { font-size: 14px; font-weight: 540; line-height: 1.4; color: var(--ink); }
.mn-notes dd { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); opacity: 0.85; }
.mn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-tags span {
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px rgba(33, 30, 26, 0.14);
}
.mn-rel { margin-top: 26px; }
.mn-sheet .mn-rel .mn-grp { margin-bottom: 8px; color: var(--ink-soft); }
.mn-rel > div { display: flex; flex-wrap: wrap; gap: 6px; }

/* Fuss: Beleg links, naechster Schritt rechts, immer an der Unterkante. */
.mn-pf {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
}
.mn-pf .btn { flex: none; }
.mn-pf-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 40ch;
  color: inherit;
  text-decoration: none;
}
.mn-pf-txt { display: grid; gap: 1px; min-width: 0; }
.mn-pf-txt small { font-size: 12px; line-height: 1.4; color: var(--ink-soft); opacity: 0.75; }
.mn-pf-txt b {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.35s var(--ease);
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
}
.mn-pf-txt > span { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.mn-faces { display: flex; flex: none; }
.mn-faces img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--mn-plate, var(--card));
  /* Der Ring folgt dem Ton des Felds, wie die Flaeche. */
  transition: box-shadow 0.5s var(--ease);
}
.mn-faces img + img { margin-left: -10px; }

/* Schmale Desktops: das Feld wird enger, Texte brechen oefter um. Mehr
   Breite fuers Feld und Beschreibungen der Seiten auf eine Zeile, damit
   nichts ueber die feste Hoehe laeuft. Der Link zeigt den ganzen Text. */
.mn-cols a > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1279px) {
  .mn-grid { gap: 32px; }
  .mn-plate { padding-inline: 30px; }
  .mn-foot { right: 30px; left: 30px; }
  .mn-desc { margin-bottom: 16px; }
  .mn-cols a { padding-block: 6px; }
  .mn-cols a > span { -webkit-line-clamp: 1; line-clamp: 1; }
}

@media (hover: hover) {
  .mn-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.9); }
  .mn-chip:hover { color: var(--ink); background: rgba(255, 255, 255, 0.88); }
  a.mn-pf-proof:hover b { text-decoration-color: rgba(33, 30, 26, 0.35); }
}

/* ── 6. Suche (Minimum) ────────────────────────────────── */
/* Nur so viel, dass das Such-Panel das Blatt nicht sprengt. Treffer,
   Auswahl und Vorschau gestaltet Task 5. */
.mn-sfield {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 18px -14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--paper-deep);
}
.mn-sfield svg { flex: none; width: 20px; height: 20px; color: var(--stone); }
.mn-sheet .mn-q {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mn-sheet .mn-q::placeholder { color: var(--stone-faint); }
.mn-sheet .mn-q::-webkit-search-cancel-button { display: none; }
.mn-sfield:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.mn-results { min-height: 0; }

/* Trefferliste: gleiche Punktschrift wie .mn-item, Auswahl in Tinte, Rest
   steinblass (Prototyp .s1-row). */
.mn-slist { display: grid; list-style: none; margin: 4px 0 0; padding: 0; }
.mn-srow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 7px 0;
  text-align: left;
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--stone-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.mn-srow-t mark { background: none; color: var(--ink-soft); }
.mn-srow.is-sel,
.mn-srow.is-sel mark { color: var(--ink); }
.mn-srow small {
  flex: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--stone-faint);
  white-space: nowrap;
}
.mn-srow.is-sel small { color: var(--stone); }
.mn-snone { margin: 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--stone); }
.mn-ext { margin-left: 5px; vertical-align: -1px; }

/* Jev-Vorschlaege (Aufgabe 6): kleines Abzeichen neben der Ueberschrift,
   ruhiges Pulsieren waehrend die Anfrage laeuft. */
.mn-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sand, #f2ede4);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--stone);
  vertical-align: 1px;
}
.mn-grp-loading { animation: mn-pulse 1.3s ease-in-out infinite; }
@keyframes mn-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* Vorschau-Platten (Aufgabe 5b). Uebersicht: die Punkte eines Bereichs
   als ruhige Liste, der Preis rechts in der Markenschrift, darunter die
   Unterzeile. Haarlinien trennen die Zeilen, Farbe bleibt beim Feld.
   Werkzeuge und Regionen nutzen die Bausteine der Punkt-Platten. */
.mn-ov { display: grid; margin: 0; list-style: none; }
.mn-ov li + li { border-top: 1px solid rgba(33, 30, 26, 0.09); }
.mn-ov a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 18px;
  margin-inline: -12px;
  padding: 7px 12px;
  border-radius: 11px;
  text-decoration: none;
}
.mn-ov b {
  min-width: 0;
  font-size: 15.5px;
  font-weight: 520;
  line-height: 1.35;
  color: var(--ink);
}
.mn-ov-v {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--ink);
}
.mn-ov small {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: 0.8;
}
.mn-ov-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

/* Treffer auf einer Unterseite: in der Eltern-Platte traegt ihr Link einen
   hellen Grund im Ton des Felds, Tinte und einen kleinen Pfeil. Er blendet
   nach dem Plattenwechsel weich ein. Fehlt der Link in der Platte, steht
   er oben in der Mitte als eigene Zeile (.mn-hit, nav.js markHit()). */
.mn-plate .is-hit {
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.78);
  animation: mn-hit-in 0.5s var(--ease) 0.14s both;
}
.mn-cols a.is-hit > span { opacity: 0.95; }
.mn-cols a.is-hit b::after,
.mn-chip.is-hit::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 7px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 128h176M144 56l72 72-72 72'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 128h176M144 56l72 72-72 72'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-chip.is-hit { background-color: #fff; }
.mn-chip.is-hit::after { width: 11px; height: 11px; margin-left: 6px; }
@keyframes mn-hit-in { from { background-color: rgba(255, 255, 255, 0); } }
.mn-hit { margin-bottom: 12px; }
.mn-hit .mn-cols { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }

@media (hover: hover) {
  .mn-srow:hover { color: var(--ink-soft); }
  .mn-srow.is-sel:hover { color: var(--ink); }
  .mn-ov-more:hover { color: var(--ink); }
  .mn-plate .is-hit:hover { background-color: #fff; }
}

/* ── 7. Bewegung ───────────────────────────────────────── */
/* Werte aus dem Labor. Eigene Keyframe-Namen mit mn-, weil diese Datei
   zuletzt laedt und gleichnamige Keyframes anderer Dateien ueberschriebe.
   Oeffnen: das Blatt zieht per clip-path von oben auf, Liste und Feld
   folgen gestaffelt. -140px unten laesst den Schatten stehen.
   Wechseln (im offenen Blatt): Blatt, Feld, Fuss (Beleg, Knopf), ✕ und
   Werkzeuge bleiben stehen, Ton und Glow gleiten. Der Inhalt tauscht sich als Gruppe, alt
   und neu gleichzeitig, ohne Staffel und ohne Leerphase; nav.js fuehrt
   das mit den Werten --mn-swap-* aus Abschnitt 1 (Web Animations auf
   opacity, translate und filter). Schliessen: erst der Inhalt (0.12s),
   dann faehrt das Blatt hoch (0.3s). */
@keyframes mn-sheet-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -140px 0); } }
@keyframes mn-sheet-out { from { clip-path: inset(0 0 -140px 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes mn-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes mn-rise-soft { from { opacity: 0; translate: 0 6px; } }
@keyframes mn-fade-in { from { opacity: 0; } }
@keyframes mn-fade-out { to { opacity: 0; } }

/* Oeffnen (nur beim frischen Oeffnen; ein Bereichswechsel spielt das
   nicht noch einmal ab). */
.mn-sheet.fx-open { animation: mn-sheet-in 0.44s var(--ease-out) both; }
.mn-sheet.fx-open .mn-kicker { animation: mn-rise-soft 0.42s var(--ease-out) 70ms both; }
.mn-sheet.fx-open .mn-list li { animation: mn-rise 0.44s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 32ms + 100ms); }
.mn-sheet.fx-open .mn-field { animation: mn-rise 0.5s var(--ease-out) 160ms both; }
.mn-sheet.fx-open .mn-ovlink { animation: mn-rise-soft 0.42s var(--ease-out) 250ms both; }
.mn-sheet.fx-open .mn-intro,
.mn-sheet.fx-open .mn-tools { animation: mn-rise-soft 0.42s var(--ease-out) 280ms both; }
.mn-scrim:not(.is-leaving) { animation: mn-fade-in 0.32s var(--ease) both; }

/* Blatt noch unterwegs (Aufgabe 10, nav.js "Nachladen"): nach 120 ms zieht
   ein leerer Rahmen in voller Hoehe auf, das neutrale Feld steht dabei
   schon. Kommt das Blatt, oeffnet es in diesen Rahmen hinein (.fx-fill):
   das Feld steigt nicht noch einmal auf und gleitet nur in seinen Ton, der
   Inhalt steigt ein wie beim Oeffnen (Liste und linke Spalte ueber die
   fx-open-Regeln oben, Buehne, Fuss und ✕ im Takt des Felds). */
.mn-sheet.fx-open .mn-wait .mn-field,
.mn-sheet.fx-fill .mn-field { animation: none; }
.mn-sheet.fx-fill .mn-stage,
.mn-sheet.fx-fill .mn-preview,
.mn-sheet.fx-fill .mn-foot,
.mn-sheet.fx-fill .mn-x { animation: mn-rise 0.5s var(--ease-out) 160ms both; }
.mn-sheet.fx-fill .mn-sfield,
.mn-sheet.fx-fill .mn-results { animation: mn-rise-soft 0.42s var(--ease-out) 70ms both; }

/* Bereichswechsel: das alte Panel liegt fuer die Dauer seines Austritts
   deckungsgleich ueber dem neuen. Sein Feld wird durchsichtig, damit man
   nur einen Rahmen sieht (den neuen, der vom alten Ton in den eigenen
   gleitet); ✕ und Werkzeuge stehen im neuen Panel am selben Ort. inert
   setzt nav.js, pointer-events ist die Sicherung dazu. */
.mn-panel.is-out {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.mn-panel.is-out .mn-field {
  background-color: transparent;
  box-shadow: none;
  transition: none;
}
.mn-panel.is-out .mn-field::before,
.mn-panel.is-out .mn-field::after,
.mn-panel.is-out .mn-x,
.mn-panel.is-out .mn-tools { visibility: hidden; }

/* Schliessen: steht zuletzt, damit es jede Einstiegs-Animation schlaegt. */
.mn-sheet.is-leaving { animation: mn-sheet-out 0.3s var(--ease-exit) 0.07s both; pointer-events: none; }
.mn-sheet.is-leaving .mn-panel { animation: mn-fade-out 0.12s var(--ease-exit) both; }
.mn-scrim.is-leaving { animation: mn-fade-out 0.34s var(--ease-exit) both; pointer-events: none; }

/* ── 8. Unter 1100 px ──────────────────────────────────── */
/* Desktop-Leiste, Lupe, Knopf und Blatt treten ab; Marke, Sprachwahl und
   Menueknopf bleiben. Das Mobilmenue selbst gestaltet Task 7. */
@media (max-width: 1099px) {
  .mn-header { --mn-hh: 60px; }
  .mn-bar,
  .mn-search-btn,
  .mn-cta,
  .mn-sheet { display: none !important; }
  .mn-burger { display: grid; }
  .mn-actions { gap: 6px; }
}
@media (min-width: 1100px) {
  .mn-burger,
  .mn-mobile { display: none !important; }
}

/* ── 9. Reduzierte Bewegung ────────────────────────────── */
/* Nichts faehrt, nichts blendet: Blatt und Inhalte stehen sofort da,
   Farbwechsel springen. nav.js wechselt Bereiche, Punkte und Treffer
   dann ohne Bewegung und ohne Unschaerfe. */
@media (prefers-reduced-motion: reduce) {
  .mn-sheet.fx-open,
  .mn-sheet.fx-open .mn-kicker,
  .mn-sheet.fx-open .mn-list li,
  .mn-sheet.fx-open .mn-field,
  .mn-sheet.fx-open .mn-ovlink,
  .mn-sheet.fx-open .mn-intro,
  .mn-sheet.fx-open .mn-tools,
  .mn-sheet.fx-fill .mn-stage,
  .mn-sheet.fx-fill .mn-preview,
  .mn-sheet.fx-fill .mn-foot,
  .mn-sheet.fx-fill .mn-x,
  .mn-sheet.fx-fill .mn-sfield,
  .mn-sheet.fx-fill .mn-results,
  .mn-scrim:not(.is-leaving),
  .mn-scrim.is-leaving,
  .mn-sheet.is-leaving,
  .mn-sheet.is-leaving .mn-panel,
  .mn-grp-loading,
  .mn-plate .is-hit { animation: none; }
  .mn-trigger,
  .mn-trigger .mn-chev,
  .mn-search-btn,
  .mn-burger-box i,
  .mn-item,
  .mn-item .mn-price,
  .mn-tools a,
  .mn-left .mn-ovlink,
  .mn-field,
  .mn-field::after,
  .mn-faces img,
  .mn-x,
  .mn-ph h3,
  .mn-ph > .mn-more .ai-ico,
  .mn-light,
  .mn-light.is-on,
  .mn-pf-txt b,
  .mn-cols a,
  .mn-chip,
  .mn-srow,
  .mn-ov a,
  .mn-ov-more,
  .fab,
  html.mn-open-desktop .fab { transition: none; }
}

/* ── 10. Mobilmenue ────────────────────────────────────── */
/* "1A eingeklappt" (Mix 1A+) aus dem Menue-Labor: oben ein schlichtes
   Suchfeld, darunter die Bereiche als Zeilen, immer hoechstens einer
   offen. Punkte mit Unterseiten klappen eine schlichte Liste im leichten
   Farbton auf, Preise zeigt die Preisstufen. Werkzeuge und Regionen
   stehen leise am Ende, unten sitzt ein Knopf, der den naechsten Schritt
   nennt: des offenen Punkts, sonst des ersten Punkts im offenen Bereich
   (nav.js, ctaSource()).
   Kein Hover: ein Tipp dimmt kurz (:active), das ist die ganze
   Rueckmeldung. Farbe nur am geoeffneten Punkt. Die Hoehe gleitet ueber
   grid-template-rows. Oberhalb von 1100 px blendet Abschnitt 8 alles aus.
   Symbole kommen als Maske, weil icon() (includes/icon.php) hier nicht
   greift: Zeilen und Regionen stammen aus nav-mobile.php, die exakten
   Regionen-Links prueft smoke-routes.sh. */
.mn-mobile {
  --mn-tone: var(--card);
  --mn-pad: max(16px, calc(var(--gutter) - 12px));
  --mn-col: 620px;
  --mn-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 128h176M144 56l72 72-72 72'/%3E%3C/svg%3E");
  --mn-i-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M96 48l80 80-80 80'/%3E%3C/svg%3E");
  --mn-i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 192L192 64M88 64h104v104'/%3E%3C/svg%3E");
  /* Liegt unter der Kopfzeile (Unterkante per nav.js, auch wenn der
     Sprachhinweis darueber steht) und reicht bis zum unteren Rand. */
  position: fixed;
  top: var(--mn-mtop, 61px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.mn-mobile:focus { outline: none; }
/* Fokusring nach innen: das Akkordeon schneidet sonst die Raender ab.
   Der dunkle Knopf behaelt ihn aussen, innen waere er kaum zu sehen. */
.mn-mobile :focus-visible { outline-offset: -2px; }
.mn-mobile .mn-m-cta:focus-visible { outline-offset: 3px; }

/* Scroll-Sperre der Seite. Nur html, nicht body: ein body mit overflow
   wuerde zum Scroll-Container und die sticky Kopfzeile verlieren. Die
   Rinne bleibt stehen, damit breite Fenster nicht seitlich springen. */
html.mn-open { overflow: hidden; scrollbar-gutter: stable; }
/* Sprachwahl-Klapper bleibt ueber dem Menue sichtbar. */
html.mn-open .mn-row { position: relative; z-index: 2; }
/* Kontakt-Einstieg und Sprach-Hinweis (z 90) treten zurueck; das Menue
   hat seinen eigenen Knopf. */
html.mn-open .fab {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-exit), visibility 0s linear 0.2s;
}
html.mn-open .lang-hint { opacity: 0; pointer-events: none; }

.mn-m-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px var(--mn-pad) 22px;
}
/* Auf dem Tablet eine ruhige Spalte unter der Marke statt Zeilen ueber
   die ganze Breite. */
.mn-m-scroll > * { max-width: var(--mn-col); }

/* Suchfeld: Papier, Lupe in Stein, 16 px (iOS zoomt sonst). */
.mn-m-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-bottom: 6px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--stone);
  background: var(--paper-deep);
  cursor: text;
}
.mn-m-search svg { flex: none; width: 17px; height: 17px; }
.mn-m-search .mn-q {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
}
.mn-m-search .mn-q::placeholder { color: var(--stone-faint); opacity: 1; }
.mn-m-search .mn-q::-webkit-search-cancel-button { display: none; }
.mn-m-search .mn-q:focus-visible { outline: none; }
.mn-m-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }

/* Bereichskoepfe: gross, Tinte, Chevron in Stein. */
.mn-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px;
  text-align: left;
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.mn-m-head .mn-chev,
.mn-m-item > .mn-m-row .mn-chev {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--stone-faint);
  transition: rotate 0.3s var(--ease), color 0.3s var(--ease);
}
.mn-m-item > .mn-m-row .mn-chev { width: 12px; height: 12px; }
.mn-m-head[aria-expanded="true"] .mn-chev,
.mn-m-item > .mn-m-row[aria-expanded="true"] .mn-chev { rotate: 180deg; color: var(--ink); }

/* Akkordeon: die Hoehe gleitet in beide Richtungen, der Inhalt blendet
   mit. Zugeklapptes ist unsichtbar (visibility nach dem Zuklappen), damit
   Tab und Vorleser es nicht finden. */
.mn-mobile .mn-acc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out);
}
.mn-mobile .mn-acc-in { min-height: 0; overflow: hidden; }
.mn-mobile .is-open > .mn-acc { grid-template-rows: 1fr; }
.mn-mobile .mn-acc-in > * {
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), translate 0.3s var(--ease-out), visibility 0s linear 0.42s;
}
.mn-mobile .is-open > .mn-acc > .mn-acc-in > * {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity 0.32s var(--ease) 0.08s, translate 0.42s var(--ease-out) 0.05s, visibility 0s linear 0s;
}

/* Zeilen. Gemeinsame Basis fuer Punkte, Unterseiten, Preise, Treffer. */
.mn-m-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.mn-m-row > b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: inherit;
  overflow-wrap: break-word;
}
/* Punktzeilen im Bereich: nur der Name, wie im Labor. Stichworte und
   Beschreibungen stehen im Feld am Desktop und auf den Seiten. */
.mn-m-body > .mn-m-row,
.mn-m-item > .mn-m-row {
  min-height: 44px;
  padding: 10px 12px 10px 20px;
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.mn-m-body > .mn-m-row:not(.mn-m-price-row) > span,
.mn-m-item > .mn-m-row > span,
.mn-m-sub > .mn-m-row:not(:first-child) > span { display: none; }
.mn-m-body { padding-bottom: 10px; }

/* Ein Bereich mit genau einem Punkt ist selbst ein Link: Kopf-Groesse. */
.mn-m-sec > .mn-m-row {
  min-height: 52px;
  padding: 12px;
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Symbole: Pfeil fuer Seiten, Winkel in Listen, schraeger Pfeil nach
   aussen. Maske in currentColor, Farbe Stein-blass. */
.mn-m-body > a.mn-m-row:not(.mn-m-price-row)::after,
.mn-m-sec > a.mn-m-row::after,
.mn-m-sub > a.mn-m-row::after,
.mn-m-results a.mn-m-row::after,
.mn-m-regions a[href^="http"]::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--stone-faint);
  background: currentColor;
  -webkit-mask: var(--mn-i-arrow) center / contain no-repeat;
  mask: var(--mn-i-arrow) center / contain no-repeat;
}
.mn-m-sec > a.mn-m-row::after { width: 15px; height: 15px; }
.mn-m-sub > a.mn-m-row::after,
.mn-m-results a.mn-m-row::after {
  width: 12px;
  height: 12px;
  -webkit-mask-image: var(--mn-i-caret);
  mask-image: var(--mn-i-caret);
}
.mn-m-regions a[href^="http"]::after {
  width: 11px;
  height: 11px;
  color: var(--stone);
  -webkit-mask-image: var(--mn-i-out);
  mask-image: var(--mn-i-out);
}

/* Aktuelle Seite: ein kleiner Punkt hinter dem Namen, sonst nichts. */
.mn-m-row.is-current > b::after,
.mn-m-row[aria-current="page"] > b::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.2em;
}

/* Geoeffneter Punkt: der einzige Farbmoment, weich in seinem Ton. */
.mn-m-item {
  border-radius: 16px;
  transition: background-color 0.35s var(--ease);
}
.mn-m-item[data-tone="sage"]  { --mn-tone: var(--sage); }
.mn-m-item[data-tone="slate"] { --mn-tone: var(--slate); }
.mn-m-item[data-tone="sand"]  { --mn-tone: var(--sand); }
.mn-m-item[data-tone="clay"]  { --mn-tone: var(--clay); }
.mn-m-item[data-tone="lilac"] { --mn-tone: var(--lilac); }
.mn-m-item[data-tone="rose"]  { --mn-tone: #f2dfe5; }
.mn-m-item.is-open {
  background-color: var(--mn-tone);
  background-color: color-mix(in oklab, var(--mn-tone) 55%, var(--paper));
}

/* Unterseiten: eine schlichte weisse Liste im Farbton, Uebersicht zuerst. */
.mn-m-sub {
  display: grid;
  margin: 0 6px 6px;
  padding: 3px 0;
  border-radius: 12px;
  background: #fff;
}
.mn-m-sub > .mn-m-row {
  min-height: 44px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 420;
  line-height: 1.35;
}
.mn-m-sub > .mn-m-row:first-child > b { font-weight: 560; }
.mn-m-sub > .mn-m-row:first-child > span {
  flex: none;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--stone);
}
/* Zusammenarbeit als eine Zeile. */
.mn-m-collab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  padding: 7px 14px 5px;
  font-size: 14px;
  line-height: 1.35;
}
.mn-m-collab-k {
  flex: 0 0 100%;
  font-size: 12.5px;
  color: var(--stone);
}
.mn-m-collab a {
  padding: 7px 0;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.mn-m-collab a + a::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--stone-faint);
  vertical-align: middle;
}

/* Preise: die Stufen als ruhige weisse Liste, Betrag rechts. */
.mn-m-sec[data-mn-msec="preise"] .mn-m-body {
  margin: 2px 6px 12px;
  padding: 4px 0;
  border-radius: 12px;
  background: #fff;
}
.mn-m-body > .mn-m-price-row {
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.35;
}
.mn-m-price-row .mn-price {
  flex: none;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink);
}
/* Zeile ohne Betrag ("Was dazugehoert"): ein leiser Weiter-Link mit
   Pfeil. Eigene Regeln, weil ein Browser ohne :has() sonst die ganze
   Selektorliste verwirft. */
.mn-m-body > .mn-m-price-row:not(:has(.mn-price)) {
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.mn-m-body > .mn-m-price-row:not(:has(.mn-price))::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--stone-faint);
  background: currentColor;
  -webkit-mask: var(--mn-i-arrow) center / contain no-repeat;
  mask: var(--mn-i-arrow) center / contain no-repeat;
}

/* Seite des Bereichs als erste Zeile im offenen Bereich, gebaut wie die
   Uebersicht-Zeile eines Punkts: Name, leise "Übersicht", Pfeil. Steht
   nach der Regel, die Unterzeilen im Bereich ausblendet. */
.mn-m-body > .mn-m-ov {
  min-height: 44px;
  padding: 10px 12px 10px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.35;
}
.mn-m-body > .mn-m-row.mn-m-ov > span {
  display: block;
  flex: none;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--stone);
}
.mn-m-sec[data-mn-msec="preise"] .mn-m-body > .mn-m-ov { padding: 11px 14px; }

/* Treffer der Suche ersetzen die Bereiche (nav.js, Aufgabe 5/6). */
.mn-m-results { padding: 2px 0 10px; }
.mn-m-results .mn-grp {
  margin: 10px 12px 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--stone);
}
.mn-m-results .mn-snone { margin: 10px 12px; }
.mn-m-results .mn-m-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  min-height: 52px;
  padding: 9px 12px;
}
.mn-m-results .mn-m-row > b {
  grid-column: 1;
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 480;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.mn-m-results .mn-m-row > b mark { background: none; color: inherit; font-weight: 640; }
.mn-m-results .mn-m-row > span {
  grid-column: 1;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stone);
}
.mn-m-results .mn-m-row::after { grid-column: 2; grid-row: 1 / span 2; }

/* Leise am Ende: Werkzeuge (Punkt und Text), Regionen in einer Zeile. */
.mn-m-quiet { display: grid; gap: 12px; padding: 12px 2px 4px; }
.mn-m-tools,
.mn-m-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 13px;
  font-size: 13px;
  line-height: 1.35;
}
.mn-m-regions { column-gap: 14px; font-size: 13.5px; }
.mn-m-k {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--stone);
}
.mn-m-tools .mn-m-k { flex: 0 0 100%; margin-bottom: 2px; }
.mn-m-tools a,
.mn-m-regions a {
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  color: var(--ink-soft);
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.mn-m-tools a { gap: 7px; }
.mn-m-regions a { gap: 4px; }
.mn-m-tools a i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t, var(--sand));
  box-shadow: 0 0 0 1px rgba(33, 30, 26, 0.14);
}

/* Fester Knopf unten: naechster Schritt (Regeln in nav.js, ctaSource()). */
.mn-m-foot {
  flex: none;
  padding: 12px var(--mn-pad) calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-deep);
}
.mn-m-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--mn-col);
  padding-block: 13px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  transition: opacity 0.2s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.mn-m-cta-t { transition: opacity 0.14s var(--ease); }

/* Tipp-Rueckmeldung: kurz gedimmt, sonst nichts. Kein Hover. */
.mn-mobile :is(.mn-m-head, .mn-m-row, .mn-m-collab a, .mn-m-tools a, .mn-m-regions a):active {
  opacity: 0.55;
  transition: opacity 0s;
}
.mn-mobile .mn-m-cta:active {
  opacity: 0.55;
  transition: opacity 0s, transform 0.35s var(--ease), background-color 0.35s var(--ease);
}

/* Bewegung. Oeffnen: das Blatt zieht per clip-path von oben auf, Suche,
   Bereiche, Leises und Knopf setzen sich gestaffelt (--i aus nav.js).
   Schliessen: erst der Inhalt (0.12s), dann faehrt das Blatt hoch
   (0.32s). Suche gegen Bereiche: kurzes Einblenden, kein harter Schnitt. */
@keyframes mn-m-sheet-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mn-m-sheet-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.mn-mobile.fx-open { animation: mn-m-sheet-in 0.46s var(--ease-out) both; }
.mn-mobile.fx-open .mn-m-search,
.mn-mobile.fx-open .mn-m-sec,
.mn-mobile.fx-open .mn-m-quiet,
.mn-mobile.fx-open .mn-m-foot {
  animation: mn-rise-soft 0.42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms + 110ms);
}
.mn-m-sections:not([hidden]),
.mn-m-results:not([hidden]) { animation: mn-fade-in 0.2s var(--ease) both; }
.mn-mobile.is-leaving { animation: mn-m-sheet-out 0.32s var(--ease-exit) 0.08s both; pointer-events: none; }
.mn-mobile.is-leaving > * { animation: mn-fade-out 0.12s var(--ease-exit) both; }

@media (prefers-reduced-motion: reduce) {
  .mn-mobile.fx-open,
  .mn-mobile.fx-open .mn-m-search,
  .mn-mobile.fx-open .mn-m-sec,
  .mn-mobile.fx-open .mn-m-quiet,
  .mn-mobile.fx-open .mn-m-foot,
  .mn-m-sections:not([hidden]),
  .mn-m-results:not([hidden]),
  .mn-mobile.is-leaving,
  .mn-mobile.is-leaving > * { animation: none; }
  .mn-mobile .mn-acc,
  .mn-mobile .mn-acc-in > *,
  .mn-mobile .is-open > .mn-acc > .mn-acc-in > *,
  .mn-m-head,
  .mn-m-head .mn-chev,
  .mn-m-item > .mn-m-row .mn-chev,
  .mn-m-row,
  .mn-m-item,
  .mn-m-collab a,
  .mn-m-tools a,
  .mn-m-regions a,
  .mn-m-cta,
  .mn-mobile .mn-m-cta:active,
  .mn-m-cta-t,
  html.mn-open .fab { transition: none; }
}

/* Aufgabe 8a: Regionen (ki-schleswig.de, ki-brandenburg.de, Staedte) im
   Fuss, neben .footer-legal in .footer-base. Gleiche Optik wie
   .footer-legal (assets/css/base.css), hier statt dort, weil die
   Regionen aus lib/nav.php kommen und damit zur neuen Navigation
   gehoeren. */
.footer-regions a { color: inherit; text-decoration: none; }
@media (hover: hover) {
    .footer-regions a:hover { color: #fff; }
}