/* ============================================================================
   MeinMarkt365 – Bauteile  v2.0
   Setzt mm365-tokens.css voraus. Nur Rollen benutzen, nie Farben.

   Reihenfolge: Grundlage, Knöpfe, Felder, Chips, Kacheln, Karten, Overlays
   (Dialog, Sheet, Toast, Menü), Akkordeon, Ladezustände, Bilder, Gerätebühne.
   ========================================================================= */

/* ------------------------------------------------------------- GRUNDLAGE */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mm-grund);
  color: var(--mm-text);
  font-family: var(--mm-schrift);
  font-size: var(--mm-fs-text);
  line-height: var(--mm-zeile);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;   /* Inter: einstöckiges g, echtes ß */
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--mm-zeile-eng);
  letter-spacing: var(--mm-sperr-eng);
  font-weight: var(--mm-fett-voll);
}
h1 { font-size: var(--mm-fs-riesig); }
h2 { font-size: var(--mm-fs-gross); }
h3 { font-size: var(--mm-fs-h3); }
p  { margin: 0; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Das eine Wort in Grün, etwa in der Bühne. Auf Weiß braucht es die Kontur,
   im dunklen Modus setzt tokens.css die Breite auf 0. */
.mm-gruen-wort {
  color: var(--mm-gruen);
  -webkit-text-stroke: var(--mm-kontur-breite) var(--mm-kontur);
  paint-order: stroke fill;
}

.mm-marke {                       /* Versalien-Beschriftung über Abschnitten */
  font-size: var(--mm-fs-marke);
  letter-spacing: var(--mm-sperr-marke);
  text-transform: uppercase;
  font-weight: var(--mm-fett-voll);
  color: var(--mm-text-2);
}

.mm-bahn { width: min(var(--mm-breite), 100% - 2 * var(--mm-rinne)); margin-inline: auto; }
.mm-schmal { width: min(760px, 100% - 2 * var(--mm-rinne)); margin-inline: auto; }

.mm-ikon {
  width: 1.5em; height: 1.5em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.mm-ikon--klein { width: 1.25em; height: 1.25em; }
.mm-ikon--gross { width: 2rem; height: 2rem; stroke-width: 1.5; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--mm-fokus-breite) solid var(--mm-fokus-farbe);
  outline-offset: var(--mm-fokus-abstand);
}

/* ============================================================================
   KNÖPFE
   Vier Sorten, mehr gibt es nicht. Pro Ansicht genau ein grüner.
   ========================================================================= */
.mm-knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mm-a2);
  min-height: var(--mm-hoehe);
  padding-inline: var(--mm-a5);
  border: 1.5px solid transparent;
  border-radius: var(--mm-radius);
  font: inherit; font-size: var(--mm-fs-klein); font-weight: var(--mm-fett-halb);
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--mm-text);
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--mm-dauer-mikro) var(--mm-kurve),
              border-color var(--mm-dauer-mikro) var(--mm-kurve),
              color var(--mm-dauer-mikro) var(--mm-kurve),
              transform var(--mm-dauer-mikro) var(--mm-kurve);
}
/* unsichtbare Trefferfläche: auch ein kleiner Knopf bleibt fingerfreundlich */
.mm-knopf::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  transform: translateY(-50%); height: var(--mm-tippziel);
}
.mm-knopf:active:not(:disabled) { transform: translateY(1px); }
.mm-knopf:disabled, .mm-knopf[aria-disabled="true"] {
  cursor: not-allowed; background: var(--mm-flaeche); color: var(--mm-text-3);
  border-color: transparent; transform: none;
}

.mm-knopf--gruen {
  background: var(--mm-gruen); color: var(--mm-auf-gruen); border-color: var(--mm-gruen);
}
.mm-knopf--gruen:hover:not(:disabled) { background: var(--mm-gruen-hell); border-color: var(--mm-gruen-hell); }
.mm-knopf--gruen:active:not(:disabled) { background: var(--mm-gruen-tief); border-color: var(--mm-gruen-tief); }

.mm-knopf--umriss { border-color: var(--mm-rand); }
.mm-knopf--umriss:hover:not(:disabled) { border-color: var(--mm-text); background: var(--mm-flaeche); }

.mm-knopf--still { background: var(--mm-flaeche); }
.mm-knopf--still:hover:not(:disabled) { background: var(--mm-flaeche-2); }

.mm-knopf--text { padding-inline: var(--mm-a2); text-decoration: underline; }
.mm-knopf--text:hover:not(:disabled) { color: var(--mm-text-2); }

.mm-knopf--klein { min-height: var(--mm-hoehe-klein); padding-inline: var(--mm-a4); font-size: var(--mm-fs-mini); }
.mm-knopf--gross { min-height: var(--mm-hoehe-gross); padding-inline: var(--mm-a6); font-size: var(--mm-fs-text); }
.mm-knopf--nur-ikon { padding: 0; width: var(--mm-hoehe); }
.mm-knopf--nur-ikon.mm-knopf--klein { width: var(--mm-hoehe-klein); }
.mm-knopf--breit { width: 100%; }
.mm-knopf--rund { border-radius: var(--mm-radius-rund); }

