/* ============================================================================
   Miet-Objekte — layout & components (Figma-corrected)
   Desktop-first (1280px). Sharp corners, no shadows (except header hairline).
   ========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Sticky footer: html/body fill the viewport, main grows. */
html { height: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;   /* iOS Safari: avoids the white gap below the footer when the toolbar collapses */
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
button { font-family: inherit; cursor: pointer; }
address { font-style: normal; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.2; }

/* Material Symbols (Google icons, as in the Figma design) */
/* Icons are inline SVG (miet_icon) inheriting colour via fill: currentColor. */
.micon { flex: none; vertical-align: middle; display: inline-block; }
/* Hamburger ↔ close swap (both icons rendered; CSS toggles which shows). */
.nav-toggle__close { display: none; }
.site-header.is-nav-open .nav-toggle__menu { display: none; }
.site-header.is-nav-open .nav-toggle__close { display: inline-block; }

/* ── Layout primitives ────────────────────────────────────────────────────*/
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    --page-pad: var(--margin-desktop);   /* breakpoints below just change this */
    /* max() keeps content clear of the landscape notch and lets full-bleed bars fill it */
    padding-inline: max(var(--page-pad), env(safe-area-inset-left), env(safe-area-inset-right));
}
.section { padding-block: 100px; }   /* homepage section spacing (mobile overrides below) */
.section__title {
    font-size: var(--fs-headline);
    font-weight: 500;
    line-height: var(--lh-headline);
    letter-spacing: var(--ls-headline);
    margin-bottom: var(--sp-xl);
}
.label-caps {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
}

/* ── Buttons (design.md) ──────────────────────────────────────────────────*/
.btn {
    display: inline-flex; align-items: center; gap: var(--sp-sm);
    padding: 14px 28px;
    font-size: var(--fs-body); font-weight: 600;
    border: 1px solid transparent; border-radius: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-strong); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--ghost { padding-inline: 0; color: var(--ink); }
.btn--ghost:hover { text-decoration: underline; }

