/* ============================================================================
   onoffice-style.css — My Office ("myoffice") look for the onOffice WP plugin.

   This file lives in onoffice-personalized/templates/ and therefore REPLACES the
   plugin's default templates.dist/onoffice-style.css globally (the plugin enqueues
   exactly one of the two — verified in ScriptLoaderGenericConfigurationDefault.php).

   It does two jobs:
   1. Styles the custom myoffice templates (estate/myoffice_list.php +
      estate/myoffice_detail.php). Those mostly reuse the THEME design-system
      classes (.section/.container/.offer-card/.chip/.gallery-grid …) defined in
      wp-content/themes/myoffice/style.css, which is loaded site-wide — so here we
      only add the onOffice-specific glue the theme does not provide.
   2. Provides an on-brand safety net for the DEFAULT onOffice markup
      (.oo-listframe/.oo-listobject/…), so /angebote/ already looks on-brand even
      BEFORE Diana assigns the custom templates in the plugin admin (no ugly window).

   All values reference the theme's design tokens with hard fallbacks, so the file
   is robust even if token load order changes. Brand: Magenta #e6007e + Orange
   #f39200, fonts Sora/Inter — never invent new colours/fonts.
   ============================================================================ */

/* ---- token fallbacks (the theme defines these on :root; here as a safety net) -- */
.oo-estate-list,
.oo-mo-detail,
.oo-listframe,
.oo-detailview,
.oo-searchform,
.detail-contact-form,
.oo-form {
	--mo-brand:   var(--brand, #e6007e);
	--mo-orange:  var(--orange, #f39200);
	--mo-grad:    var(--grad, linear-gradient(96deg, #e6007e 0%, #f39200 100%));
	--mo-heading: var(--heading, #15171f);
	--mo-text:    var(--text, #2a2e3a);
	--mo-muted:   var(--muted, #6b7180);
	--mo-line:    var(--line, #ececf1);
	--mo-soft:    var(--bg-soft, #faf8fc);
	--mo-card:    var(--card, #ffffff);
	--mo-radius:  var(--radius, 12px);
	--mo-radius-sm: var(--radius-sm, 8px);
	--mo-shadow:  var(--shadow, 0 10px 36px rgba(20, 22, 31, 0.06));
	--mo-shadow-lift: var(--shadow-lift, 0 22px 54px rgba(20, 22, 31, 0.12));
	--mo-display: var(--font-display, "Sora", "Inter", sans-serif);
	--mo-body:    var(--font-body, "Inter", sans-serif);
}

/* generic responsive picture helpers (used by both custom + default markup) */
.oo-picture { display: block; width: 100%; height: 100%; }
.oo-responsive-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   1a. CUSTOM LIST  (estate/myoffice_list.php)
   ============================================================================ */

/* the card grid reuses theme .offer-grid / .offer-card; only glue added here */
.oo-estate-list .offer-media { display: block; }

/* marketing-status badge on the media (e.g. "Vermietet").
   .oo-mo-grid is also used by the Home "Top Angebote" cards (inc/home-offers.php),
   so the badge is styled there too — keeps the home cards identical to the list. */
.oo-estate-list .oo-mo-status,
.oo-mo-grid .oo-mo-status,
.oo-mo-detail .oo-mo-status {
	display: inline-block;
	background: var(--mo-grad);
	color: #fff;
	font-family: var(--mo-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
}
.oo-estate-list .offer-media .oo-mo-status,
.oo-mo-grid .offer-media .oo-mo-status {
	position: absolute;
	top: 1rem; right: 1rem;
	box-shadow: 0 6px 18px rgba(230, 0, 126, 0.35);
}
/* The "Büro des Monats" badge (.oo-mo-bdm-badge) is styled in the THEME style.css, NOT here:
   the plugin enqueues onoffice-style.css with a STATIC ?ver (plugin version) so edits here are
   not cache-busted, whereas theme style.css is filemtime-versioned. See theme/style.css. */

/* sort dropdown toolbar (provided by the plugin as $generateSortDropDown) */
.oo-estate-list .oo-mo-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 1.4rem;
}
.oo-estate-list .oo-mo-toolbar select {
	font-family: var(--mo-body);
	font-size: 0.9rem;
	padding: 0.6rem 2.2rem 0.6rem 0.9rem;
	border: 1.5px solid var(--mo-line);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-card);
	color: var(--mo-text);
	cursor: pointer;
}
.oo-estate-list .oo-mo-toolbar select:focus {
	outline: none;
	border-color: var(--mo-brand);
	box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.1);
}

/* chips wrap nicely; favorite button styled as a chip */
.oo-estate-list .offer-features { gap: 0.45rem; }
.oo-estate-list button.favorize {
	cursor: pointer;
	font-family: var(--mo-body);
}
.oo-estate-list button.favorize:hover {
	border-color: var(--mo-brand);
	color: var(--mo-brand);
}

/* ============================================================================
   1b. onOffice SEARCH FORM  →  myoffice .filter-bar look
   (rendered by SearchForm.php; fields configured in the plugin admin)
   ============================================================================ */
.oo-searchform { margin: 0 0 2rem; }
.oo-searchform form {
	display: block;
	background: var(--mo-card);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	box-shadow: var(--mo-shadow);
	padding: 1rem 1.1rem;
}
.oo-searchform .oo-searchformfieldwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: flex-end;
}
.oo-searchform .oo-searchformfield {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 200px;
}
.oo-searchform label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mo-muted);
}
.oo-searchform input,
.oo-searchform select {
	font-family: var(--mo-body);
	font-size: 0.92rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--mo-radius-sm);
	border: 1.5px solid var(--mo-line);
	background: var(--mo-soft);
	color: var(--mo-text);
	width: 100%;
}
.oo-searchform input:focus,
.oo-searchform select:focus {
	outline: none;
	border-color: var(--mo-brand);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.1);
}
.oo-searchform input[type="submit"] {
	flex: none;
	width: auto;
	cursor: pointer;
	border: 0;
	color: #fff;
	background: var(--mo-grad);
	background-clip: padding-box;
	font-family: var(--mo-display);
	font-weight: 600;
	padding: 0.78rem 1.8rem;
	box-shadow: 0 10px 26px rgba(230, 0, 126, 0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.oo-searchform input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(230, 0, 126, 0.36);
	filter: brightness(1.03);
}
.oo-searchform .oo-searchformfield:last-child {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.oo-searchform #spinner { width: 22px; height: 22px; }

/* PO TN-T-0060-05: the filter bar must span the FULL list width. The default-markup
   safety net (section 3) caps .oo-searchform at min(1180px, 92%); inside our custom list
   it already sits in a .container, so undo that cap and let it fill. */
.oo-estate-list .oo-searchform { width: auto; max-width: none; margin: 0 0 2rem; }
.oo-estate-list .oo-searchform form { padding: 1.1rem 1.2rem; }
.oo-estate-list .oo-searchformfieldwrap { gap: 0.8rem 1rem; }
.oo-estate-list .oo-searchformfield { flex: 1 1 220px; }
/* the Ort dropdown gets more room than the ImmoNr input */
.oo-estate-list .oo-searchformfield:has(select) { flex: 2 1 280px; }

/* JS auto-filtering active → hide the (now redundant) submit button + spinner field */
.oo-searchformfield--submit-hidden { display: none !important; }

/* --- Ort dropdown: theme-match the bundled TomSelect (.ts-*) so it reads on-brand --- */
.oo-searchform .ts-wrapper { width: 100%; }
.oo-searchform .ts-control {
	min-height: 46px;
	height: 46px;            /* fixed → cannot grow into a 2nd row */
	padding: 0 8px;
	border: 1.5px solid var(--mo-line);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-soft);
	color: var(--mo-text);
	font-family: var(--mo-body);
	font-size: 0.92rem;
	box-shadow: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;       /* PO R3.2: keep pill + caret on ONE line (no wrap → no tall box) */
	gap: 5px;
	overflow-x: auto;        /* many cities → scroll instead of wrap/grow */
	overflow-y: hidden;
	scrollbar-width: none;   /* hide the (rarely-needed) horizontal scrollbar */
}
.oo-searchform .ts-control::-webkit-scrollbar { display: none; }
/* TomSelect bumps the control padding to 6px/8px/3px once it has items (its
   .ts-wrapper.multi.has-items selector out-specifies ours) → pin it back. */
.oo-searchform .ts-wrapper.multi.has-items .ts-control { padding: 0 8px; }
.oo-searchform .ts-wrapper.focus .ts-control,
.oo-searchform .ts-wrapper.input-active .ts-control {
	border-color: var(--mo-brand);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.1);
}
.oo-searchform .ts-control > input {
	font-family: var(--mo-body);
	font-size: 0.92rem;
	color: var(--mo-text);
	margin: 0;
	/* default min-width is 7rem → on a narrow field that pushed the caret onto a 2nd row.
	   Let it shrink (it stays last, so it just fills whatever is left). PO R3.2 */
	flex: 1 1 50px;
	min-width: 50px !important;
}
.oo-searchform .ts-control > input::placeholder { color: var(--mo-muted); opacity: 1; }

/* PO TN-T-0060-05 (R2/R3): selected-city pills like the theme's static .filter-pill
   (white, inset 1.5px line) but with the input's corner radius (eckiger, kein 999px).
   Selectors include .ts-wrapper.multi to out-specify TomSelect's default item rules
   (.ts-wrapper.multi .ts-control > div). FIXED height that fills the control + zero margin
   → the pill is as tall as the field and adding it does NOT change the field height. */
.oo-searchform .ts-wrapper.multi .ts-control > .item {
	flex: 0 0 auto;          /* pills keep their size; the input absorbs free space */
	height: 34px;
	margin: 0;
	padding: 0 0 0 0.7rem;
	display: inline-flex;
	align-items: center;
	background: var(--mo-card);
	color: var(--mo-text);
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--mo-line);
	border-radius: var(--mo-radius-sm);
	font-size: 0.82rem;
	font-weight: 600;
}
.oo-searchform .ts-wrapper.multi .ts-control > .item.active { box-shadow: inset 0 0 0 1.5px var(--mo-brand); }
.oo-searchform .ts-wrapper.plugin-remove_button .item .remove {
	border-left: 0;
	margin-left: 0.15rem;
	padding: 0 0.5rem;
	height: 100%;
	display: inline-flex;
	align-items: center;
	color: var(--mo-muted);
	text-decoration: none;
	border-radius: 0 var(--mo-radius-sm) var(--mo-radius-sm) 0;
}
.oo-searchform .ts-wrapper.plugin-remove_button .item .remove:hover { background: transparent; color: var(--mo-brand); }

/* NB: the SINGLE-select cosmetics (chosen-city plain text + clear-× styling) and the iOS
   focus-zoom guard for this search form live in the THEME style.css, NOT here — this file
   carries a STATIC ?ver (plugin version) so edits would not cache-bust. See theme/style.css
   "onOffice search form" block (PO 2026-06-26). */

/* dropdown panel — plain list, NO checkboxes, full city list at once (capped to viewport) */
.oo-searchform .ts-dropdown {
	margin-top: 0.4rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-card);
	box-shadow: var(--mo-shadow);
	overflow: hidden;
}
.oo-searchform .ts-dropdown .ts-dropdown-content { max-height: min(60vh, 30rem); }
.oo-searchform .ts-dropdown .option {
	padding: 0.55rem 0.9rem;
	font-family: var(--mo-body);
	font-size: 0.92rem;
	color: var(--mo-text);
}
.oo-searchform .ts-dropdown .option:hover,
.oo-searchform .ts-dropdown .active {
	background: var(--mo-soft);
	color: var(--mo-heading);
}
.oo-searchform .ts-dropdown .option.selected { color: var(--mo-brand); font-weight: 600; }
/* belt + suspenders: if the bundled checkbox-options instance survives, hide the boxes */
.oo-searchform .ts-dropdown input[type="checkbox"],
.oo-searchform .ts-dropdown .ts-checked,
.oo-searchform .ts-dropdown .ts-unchecked { display: none; }
.oo-searchform .ts-dropdown .create { color: var(--mo-muted); }

/* ============================================================================
   1c. PAGINATION  — onOffice renders nav.oo-post-nav-links > ul > li > a / span.current
   (NOT WordPress .page-numbers). Style that real markup into a clean theme nav.
   PO TN-T-0060-05 (R2): the default <ul> rendered as a bulleted vertical list.
   ============================================================================ */
.oo-estate-list .oo-listpagination { width: auto; max-width: none; }
.oo-listpagination {
	display: flex;
	justify-content: center;
	margin-top: 2.6rem;
}
.oo-listpagination .oo-post-nav-links { width: 100%; }
.oo-listpagination .oo-post-nav-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
}
.oo-listpagination .oo-post-nav-links li { margin: 0; padding: 0; }
.oo-listpagination .oo-post-nav-links li::marker { content: ""; }
.oo-listpagination a,
.oo-listpagination .current,
.oo-listpagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.7rem;
	border-radius: var(--mo-radius-sm);
	border: 1.5px solid var(--mo-line);
	background: var(--mo-card);
	color: var(--mo-text);
	font-family: var(--mo-display);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.oo-listpagination a span { line-height: 1; }
