/* ============================================================================
   MeinMarkt365 – Komponenten  v1.1
   Setzt tokens.css voraus. Nur semantische Rollen-Variablen verwenden.

   v1.0  August 2026, ausgeliefertes Paket.
   v1.1  01.08.2026, Zusatzblock am Dateiende: Overlays (Dialog, Sheet, Toast,
         Menü, Akkordeon), Ladezustände (Skeleton, Ergebnisliste, Bild),
         Seitenwechsel und Gerätebühne. Auswahl siehe
         references/aenderungen-nach-1.0.md. Der Zusatz steht bewusst in einem
         Block ganz unten, damit er bei einer neuen Paketlieferung in einem
         Stück wieder eingesetzt werden kann.
   ========================================================================= */

/* ---------- Basis ---------- */
.mm-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor;
           fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mm-icon--16 { width:16px; height:16px; stroke-width:1.5; }
.mm-icon--20 { width:20px; height:20px; stroke-width:1.75; }
.mm-icon--24 { width:24px; height:24px; stroke-width:1.75; }
.mm-icon--32 { width:32px; height:32px; stroke-width:1.6; }

/* ============================================================================
   BUTTON
   ========================================================================= */
.mm-btn {
  --_bg: transparent; --_fg: var(--mm-action); --_bd: transparent; --_sh: var(--mm-shadow-0);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mm-space-2);
  height: var(--mm-control-md);
  padding-inline: var(--mm-space-5);
  border: 1.5px solid var(--_bd);
  border-radius: var(--mm-radius-md);
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_sh);
  font-family: var(--mm-font-display);
  font-size: 0.9375rem; font-weight: var(--mm-fw-medium);
  letter-spacing: var(--mm-ls-label); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--mm-dur-micro) var(--mm-ease),
              border-color var(--mm-dur-micro) var(--mm-ease),
              color var(--mm-dur-micro) var(--mm-ease),
              box-shadow var(--mm-dur-micro) var(--mm-ease),
              transform var(--mm-dur-micro) var(--mm-ease);
}
/* unsichtbare Trefferfläche: garantiert 48 px auch bei kleinen Buttons */
.mm-btn::after { content:""; position:absolute; inset:50% 0 auto 0;
  transform: translateY(-50%); height: var(--mm-touch-min); }

.mm-btn:focus-visible {
  outline: var(--mm-focus-width) solid var(--mm-focus-color);
  outline-offset: var(--mm-focus-offset);
}
.mm-btn:active:not(:disabled) { transform: translateY(1px); }
.mm-btn:disabled, .mm-btn[aria-disabled="true"] {
  cursor: not-allowed; background: var(--mm-bg-muted);
  color: var(--mm-text-muted); opacity:.75; border-color: transparent; box-shadow: none; transform: none;
}

/* ---------- Varianten ---------- */
.mm-btn--primary   { --_bg: var(--mm-action); --_fg: var(--mm-text-on-primary); --_bd: var(--mm-action); --_sh: var(--mm-shadow-1); }
.mm-btn--primary:hover:not(:disabled)  { --_bg: var(--mm-action-hover);  --_bd: var(--mm-action-hover); box-shadow: var(--mm-shadow-2); }
.mm-btn--primary:active:not(:disabled) { --_bg: var(--mm-action-active); --_bd: var(--mm-action-active); box-shadow: none; }

.mm-btn--secondary { --_bg: var(--mm-surface); --_fg: var(--mm-action-text); --_bd: var(--mm-action-border); --_sh: var(--mm-shadow-1); }
.mm-btn--secondary:hover:not(:disabled)  { --_bg: var(--mm-action-subtle); --_bd: var(--mm-action); }
.mm-btn--secondary:active:not(:disabled) { --_bg: var(--mm-bg-muted); --_bd: var(--mm-action); box-shadow:none; }

.mm-btn--tertiary  { --_bg: transparent; --_fg: var(--mm-action-text); --_bd: transparent; }
.mm-btn--tertiary:hover:not(:disabled)  { --_bg: var(--mm-action-subtle); }
.mm-btn--tertiary:active:not(:disabled) { --_bg: var(--mm-bg-muted); }

.mm-btn--highlight { --_bg: var(--mm-accent-400); --_fg: var(--mm-primary-950); --_bd: var(--mm-accent-400); --_sh: var(--mm-shadow-2); }
.mm-btn--highlight:hover:not(:disabled)  { --_bg: var(--mm-accent-300); --_bd: var(--mm-accent-300); }
.mm-btn--highlight:active:not(:disabled) { --_bg: var(--mm-accent-500); --_bd: var(--mm-accent-500); --_fg: var(--mm-text-on-primary); box-shadow:none; }