.mm-knopfreihe { display: flex; gap: var(--mm-a3); flex-wrap: wrap; }
.mm-knopfreihe--rechts { justify-content: flex-end; }

/* Ladezustand: Beschriftung bleibt stehen, damit nichts springt */
.mm-knopf[aria-busy="true"] { pointer-events: none; color: transparent; }
.mm-knopf[aria-busy="true"]::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2.5px solid var(--mm-auf-gruen); border-right-color: transparent;
  border-radius: 50%; animation: mm-dreht .7s linear infinite;
}
.mm-knopf--umriss[aria-busy="true"]::before,
.mm-knopf--still[aria-busy="true"]::before { border-color: var(--mm-text); border-right-color: transparent; }
@keyframes mm-dreht { to { transform: rotate(360deg); } }

/* ============================================================================
   FELDER
   Beschriftung steht über dem Feld und bleibt sichtbar. Kein Platzhalter als
   Beschriftung: er verschwindet beim Tippen, und dann rät der Nutzer.
   ========================================================================= */
.mm-feld { display: flex; flex-direction: column; gap: 6px; }
.mm-feld__name { font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-halb); color: var(--mm-text-2); }
.mm-feld__hinweis { font-size: var(--mm-fs-mini); color: var(--mm-text-2); }
.mm-feld__fehler {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-halb); color: var(--mm-text);
}
.mm-feld__fehler .mm-ikon { color: var(--mm-text); }

.mm-eingabe {
  width: 100%; min-height: var(--mm-hoehe);
  padding: 0 var(--mm-a4);
  border: 1.5px solid var(--mm-rand);
  border-radius: var(--mm-radius);
  background: var(--mm-grund); color: var(--mm-text);
  font: inherit; font-size: var(--mm-fs-klein);
  transition: border-color var(--mm-dauer-mikro) var(--mm-kurve);
}
textarea.mm-eingabe { padding: var(--mm-a3) var(--mm-a4); min-height: 120px; line-height: var(--mm-zeile); }
.mm-eingabe::placeholder { color: var(--mm-text-3); }
.mm-eingabe:hover { border-color: var(--mm-rand-stark); }
.mm-eingabe:focus { outline: none; border-color: var(--mm-text); box-shadow: 0 0 0 3px var(--mm-fokus-farbe); }
.mm-eingabe[aria-invalid="true"] { border-color: var(--mm-text); border-width: 2px; }

.mm-eingabe-gruppe { position: relative; display: flex; align-items: center; }
.mm-eingabe-gruppe > .mm-ikon { position: absolute; left: var(--mm-a3); color: var(--mm-text-2); pointer-events: none; }
.mm-eingabe-gruppe > .mm-ikon ~ .mm-eingabe { padding-left: calc(var(--mm-a4) + 1.6em); }
.mm-eingabe-gruppe__anhang {
  position: absolute; right: var(--mm-a3); color: var(--mm-text-2);
  font-size: var(--mm-fs-klein); pointer-events: none;
}

/* Suchfeld in der Kopfleiste */
.mm-suche { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 480px; }
.mm-suche .mm-eingabe { background: var(--mm-flaeche); padding-right: calc(var(--mm-a4) + 1.6em); }
.mm-suche > .mm-ikon { position: absolute; right: var(--mm-a3); color: var(--mm-text-2); pointer-events: none; }

/* ============================================================================
   CHIPS, MARKEN, SCHALTER
   ========================================================================= */
.mm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--mm-hoehe-klein); padding-inline: var(--mm-a4);
  border: 1.5px solid var(--mm-rand); border-radius: var(--mm-radius-rund);
  background: transparent; color: var(--mm-text);
  font: inherit; font-size: var(--mm-fs-mini); cursor: pointer;
  transition: background-color var(--mm-dauer-mikro) var(--mm-kurve),
              border-color var(--mm-dauer-mikro) var(--mm-kurve);
}
.mm-chip:hover { border-color: var(--mm-text); }
.mm-chip[aria-pressed="true"] {
  background: var(--mm-gruen); border-color: var(--mm-gruen);
  color: var(--mm-auf-gruen); font-weight: var(--mm-fett-halb);
}

.mm-plakette {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--mm-radius-klein);
  background: var(--mm-flaeche); color: var(--mm-text);
  font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-halb);
}
.mm-plakette--gruen { background: var(--mm-gruen); color: var(--mm-auf-gruen); }
.mm-plakette--umriss { background: transparent; border: 1.5px solid var(--mm-rand); }