.oo-listpagination a:hover {
	border-color: var(--mo-brand);
	color: var(--mo-brand);
}
.oo-listpagination .current,
.oo-listpagination span.page-numbers.current {
	background: var(--mo-grad);
	color: #fff;
	border-color: transparent;
}

/* ============================================================================
   2a. CUSTOM DETAIL  (estate/myoffice_detail.php) — two-column layout
   ============================================================================ */
.oo-mo-detail .oo-detailview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 360px);
	gap: 0.5rem 3rem;
	align-items: start;
}
.oo-mo-detail .oo-detailsheadline { grid-column: 1 / -1; margin-bottom: 1.4rem; }
.oo-mo-detail .oo-details-main { grid-column: 1; min-width: 0; }
.oo-mo-detail .oo-details-sidebar {
	grid-column: 2;
	position: sticky;
	top: calc(var(--header-h, 76px) + 1rem);
	align-self: start;
}
.oo-mo-detail .oo-mo-similar { grid-column: 1 / -1; margin-top: 1rem; }

/* headline / hero */
.oo-mo-detail .oo-detailsheadline .kicker { margin-bottom: 0.6rem; }
.oo-mo-detail .oo-detailsheadline h1 { margin: 0; }
.oo-mo-detail .oo-detailsheadline .oo-mo-status { margin-top: 0.9rem; }