.mm-btn--danger    { --_bg: var(--mm-danger-700); --_fg: var(--mm-text-on-primary); --_bd: var(--mm-danger-700); --_sh: var(--mm-shadow-1); }
.mm-btn--danger:hover:not(:disabled)  { --_bg: var(--mm-danger-800); --_bd: var(--mm-danger-800); }
.mm-btn--danger:active:not(:disabled) { --_bg: #7A0D15; --_bd:#7A0D15; box-shadow:none; }

.mm-btn--quiet-danger { --_bg: var(--mm-surface); --_fg: var(--mm-danger-700); --_bd: var(--mm-danger-200); }
.mm-btn--quiet-danger:hover:not(:disabled) { --_bg: var(--mm-danger-50); --_bd: var(--mm-danger-500); }

.mm-btn--link { height:auto; padding:0; border:0; background:none; --_fg: var(--mm-text-link);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; box-shadow:none; }
.mm-btn--link:hover:not(:disabled) { --_fg: var(--mm-action-hover); text-decoration-thickness: 2px; }
.mm-btn--link::after { display:none; }

/* auf dunklem Grund */
.mm-on-dark .mm-btn--primary   { --_bg:#fff; --_fg: var(--mm-primary-900); --_bd:#fff; }
.mm-on-dark .mm-btn--primary:hover:not(:disabled) { --_bg:#E2F0FF; --_bd:#E2F0FF; }
.mm-on-dark .mm-btn--secondary { --_bg: transparent; --_fg: var(--mm-text-on-primary); --_bd: rgba(255,255,255,.55); box-shadow:none; }
.mm-on-dark .mm-btn--secondary:hover:not(:disabled) { --_bg: rgba(255,255,255,.12); --_bd:#fff; }
.mm-on-dark .mm-btn--tertiary  { --_fg: var(--mm-text-on-primary); }
.mm-on-dark .mm-btn--tertiary:hover:not(:disabled) { --_bg: rgba(255,255,255,.12); }
.mm-on-dark .mm-btn:focus-visible { outline-color: rgba(255,255,255,.85); }

/* ---------- Größen ---------- */
.mm-btn--xs { height: var(--mm-control-xs); padding-inline: var(--mm-space-3); font-size: .8125rem; border-radius: var(--mm-radius-sm); gap: var(--mm-space-1); }
.mm-btn--sm { height: var(--mm-control-sm); padding-inline: var(--mm-space-4); font-size: .875rem; gap: 6px; }
.mm-btn--lg { height: var(--mm-control-lg); padding-inline: var(--mm-space-6); font-size: 1rem; }
.mm-btn--xl { height: var(--mm-control-xl); padding-inline: var(--mm-space-8); font-size: 1.0625rem; border-radius: 12px; }

/* ---------- Icon-Only ---------- */
.mm-btn--icon { width: var(--mm-control-md); padding: 0; }
.mm-btn--icon.mm-btn--xs { width: var(--mm-control-xs); }
.mm-btn--icon.mm-btn--sm { width: var(--mm-control-sm); }
.mm-btn--icon.mm-btn--lg { width: var(--mm-control-lg); }
.mm-btn--icon.mm-btn--xl { width: var(--mm-control-xl); }
.mm-btn--round { border-radius: var(--mm-radius-pill); }

/* ---------- Voll-/Blockbreite ---------- */
.mm-btn--block { width: 100%; }

/* ---------- Ladezustand ---------- */
.mm-btn[data-loading="true"] { pointer-events: none; }
.mm-btn[data-loading="true"] .mm-btn__label { visibility: hidden; }
.mm-btn[data-loading="true"] .mm-icon      { visibility: hidden; }
.mm-btn[data-loading="true"]::before {
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2.5px solid currentColor; border-right-color: transparent;
  border-radius:50%; opacity:.9; animation: mm-spin .7s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* ---------- Gruppe / Split ---------- */
.mm-btn-group { display:inline-flex; }
.mm-btn-group .mm-btn { border-radius:0; margin-left:-1.5px; }
.mm-btn-group .mm-btn:first-child { border-start-start-radius: var(--mm-radius-md); border-end-start-radius: var(--mm-radius-md); margin-left:0; }
.mm-btn-group .mm-btn:last-child  { border-start-end-radius:   var(--mm-radius-md); border-end-end-radius:   var(--mm-radius-md); }
.mm-btn-group .mm-btn:hover, .mm-btn-group .mm-btn:focus-visible { z-index:1; }

/* ---------- Button-Reihe / Aktionsleiste ---------- */
.mm-actions { display:flex; gap: var(--mm-space-3); flex-wrap: wrap; align-items:center; }
.mm-actions--end { justify-content: flex-end; }
@media (max-width: 480px) {
  .mm-actions { flex-direction: column-reverse; align-items: stretch; gap: var(--mm-space-2); }
  .mm-actions .mm-btn { width: 100%; }
}

/* ---------- Sticky-CTA-Leiste (Mobil) ---------- */
.mm-cta-bar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; gap: var(--mm-space-2);
  padding: var(--mm-space-3) var(--mm-gutter);
  padding-bottom: calc(var(--mm-space-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--mm-surface) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--mm-border); box-shadow: 0 -4px 16px rgba(3,42,73,.07);
}
.mm-cta-bar .mm-btn { flex: 1; }
.mm-cta-bar .mm-btn--icon { flex: 0 0 var(--mm-control-md); }

/* ============================================================================
   TOGGLE-SCHALTER
   ========================================================================= */
.mm-switch { display:inline-flex; align-items:center; gap: var(--mm-space-3); cursor:pointer;
  min-height: var(--mm-touch-min); font-family: var(--mm-font-text); font-size: var(--mm-fs-body); color: var(--mm-text); }
.mm-switch input { position:absolute; opacity:0; width:0; height:0; }
.mm-switch__track {
  position:relative; flex:none; width:52px; height:30px; border-radius: var(--mm-radius-pill);
  background: var(--mm-border-strong); box-shadow: inset 0 1px 2px rgba(3,42,73,.12);
  transition: background-color var(--mm-dur-base) var(--mm-ease);
}
.mm-switch__thumb {
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background: var(--mm-surface); box-shadow: 0 1px 3px rgba(3,42,73,.28);
  transition: transform var(--mm-dur-base) var(--mm-ease);
}
.mm-switch input:checked + .mm-switch__track { background: var(--mm-action); }
.mm-switch input:checked + .mm-switch__track .mm-switch__thumb { transform: translateX(22px); }
.mm-switch input:focus-visible + .mm-switch__track {
  outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: var(--mm-focus-offset); }
.mm-switch input:disabled + .mm-switch__track { background: var(--mm-border); }
.mm-switch input:disabled + .mm-switch__track .mm-switch__thumb { background: var(--mm-neutral-100); box-shadow:none; }
.mm-switch:has(input:disabled) { cursor:not-allowed; color: var(--mm-neutral-400); }
.mm-switch--sm .mm-switch__track { width:40px; height:24px; }
.mm-switch--sm .mm-switch__thumb { width:18px; height:18px; }
.mm-switch--sm input:checked + .mm-switch__track .mm-switch__thumb { transform: translateX(16px); }

/* ============================================================================
   CHECKBOX & RADIO
   ========================================================================= */
.mm-check { display:inline-flex; align-items:flex-start; gap: var(--mm-space-3);
  min-height: var(--mm-touch-min); cursor:pointer;
  font-family: var(--mm-font-text); font-size: var(--mm-fs-body); 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:1px; border-radius: var(--mm-radius-sm);
  border: 1.75px solid var(--mm-border-strong); background: var(--mm-surface);
  display:grid; place-items:center; color: var(--mm-text-on-primary);
  transition: background-color var(--mm-dur-micro) var(--mm-ease), border-color var(--mm-dur-micro) var(--mm-ease);
}
.mm-check--radio .mm-check__box { border-radius:50%; }
.mm-check:hover .mm-check__box { border-color: var(--mm-action); }
.mm-check input:checked + .mm-check__box { background: var(--mm-action); border-color: var(--mm-action); }
.mm-check input:focus-visible + .mm-check__box {
  outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: var(--mm-focus-offset); }
.mm-check input:disabled + .mm-check__box { background: var(--mm-bg-muted); border-color: var(--mm-border); }
.mm-check__box svg { width:15px; height:15px; opacity:0; stroke-width:2.6; }
.mm-check input:checked + .mm-check__box svg { opacity:1; }
.mm-check--radio .mm-check__box::after { content:""; width:9px; height:9px; border-radius:50%;
  background: var(--mm-surface); transform: scale(0); transition: transform var(--mm-dur-base) var(--mm-ease); }
.mm-check--radio input:checked + .mm-check__box::after { transform: scale(1); }

/* ============================================================================
   SEGMENTIERTER SCHALTER  (Kaufen | Mieten | Neubau)
   ========================================================================= */
.mm-segmented {
  display:inline-flex; padding:4px; gap:2px; background: var(--mm-neutral-100);
  border-radius: 12px; border:1px solid var(--mm-border);
}
.mm-segmented__item {
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height: 40px; padding-inline: var(--mm-space-4); border:0; border-radius: 8px; background:transparent;
  font-family: var(--mm-font-display); font-size:.9375rem; font-weight: var(--mm-fw-medium);
  color: var(--mm-neutral-800); cursor:pointer; white-space:nowrap;
  transition: background-color var(--mm-dur-base) var(--mm-ease), color var(--mm-dur-base) var(--mm-ease),
              box-shadow var(--mm-dur-base) var(--mm-ease);
}
.mm-segmented__item:hover { color: var(--mm-action-text); }
.mm-segmented__item[aria-selected="true"], .mm-segmented__item[aria-pressed="true"] {
  background: var(--mm-surface); color: var(--mm-action-text); box-shadow: var(--mm-shadow-1); }
.mm-segmented__item:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset:1px; }
.mm-segmented--block { display:flex; width:100%; }
@media (max-width: 480px) { .mm-segmented { display:flex; width:100%; } .mm-segmented__item { height:44px; padding-inline: var(--mm-space-2); font-size:.875rem; } }

/* ============================================================================
   FILTER-CHIP
   ========================================================================= */
.mm-chip {
  display:inline-flex; align-items:center; gap:6px; height:40px; padding-inline: var(--mm-space-4);
  border:1.5px solid var(--mm-border-strong); border-radius: var(--mm-radius-pill); background: var(--mm-surface);
  font-family: var(--mm-font-display); font-size:.875rem; font-weight: var(--mm-fw-medium);
  color: var(--mm-neutral-900); cursor:pointer;
  transition: all var(--mm-dur-micro) var(--mm-ease);
}
.mm-chip:hover { border-color: var(--mm-action); background: var(--mm-action-subtle); }
.mm-chip[aria-pressed="true"] { background: var(--mm-action-subtle); border-color: var(--mm-action);
  color: var(--mm-action-text); box-shadow: inset 0 0 0 1px var(--mm-action); }
.mm-chip:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: var(--mm-focus-offset); }
.mm-chip--sm { height:32px; font-size:.8125rem; padding-inline: var(--mm-space-3); }

/* ============================================================================
   STEPPER
   ========================================================================= */
.mm-stepper { display:inline-flex; align-items:center; border:1.5px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md); background: var(--mm-surface); overflow:hidden; height: var(--mm-control-md); }
.mm-stepper button { width:46px; height:100%; border:0; background:transparent; color: var(--mm-action-text);
  display:grid; place-items:center; cursor:pointer; transition: background-color var(--mm-dur-micro) var(--mm-ease); }
.mm-stepper button:hover:not(:disabled) { background: var(--mm-action-subtle); }
.mm-stepper button:disabled { color: var(--mm-neutral-300); cursor:not-allowed; }
.mm-stepper button:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset:-3px; }
.mm-stepper__value { min-width:52px; text-align:center; font-family: var(--mm-font-text);
  font-size: var(--mm-fs-body); font-weight: var(--mm-fw-semi); font-variant-numeric: tabular-nums;
  color: var(--mm-text); border-inline:1.5px solid var(--mm-border); align-self:stretch; display:grid; place-items:center; }