/* ── Header (translucent surface + blur, hairline border) ─────────────────*/
.site-header {
    position: sticky; top: 0; z-index: 50;
    /* extend up under the status-bar/notch; content stays below it via padding-top */
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--divider);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
}
.site-logo {
    font-size: var(--fs-title); font-weight: 700; color: var(--ink);
    letter-spacing: var(--ls-title); line-height: var(--lh-title);
}
.site-logo:hover { color: var(--ink); }
.site-nav .nav-list { display: flex; gap: 32px; list-style: none; }
.site-nav a {
    display: inline-block; padding-block: 4px;
    font-size: var(--fs-nav); font-weight: 600;
    letter-spacing: var(--ls-nav); text-transform: uppercase;
    color: var(--muted);
}
.site-nav a:hover { color: var(--primary-deep); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav a[aria-current] {
    color: var(--primary-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nav-toggle {   /* hamburger — only shown on phones (≤480) */
    display: none; width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
}

/* ── Home hero (full-bleed image + fade-to-surface gradients) ─────────────*/
.hero { position: relative; background: var(--surface); overflow: hidden; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Top + bottom fade to the page surface, per Figma. */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(251,249,248,0) 0%, var(--surface) 100%),
        linear-gradient(to top, var(--surface) 0%, rgba(251,249,248,0.5) 50%, rgba(251,249,248,0) 100%);
}
.hero__inner {
    position: relative; z-index: 2;
    min-height: 540px;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding-block: 112px 96px;
}
.hero__title {
    max-width: 672px;
    font-size: var(--fs-hero); font-weight: 600;
    line-height: var(--lh-hero); letter-spacing: var(--ls-hero);
    color: var(--ink);
}
.hero__subtitle {
    margin-top: 20px;
    max-width: 600px;
    font-size: var(--fs-subheading); font-weight: 400;
    line-height: var(--lh-subheading); color: var(--body);
}
.hero__actions { margin-top: var(--sp-lg); }
.hero__actions .btn { text-transform: uppercase; letter-spacing: var(--ls-label); }

/* ── Featured (home) cards — bare on surface, no bg/border/button ─────────*/
/* Carousel: a transform-based slider sized to N cards per view (3/2/1 by
   breakpoint). Arrows flank the row in the side margins (the viewport shrinks to
   make room); home-carousel.js translates the track one card at a time (smooth,
   grid-aligned), loops seamlessly via cloned cards, and shows the arrows +
   autoplay only when the cards overflow the row (root gets .is-active). */
.featured-carousel { position: relative; }
.featured-carousel__viewport { overflow: hidden; }   /* full content width — cards align with the title */
.featured-carousel__track {
    --cols: 3;
    display: flex; gap: var(--gutter);
    transition: transform 1s ease-in-out;   /* will-change is applied by JS only while active (a permanent layer broke card hover-repaint) */
}
.featured-carousel__track > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
}
/* Cloned cards exist only to make the loop seamless — hide them unless the
   carousel is actually scrolling, so a small featured set never shows dupes. */
.featured-carousel:not(.is-active) .featured-carousel__track > .is-clone { display: none; }

.carousel-nav__btn {
    position: absolute;
    width: 40px; height: 40px; display: grid; place-content: center;
    border: 1px solid var(--divider); background: transparent; color: var(--primary-deep);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.carousel-nav__btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
.carousel-nav__btn[hidden] { display: none; }
/* Side mode (enough outer room): arrows flank the row just outside the cards.
   JS sets the vertical position (centred on the 4:3 image) and toggles modes. */
.featured-carousel.is-side-arrows .carousel-nav__btn--prev { right: 100%; margin-right: var(--sp-md); }
.featured-carousel.is-side-arrows .carousel-nav__btn--next { left: 100%; margin-left: var(--sp-md); }
/* Top mode (narrow screens): fall back to the top-right, beside the title. */
.featured-carousel.is-top-arrows .carousel-nav__btn--next { right: 0; }
.featured-carousel.is-top-arrows .carousel-nav__btn--prev { right: calc(40px + var(--sp-sm)); }

.card-featured { display: flex; flex-direction: column; background: transparent; }
/* Body fills the height below the (fixed-ratio) image so the meta + its divider
   bottom-align across a row even when titles differ in line count. Same mechanic
   as the listing card: top group pinned up, meta pinned down, 16px min gap. */
.card-featured .card__body {
    display: flex; flex-direction: column; justify-content: space-between;
    flex: 1 0 auto; gap: var(--sp-md);
}
.card-featured .card__media {
    display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt);
}
/* The image FILLS the 4:3 frame via absolute inset:0 rather than height:100%.
   Once images carry width/height attributes (after thumbnail regeneration), a
   percentage height resolved against the box's aspect-ratio-derived height could
   re-round by a sub-pixel on the zoom's last frame — a brief 4:3 → 4:3.x → 4:3
   "jiggle". Absolute fill makes the used size the box rect itself, so nothing
   recomputes. will-change:transform keeps it smooth during the hover zoom. */
/* Hover zoom, resting at NATIVE scale. The image fills the frame exactly
   (inset:0, scale 1) at rest, so the rasterised size == the displayed size — there
   is no minified layer for the compositor to "re-sharpen" a beat after the pointer
   leaves, which was the cause of the aspect wobble at the end of the un-hover. On
   hover it zooms UP to scale 1.06; overflow:hidden on .card__media clips the 6%
   bleed. Trade-off: the image is ~6% upscaled during the zoom-in (briefly a touch
   soft until Chrome re-rasters), but the hi-res 1200px card source keeps that
   minimal. transform-origin:center zooms symmetrically. */
.card__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1); transform-origin: center;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Subtle image zoom on hover — extra feedback, triggered from anywhere on the card. */
.card-listing:hover .card__img,
.card-featured:hover .card__img { transform: scale(1.06); }
.card__noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--faint); font-size: var(--fs-meta);
}

/* Floating badges — availability top-left, price top-right (positions are a
   deliberate house preference; sizes & colors follow Figma, per page). */
.badge { position: absolute; top: var(--sp-md); text-transform: uppercase; }
.badge--availability { left: var(--sp-md); }
.badge--price { right: var(--sp-md); }

/* Card badges — unified tonal chips across home + listing: 12px/700; blue-tint
   availability (grey when rented), grey price. Reuses the facts-band / pricing
   tokens (--badge-avail-bg, #efedec) so cards tie into the rest of the system. */