/* Schalter: wirkt sofort, ohne Speichern-Knopf */
.mm-schalter { display: inline-flex; align-items: center; gap: var(--mm-a3); cursor: pointer; }
.mm-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.mm-schalter__bahn {
  width: 50px; height: 30px; border-radius: var(--mm-radius-rund);
  background: var(--mm-flaeche-2); border: 1.5px solid var(--mm-rand);
  display: flex; align-items: center; padding: 2px; flex: none;
  transition: background-color var(--mm-dauer) var(--mm-kurve),
              border-color var(--mm-dauer) var(--mm-kurve);
}
.mm-schalter__knauf {
  width: 22px; height: 22px; border-radius: 50%; background: var(--mm-text);
  transition: transform var(--mm-dauer) var(--mm-kurve), background-color var(--mm-dauer) var(--mm-kurve);
}
.mm-schalter input:checked + .mm-schalter__bahn { background: var(--mm-gruen); border-color: var(--mm-gruen); }
.mm-schalter input:checked + .mm-schalter__bahn .mm-schalter__knauf {
  transform: translateX(20px); background: var(--mm-auf-gruen);
}
.mm-schalter input:focus-visible + .mm-schalter__bahn {
  outline: var(--mm-fokus-breite) solid var(--mm-fokus-farbe); outline-offset: 2px;
}

/* Kontrollkaestchen und Auswahlknopf
   Nachgetragen am 02.08.2026. Fassung 2.0 hatte nur den Schalter, und der ist
   hier falsch: er wirkt sofort, ohne Absenden. Wo erst nach dem Abschicken
   etwas passiert (Einwilligung im Formular, Auswahl eines Anliegens), gehoert
   ein Kaestchen hin. Uebernommen aus Fassung 1.0, umgestellt auf die
   2.0-Rollen: Limette als Flaeche im gesetzten Zustand, Haken in --mm-auf-gruen.

   Die Trefferflaeche ist --mm-tippziel hoch (48 px), auch wenn das Kaestchen
   nur 22 px misst. Sonst trifft niemand mit dem Daumen. */
.mm-check {
  display: inline-flex; align-items: flex-start; gap: var(--mm-a3);
  min-height: var(--mm-tippziel); cursor: pointer;
  font-size: var(--mm-fs-text); line-height: var(--mm-zeile); color: var(--mm-text);
}
.mm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mm-check__box {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border-radius: var(--mm-radius-klein);
  border: 1.75px solid var(--mm-rand-stark); background: var(--mm-grund);
  display: grid; place-items: center; color: var(--mm-auf-gruen);
  transition: background-color var(--mm-dauer) var(--mm-kurve),
              border-color var(--mm-dauer) var(--mm-kurve);
}
.mm-check--radio .mm-check__box { border-radius: 50%; }
.mm-check:hover .mm-check__box { border-color: var(--mm-text); }
.mm-check input:checked + .mm-check__box {
  background: var(--mm-gruen); border-color: var(--mm-gruen);
}
.mm-check input:focus-visible + .mm-check__box {
  outline: var(--mm-fokus-breite) solid var(--mm-fokus-farbe);
  outline-offset: var(--mm-fokus-abstand);
}
.mm-check input:disabled + .mm-check__box {
  background: var(--mm-flaeche); border-color: var(--mm-rand);
}
.mm-check input:disabled ~ span { color: var(--mm-text-3); }
.mm-check__box svg {
  width: 15px; height: 15px; opacity: 0; stroke-width: 2.6;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.mm-check input:checked + .mm-check__box svg { opacity: 1; }
/* Der Punkt im Auswahlknopf ist die Grundfarbe, nicht Weiss: im Dunkelmodus
   waere ein weisser Punkt auf Limette zu blass. */
.mm-check--radio .mm-check__box::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mm-auf-gruen); transform: scale(0);
  transition: transform var(--mm-dauer) var(--mm-kurve);
}
.mm-check--radio input:checked + .mm-check__box::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .mm-check__box, .mm-check--radio .mm-check__box::after { transition: none; }
}

/* Segmentierter Umschalter, etwa hell und dunkel */
.mm-segmente {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--mm-radius-rund); background: var(--mm-flaeche);
}
.mm-segmente button {
  min-height: 34px; padding-inline: var(--mm-a3); border: 0; cursor: pointer;
  border-radius: var(--mm-radius-rund); background: transparent; color: var(--mm-text-2);
  font: inherit; font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-halb);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color var(--mm-dauer) var(--mm-kurve), color var(--mm-dauer) var(--mm-kurve);
}
.mm-segmente button[aria-pressed="true"] { background: var(--mm-grund); color: var(--mm-text); box-shadow: var(--mm-schatten-1); }

/* ============================================================================
   KACHELN UND KARTEN
   ========================================================================= */
.mm-kacheln {
  display: grid; gap: var(--mm-a3); list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* Die Marktkachel trägt genau einen Akzent: eine grüne Kante unten und das
   Symbol im selben Grün. Beides zieht dieselbe Rolle, damit die Farbe nie
   auseinanderläuft. Auf Weiß ist das ein dunkleres Grün, sonst wäre das
   Liniensymbol unsichtbar (Limette hat dort 1,32:1). */
.mm-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--mm-a3); min-height: 132px; padding: var(--mm-a5) var(--mm-a3);
  border: 1px solid var(--mm-linie);
  border-bottom: 3px solid var(--mm-gruen-strich);
  border-radius: var(--mm-radius);
  background: var(--mm-flaeche); color: var(--mm-text);
  text-align: center; text-decoration: none;
  transition: transform var(--mm-dauer) var(--mm-kurve),
              border-color var(--mm-dauer) var(--mm-kurve),
              box-shadow var(--mm-dauer) var(--mm-kurve);
}
.mm-kachel .mm-ikon { color: var(--mm-gruen-strich); }
.mm-kachel:hover {
  transform: translateY(-2px); box-shadow: var(--mm-schatten-2);
  border-color: var(--mm-text); border-bottom-color: var(--mm-gruen-strich);
}
.mm-kachel b { font-size: var(--mm-fs-klein); font-weight: var(--mm-fett-halb); }
.mm-kachel small { color: var(--mm-text-2); font-size: var(--mm-fs-mini); }