/* ============================================================================
   EINGABEFELDER
   ========================================================================= */
.mm-field { display:flex; flex-direction:column; gap:6px; }
.mm-label { font-family: var(--mm-font-display); font-size:.875rem; font-weight: var(--mm-fw-medium); color: var(--mm-neutral-900); }
.mm-hint  { font-family: var(--mm-font-text); font-size: var(--mm-fs-caption); color: var(--mm-text-muted); }
.mm-error { font-family: var(--mm-font-text); font-size: var(--mm-fs-caption); color: var(--mm-danger-700);
  display:flex; align-items:center; gap:5px; }

.mm-input {
  height: var(--mm-control-md); width:100%; padding-inline: var(--mm-space-4);
  border:1.5px solid var(--mm-border-strong); border-radius: var(--mm-radius-md);
  background: var(--mm-surface); color: var(--mm-text);
  font-family: var(--mm-font-text); font-size: var(--mm-fs-body);
  transition: border-color var(--mm-dur-micro) var(--mm-ease), box-shadow var(--mm-dur-micro) var(--mm-ease);
}
.mm-input::placeholder { color: var(--mm-neutral-500); }
.mm-input:hover:not(:disabled) { border-color: var(--mm-action); }
.mm-input:focus { outline:0; border-color: var(--mm-border-focus); box-shadow: 0 0 0 3px var(--mm-focus-color); }
.mm-input:disabled { background: var(--mm-bg-muted); color: var(--mm-text-muted); border-color: var(--mm-border); cursor:not-allowed; }
.mm-input[aria-invalid="true"] { border-color: var(--mm-danger-600); }
.mm-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(224,38,49,.28); }
.mm-input--success { border-color: var(--mm-success-600); }
textarea.mm-input { height:auto; min-height:120px; padding-block: var(--mm-space-3); line-height: var(--mm-lh-base); resize:vertical; }