.card-featured .badge,
.card-listing .badge {
    padding: 6px 13px; font-size: var(--fs-nav); line-height: var(--lh-nav);
    letter-spacing: var(--ls-nav); font-weight: 700;
}
.card-featured .badge--availability.is-available,
.card-listing .badge--availability.is-available { background: var(--badge-avail-bg); color: var(--primary); }
.card-featured .badge--availability.is-rented,
.card-listing .badge--availability.is-rented { background: rgba(95,94,94,.8); color: #fff; }
.card-featured .badge--price,
.card-listing .badge--price { background: rgba(239,237,236,.9); color: var(--ink); }

.card__title {
    margin-top: var(--sp-md);
    font-size: var(--fs-title); font-weight: 500; line-height: var(--lh-title);
    color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--primary-deep); }
.card__location {
    display: flex; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-xs);
    color: var(--muted); font-size: var(--fs-body);
}
.card__location .micon { color: var(--primary-deep); }       /* deep-blue pin (Figma) */

.card__meta { display: flex; flex-wrap: wrap; list-style: none; }
.card__meta li { display: flex; align-items: center; }

/* Home meta: 14px UPPERCASE, text-colored icons, divider above */
.card-featured .card__meta {
    gap: var(--gutter); padding-top: 17px;   /* top gap now comes from .card__body's space-between */
    border-top: 1px solid var(--divider);
    font-size: var(--fs-meta); line-height: var(--lh-meta);
    text-transform: uppercase; color: var(--body);
}
.card-featured .card__meta li { gap: var(--sp-xs); }
.card-featured .card__meta .micon { color: var(--body); }

/* ── Objekte archive grid (3 cols → 2 → 1) ───────────────────────────────*/
/* Auto-fill: as many cards as fit at >=350px each. 350px is the card width where the
   meta row (rooms/bath/m²) still fits on ONE line, so the grid drops 3→2→1 on its own
   before a card would ever get narrow enough to wrap the meta to two rows. min(...,100%)
   prevents overflow on screens narrower than 350px. */
.property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)); gap: var(--gutter); }

/* ── Listing cards — filled #f5f3f2; body space-between; deep-blue accents ─*/
.card-listing { display: flex; flex-direction: column; height: 100%; background: var(--surface-alt); }
.card-listing .card__media {
    display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e4e2;
}
.card-listing .card__body {
    display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 auto;
    gap: var(--sp-md);   /* min 16px under the location; extra row height grows here so the meta+cta block bottom-aligns across cards (1- vs 2-line titles) */
    padding: 20px;       /* Figma card inner padding */
}
.card-listing .card__title { margin-top: 0; padding-right: var(--sp-md); }
.card-listing .card__meta {
    gap: 32px; margin-bottom: var(--sp-md);   /* 16px above the cta divider */
    font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body);
}
.card-listing .card__meta li { gap: 6px; }
.card-listing .card__meta .micon { color: var(--primary-deep); }   /* deep-blue meta icons */
.card__cta {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--divider);
    color: var(--primary-deep);
    font-size: var(--fs-nav); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 700;
}
.card__cta:hover { color: var(--primary); }
.card__cta:hover .micon { transform: translateX(3px); }
.card__cta .micon { transition: transform .15s ease; }

/* ── Home: about ──────────────────────────────────────────────────────────*/
.about { background: var(--surface); }
.about__grid { display: grid; grid-template-columns: 560px 1fr; gap: var(--sp-xl); align-items: center; }
.about__media { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-alt); }
.about__content h2 {
    font-size: var(--fs-headline); font-weight: 500;
    line-height: var(--lh-headline); letter-spacing: var(--ls-headline);
    margin-bottom: var(--sp-lg);
}
.about__content p { color: var(--body); margin-bottom: var(--sp-lg); }
.about__content p:last-child { margin-bottom: 0; }

/* ── Listing: header + filters ────────────────────────────────────────────*/
/* Single source of the gap to the footer (grid or pagination), so it never
   doubles up or goes missing depending on whether a pager is rendered. */
.archive-wrap { padding-bottom: var(--sp-xl); }   /* 40px content→footer */
.archive-head { padding-top: 32px; padding-bottom: var(--sp-lg); }   /* 32px header→title (Figma) */
.archive-head__title { font-size: var(--fs-headline); font-weight: 500; line-height: var(--lh-headline); letter-spacing: var(--ls-headline); }
.archive-head__subtitle { margin-top: var(--sp-sm); color: var(--muted); font-size: var(--fs-subheading); }