.mm-karte {
  border: 1px solid var(--mm-linie); border-radius: var(--mm-radius-gross);
  background: var(--mm-flaeche); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--mm-dauer) var(--mm-kurve), box-shadow var(--mm-dauer) var(--mm-kurve);
}
a.mm-karte { text-decoration: none; color: inherit; }
a.mm-karte:hover { transform: translateY(-2px); box-shadow: var(--mm-schatten-3); }
.mm-karte__text { padding: var(--mm-a4); display: flex; flex-direction: column; gap: 3px; }
.mm-karte__titel { font-size: var(--mm-fs-h3); font-weight: var(--mm-fett-halb); letter-spacing: var(--mm-sperr-eng); }
.mm-karte__zeile { color: var(--mm-text-2); font-size: var(--mm-fs-klein); }
.mm-karte__preis { margin-top: var(--mm-a2); font-weight: var(--mm-fett-voll); font-variant-numeric: tabular-nums; }

/* ============================================================================
   BILDER UND MEDIEN
   Für das spätere Portal: tausende Nutzerfotos in ganz unterschiedlichen
   Formaten. Ein einheitlicher Ausschnitt hält die Liste ruhig, feste Maße
   verhindern das Springen beim Laden.
   ========================================================================= */
.mm-bild {
  display: block; width: 100%; height: auto;
  background: var(--mm-flaeche-2);
}
.mm-medien {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--mm-flaeche-2);
}
.mm-medien > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-medien--breit { aspect-ratio: 16 / 9; }
.mm-medien--quadrat { aspect-ratio: 1; }
.mm-medien__zahl {
  position: absolute; right: var(--mm-a2); bottom: var(--mm-a2);
  background: rgba(0,0,0,.72); color: #fff;
  font-size: var(--mm-fs-mini); padding: 3px 9px; border-radius: var(--mm-radius-klein);
}
.mm-bild[data-mm-geladen] { animation: mm-bild-auf var(--mm-dauer-auf) var(--mm-kurve); }
@keyframes mm-bild-auf { from { opacity: 0; } }

.mm-galerie { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); }
.mm-galerie > *:first-child { grid-column: 1 / -1; }

/* ============================================================================
   OVERLAYS: DIALOG, SHEET, TOAST, MENÜ
   ========================================================================= */
.mm-dialog {
  border: 0; padding: 0; background: transparent; color: var(--mm-text);
  max-width: min(540px, calc(100vw - 2 * var(--mm-rinne)));
}
.mm-dialog__inhalt {
  background: var(--mm-grund); border: 1px solid var(--mm-linie);
  border-radius: var(--mm-radius-gross); box-shadow: var(--mm-schatten-4);
  padding: var(--mm-a6); display: flex; flex-direction: column; gap: var(--mm-a4);
}
.mm-dialog::backdrop { background: var(--mm-schleier); }
.mm-dialog[open]::backdrop { animation: mm-blende var(--mm-dauer-auf) var(--mm-kurve); }
.mm-dialog[open] .mm-dialog__inhalt { animation: mm-dialog-auf var(--mm-dauer-auf) var(--mm-kurve); }
/* Schliess-Animationen sind entfallen: seit dem 02.08.2026 geht der Dialog
   sofort zu, eine Rueckwaertsbewegung koennte niemand mehr sehen. */
@keyframes mm-blende { from { opacity: 0; } }
@keyframes mm-dialog-auf { from { opacity: 0; transform: scale(.97); } }

/* Sheet: auf dem Handy von unten, ab 768 px ein zentrierter Dialog.
   Damit die Seite dahinter zurücktreten kann, muss sie in .mm-seite liegen. */
.mm-sheet {
  border: 0; padding: 0; margin: 0; background: transparent; color: var(--mm-text);
  max-width: none; max-height: none; width: 100%; inset: auto 0 0 0;
}
.mm-sheet__inhalt {
  background: var(--mm-grund); box-shadow: var(--mm-schatten-4);
  border-radius: var(--mm-radius-gross) var(--mm-radius-gross) 0 0;
  padding: var(--mm-a5) var(--mm-a5) var(--mm-a6);
  display: flex; flex-direction: column; gap: var(--mm-a4);
  max-height: 88svh; overflow: auto;
}
.mm-sheet__griff {
  flex: none; width: 44px; height: 5px; margin: 0 auto var(--mm-a2);
  border-radius: var(--mm-radius-rund); background: var(--mm-rand);
}
.mm-sheet::backdrop { background: var(--mm-schleier); }
.mm-sheet[open]::backdrop { animation: mm-blende var(--mm-dauer-auf) var(--mm-kurve); }
.mm-sheet[open] { animation: mm-sheet-auf var(--mm-dauer-auf) var(--mm-kurve); }
@keyframes mm-sheet-auf { from { transform: translateY(100%); } }