.mm-input-group { position:relative; display:flex; align-items:center; }
.mm-input-group .mm-icon { position:absolute; left: var(--mm-space-4); color: var(--mm-neutral-600); pointer-events:none; }
.mm-input-group .mm-input { padding-left: calc(var(--mm-space-4) * 2 + 20px); }
.mm-input-group__suffix { position:absolute; right: var(--mm-space-4); color: var(--mm-text-muted);
  font-family: var(--mm-font-text); font-size: var(--mm-fs-body-sm); }

select.mm-input { -webkit-appearance:none; appearance:none; padding-right: var(--mm-space-10); cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360666D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right var(--mm-space-4) center; background-size:18px; }

/* ---------- Slider ---------- */
.mm-slider { -webkit-appearance:none; appearance:none; width:100%; height:32px; background:transparent; cursor:pointer; }
.mm-slider::-webkit-slider-runnable-track { height:6px; border-radius:999px; background: var(--mm-bg-muted); }
.mm-slider::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; margin-top:-10px;
  border-radius:50%; background: var(--mm-surface); border:2px solid var(--mm-action); box-shadow: var(--mm-shadow-2); }
.mm-slider:focus-visible::-webkit-slider-thumb { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset:1px; }
.mm-slider::-moz-range-track { height:6px; border-radius:999px; background: var(--mm-bg-muted); }
.mm-slider::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background: var(--mm-surface);
  border:2px solid var(--mm-action); box-shadow: var(--mm-shadow-2); }