/* ----------------------------------------------------------------------------
   GALLERY (estate/myoffice_detail.php) — big stage + chevron/swipe + thumb strip.
   Self-contained component (no theme .gallery-grid dependency); the lightbox below
   is injected by the inline gallery script. PO TN-T-0060-05.
   ---------------------------------------------------------------------------- */
.oo-mo-detail .oo-gallery { margin-bottom: 2rem; }

/* stage = the large active image */
.oo-gallery-stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--mo-radius);
	background: #0d0e12;
	aspect-ratio: 3 / 2;
	box-shadow: var(--mo-shadow);
}
.oo-gallery-track {
	display: flex;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
	touch-action: pan-y;
}
.oo-gallery-slide { flex: 0 0 100%; height: 100%; margin: 0; cursor: zoom-in; }
.oo-gallery-slide .oo-picture { display: block; width: 100%; height: 100%; }
.oo-gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

/* chevron arrows */
.oo-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mo-heading);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 2;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}
.oo-gallery-arrow:hover { background: #fff; }
.oo-gallery-prev { left: 0.9rem; }
.oo-gallery-next { right: 0.9rem; }

/* counter + expand */
.oo-gallery-counter {
	position: absolute; bottom: 0.9rem; right: 0.9rem; z-index: 2;
	background: rgba(13, 14, 18, 0.72); color: #fff;
	font-family: var(--mo-body); font-size: 0.82rem;
	padding: 0.3rem 0.7rem; border-radius: 999px;
}
.oo-gallery-expand {
	position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
	width: 40px; height: 40px; border: 0; border-radius: 10px;
	background: rgba(13, 14, 18, 0.6); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease;
}
.oo-gallery-expand:hover { background: rgba(13, 14, 18, 0.88); }

/* thumbnail strip: 5 squares + a "+X" tile */
.oo-gallery-thumbs {
	list-style: none; margin: 0.7rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem;
}
.oo-gallery-thumbs li { margin: 0; }
.oo-gallery-thumb {
	position: relative; display: block; width: 100%;
	aspect-ratio: 1 / 1; padding: 0; border: 0;
	border-radius: var(--mo-radius-sm); overflow: hidden; cursor: pointer;
	background: var(--mo-soft);
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.oo-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-gallery-thumb:hover { transform: translateY(-2px); }
.oo-gallery-thumb.is-active { box-shadow: 0 0 0 2px var(--mo-brand); }
.oo-gallery-more::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(13, 14, 18, 0.55);
}
.oo-gallery-more-badge {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--mo-display); font-weight: 700; font-size: 1.1rem;
}
@media (max-width: 600px) {
	.oo-gallery-stage { aspect-ratio: 4 / 3; }
	/* PO TN-T-0060-05: ONE single row of 5 thumbnails on mobile (was 6 tiles → 2 rows). */
	.oo-gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
	/* with a "+X" overflow tile (6 tiles, last is +X): drop the 5th plain tile so the
	   row becomes [1..4, +X] and the "more" affordance stays visible */
	.oo-gallery-thumbs.has-more li:nth-child(5) { display: none; }
	/* no overflow tile but 6 plain thumbs: drop the 6th so only 5 show */
	.oo-gallery-thumbs:not(.has-more) li:nth-child(6) { display: none; }
	.oo-gallery-arrow { width: 38px; height: 38px; }
}

