/* Bits mietradar ships inline (not in its compiled stylesheet). */
@keyframes mr-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes mr-pop { 0% { opacity: 0; transform: translateY(10px) scale(.96) } 100% { opacity: 1; transform: translateY(0) scale(1) } }
@media (prefers-reduced-motion: reduce) { .mr-float, .mr-pop { animation: none !important } }
[data-gallery-track] { transition: transform .5s cubic-bezier(.22,1,.36,1); }
[data-gallery-item] { min-width: 0; }

/* Price pins on the maps (copied from mietradar's leaflet divIcon inline style). */
.mr-pin { display:inline-flex; align-items:center; white-space:nowrap; padding:4px 10px; border-radius:9999px; font-weight:700; font-size:12px; font-family:var(--font-sans),sans-serif; background:var(--color-card); color:var(--color-foreground); border:1px solid var(--color-primary); box-shadow:0 2px 8px rgba(0,0,0,0.18); transform:translate(-50%,-50%); }
.mr-pin--active { background:var(--color-primary); color:var(--color-primary-foreground); }
.leaflet-div-icon { background: transparent; border: 0; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 10px; }

/* Phones (no hover): in a sideways-scrolling row (home "recent", data-scroller) a swipe scrolls the row, so the photo arrows of
   the cards there stay visible; elsewhere a swipe on the photo moves it (site.js). Desktop unchanged: arrows on hover. */
@media (hover: none) { [data-scroller] [data-carousel] [data-prev], [data-scroller] [data-carousel] [data-next] { opacity: 1; } }

/* Locked content (photos / description) until the visitor completes the access modal. */
html.mr-unlocked [data-gate] { display: none !important; }
html.mr-unlocked [data-gated] { filter: none !important; transform: none !important; pointer-events: auto !important; user-select: auto !important; }