/* ============================================================================
   BADGE / TAG
   ========================================================================= */
.mm-badge { display:inline-flex; align-items:center; gap:5px; height:26px; padding-inline:10px;
  border-radius: var(--mm-radius-sm); font-family: var(--mm-font-display); font-size:.75rem;
  font-weight: var(--mm-fw-medium); letter-spacing:.01em; background: var(--mm-bg-muted); color: var(--mm-text); }
.mm-badge--neu     { background: var(--mm-accent-100); color: var(--mm-accent-800); }
.mm-badge--success { background: var(--mm-success-100); color: var(--mm-success-800); }
.mm-badge--danger  { background: var(--mm-danger-100);  color: var(--mm-danger-800); }
.mm-badge--info    { background: var(--mm-info-100);    color: var(--mm-info-800); }

/* Sparten-Kachel — 9 Märkte */
.mm-sector { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius: var(--mm-radius-md);
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-medium); font-size:.9375rem; }
.mm-sector--immo        { background: var(--mm-immo-50); color: var(--mm-immo-700); }
.mm-sector--wohnen      { background: var(--mm-wohnen-50); color: var(--mm-wohnen-700); }
.mm-sector--auto        { background: var(--mm-auto-50); color: var(--mm-auto-700); }
.mm-sector--handwerk    { background: var(--mm-handwerk-50); color: var(--mm-handwerk-700); }
.mm-sector--sonstiges   { background: var(--mm-sonstiges-50); color: var(--mm-sonstiges-700); }
.mm-sector--finanz      { background: var(--mm-finanz-50); color: var(--mm-finanz-700); }
.mm-sector--versich     { background: var(--mm-versich-50); color: var(--mm-versich-700); }
.mm-sector--energie     { background: var(--mm-energie-50); color: var(--mm-energie-700); }
.mm-sector--restnd      { background: var(--mm-restnd-50); color: var(--mm-restnd-700); }

/* ============================================================================
   MODUS-UMSCHALTER  (hell · automatisch · dunkel)
   ========================================================================= */
.mm-theme {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--mm-radius-pill);
  background: var(--mm-bg-muted); border: 1px solid var(--mm-border);
}
.mm-theme button {
  width: 40px; height: 34px; border: 0; border-radius: var(--mm-radius-pill); background: transparent;
  color: var(--mm-text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--mm-dur-base) var(--mm-ease), color var(--mm-dur-base) var(--mm-ease);
}
.mm-theme button:hover { color: var(--mm-action); }
.mm-theme button[aria-pressed="true"] {
  background: var(--mm-surface); color: var(--mm-action); box-shadow: var(--mm-shadow-1);
}
.mm-theme button:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: 1px; }

/* ############################################################################
   ZUSÄTZE NACH 1.0  —  Overlays, Zustände, Gerätebühne
   Aufgenommen 01.08.2026. Gewählte Muster: Dialog A1 · Sheet B2 ·
   Toast C1 mittig, 4 s, abgedunkelt · Menü D2 · Akkordeon E1 · Skeleton F1 ·
   Ergebnisliste G1 · Bild H1 · Seitenwechsel I1 · Gerätebühne J.
   Beleg und Begründung: references/aenderungen-nach-1.0.md
   Dieser Block hängt bewusst am Dateiende und ist in einem Stück umsetzbar.
   ############################################################################ */

/* ============================================================================
   DIALOG
   Natives <dialog> mit showModal(): Fokusfalle, Escape und Abdunkelung
   liefert der Browser. Wir gestalten nur.
   ========================================================================= */