.mm-seite { transition: transform var(--mm-dauer-auf) var(--mm-kurve); transform-origin: 50% 0; }
html.mm-sheet-offen .mm-seite { transform: scale(.965); border-radius: var(--mm-radius-gross); overflow: hidden; }

@media (min-width: 768px) {
  .mm-sheet { inset: 0; margin: auto; width: min(560px, calc(100vw - 48px)); height: fit-content; }
  .mm-sheet__inhalt { border-radius: var(--mm-radius-gross); max-height: 80svh; }
  .mm-sheet__griff { display: none; }
  html.mm-sheet-offen .mm-seite { transform: none; border-radius: 0; }
  @keyframes mm-sheet-auf { from { transform: translateY(20px); opacity: 0; } }
}

/* Toast: steht IMMER in der Bildschirmmitte, nie unten. Unten verdecken ihn
   Daumen, Systemleisten und die festgeheftete Handlungsleiste. */
.mm-toast-bereich {
  position: fixed; inset: 0; z-index: 90; padding: var(--mm-rinne);
  display: grid; align-content: center; justify-items: center; gap: var(--mm-a2);
  pointer-events: none; background: var(--mm-schleier);
  transition: background-color var(--mm-dauer) var(--mm-kurve);
}
.mm-toast-bereich:empty, .mm-toast-bereich--klar { background: none; }
.mm-toast {
  pointer-events: auto; max-width: min(440px, 100%);
  display: flex; align-items: center; gap: var(--mm-a3);
  padding: var(--mm-a4) var(--mm-a5);
  border-radius: var(--mm-radius); box-shadow: var(--mm-schatten-3);
  background: var(--mm-text); color: var(--mm-grund);
  font-size: var(--mm-fs-klein); font-weight: var(--mm-fett-halb);
  animation: mm-toast-auf var(--mm-dauer-auf) var(--mm-kurve);
}
.mm-toast--gruen { background: var(--mm-gruen); color: var(--mm-auf-gruen); }
.mm-toast[data-mm-zu] { animation: mm-toast-auf var(--mm-dauer) var(--mm-kurve) reverse forwards; }
@keyframes mm-toast-auf { from { opacity: 0; transform: scale(.94); } }

/* Menü */
.mm-menue-anker { position: relative; display: inline-block; }
.mm-menue {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px;
  padding: 6px; border: 1px solid var(--mm-linie); border-radius: var(--mm-radius);
  background: var(--mm-grund); box-shadow: var(--mm-schatten-3);
}
.mm-menue[hidden] { display: none; }
.mm-menue:not([hidden]) { animation: mm-menue-auf var(--mm-dauer-mikro) var(--mm-kurve-raus); }
@keyframes mm-menue-auf { from { opacity: 0; transform: translateY(-4px); } }
.mm-menue button {
  display: flex; align-items: center; gap: var(--mm-a3); width: 100%;
  min-height: var(--mm-hoehe-klein); padding-inline: var(--mm-a3);
  border: 0; border-radius: var(--mm-radius-klein); background: transparent;
  color: var(--mm-text); font: inherit; font-size: var(--mm-fs-klein);
  text-align: left; cursor: pointer;
  transition: background-color var(--mm-dauer-mikro) var(--mm-kurve);
}
.mm-menue button:hover { background: var(--mm-flaeche); }

/* ============================================================================
   AKKORDEON
   <details> und <summary>, damit die Inhalte ohne JavaScript und für
   Suchmaschinen erreichbar bleiben.
   ========================================================================= */
.mm-akkordeon { interpolate-size: allow-keywords; }
.mm-akkordeon details {
  border: 1px solid var(--mm-linie); border-radius: var(--mm-radius);
  background: var(--mm-flaeche); overflow: hidden;
}
.mm-akkordeon details + details { margin-top: var(--mm-a2); }
.mm-akkordeon summary {
  list-style: none; cursor: pointer; min-height: var(--mm-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: var(--mm-a3);
  padding: 0 var(--mm-a4); font-weight: var(--mm-fett-halb);
}
.mm-akkordeon summary::-webkit-details-marker { display: none; }
.mm-akkordeon summary .mm-ikon { transition: transform var(--mm-dauer) var(--mm-kurve); }
.mm-akkordeon details[open] summary .mm-ikon { transform: rotate(180deg); }
.mm-akkordeon__inhalt { padding: 0 var(--mm-a4) var(--mm-a4); color: var(--mm-text-2); }
.mm-akkordeon details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--mm-dauer) var(--mm-kurve),
              content-visibility var(--mm-dauer) allow-discrete;
}
.mm-akkordeon details[open]::details-content { block-size: auto; }

/* ============================================================================
   LADEZUSTÄNDE
   ========================================================================= */