/* ----------------------------------------------------------------------------
   LIGHTBOX (injected by the gallery script) — big image + all thumbnails below.
   ---------------------------------------------------------------------------- */
.oo-lightbox {
	position: fixed; inset: 0; z-index: 1000; display: none;
	flex-direction: column; align-items: center; justify-content: center;
	background: rgba(8, 9, 12, 0.94);
	padding: clamp(0.8rem, 3vw, 2rem);
}
.oo-lightbox.is-open { display: flex; }
.oo-lightbox-stage {
	position: relative; width: min(1200px, 100%);
	flex: 1 1 auto; min-height: 0; overflow: hidden;
	display: flex; align-items: center;
}
.oo-lightbox-track {
	display: flex; width: 100%; height: 100%;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
	touch-action: pan-y;
}
.oo-lightbox-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.oo-lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--mo-radius-sm); }
.oo-lightbox-close,
.oo-lightbox-arrow {
	position: absolute; z-index: 2; border: 0; cursor: pointer;
	width: 48px; height: 48px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.12); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease;
}
.oo-lightbox-close:hover,
.oo-lightbox-arrow:hover { background: var(--mo-brand); }
.oo-lightbox-close { top: clamp(0.8rem, 3vw, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); }
.oo-lightbox-arrow.prev { left: clamp(0.4rem, 3vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.oo-lightbox-arrow.next { right: clamp(0.4rem, 3vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.oo-lightbox-counter { color: #fff; font-family: var(--mo-body); font-size: 0.9rem; margin: 0.8rem 0 0.4rem; }
.oo-lightbox-thumbs {
	display: flex; gap: 0.5rem; overflow-x: auto;
	max-width: min(1200px, 100%); padding: 0.6rem 0.2rem;
	scrollbar-width: thin;
}
.oo-lightbox-thumb {
	flex: 0 0 auto; width: 84px; height: 60px;
	border: 0; padding: 0; cursor: pointer;
	border-radius: 8px; overflow: hidden; opacity: 0.55;
	box-shadow: 0 0 0 2px transparent;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.oo-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-lightbox-thumb:hover { opacity: 1; }
.oo-lightbox-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--mo-brand); }
@media (max-width: 600px) {
	.oo-lightbox-thumb { width: 64px; height: 46px; }
}

/* highlights (keyfacts) as a card grid */
.oo-mo-detail .oo-details-highlights-headline {
	font-family: var(--mo-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--mo-heading);
	margin: 0 0 0.9rem;
}
.oo-mo-detail .oo-details-highlights-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.8rem;
	margin: 0 0 2.2rem;
}
.oo-mo-detail .oo-details-highlight {
	background: var(--mo-soft);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	padding: 1rem 1.1rem;
}
.oo-mo-detail .oo-details-highlight__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mo-muted);
}
.oo-mo-detail .oo-details-highlight__value {
	font-family: var(--mo-display);
	font-weight: 700;
	color: var(--mo-heading);
	font-size: 1.15rem;
	margin: 0.25rem 0 0;
}

/* fact table */
.oo-mo-detail .oo-detailstable {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.55rem 1.6rem;
	margin: 0 0 2.2rem;
	font-size: 0.95rem;
}
.oo-mo-detail .oo-detailstable dt { color: var(--mo-muted); margin: 0; }
.oo-mo-detail .oo-detailstable dd { color: var(--mo-heading); font-weight: 600; margin: 0; }

/* free-text blocks */
.oo-mo-detail .oo-detailsfreetext { margin: 0 0 2.2rem; color: var(--mo-text); }
.oo-mo-detail .oo-detailsfreetext h2 { margin: 0 0 0.7rem; }

/* map + areabutler iframes */
.oo-mo-detail .oo-area-butler-iframe,
.oo-mo-detail .oo-detailsmap iframe,
.oo-mo-detail .oo-detailsmap .oo-map {
	width: 100%;
	min-height: 420px;
	border: 0;
	border-radius: var(--mo-radius);
	overflow: hidden;
}

/* PO 2026-06-26: the location map is a full-width block — a direct child of the
   .oo-detailview grid (last of the object's own data, above .oo-mo-similar + #oo-anfrage),
   so span both columns and give it air above. Out-specifies .oo-detailsfreetext's margin. */
.oo-mo-detail .oo-detailview > .oo-detailsmap {
	grid-column: 1 / -1;
	margin: 1.4rem 0 0;
}

/* energy certificate (light styling; keep plugin segmented-bar internals) */
.oo-mo-detail .energy-certificate-container { overflow-x: auto; margin: 0.6rem 0 1rem; }
.oo-mo-detail .segmented-bar { display: flex; flex-wrap: wrap; gap: 2px; }
.oo-mo-detail .segment {
	background: var(--mo-soft);
	border: 1px solid var(--mo-line);
	padding: 0.4rem 0.7rem;
	font-size: 0.8rem;
}
.oo-mo-detail .segment.selected { background: var(--mo-grad); color: #fff; border-color: transparent; }

/* total costs */
.oo-mo-detail .oo-costs-container { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.oo-mo-detail .oo-donut-chart { flex: 0 0 auto; max-width: 240px; }
.oo-mo-detail .oo-costs-overview { flex: 1 1 260px; }
.oo-mo-detail .oo-costs-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.oo-mo-detail .oo-costs-item .oo-price-label { display: flex; justify-content: space-between; gap: 1rem; width: 100%; }
.oo-mo-detail .color-indicator { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.oo-mo-detail .oo-costs-notice { font-size: 0.82rem; color: var(--mo-muted); margin-top: 0.8rem; }

/* sidebar cards: contact / documents / videos / tours / links */
.oo-mo-detail .oo-asp {
	background: var(--mo-card);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	box-shadow: var(--mo-shadow);
	padding: 1.5rem;
	margin-bottom: 1.4rem;
}
.oo-mo-detail .oo-asp h2 { margin: 0 0 1rem; }
.oo-mo-detail .oo-aspinfo-wrapper { display: flex; flex-direction: column; gap: 0.35rem; }
.oo-mo-detail .oo-aspinfo p { margin: 0; }
.oo-mo-detail .oo-contact-photo img {
	width: 112px; height: 112px;
	border-radius: 999px;
	object-fit: cover;
	object-position: top center; /* Kopf komplett zeigen (Hochformat-Portraits) — PO 2026-07-02 */
	margin-bottom: 0.6rem;
}
.oo-mo-detail .oo-contact-name p {
	font-family: var(--mo-display);
	font-weight: 700;
	color: var(--mo-heading);
	font-size: 1.1rem;
}
.oo-mo-detail .oo-field-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mo-muted);
	margin-top: 0.7rem;
}
.oo-mo-detail .oo-aspinfo a { color: var(--mo-brand); word-break: break-word; }
.oo-mo-detail .oo-mo-anfrage { margin-top: 1.2rem; width: 100%; justify-content: center; }
.oo-mo-detail .oo-detailsexpose .btn { width: 100%; justify-content: center; }
.oo-mo-detail .oo-video { margin-bottom: 0.8rem; }
.oo-mo-detail .oo-video iframe { width: 100%; border: 0; border-radius: var(--mo-radius-sm); }
.oo-mo-detail .player-title { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--mo-brand); font-weight: 600; }

/* ============================================================================
   2b. ONOFFICE FORMS  (.oo-form — the [oo_form] contact-form shortcode)
   The SAME markup (form.oo-form > <label><span.oo-label-text>…</span></label>)
   is rendered on the detail page (inside .detail-contact-form / #oo-anfrage),
   on /kontakt/ and on /eventanmeldung/ (inside a theme .form-card). So we style
   the .oo-form markup itself → on-brand everywhere the shortcode appears.
   Field markup verified against templates.dist/form/defaultform.php + fields.php.
   ============================================================================ */

/* layout wrapper used on the detail page; the page forms sit in a theme .form-card */
.detail-contact-form { max-width: 760px; margin-inline: auto; }

/* the form as a 2-column grid; full-width rows span both columns */
.oo-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1.2rem;
	align-items: start;
	font-family: var(--mo-body);
}
.oo-form > label { display: block; font-size: 0.9rem; color: var(--mo-text); }
.oo-form .oo-label-text { display: block; font-weight: 500; }

