/* =========================================================
   Model Agency – Site-Module
   Nutzt die Template-Variablen (Maison), sonst neutrale Werte.
   ========================================================= */
.mam {
  --_ink: var(--mz-ink, #1d1d1f);
  --_mute: var(--mz-mute, #6e6e73);
  --_card: var(--mz-card, #fff);
  --_fill: var(--mz-fill, #e8e8ed);
  --_hair: var(--mz-hair, #d2d2d7);
  --_accent: var(--mz-accent, #0071e3);
  --_r: var(--mz-radius, 18px);
  --_rs: var(--mz-radius-s, 11px);
  color: var(--_ink);
}
.mam a { color: inherit; text-decoration: none; }
.mam a:focus-visible { outline: 3px solid color-mix(in srgb, var(--_accent) 55%, transparent); outline-offset: 2px; }
.mam-noimg { display: block; width: 100%; height: 100%; background: var(--_fill); }

/* ---------- Slideshow ---------- */
.mas-slideshow { position: relative; overflow: hidden; border-radius: calc(var(--_r) * 1.4); background: var(--_fill); }
.mas-track { position: relative; height: var(--mas-h, min(72vh, 680px)); }
.mas-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.mas-slide.is-active { opacity: 1; visibility: visible; }
.mas-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mas-slide::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); pointer-events: none; }
.mas-caption { position: absolute; z-index: 1; left: clamp(1.25rem, 4vw, 3rem); right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(3.25rem, 6vw, 4.5rem); color: #fff; max-width: 40rem; }
.mas-caption h2, .mas-caption p.mas-title { margin: 0; color: #fff; font-size: clamp(2rem, 5.5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.mas-caption p { margin: .5rem 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .9); }
.mas-btn { display: inline-block; margin-top: 1rem; padding: .6rem 1.3rem; font-size: .95rem; font-weight: 500; color: var(--_ink) !important; background: #fff; border-radius: 999px; }
.mas-btn:hover { background: #f5f5f7; text-decoration: none; }
.mas-controls { position: absolute; z-index: 2; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mas-controls button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--_ink); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 1rem; line-height: 1; }
.mas-controls button:hover { background: rgba(0, 0, 0, .08); filter: none; }
.mas-dots { display: flex; gap: .35rem; }
.mas-dot { width: 8px !important; height: 8px !important; padding: 0; border-radius: 999px !important; background: rgba(0, 0, 0, .3) !important; transition: width .3s ease, background .3s ease; }
.mas-dot[aria-current="true"] { width: 22px !important; background: var(--_ink) !important; }
.mas-play::before { content: "❚❚"; font-size: .6rem; letter-spacing: -.1em; }
.mas-play.is-paused::before { content: "▶"; font-size: .7rem; }

/* ---------- Model-Raster / Scroller ---------- */
.mamm-grid { display: grid; grid-template-columns: repeat(var(--mamm-cols, 4), minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.mamm-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, calc((100% - 3rem) / var(--mamm-cols, 4))); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 0 .5rem; scrollbar-width: thin; }
.mamm-scroller li { scroll-snap-align: start; }
.mamm-item a { display: block; }
.mamm-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--_rs); background: var(--_fill); }
.mamm-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mamm-item a:hover .mamm-img img { transform: scale(1.03); }
.mamm-name { display: block; margin-top: .5rem; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.mamm-meta { display: block; font-size: .8rem; color: var(--_mute); }
.mamm-badge { display: inline-block; margin-left: .3rem; padding: 0 .45rem; font-size: .68rem; font-weight: 500; line-height: 1.6; color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); border-radius: 999px; vertical-align: middle; }
.mamm-more { display: inline-block; margin-top: 1rem; font-size: .9rem; color: var(--_accent) !important; }

/* ---------- Fotos (Mosaik) ---------- */
.mamp-grid { display: grid; grid-template-columns: repeat(var(--mamp-cols, 6), minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.mamp-grid.is-mosaic li:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
.mamp-grid a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--_rs); background: var(--_fill); }
.mamp-grid img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.mamp-grid a:hover img { transform: scale(1.04); }
.mamp-grid span { position: absolute; left: .5rem; bottom: .5rem; padding: .1rem .5rem; font-size: .72rem; color: var(--_ink); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; opacity: 0; transition: opacity .2s ease; }
.mamp-grid a:hover span, .mamp-grid a:focus-visible span { opacity: 1; }

/* ---------- Schnellsuche ---------- */
.mams-form { display: grid; gap: .75rem; }
.mams-form.is-inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.mams-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--_mute); }
.mams-form input, .mams-form select { width: 100%; }
.mams-range { display: flex; gap: .5rem; }
.mams-form.is-compact { display: flex; gap: .4rem; }
.mams-form.is-compact input { min-width: 0; padding: .35rem .8rem; font-size: .82rem; border-radius: 999px; background: var(--_fill); border-color: transparent; }
.mams-form.is-compact button { padding: .35rem .8rem; font-size: .8rem; }

/* ---------- Zahlen ---------- */
.mamst-list { display: grid; grid-template-columns: repeat(var(--mamst-cols, 2), minmax(0, 1fr)); gap: .75rem; margin: 0; }
.mamst-list div { padding: .9rem 1rem; background: var(--mz-ground, #f5f5f7); border-radius: var(--_rs); }
.mamst-list dt { font-size: .78rem; color: var(--_mute); }
.mamst-list dd { margin: .15rem 0 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .mamm-grid { grid-template-columns: repeat(min(var(--mamm-cols, 4), 3), minmax(0, 1fr)); }
  .mamp-grid { grid-template-columns: repeat(min(var(--mamp-cols, 6), 4), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mamm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mamm-scroller { grid-auto-columns: 46%; }
  .mamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mas-track { height: var(--mas-h-mobile, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .mas-slide, .mamm-img img, .mamp-grid img { transition: none; }
}

/* ---------- Glocke & Nachrichten (mod_ma_notify) ---------- */
.man { position: relative; display: flex; align-items: center; gap: .25rem; }
.man-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; color: var(--_ink) !important; background: transparent !important; border: 0; border-radius: 50% !important; cursor: pointer; text-decoration: none !important; }
.man-icon:hover { background: var(--_fill) !important; filter: none !important; }
.man-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center; color: #fff; background: #ff3b30; border-radius: 999px; box-shadow: 0 0 0 2px var(--mz-ground, #f5f5f7); }
.man-count[hidden] { display: none; }
.man-bellwrap { position: relative; }
.man-panel {
  position: absolute; right: -2.5rem; top: calc(100% + .5rem); z-index: 80; width: min(360px, 92vw);
  background: var(--_card); border-radius: var(--_r); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 24px 48px -16px rgba(0,0,0,.28); overflow: hidden;
}
.man-panel__head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem .5rem; }
.man-readall { padding: 0 !important; font-size: .8rem !important; color: var(--_accent) !important; background: none !important; border: 0; cursor: pointer; }
.man-items { max-height: 60vh; overflow-y: auto; list-style: none; margin: 0; padding: 0 .4rem .4rem; }
.man-items a { display: grid; grid-template-columns: 36px 1fr; gap: .6rem; align-items: center; padding: .55rem .6rem; font-size: .86rem; line-height: 1.35; color: var(--_ink); border-radius: 12px; }
.man-items a:hover { background: var(--mz-ground, #f5f5f7); }
.man-items a.is-unread { background: color-mix(in srgb, var(--_accent) 8%, transparent); }
.man-items small { display: block; margin-top: .15rem; font-size: .72rem; color: var(--_mute); }
.man-av { display: block; width: 36px; height: 36px; overflow: hidden; background: var(--_fill); border-radius: 50%; }
.man-av img { width: 100%; height: 100%; object-fit: cover; }
.man-empty { padding: 1rem; font-size: .88rem; color: var(--_mute); text-align: center; }
.man-all { display: block; padding: .7rem; font-size: .85rem; text-align: center; color: var(--_accent) !important; border-top: 1px solid var(--_fill); }
.man--guest { gap: .6rem; font-size: .85rem; }
.man-join { padding: .35rem .9rem; color: #fff !important; background: var(--_accent); border-radius: 999px; }