/* Filter bar (#efedec), padded 16/24, with an internal divider + meta row. */
.filters { background: var(--surface-container); margin-bottom: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); }
.filters__row {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 32px;
    padding: 0 0 var(--sp-md);
}
.filters__field { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 220px; flex: 1 1 220px; }
.filters__field label { font-size: var(--fs-label); letter-spacing: var(--ls-nav); text-transform: uppercase; font-weight: 700; color: var(--muted); }
.filters select {
    appearance: none;
    background: var(--surface-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e7881' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--faint); border-radius: 0;
    padding: 12px 36px 12px 14px; font-size: var(--fs-body); color: var(--ink); width: 100%;
}
.filters select:focus { outline: none; border: 2px solid var(--primary); padding: 11px 35px 11px 13px; }
.filters__availability { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.filters__checks { display: flex; gap: var(--sp-md); padding-block: 6px; }
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-body); cursor: pointer; }
.checkbox input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--faint); background: var(--surface-white); display: grid; place-content: center; }
.checkbox input::before {
    content: ""; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9.5 7.5 13 14 5.5'/%3E%3C/svg%3E") no-repeat center;
    transform: scale(0); transition: transform .1s ease;
}
.checkbox input:checked { background: var(--primary); border-color: var(--primary); }
.checkbox input:checked::before { transform: scale(1); }

/* Secondary row: count (left) + reset (right), with a divider on top. */
.filters__meta {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--divider);
}
.filters__count { color: #303030; font-size: var(--fs-body); }
.filters__reset { font-size: var(--fs-body); font-weight: 400; color: #303030; }
.filters__reset:hover { color: var(--primary-deep); }

.no-results {
    padding: var(--sp-xxl) var(--sp-lg); text-align: center;
    border: 1px dashed var(--divider); background: var(--surface-white);
    color: var(--body);
}
.no-results strong { display: block; color: var(--ink); font-size: var(--fs-title); margin-bottom: var(--sp-sm); }

/* ── Pagination ───────────────────────────────────────────────────────────*/
/* Only owns the gap ABOVE it (to the grid). The gap below — to the footer — is
   owned by .archive-wrap so it's present exactly once whether or not a pager
   is rendered (no missing gap when ≤12 results, no double gap when paginated). */
.pagination { display: flex; justify-content: center; padding-top: var(--sp-xl); }
.pagination .page-numbers {
    display: inline-grid; place-content: center;
    min-width: 40px; height: 40px; padding: 0 6px; margin: 0 4px;
    border: 1px solid var(--divider); background: var(--surface-white);
    color: var(--ink); font-size: var(--fs-meta); font-weight: 600;
}
.pagination a.page-numbers:hover { border-color: var(--primary-deep); color: var(--primary-deep); }
.pagination .page-numbers.current { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ── Detail: gallery (light letterbox, dots below, no crop) + lightbox ─────*/
/* Scope to the content wrapper: WordPress's body_class() also outputs `single`
   on single posts, so a bare `.single` would add this padding to <body> too —
   producing phantom whitespace below the footer. */
.site-main > .single { padding-bottom: var(--sp-section); }
.gallery { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-lg); }
/* 16:9, but capped at 600px on desktop so the gallery is a wide, shorter band
   (the title/facts stay visible in the landing). Mobile/tablet keep 3:2 below 850px
   — their heights are already under 600px, so the cap never affects them. */
.gallery__viewport { position: relative; background: var(--surface-container); aspect-ratio: 16 / 9; max-height: 600px; overflow: hidden; }
.gallery__track { display: flex; height: 100%; }
.gallery__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; }
/* Show the whole image with side bars (contain) — no cropping, regardless of ratio. */
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; background: rgba(251,249,248,.7); color: var(--ink);
    font-size: 20px; line-height: 1; display: grid; place-content: center;
}
.gallery__nav:hover { background: rgba(251,249,248,.95); }
.gallery__nav--prev { left: var(--sp-md); }
.gallery__nav--next { right: var(--sp-md); }
.gallery__dots { display: flex; justify-content: center; gap: var(--sp-sm); }
.gallery__dot { width: 8px; height: 8px; border: none; background: var(--divider); padding: 0; }
.gallery__dot.is-active { background: var(--primary-deep); }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20,20,20,.92); padding: var(--sp-xl);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Sliding 3-slot track so the lightbox animates like the gallery. */
.lightbox__viewport { width: 100%; height: 100%; overflow: hidden; }
.lightbox__track { display: flex; height: 100%; }
.lightbox__slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute; z-index: 2; background: none; border: none; color: #fff; font-size: 40px; line-height: 1;
}
.lightbox__close { top: 24px; right: 32px; font-size: 32px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ── Cookie notice bar (informational; dismiss remembered in localStorage) ─*/
.cookie-notice {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-md);
    background: var(--footer-bg); color: var(--footer-text);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: var(--sp-md) max(var(--margin-desktop), env(safe-area-inset-left));
    padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom));
    font-size: var(--fs-meta); line-height: var(--lh-meta);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__text { margin: 0; flex: 1 1 320px; color: rgba(255, 255, 255, .85); }