.mm-platzhalter {
  border-radius: var(--mm-radius-klein); background: var(--mm-flaeche-2);
  background-image: linear-gradient(90deg, transparent 0%, var(--mm-flaeche) 45%, transparent 90%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: mm-glanz 1.4s linear infinite;
}
@keyframes mm-glanz { from { background-position: -120% 0; } to { background-position: 220% 0; } }
.mm-platzhalter--zeile { height: 14px; }
.mm-platzhalter--zeile + .mm-platzhalter--zeile { margin-top: 10px; }
.mm-platzhalter--bild { aspect-ratio: 4 / 3; border-radius: var(--mm-radius); }
.mm-platzhalter--karte { height: 96px; border-radius: var(--mm-radius-gross); }

/* Trefferliste. Das Raster gehört zum Bauteil: Eine Trefferliste ohne Raster
   ist eine einzige riesige Karte, und jede Marktseite müsste sich ihr Layout
   selbst ausdenken. 250 px ist die Breite, ab der Bild, Titel und Preis noch
   lesbar sind; darunter bricht die Liste auf eine Spalte. */
.mm-liste {
  display: grid;
  gap: var(--mm-a4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.mm-liste--breit { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mm-liste--einspaltig { grid-template-columns: 1fr; }
@media (max-width: 400px) { .mm-liste { grid-template-columns: 1fr; } }

/* Neue Ergebnisse erscheinen nacheinander, damit sichtbar wird, dass sich
   etwas geändert hat. Ab dem siebten laufen alle gemeinsam. */
.mm-liste > * { animation: mm-treffer var(--mm-dauer-auf) var(--mm-kurve) both; }
.mm-liste > *:nth-child(1) { animation-delay: 0ms; }
.mm-liste > *:nth-child(2) { animation-delay: calc(var(--mm-versatz) * 1); }
.mm-liste > *:nth-child(3) { animation-delay: calc(var(--mm-versatz) * 2); }
.mm-liste > *:nth-child(4) { animation-delay: calc(var(--mm-versatz) * 3); }
.mm-liste > *:nth-child(5) { animation-delay: calc(var(--mm-versatz) * 4); }
.mm-liste > *:nth-child(6) { animation-delay: calc(var(--mm-versatz) * 5); }
.mm-liste > *:nth-child(n+7) { animation-delay: calc(var(--mm-versatz) * 6); }
.mm-liste[aria-busy="true"] > * { animation: none; }
@keyframes mm-treffer { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================================
   KOPFLEISTE UND FUSS
   ========================================================================= */
.mm-kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--mm-a4);
  padding: var(--mm-a3) var(--mm-rinne);
  background: var(--mm-grund); border-bottom: 1px solid var(--mm-linie);
}
.mm-kopf__marke { flex: none; display: flex; align-items: center; }
.mm-kopf__marke img { display: block; height: 34px; width: auto; }
.mm-kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--mm-a2); }

.mm-fuss {
  padding: var(--mm-a8) var(--mm-rinne); border-top: 1px solid var(--mm-linie);
  color: var(--mm-text-2); font-size: var(--mm-fs-klein);
}

/* ============================================================================
   GERÄTEBÜHNE
   Notebook, Tablet und Handy mit einer ECHTEN Seite im Bildschirm, nicht mit
   einem Bild: der Inhalt wird nur verkleinert, deshalb bleibt er auf jedem
   Display scharf. Der Maßstab kommt aus mm365.js.
   ========================================================================= */
.mm-buehne {
  --mm-geraet: 1;
  display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  gap: var(--mm-a6); perspective: 1600px;
}
@media (max-width: 1080px) { .mm-buehne { --mm-geraet: .82; } }
@media (max-width: 860px)  { .mm-buehne { --mm-geraet: .66; } }
@media (max-width: 620px)  { .mm-buehne { --mm-geraet: .5; gap: var(--mm-a4); } }

.mm-geraet { position: relative; flex: none; }
.mm-geraet[role="button"] { cursor: pointer; }
.mm-geraet__schirm {
  position: relative; overflow: hidden; background: var(--mm-flaeche-2);
  filter: brightness(1); transition: filter .5s var(--mm-kurve);
}
.mm-geraet__schirm::after {          /* Glanz auf dem Glas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%);
}
.mm-geraet__inhalt { transform-origin: 0 0; border: 0; display: block; }
.mm-geraet--schlaeft .mm-geraet__schirm { filter: brightness(.06); }
.mm-geraet--auftritt { animation: mm-geraet-auf .75s var(--mm-kurve) both; }
@keyframes mm-geraet-auf { from { opacity: 0; transform: translateY(30px) scale(.96); } }

/* Notebook: klappt auf Klick zu und auf.
   BEWUSST OHNE 3D-Drehung. Eine rotateX-Klappe sieht von vorn aus wie ein
   weggekippter Bildschirm, nicht wie ein geschlossener Deckel: Der Inhalt
   bleibt als schräger Keil sichtbar, und man müsste die Deckelrückseite als
   zweite Fläche bauen. Zugeklappt ist ein Notebook von vorn ohnehin nur ein
   flacher Balken. Deshalb fährt der Bildschirm in der Höhe zusammen. */
.mm-geraet__deckel {
  position: relative;
  background: #1A1A1C; box-shadow: var(--mm-schatten-3);
  border-radius: calc(14px * var(--mm-geraet)) calc(14px * var(--mm-geraet))
                 calc(4px * var(--mm-geraet)) calc(4px * var(--mm-geraet));
  padding: calc(12px * var(--mm-geraet));
  transition: padding .5s var(--mm-kurve), border-radius .5s var(--mm-kurve);
}
.mm-geraet__deckel::after {          /* Kamera */
  content: ""; position: absolute; top: calc(4px * var(--mm-geraet)); left: 50%;
  width: calc(5px * var(--mm-geraet)); height: calc(5px * var(--mm-geraet));
  border-radius: 50%; background: #4A4A50; transform: translateX(-50%);
  transition: opacity .3s var(--mm-kurve);
}
.mm-geraet--notebook .mm-geraet__schirm {
  width: calc(536px * var(--mm-geraet)); height: calc(335px * var(--mm-geraet));
  border-radius: calc(4px * var(--mm-geraet));
  transition: height .55s var(--mm-kurve), filter .35s var(--mm-kurve);
}

/* Zugeklappt: der Bildschirm fährt auf null, der Deckel wird zur flachen
   Platte auf dem Fuß. Der Inhalt verschwindet mit, sonst quetscht er sich
   sichtbar zusammen. */
.mm-geraet--zu .mm-geraet__schirm { height: 0; filter: brightness(0); }
.mm-geraet--zu .mm-geraet__deckel {
  padding: calc(5px * var(--mm-geraet));
  border-radius: calc(5px * var(--mm-geraet));
  background: linear-gradient(180deg, #26262A 0%, #16161A 55%, #0C0C0E 100%);
}
.mm-geraet--zu .mm-geraet__deckel::after { opacity: 0; }
.mm-geraet--zu .mm-geraet__inhalt { opacity: 0; transition: opacity .2s linear; }
/* feiner Lichtspalt an der Vorderkante, damit die Platte Tiefe bekommt */
.mm-geraet--zu .mm-geraet__deckel::before {
  content: ""; position: absolute; left: 8%; right: 8%;
  bottom: calc(-1px * var(--mm-geraet)); height: calc(2px * var(--mm-geraet));
  border-radius: var(--mm-radius-rund); background: rgba(255,255,255,.16);
}
.mm-geraet__fuss {
  position: relative; width: calc(560px * var(--mm-geraet)); height: calc(14px * var(--mm-geraet));
  background: linear-gradient(180deg, #2A2A2E, #101012);
  border-radius: 0 0 calc(10px * var(--mm-geraet)) calc(10px * var(--mm-geraet));
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}
.mm-geraet__fuss::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(90px * var(--mm-geraet)); height: calc(4px * var(--mm-geraet));
  border-radius: 0 0 6px 6px; background: rgba(0,0,0,.5);
}

/* Tablet */
.mm-geraet--tablet {
  background: #1A1A1C; box-shadow: var(--mm-schatten-3);
  border-radius: calc(20px * var(--mm-geraet));
  padding: calc(14px * var(--mm-geraet)) calc(10px * var(--mm-geraet));
  transition: transform .6s var(--mm-kurve);
}
.mm-geraet--tablet .mm-geraet__schirm {
  width: calc(260px * var(--mm-geraet)); height: calc(347px * var(--mm-geraet));
  border-radius: calc(8px * var(--mm-geraet));
}

/* Handy: dreht auf Klick ins Querformat */
.mm-geraet--handy {
  background: #1A1A1C; box-shadow: var(--mm-schatten-3);
  border-radius: calc(26px * var(--mm-geraet)); padding: calc(9px * var(--mm-geraet));
  transition: transform .7s var(--mm-kurve);
}
.mm-geraet--handy .mm-geraet__schirm {
  width: calc(158px * var(--mm-geraet)); height: calc(342px * var(--mm-geraet));
  border-radius: calc(18px * var(--mm-geraet));
}
.mm-geraet--handy::before {          /* Pille oben */
  content: ""; position: absolute; z-index: 2; top: calc(15px * var(--mm-geraet)); left: 50%;
  width: calc(52px * var(--mm-geraet)); height: calc(8px * var(--mm-geraet));
  border-radius: var(--mm-radius-rund); background: #1A1A1C; transform: translateX(-50%);
}
.mm-geraet--quer { transform: rotate(90deg); }

/* ============================================================================
   MERKMALE
   Ausstattung als Symbol mit Beschriftung statt als Aufzählung im Fließtext.
   Eine Zeile "Balkon, Einbauküche, Fußbodenheizung, Aufzug, Kellerabteil"
   liest niemand zu Ende; sechs Symbole erfasst das Auge auf einen Blick.
   Das Symbol allein reicht nicht: "Kellerabteil" und "Abstellraum" sehen
   gezeichnet gleich aus. Deshalb immer Symbol UND Wort.
   ========================================================================= */
.mm-merkmale {
  display: grid; gap: var(--mm-a3);
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.mm-merkmal {
  display: flex; align-items: center; gap: 8px;
  padding: 9px var(--mm-a3);
  border: 1px solid var(--mm-linie); border-radius: var(--mm-radius-klein);
  background: var(--mm-flaeche); font-size: var(--mm-fs-mini); line-height: 1.25;
}
.mm-merkmal .mm-ikon { color: var(--mm-gruen-strich); flex: none; }
.mm-merkmal--fehlt { color: var(--mm-text-3); background: none; }
.mm-merkmal--fehlt .mm-ikon { color: var(--mm-text-3); }
/* Nicht vorhandene Ausstattung wird durchgestrichen gezeigt, nicht
   weggelassen: "kein Aufzug" ist eine Antwort, eine Lücke ist keine. */
.mm-merkmal--fehlt span { text-decoration: line-through; }

/* ============================================================================
   ENERGIEEFFIZIENZKLASSE
   Begründete Ausnahme von den drei Farben: Die Skala von A+ bis H ist im
   Gebäudeenergiegesetz farblich vorgegeben und überall gleich. Wer sie in
   Limette umfärbt, macht sie unlesbar. Sie gilt NUR hier und wird nirgends
   sonst im System verwendet.
   Die Textfarbe steht je Band fest, damit auf Gelb nicht Weiß landet.
   ========================================================================= */
.mm-effizienz { display: flex; flex-direction: column; gap: 3px; }
.mm-effizienz__band {
  display: flex; align-items: center; gap: var(--mm-a3);
  height: 30px; padding: 0 var(--mm-a3) 0 var(--mm-a4);
  border-radius: var(--mm-radius-rund) 0 0 var(--mm-radius-rund);
  font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-voll);
  color: #000; position: relative;
}
.mm-effizienz__band b { width: 2.2em; flex: none; }
.mm-effizienz__band[data-mm-klasse="A+"] { background: #00A03C; color: #FFF; width: 34%; }
.mm-effizienz__band[data-mm-klasse="A"]  { background: #4CB847; width: 41%; }
.mm-effizienz__band[data-mm-klasse="B"]  { background: #A9C813; width: 48%; }
.mm-effizienz__band[data-mm-klasse="C"]  { background: #F1E70E; width: 55%; }
.mm-effizienz__band[data-mm-klasse="D"]  { background: #FCC30B; width: 62%; }
.mm-effizienz__band[data-mm-klasse="E"]  { background: #F6A00A; width: 69%; }
.mm-effizienz__band[data-mm-klasse="F"]  { background: #EE7D0A; width: 76%; }
.mm-effizienz__band[data-mm-klasse="G"]  { background: #E44E1B; color: #FFF; width: 83%; }
.mm-effizienz__band[data-mm-klasse="H"]  { background: #E30613; color: #FFF; width: 90%; }

/* Das Band dieses Gebäudes: bis zum Rand, mit Zeiger und Verbrauchswert. */
.mm-effizienz__band[aria-current="true"] {
  width: 100%; height: 40px; font-size: var(--mm-fs-klein);
  box-shadow: var(--mm-schatten-2);
}
.mm-effizienz__band[aria-current="true"]::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  border: 8px solid transparent; border-right-color: var(--mm-grund);
  transform: translateY(-50%);
}
.mm-effizienz__wert { margin-left: auto; font-variant-numeric: tabular-nums; padding-right: 20px; }
.mm-effizienz__fuss {
  font-size: var(--mm-fs-mini); color: var(--mm-text-2); margin-top: var(--mm-a3);
}
/* Im Dunkelmodus bleiben die Bänder wie sie sind: Sie sind gesetzlich
   vorgegeben und dürfen nicht abgedunkelt werden. Nur der Zeiger dreht mit. */

/* ============================================================================
   BEWEGUNG ABSCHALTBAR UND DRUCK
   Reduzierte Bewegung heißt: sofort da, nicht gar nicht da.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mm-dialog[open] .mm-dialog__inhalt, .mm-dialog[open]::backdrop,
  .mm-dialog[data-mm-zu] .mm-dialog__inhalt, .mm-dialog[data-mm-zu]::backdrop,
  .mm-sheet[open], .mm-sheet[data-mm-zu], .mm-sheet[open]::backdrop, .mm-sheet[data-mm-zu]::backdrop,
  .mm-toast, .mm-toast[data-mm-zu], .mm-menue:not([hidden]),
  .mm-platzhalter, .mm-liste > *, .mm-bild[data-mm-geladen], .mm-geraet--auftritt {
    animation: none !important;
  }
  .mm-seite, .mm-geraet__deckel, .mm-geraet--handy, .mm-geraet--tablet, .mm-geraet__schirm {
    transition: none !important;
  }
  html.mm-sheet-offen .mm-seite { transform: none; }
  .mm-geraet--quer { transform: none; }
}

@media print {
  .mm-dialog, .mm-sheet, .mm-toast-bereich, .mm-menue, .mm-kopf { display: none !important; }
  .mm-platzhalter { animation: none; background: none; }
  .mm-akkordeon details::details-content { block-size: auto; }
  .mm-liste > * { animation: none; opacity: 1; }
  body { background: #fff; color: #000; }
}