.mm-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(520px, calc(100vw - 2 * var(--mm-gutter)));
  color: var(--mm-text);
}
.mm-dialog__box {
  background: var(--mm-surface); border-radius: var(--mm-radius-xl);
  box-shadow: var(--mm-shadow-4); padding: var(--mm-space-6);
  display: flex; flex-direction: column; gap: var(--mm-space-4);
}
.mm-dialog::backdrop { background: var(--mm-overlay); }
.mm-dialog[open]::backdrop { animation: mm-blende var(--mm-dur-enter) var(--mm-ease); }
.mm-dialog[data-mm-zu]::backdrop { animation: mm-blende var(--mm-dur-base) var(--mm-ease) reverse; }
.mm-dialog[open] .mm-dialog__box { animation: mm-dialog-auf var(--mm-dur-enter) var(--mm-ease); }
.mm-dialog[data-mm-zu] .mm-dialog__box { animation: mm-dialog-auf var(--mm-dur-base) var(--mm-ease) reverse; }
@keyframes mm-blende     { from { opacity: 0; } }
@keyframes mm-dialog-auf { from { opacity: 0; transform: scale(.98); } }

/* ============================================================================
   SHEET
   Auf dem Handy von unten, die Seite dahinter tritt zurück.
   Ab 768 px wird daraus ein zentrierter Dialog.
   Voraussetzung für das Zurücktreten: der Seiteninhalt liegt in .mm-seite
   ========================================================================= */
.mm-sheet { border: 0; padding: 0; margin: 0; background: transparent; max-width: none; max-height: none;
            inset: auto 0 0 0; width: 100%; color: var(--mm-text); }
.mm-sheet__box {
  background: var(--mm-surface); box-shadow: var(--mm-shadow-4);
  border-radius: var(--mm-radius-xl) var(--mm-radius-xl) 0 0;
  padding: var(--mm-space-5) var(--mm-space-5) var(--mm-space-6);
  display: flex; flex-direction: column; gap: var(--mm-space-4);
  max-height: 88svh; overflow: auto;
}
.mm-sheet__griff {
  flex: none; width: 44px; height: 5px; margin: 0 auto var(--mm-space-2);
  border-radius: var(--mm-radius-pill); background: var(--mm-border-strong); opacity: .6;
}
.mm-sheet::backdrop { background: var(--mm-overlay); }
.mm-sheet[open]::backdrop { animation: mm-blende var(--mm-dur-enter) var(--mm-ease); }
.mm-sheet[data-mm-zu]::backdrop { animation: mm-blende var(--mm-dur-base) var(--mm-ease) reverse; }
.mm-sheet[open] { animation: mm-sheet-auf var(--mm-dur-enter) var(--mm-ease); }
.mm-sheet[data-mm-zu] { animation: mm-sheet-auf var(--mm-dur-base) var(--mm-ease) reverse; }
@keyframes mm-sheet-auf { from { transform: translateY(100%); } }

.mm-seite { transition: transform var(--mm-dur-enter) var(--mm-ease), border-radius var(--mm-dur-enter) var(--mm-ease);
            transform-origin: 50% 0; }
html.mm-sheet-offen .mm-seite { transform: scale(.965); border-radius: var(--mm-radius-lg); overflow: hidden; }

@media (min-width: 768px) {
  .mm-sheet { inset: 0; margin: auto; width: min(560px, calc(100vw - 48px)); height: fit-content; }
  .mm-sheet__box { border-radius: var(--mm-radius-xl); 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(24px); opacity: 0; } }
}

/* ============================================================================
   TOAST
   Kurze Rückmeldung nach einer Handlung. Steht IMMER in der Bildschirmmitte,
   nie unten: dort wird sie auf dem Handy von Daumen und Leisten verdeckt.
   Standzeit 4 Sekunden, Hintergrund abgedunkelt.
   Nie für Fehler benutzen, die eine Handlung verlangen — die gehören ins Feld.
   ========================================================================= */