.cookie-notice__text a { color: #fff; text-decoration: underline; }
.cookie-notice__actions { flex: none; display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
/* Reject: outline button readable on the dark bar (equal prominence to accept). */
.cookie-notice__reject { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.cookie-notice__reject:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Detail: head + pricing ───────────────────────────────────────────────*/
.single__head {
    display: flex; flex-wrap: wrap; align-items: flex-end;   /* title + price side by side */
    column-gap: var(--sp-xl); row-gap: var(--sp-xl);          /* gap so they never touch */
    padding-block: var(--sp-xl);
}
/* Title takes the remaining width; the price keeps its own. The price drops to a
   new line only when the row can no longer fit both (content-driven, not a fixed
   breakpoint) — so a shorter title keeps the price beside it down to a narrower
   viewport. */
.single__head-main { flex: 1 1 360px; }
/* align-self:center centres the price vertically when the title block is taller;
   when the price is the taller one, centring the tallest item is a no-op so the
   title bottom-aligns to it — i.e. "centre unless the price box is bigger". */
.pricing { align-self: center; }
/* Detail status is plain uppercase text (no chip), per Figma */
.single__status {
    display: block; margin-bottom: var(--sp-sm);
    font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-nav);
    text-transform: uppercase; color: var(--on-primary-cont);
}
.single__title { font-size: var(--fs-headline); font-weight: 500; line-height: var(--lh-headline); letter-spacing: var(--ls-headline); }
.single__location { display: flex; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-sm); color: var(--muted); }
.single__location .micon { color: var(--faint); }

.pricing {                                   /* borderless, filled; 16px pad (Figma) */
    background: var(--surface-alt); border: 0;
    padding: var(--sp-md);
    /* 2-column table: labels | values. Values right-align so the numbers form a clean
       column; the 16px column-gap is the (consistent) spacing the widest row — Total — sits at. */
    display: grid; grid-template-columns: max-content max-content; column-gap: 16px;
    flex: 0 0 auto;        /* hug content as a flex item — never grow or shrink */
}
.pricing__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding-block: var(--sp-xs); }
.pricing__row .label-caps { color: var(--muted); letter-spacing: var(--ls-nav); }
.pricing__value { text-align: right; font-weight: 400; color: var(--muted); }
.pricing__total { border-top: 1px solid var(--divider); margin-top: var(--sp-sm); padding-top: 11px; }
.pricing__total--solo { border-top: 0; margin-top: 0; padding-block: 0; }
.pricing__total--solo .pricing__value { line-height: 1; }
.pricing__total .pricing__label {           /* "TOTAL MONATLICH" uppercase deep-blue */
    font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-nav);
    text-transform: uppercase; color: var(--primary-deep);
}
/* "Preis auf Anfrage": a single item, so collapse the box to one column —
   otherwise the empty 2nd column's 16px gap adds phantom padding on the right.
   Bumped to 18px (still the uppercase deep-blue label style). */
.pricing--anfrage { grid-template-columns: max-content; }
.pricing--anfrage .pricing__label { font-size: var(--fs-subheading); font-weight: 600; }
.pricing__total .pricing__value {           /* 32px deep-blue total (Figma) */
    color: var(--primary-deep); font-size: var(--fs-headline); font-weight: 500;
    line-height: var(--lh-headline); letter-spacing: var(--ls-headline);
}