/* full-width rows: message (textarea), consent (checkbox), selects, status,
   hints and the submit button each span both grid columns */
.oo-form > label:has(textarea),
.oo-form > label:has(input[type="checkbox"]),
.oo-form > .oo-single-select,
.oo-form > p[role="status"],
.oo-form > .oo-form-required,
.oo-form > .oo-gdpr-hint-text,
.oo-form > input[type="submit"],
.oo-form > button[type="submit"],
.oo-form > button.submit_button,
.oo-form > .g-recaptcha { grid-column: 1 / -1; }

/* text-like inputs + textarea + select */
.oo-form input[type="text"],
.oo-form input[type="email"],
.oo-form input[type="tel"],
.oo-form input[type="number"],
.oo-form input[type="date"],
.oo-form input[type="url"],
.oo-form input[type="password"],
.oo-form textarea,
.oo-form select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--mo-body);
	font-size: 0.95rem;
	padding: 0.8rem 1rem;
	margin-top: 0.3rem;
	border: 1.5px solid var(--mo-line);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-card);
	color: var(--mo-text);
}
.oo-form textarea { min-height: 140px; resize: vertical; }
.oo-form input:focus,
.oo-form textarea:focus,
.oo-form select:focus {
	outline: none;
	border-color: var(--mo-brand);
	box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.10);
}
.oo-form ::placeholder { color: var(--mo-muted); opacity: 1; }