.mm-toast-bereich {
  position: fixed; inset: 0; z-index: 90; padding: var(--mm-gutter);
  display: grid; align-content: center; justify-items: center; gap: var(--mm-space-2);
  pointer-events: none; background: var(--mm-overlay);
  transition: background-color var(--mm-dur-base) var(--mm-ease);
}
.mm-toast-bereich:empty,
.mm-toast-bereich--klar { background: none; }     /* --klar: ohne Abdunkelung */
.mm-toast {
  pointer-events: auto; max-width: min(420px, 100%);
  display: flex; align-items: center; gap: var(--mm-space-3);
  background: var(--mm-bg-inverse); color: var(--mm-bg);
  border-radius: var(--mm-radius-md); box-shadow: var(--mm-shadow-3);
  padding: var(--mm-space-3) var(--mm-space-4);
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-medium); font-size: var(--mm-fs-body-sm);
  animation: mm-toast-auf var(--mm-dur-enter) var(--mm-ease);
}
.mm-toast .mm-icon { flex: none; }
.mm-toast--success { background: var(--mm-success-700); color: #FFFFFF; }
.mm-toast--danger  { background: var(--mm-danger-700);  color: #FFFFFF; }
.mm-toast[data-mm-zu] { animation: mm-toast-auf var(--mm-dur-base) var(--mm-ease) reverse forwards; }
@keyframes mm-toast-auf { from { opacity: 0; transform: scale(.94); } }

/* ============================================================================
   MENÜ
   ========================================================================= */
.mm-menu-anker { position: relative; display: inline-block; }
.mm-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px;
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md); box-shadow: var(--mm-shadow-3); padding: 6px;
}
.mm-menu[hidden] { display: none; }
.mm-menu:not([hidden]) { animation: mm-menu-auf var(--mm-dur-micro) var(--mm-ease-out); }
@keyframes mm-menu-auf { from { opacity: 0; transform: translateY(-4px); } }
.mm-menu button {
  display: flex; align-items: center; gap: var(--mm-space-3); width: 100%;
  height: 40px; padding-inline: 10px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--mm-radius-sm); color: var(--mm-text);
  font-family: var(--mm-font-text); font-size: var(--mm-fs-body-sm); text-align: left;
  transition: background-color var(--mm-dur-micro) var(--mm-ease);
}
.mm-menu button:hover { background: var(--mm-bg-muted); }
.mm-menu button:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: -2px; }

/* ============================================================================
   AKKORDEON
   <details> mit weich auffahrender Höhe. Kein Höhenmessen per JavaScript:
   wo der Browser calc-size() nicht kann, klappt es sauber sofort auf.
   ========================================================================= */
.mm-akkordeon { interpolate-size: allow-keywords; }
.mm-akkordeon details {
  border: 1px solid var(--mm-border); border-radius: var(--mm-radius-md);
  background: var(--mm-surface); overflow: hidden;
}
.mm-akkordeon details + details { margin-top: var(--mm-space-2); }
.mm-akkordeon summary {
  list-style: none; cursor: pointer; min-height: var(--mm-control-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-3);
  padding: 0 var(--mm-space-4);
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-medium);
}
.mm-akkordeon summary::-webkit-details-marker { display: none; }
.mm-akkordeon summary:focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: -3px; }
.mm-akkordeon summary .mm-icon { transition: transform var(--mm-dur-base) var(--mm-ease); }
.mm-akkordeon details[open] summary .mm-icon { transform: rotate(180deg); }
.mm-akkordeon__inhalt { padding: 0 var(--mm-space-4) var(--mm-space-4); color: var(--mm-text-secondary); }
.mm-akkordeon details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--mm-dur-base) var(--mm-ease), content-visibility var(--mm-dur-base) allow-discrete;
}
.mm-akkordeon details[open]::details-content { block-size: auto; }

/* ============================================================================
   LADEPLATZHALTER
   Wandernder Glanz. Steht an der Stelle, an der später der Inhalt steht,
   in dessen Maßen — sonst springt das Layout.
   ========================================================================= */
.mm-skeleton {
  border-radius: var(--mm-radius-sm); background: var(--mm-bg-muted);
  background-image: linear-gradient(90deg, transparent 0%, var(--mm-surface) 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-skeleton--text { height: 14px; }
.mm-skeleton--text + .mm-skeleton--text { margin-top: 10px; }
.mm-skeleton--bild { height: 120px; border-radius: var(--mm-radius-md); }
.mm-skeleton--karte { height: 92px; border-radius: var(--mm-radius-lg); }

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

/* ============================================================================
   BILD
   width und height am <img> sind Pflicht, sonst springt die Seite beim Laden.
   ========================================================================= */
.mm-bild { display: block; max-width: 100%; height: auto; background: var(--mm-bg-muted); }
.mm-bild[data-mm-geladen] { animation: mm-bild-auf var(--mm-dur-enter) var(--mm-ease); }
@keyframes mm-bild-auf { from { opacity: 0; } }

/* ============================================================================
   SEITENWECHSEL
   Weiche Kreuzblende beim Navigieren. Browser ohne Unterstützung wechseln
   hart, das ist kein Fehler.
   ========================================================================= */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: mm-blende var(--mm-dur-base) var(--mm-ease) reverse; }
  ::view-transition-new(root) { animation: mm-blende var(--mm-dur-enter) var(--mm-ease); }
}

/* ============================================================================
   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. Zwei Wege, den Bildschirm zu füllen:
     1. <iframe src="/"> auf die eigene Seite (im Web der beste Weg)
     2. das Markup direkt hineinschreiben (funktioniert auch ohne Server)
   Der Maßstab kommt aus mm365.js, alle Gehäusemaße aus --mm-geraet-mass.
   ========================================================================= */