/* ── Detail: facts on a gray band (same visual language as pricing) ───────*/
.divider { border: 0; border-top: 1px solid var(--divider); }
.facts {
    /* One equal column per fact (auto-fit collapses the unused tracks), so 1–4
       facts always spread evenly across the band instead of clustering left. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-xl);
    background: var(--surface-alt); padding: var(--sp-xl);
    margin-block: var(--sp-xl);             /* 40px gap to the dividers (Figma itemSpacing) */
}
.fact { display: flex; flex-direction: column; gap: var(--sp-xs); }
.fact__icon { color: var(--primary-deep); margin-bottom: var(--sp-xs); }   /* deep-blue icons (Figma) */
.fact__label { font-size: var(--fs-label); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fact__value { font-size: var(--fs-body); font-weight: 400; color: var(--ink); }

/* ── Detail: content blocks ───────────────────────────────────────────────*/
.section-block { padding-block: var(--sp-xl); }
.section-block + .section-block { border-top: 1px solid var(--divider); } /* divider between sections */
.section-block__title { font-size: var(--fs-title); font-weight: 500; margin-bottom: var(--sp-md); }
.prose { color: var(--body); max-width: 75ch; padding-left: 8px; }   /* slight indent on desktop; reset to 0 at ≤1150 */
.prose p { margin-bottom: var(--sp-md); }
/* Lists: the global reset zeroes padding, so restore indentation + markers
   (matches how the editor shows them). */
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: var(--sp-md); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--sp-xs); }
.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { margin-bottom: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p:last-child { margin-bottom: 0; }

/* Ausstattung — no heading, evenly distributed, accent checks */
.ausstattung { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md) var(--sp-xl); list-style: none; }
.ausstattung__item { display: flex; align-items: center; gap: var(--sp-md); color: var(--ink); }
.ausstattung__item .micon { color: var(--primary-deep); }   /* deep-blue circled check */

/* Downloads — no heading, filled items, name + size stacked, deep-blue icon */
.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); list-style: none; }
.download {
    display: flex; align-items: center; gap: var(--sp-md);
    background: var(--surface-alt); border: 0;
    padding: var(--sp-lg); color: var(--ink); font-size: var(--fs-body); font-weight: 500;
}
.download:hover { background: #ece9e7; color: var(--ink); }
.download .micon { color: var(--primary-deep); flex: none; }
.download__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.download__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download__size { color: var(--muted); font-size: var(--fs-meta); font-weight: 400; }

/* ── Contact form ─────────────────────────────────────────────────────────*/
.contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-xxl); }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-md); }
.form-row label { font-size: var(--fs-label); letter-spacing: var(--ls-nav); text-transform: uppercase; font-weight: 600; color: var(--faint); }
.form-row input, .form-row textarea {
    border: 1px solid var(--faint); border-radius: 0; background: var(--surface-white);
    padding: 12px 14px; font: inherit; font-size: var(--fs-body); color: var(--ink); width: 100%;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border: 2px solid var(--primary); padding: 11px 13px; }
.form-notice { padding: var(--sp-md); border: 1px solid var(--divider); margin-bottom: var(--sp-lg); background: var(--surface-white); }
.form-notice--ok { border-color: var(--primary); color: var(--primary-strong); }
.form-notice--err { border-color: var(--error); color: var(--error); }

/* ── Footer (#303030, logo above columns) ─────────────────────────────────*/
.site-footer { flex-shrink: 0; background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--footer-divider); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--sp-xl); padding-block: 41px 40px; }
.site-footer__logo { font-size: var(--fs-title); font-weight: 700; color: #fff; letter-spacing: var(--ls-title); }
/* Auto-fit: stay 2-up while there's room, stack only when too narrow (no breakpoint needed). */
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-lg); }
.footer-col__title { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--primary); margin-bottom: var(--sp-md); font-weight: 600; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__col p, .site-footer__col li { margin-bottom: var(--sp-sm); list-style: none; font-size: var(--fs-body); color: #fff; }
.site-footer__col ul { list-style: none; }
.site-footer__bottom { border-top: 1px solid var(--footer-divider-2); }
.site-footer__bottom .container { padding-block: 35px max(var(--sp-lg), env(safe-area-inset-bottom)); }
.site-footer__bottom p { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--footer-copy); text-align: center; font-weight: 600; }

/* ── 404 / generic page ───────────────────────────────────────────────────*/
.page-narrow { max-width: 75ch; padding-block: var(--sp-xxl); }
.page-narrow h1 { font-size: var(--fs-headline); font-weight: 500; line-height: var(--lh-headline); letter-spacing: var(--ls-headline); margin-bottom: var(--sp-md); }
/* The privacybee widget renders in the light DOM, so the global `* { padding:0 }`
   reset flattens its lists — restore list indentation on the Datenschutz page. */