/* Utilities used by Mein Konto / lightbox that mietradar's compiled stylesheet does not contain (it only ships classes its own pages use). */
.z-\[2500\] { z-index: 2500 }
.bg-black\/95 { background-color: rgba(0,0,0,.95) }
.bg-background\/60 { background-color: color-mix(in oklab, var(--background) 60%, transparent) }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent) }
.bg-amber-100 { background-color: #fef3c7 }
.text-amber-700 { color: #b45309 }
.text-amber-800 { color: #92400e }
.cursor-zoom-in { cursor: zoom-in }
.object-contain { object-fit: contain }
.max-h-full { max-height: 100% }
.max-w-full { max-width: 100% }
.ml-auto { margin-left: auto }
.my-1\.5 { margin-block: .375rem }
.p-1\.5 { padding: .375rem }
.pb-6 { padding-bottom: 1.5rem }
.pl-4 { padding-left: 1rem }
.gap-y-4 { row-gap: 1rem }
.gap-y-2\.5 { row-gap: .625rem }
.space-y-0\.5 > :not(:last-child) { margin-bottom: .125rem }
.border-l-2 { border-left-style: var(--tw-border-style, solid); border-left-width: 2px }
.opacity-70 { opacity: .7 }
.hover\:bg-secondary:hover { background-color: var(--secondary) }
.hover\:bg-white\/15:hover { background-color: rgba(255,255,255,.15) }
@media (min-width: 40rem) {
  .sm\:flex-row { flex-direction: row }
  .sm\:items-start { align-items: flex-start }
  .sm\:w-auto { width: auto }
  .sm\:px-8 { padding-inline: 2rem }
  .sm\:px-16 { padding-inline: 4rem }
  .sm\:min-w-44 { min-width: 11rem }
  .sm\:left-5 { left: 1.25rem }
  .sm\:right-5 { right: 1.25rem }
}
@media (min-width: 48rem) {
  .md\:grid-cols-\[172px_1fr\] { grid-template-columns: 172px 1fr }
}
.grid-cols-\[1fr_88px\] { grid-template-columns: 1fr 88px }
.grid-cols-\[112px_1fr\] { grid-template-columns: 112px 1fr }
.-ml-2 { margin-left: -.5rem }
.border-card { border-color: var(--card) }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.break-words { overflow-wrap: break-word }
.max-w-xs { max-width: 20rem }
.text-\[11px\] { font-size: 11px }
.border-b { border-bottom-width: 1px; border-bottom-style: var(--tw-border-style, solid) }
@media (min-width: 40rem) {
  .sm\:border-r { border-right-width: 1px; border-right-style: var(--tw-border-style, solid) }
  .sm\:border-b-0 { border-bottom-width: 0 }
}

/* Mein Konto sidebar: keeps its own height (the grid would stretch it to the content column) and stays in view while the long Bestellung tab scrolls, like mietradar.online. */
.mr-konto-nav { height: fit-content; }
@media (min-width: 48rem) { .mr-konto-nav { position: sticky; top: 6rem; } }

/* Long values (e-mail addresses) wrap inside their grid column instead of running out of the card. */
.mr-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* Compact benefits card inside the access modal on phones (mietradar shows it because the dark side panel is hidden there). */
.border-accent-foreground\/10 { border-color: color-mix(in oklab, var(--accent-foreground) 10%, transparent) }
.space-y-2\.5 > :not(:last-child) { margin-bottom: .625rem }
.size-32 { width: 8rem; height: 8rem }
.-right-10 { right: -2.5rem } .-top-10 { top: -2.5rem }
.leading-snug { line-height: 1.375 }

/* Order button of the access modal: hint bubble shown on hover/tap while the button is still disabled. */
.mr-submit-wrap { position: relative; margin-top: 1.25rem; }
.mr-submit-guard { position: absolute; inset: 0; cursor: not-allowed; border-radius: .5rem; }
.mr-submit-hint { position: absolute; left: 0; right: 0; bottom: calc(100% + .5rem); z-index: 5; margin: 0; padding: .5rem .75rem; border-radius: .5rem;
  background: var(--foreground); color: var(--background); font-size: .75rem; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.mr-submit-hint::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--foreground); }

/* Phones only (team lead 21.09.2026, like mietradar-alpha.vercel.app): the step button of the access modal stays visible as a bar at the
   bottom of the scrolling form. The bar bleeds to the modal's edges (the form area has px-6 / pb-5) and covers the text scrolling behind it.
   Desktop keeps the button in the normal flow. */
@media (max-width: 767px) {
  [data-modal] .mr-sticky-submit, [data-modal] .mr-submit-wrap {
    position: sticky; bottom: -1.25rem; z-index: 4;
    margin: 1.5rem -1.5rem -1.25rem; padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border); background: var(--card);
  }
  /* A sticky box cannot leave its parent. The form only holds the inputs, so the bar would stay below the fold until the inputs scroll in.
     Without a box of its own the form hands its children to the step panel, and the bar can stick from the first pixel. */
  [data-modal] [data-step-form] { display: contents; }
  [data-modal] [data-step-form] > :first-child { margin-top: 1.25rem; }
  [data-modal] .mr-sticky-submit > button { margin-top: 0; }
  [data-modal] .mr-submit-guard { inset: 1rem 1.5rem 1.5rem; }
  [data-modal] .mr-submit-hint { left: 1.5rem; right: 1.5rem; bottom: calc(100% - .5rem); }
}

/* Konto page: like mietradar.online the footer follows the content directly (its logo is visible below the login card on phones).
   The page's <main> carries min-h-screen, which pushed the footer a full screen down. The body becomes the full-height column instead,
   so the footer still sits at the bottom of the window when the content is short. Scoped to this page via [data-konto]. */
body:has([data-konto]) { display: flex; flex-direction: column; min-height: 100vh; }
body:has([data-konto]) > main { min-height: 0; flex: 1 0 auto; }

/* Utilities of the free registration / login modals (_AuthModals.cshtml, copied from mietradar-alpha) that mietradar's compiled
   stylesheet does not contain. Same definitions as Tailwind v4 (compare .focus\:ring-2 / .focus\:ring-ring in mietradar.css). */
.my-4 { margin-block: calc(var(--spacing) * 4); }
.min-h-0 { min-height: calc(var(--spacing) * 0); }
.bg-transparent { background-color: transparent; }
.text-emerald-600 { color: var(--color-emerald-600); }
.focus-within\:border-primary:focus-within { border-color: var(--primary); }
.focus-within\:ring-2:focus-within { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-within\:ring-ring:focus-within { --tw-ring-color: var(--ring); }

/* Subscription modal (_SubscribeModal.cshtml, copied from mietradar-alpha): utilities missing from the compiled stylesheet. */
.-mx-6 { margin-inline: calc(var(--spacing) * -6); }
@media (min-width: 48rem) { .md\:-mx-7 { margin-inline: calc(var(--spacing) * -7); } }
.bg-emerald-500 { background-color: oklch(69.6% .17 162.48); }
.disabled\:opacity-60:disabled { opacity: .6; }

.pb-1 { padding-bottom: calc(var(--spacing) * 1); } /* sticky "Weiter" bar of the subscription modal */

/* Mein Konto: cancel dialog of the subscription (replaces the browser confirm()). */
.flex-col-reverse { flex-direction: column-reverse; }
@media (min-width: 40rem) { .sm\:flex-row.flex-col-reverse { flex-direction: row; } } /* site.css loads after mietradar.css: keep sm:flex-row winning */
.border-destructive\/40 { border-color: var(--destructive); }
@supports (color: color-mix(in lab, red, red)) { .border-destructive\/40 { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); } }

/* Subscription modal, pay step (mietradar-alpha 30.09.2026). */
.gap-y-2 { row-gap: calc(var(--spacing) * 2) }
.border-primary\/20 { border-color: var(--primary) }
@supports (color: color-mix(in lab, red, red)) { .border-primary\/20 { border-color: color-mix(in oklab, var(--primary) 20%, transparent) } }
@media (min-width: 40rem) { .sm\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)) } }
/* Phones only: side by side the two offer tiles are ~140px wide and long German words ("Mietangeboten", "benachrichtigen") ran out of
   them → one tile per row (the text then fits on one or two lines; desktop keeps the two columns of the demo). */
@media (max-width: 39.99rem) { [data-sub-tiles] { grid-template-columns: minmax(0, 1fr); } [data-sub-tiles] > li { padding-block: calc(var(--spacing) * 2.5); } }