.mm-buehne {
  --mm-geraet-mass: 1;
  display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  gap: var(--mm-space-6); perspective: 1600px;
}
@media (max-width: 1080px) { .mm-buehne { --mm-geraet-mass: .82; } }
@media (max-width: 860px)  { .mm-buehne { --mm-geraet-mass: .66; } }
@media (max-width: 620px)  { .mm-buehne { --mm-geraet-mass: .52; gap: var(--mm-space-4); } }

.mm-geraet { position: relative; flex: none; }
.mm-geraet[role="button"] { cursor: pointer; }
.mm-geraet[role="button"]:focus-visible {
  outline: var(--mm-focus-width) solid var(--mm-focus-color); outline-offset: 6px;
  border-radius: var(--mm-radius-md);
}
.mm-geraet__schirm {
  position: relative; overflow: hidden; background: var(--mm-primary-950);
  filter: brightness(1); transition: filter .5s var(--mm-ease);
}
.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; }
.mm-geraet--schlaeft .mm-geraet__schirm { filter: brightness(.08); }
.mm-geraet--tritt-auf { animation: mm-geraet-auf .7s var(--mm-ease) both; }
@keyframes mm-geraet-auf { from { opacity: 0; transform: translateY(28px) scale(.96); } }

/* Notebook, klappt auf Klick */
.mm-geraet--notebook { transform-style: preserve-3d; }
.mm-geraet__deckel {
  position: relative; transform-origin: 50% 100%; transform: rotateX(0deg);
  transition: transform .85s cubic-bezier(.2, .7, .3, 1);
  background: var(--mm-neutral-950); box-shadow: var(--mm-shadow-3);
  border-radius: calc(14px * var(--mm-geraet-mass)) calc(14px * var(--mm-geraet-mass)) 4px 4px;
  padding: calc(12px * var(--mm-geraet-mass));
}
.mm-geraet--zugeklappt .mm-geraet__deckel { transform: rotateX(-88deg); }
.mm-geraet__deckel::after {                        /* Kamera */
  content: ""; position: absolute; top: calc(4px * var(--mm-geraet-mass)); left: 50%;
  width: calc(5px * var(--mm-geraet-mass)); height: calc(5px * var(--mm-geraet-mass));
  border-radius: 50%; background: var(--mm-neutral-700); transform: translateX(-50%);
}
.mm-geraet--notebook .mm-geraet__schirm {
  width: calc(536px * var(--mm-geraet-mass)); height: calc(335px * var(--mm-geraet-mass));
  border-radius: calc(4px * var(--mm-geraet-mass));
}
.mm-geraet__basis {
  position: relative; width: calc(560px * var(--mm-geraet-mass)); height: calc(14px * var(--mm-geraet-mass));
  background: linear-gradient(180deg, var(--mm-neutral-800), var(--mm-neutral-950));
  border-radius: 0 0 calc(10px * var(--mm-geraet-mass)) calc(10px * var(--mm-geraet-mass));
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}
.mm-geraet__basis::after {                         /* Griffmulde */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(90px * var(--mm-geraet-mass)); height: calc(4px * var(--mm-geraet-mass));
  border-radius: 0 0 6px 6px; background: rgba(0, 0, 0, .45);
}

/* Tablet */
.mm-geraet--tablet {
  background: var(--mm-neutral-950); box-shadow: var(--mm-shadow-3);
  border-radius: calc(20px * var(--mm-geraet-mass));
  padding: calc(14px * var(--mm-geraet-mass)) calc(10px * var(--mm-geraet-mass));
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.mm-geraet--tablet .mm-geraet__schirm {
  width: calc(260px * var(--mm-geraet-mass)); height: calc(347px * var(--mm-geraet-mass));
  border-radius: calc(8px * var(--mm-geraet-mass));
}

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

/* ============================================================================
   BEWEGUNG ABSCHALTBAR UND DRUCK
   Reduzierte Bewegung heißt: sofort da, nicht gar nicht da.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mm-dialog[open]::backdrop, .mm-dialog[open] .mm-dialog__box,
  .mm-dialog[data-mm-zu]::backdrop, .mm-dialog[data-mm-zu] .mm-dialog__box,
  .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-menu:not([hidden]),
  .mm-skeleton, .mm-ergebnisliste > *, .mm-bild[data-mm-geladen],
  .mm-geraet--tritt-auf {
    animation: none !important;
  }
  .mm-seite, .mm-geraet__deckel, .mm-geraet--handy, .mm-geraet--tablet,
  .mm-akkordeon details::details-content, .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-menu { display: none !important; }
  .mm-skeleton { animation: none; background: none; }
  .mm-akkordeon details::details-content { block-size: auto; }
  .mm-ergebnisliste > * { animation: none; opacity: 1; }
}