.page-narrow privacybee-widget ul,
.page-narrow privacybee-widget ol { padding-left: 1.5em; margin-bottom: var(--sp-md); }
.page-narrow privacybee-widget li { margin-bottom: var(--sp-xs); }

/* ============================================================================
   Responsive — preserve hierarchy
   ========================================================================== */
@media (max-width: 1150px) {   /* meta row stops fitting under 3 cards → 2 up */
    .featured-carousel__track { --cols: 2; }
    .about__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
    .about__media { aspect-ratio: 4 / 5; }   /* narrower column → taller crop */
    .prose { padding-left: 0; }               /* flush with other sections on tablet/mobile */
    .facts { grid-template-columns: repeat(2, 1fr); }
    .downloads { grid-template-columns: repeat(2, 1fr); }
    .contact__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .hero__title { font-size: 48px; line-height: 1.1; }
}
@media (max-width: 850px) {   /* filter bar + side-by-side layouts break → 1 up */
    :root { --fs-headline: 26px; --lh-headline: 31px; }   /* section/page/detail titles down a step */
    .container { --page-pad: var(--margin-tablet); }
    .section { padding-block: 80px; }   /* homepage section spacing — tablet/large phone */
    .featured-carousel__track { --cols: 1; }
    .about__grid { grid-template-columns: 1fr; }
    .about__media { display: none; }   /* text-only "Unser Unternehmen" on mobile */
    .ausstattung { grid-template-columns: 1fr; }
    .downloads { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr 1fr; }
    .filters__row { flex-direction: column; align-items: stretch; gap: var(--sp-md); }
    /* In a column, flex-basis becomes height — reset it so fields hug their content. */
    .filters__field { flex: 0 0 auto; }
    .filters__availability { justify-content: flex-start; }
    /* Mobile/tablet: taller 3:2 frame; let object-fit size the image to it
       (the old fixed 320px height floated the image inside the 16:9 box). */
    .gallery__viewport { aspect-ratio: 3 / 2; }
    .gallery__nav { width: 32px; height: 32px; font-size: 16px; }
    .gallery__nav--prev { left: var(--sp-sm); }
    .gallery__nav--next { right: var(--sp-sm); }
    /* Many images: dots become a grid that spans the full gallery width (= the
       page width minus its side padding, since the dots sit in the same padded
       container as the gallery). They line up in vertical columns and wrap; the
       last partial row is re-centred in JS to stay column-aligned. */
    .gallery__dots {
        display: grid; grid-template-columns: repeat(auto-fit, 8px);
        justify-content: center; max-width: 100%;
    }
    .hero__title { font-size: 40px; line-height: 1.1; }
    .hero__inner { min-height: 380px; padding-block: 64px; }
}
@media (max-width: 480px) {   /* phone: hamburger nav + smallest type */
    :root { --fs-headline: 24px; --lh-headline: 28px; --fs-subheading: 16px; }
    .container { --page-pad: var(--margin-mobile); }
    .section { padding-block: 50px; }   /* homepage section spacing — phone */
    .hero__title { font-size: 36px; }
    .hero__actions .btn { padding: 11px 20px; font-size: var(--fs-meta); }
    .card__title { font-size: 22px; line-height: 1.25; }
    .carousel-nav__btn { display: none; }   /* touch device → swipe instead; arrows crowd small phones */
    .pricing { margin-inline: auto; }       /* centre the price box on the narrowest phones (alone on its wrapped line) */
    .single__head { padding-top: 32px; }    /* tighter gap under the gallery dots on phones */
    .cookie-notice { padding-inline: var(--margin-mobile); gap: var(--sp-sm); }

    .nav-toggle { display: inline-flex; }
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0; display: none;
        background: var(--surface); border-bottom: 1px solid var(--divider);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .06);
    }
    .site-header.is-nav-open .site-nav { display: block; }
    .site-nav .nav-list { flex-direction: column; gap: 0; padding: 0 var(--margin-mobile); }
    .site-nav .nav-list li { border-top: 1px solid var(--divider); }
    .site-nav .nav-list li:first-child { border-top: 0; }
    .site-nav a { display: block; padding-block: 14px; }
}