/* consent / GDPR checkbox row — checkbox sits left of its label text */
.oo-form .oo-label-text:has(input[type="checkbox"]) {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--mo-muted);
	line-height: 1.5;
}
.oo-form .oo-label-text:has(input[type="checkbox"]) input[type="checkbox"] { order: -1; }
.oo-form input[type="checkbox"],
.oo-form input[type="radio"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--mo-brand);
}

/* required marker (* span) + visually-hidden helper */
.oo-form span[aria-hidden="true"] { color: var(--mo-brand); }
.oo-visually-hidden,
.oo-form .oo-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* required-fields hint + GDPR hint text */
.oo-form .oo-form-required,
.oo-form .oo-gdpr-hint-text {
	font-size: 0.8rem;
	color: var(--mo-muted);
	margin: 0.1rem 0;
}
.oo-form .oo-gdpr-hint-text a { color: var(--mo-brand); text-decoration: underline; }

/* inline validation error + error-state borders */
.oo-form .error { display: block; color: #c0114e; font-size: 0.8rem; margin-top: 0.3rem; }
.oo-form .error p { margin: 0; }
.oo-form .displayerror input,
.oo-form .displayerror textarea,
.oo-form .displayerror select { border-color: #c0114e; }

/* status banner after submit (success / error / spam) */
.oo-form p[role="status"] {
	margin: 0 0 0.2rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--mo-radius-sm);
	background: var(--mo-soft);
	border: 1.5px solid var(--mo-line);
	color: var(--mo-text);
	font-size: 0.92rem;
}

/* submit button = brand gradient (matches the theme .btn) */
.oo-form input[type="submit"],
.oo-form button[type="submit"],
.oo-form button.submit_button {
	justify-self: start;
	margin-top: 1.1rem;
	cursor: pointer;
	border: 0;
	color: #fff;
	background: var(--mo-grad);
	background-clip: padding-box;
	font-family: var(--mo-display);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.95rem 1.8rem;
	border-radius: 9px;
	box-shadow: 0 10px 26px rgba(230, 0, 126, 0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.oo-form input[type="submit"]:hover,
.oo-form button[type="submit"]:hover,
.oo-form button.submit_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(230, 0, 126, 0.36);
	filter: brightness(1.03);
}
.oo-form .onoffice-unclickable-form { opacity: 0.6; pointer-events: none; }

/* estate-context heading on the objektbezogen detail request form */
.detail-contact-form h3 { font-family: var(--mo-display); color: var(--mo-heading); margin-top: 0; }

/* single column on small screens */
@media (max-width: 640px) {
	.oo-form { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   2c. DARK FOOTER variant — the [oo_form "Allgemeines Kontaktformular"] shortcode
   sits in the dark .site-footer (.footer-form col, bg #1c1d22). Mirror the theme's
   .footer-form field styling so the onOffice markup reads on the dark ground.
   ---------------------------------------------------------------------------- */
.site-footer .oo-form { gap: 0.8rem 1rem; }
.site-footer .oo-form > label,
.site-footer .oo-form .oo-label-text { color: rgba(255, 255, 255, 0.62); }
.site-footer .oo-form input[type="text"],
.site-footer .oo-form input[type="email"],
.site-footer .oo-form input[type="tel"],
.site-footer .oo-form input[type="number"],
.site-footer .oo-form input[type="date"],
.site-footer .oo-form input[type="url"],
.site-footer .oo-form input[type="password"],
.site-footer .oo-form textarea,
.site-footer .oo-form select {
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.site-footer .oo-form ::placeholder { color: rgba(255, 255, 255, 0.45); opacity: 1; }
.site-footer .oo-form input:focus,
.site-footer .oo-form textarea:focus,
.site-footer .oo-form select:focus {
	border-color: var(--mo-brand);
	background: rgba(255, 255, 255, 0.10);
	box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.18);
}
.site-footer .oo-form .oo-label-text:has(input[type="checkbox"]),
.site-footer .oo-form .oo-form-required,
.site-footer .oo-form .oo-gdpr-hint-text { color: rgba(255, 255, 255, 0.55); }
.site-footer .oo-form .oo-gdpr-hint-text a { color: rgba(255, 255, 255, 0.78); }
.site-footer .oo-form .error { color: #ff7da8; }
.site-footer .oo-form p[role="status"] {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* ============================================================================
   3. SAFETY NET for DEFAULT onOffice markup (.oo-list* / default detail)
   Applies until Diana assigns the custom templates — keeps /angebote/ on-brand.
   ============================================================================ */
.oo-listheadline,
.oo-estate-sort,
.oo-listframe,
.oo-listpagination,
.oo-searchform,
.oo-estate-map {
	width: min(1180px, 92%);
	margin-inline: auto;
}
.oo-listheadline { margin-top: 2.4rem; margin-bottom: 1.4rem; }
.oo-listheadline h1 { font-family: var(--mo-display); font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--mo-heading); }
.oo-listheadline p { color: var(--mo-muted); }
.oo-estate-sort { display: flex; justify-content: flex-end; margin-bottom: 1.4rem; }
.oo-estate-sort select {
	font-family: var(--mo-body);
	padding: 0.6rem 2rem 0.6rem 0.9rem;
	border: 1.5px solid var(--mo-line);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-card);
	color: var(--mo-text);
}

/* default list → card grid */
.oo-listframe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
	margin-bottom: 2.4rem;
}
.oo-listobject {
	background: var(--mo-card);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	box-shadow: var(--mo-shadow);
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.oo-listobject:hover { transform: translateY(-8px); box-shadow: var(--mo-shadow-lift); }
.oo-listobjectwrap { display: flex; flex-direction: column; height: 100%; }
.oo-listimage { position: relative; display: block; aspect-ratio: 16 / 10.5; overflow: hidden; }
.oo-listimage img { width: 100%; height: 100%; object-fit: cover; }
.oo-listimage > span {
	position: absolute; top: 1rem; right: 1rem;
	background: var(--mo-grad); color: #fff;
	font-family: var(--mo-display); font-size: 0.7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
	padding: 0.3rem 0.8rem; border-radius: 999px;
}
.oo-listinfo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.oo-listtitle { font-family: var(--mo-display); font-weight: 700; font-size: 1.2rem; color: var(--mo-heading); }
.oo-listinfotable { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.88rem; }
.oo-listtd { color: var(--mo-muted); }
.oo-listtd.--highlight { color: var(--mo-heading); font-weight: 600; }
.oo-detailslink { margin-top: auto; }
.oo-details-btn,
a.oo-details-btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-family: var(--mo-display); font-weight: 600; font-size: 0.9rem;
	color: var(--mo-brand); text-decoration: none;
}
.oo-details-btn:hover { color: var(--mo-orange); }

/* ============================================================================
   4. Responsive
   ============================================================================ */
@media (max-width: 980px) {
	.oo-mo-detail .oo-detailview { grid-template-columns: 1fr; }
	.oo-mo-detail .oo-details-main,
	.oo-mo-detail .oo-details-sidebar { grid-column: 1; }
	.oo-mo-detail .oo-details-sidebar { position: static; }
	.oo-listframe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.oo-listframe { grid-template-columns: 1fr; }
	.oo-searchform .oo-searchformfield { flex: 1 1 100%; }
	.oo-searchform input[type="submit"] { width: 100%; }
	.oo-mo-detail .oo-costs-container { flex-direction: column; align-items: stretch; }
	.oo-mo-detail .oo-donut-chart { max-width: 100%; }
}