/* HOPPMANN IMMOBILIEN 2026 – complete responsive presentation layer
   All layouts use fluid tracks, minmax(0, 1fr), clamp and a stable max-width.
   No fixed absolute X-positioning and no viewport-width overflows. */
:root { --hi-ink:#283836; --hi-forest:#2A5B63; --hi-deep:#2A5B63; --hi-brand:#448A94; --hi-warm:#F2F4F1; --hi-paper:#FBFCFC; --hi-mist:#E5F0F2; --hi-line:#D4E2E4; --hi-muted:#536F75; --hi-accent:#448A94; --hi-serif:Georgia, 'Times New Roman', serif; --hi-sans:ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --hi-max:1280px; --hi-pad:clamp(22px,4.5vw,76px); }
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body.hi-relaunch {margin:0; min-width:320px; max-width:100%; overflow-x:clip; background:var(--hi-paper);color:var(--hi-ink);font-family:var(--hi-sans);font-size:16px;line-height:1.6;letter-spacing:0}
body.hi-relaunch :is(h1,h2,h3,h4,h5,h6) {color:inherit;font-family:var(--hi-serif);letter-spacing:-.035em;font-weight:400;line-height:1.12;overflow-wrap:break-word;margin:0}
body.hi-relaunch :is(p,ul,ol){margin-top:0}
body.hi-relaunch p {margin-bottom:1.25em}
body.hi-relaunch a {text-decoration:none;color:inherit}
body.hi-relaunch a:hover {color:inherit}
body.hi-relaunch img {max-width:100%;height:auto}
body.hi-relaunch button,body.hi-relaunch input,body.hi-relaunch select {font:inherit}
body.hi-relaunch :focus-visible {outline:3px solid #448A94;outline-offset:4px}
body.hi-relaunch main {min-width:0;min-height:50vh}
body.hi-relaunch :is(.ct-container,.site-main,.content-area) {max-width:none} /* Parent doesn't constrain our templates */
.hi-container {width: min(calc(100% - (2 * var(--hi-pad))),var(--hi-max));margin-inline:auto;min-width:0}
.hi-section {padding-block:clamp(68px,9vw,132px)}
.hi-eyebrow {font-family:var(--hi-sans);font-size:11px;line-height:1.4;letter-spacing:.21em;font-weight:650;color:#2A5B63;text-transform:uppercase;margin:0 0 24px}
.hi-eyebrow--light {color:#D9EFF1}
.hi-eyebrow__line {display:inline-block;width:30px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
body.hi-relaunch em {font-weight:400;font-style:italic;color:#448A94}
.hi-button {min-height:57px;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;border:1px solid transparent;border-radius:0;padding:16px 23px;color:inherit;font-size:12px;line-height:1.3;font-weight:650;letter-spacing:.025em;white-space:normal;text-align:left;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.hi-button:hover {transform:translateY(-2px)}
.hi-button span {font-size:22px;line-height:.8;font-weight:400}
.hi-button--dark {background:var(--hi-deep);color:white!important}
.hi-button--dark:hover {background:#214B54;color:white!important}
.hi-button--outline {border-color:var(--hi-ink);background:transparent;color:var(--hi-ink)!important}
.hi-button--outline:hover {background:var(--hi-ink);color:white!important}
.hi-button--light {background:var(--hi-warm);color:var(--hi-deep)!important}
.hi-button--light:hover {background:#fff;color:var(--hi-deep)!important}
.hi-text-link {display:inline-flex;align-items:center;gap:18px;padding-bottom:6px;border-bottom:1px solid currentColor;font-size:13px;font-weight:600;letter-spacing:.02em;transition:gap .2s}
.hi-text-link:hover {gap:26px}
.hi-text-link span {font-size:19px}
.hi-skip-link {position:fixed;z-index:300;left:12px;top:-80px;background:#fff;color:#000;padding:12px 24px}
.hi-skip-link:focus {top:12px}
/* Header and responsive navigation */
body.hi-relaunch .hi-site-header {height:88px;position:relative;z-index:110;background:var(--hi-paper);border-bottom:1px solid #D4E2E4}
body.hi-relaunch.admin-bar .hi-site-header {top:0}
.hi-site-header__inner {height:100%;display:flex;align-items:center;gap:30px;justify-content:space-between}
.hi-brand {display:flex;align-items:center;gap:12px;flex:0 0 auto;line-height:1}
.hi-brand__symbol {font-family:var(--hi-serif);font-size:35px;letter-spacing:-.15em;font-weight:400;padding-right:6px;line-height:1}
.hi-brand__name {font-family:var(--hi-serif);font-size:17px;line-height:1.04;letter-spacing:.045em;white-space:nowrap}
.hi-brand__name small {display:block;font-family:var(--hi-sans);font-size:9px;line-height:1.5;letter-spacing:.22em;text-align:center;margin-top:2px}
.hi-site-nav {display:flex;align-items:center;gap:clamp(16px,2.25vw,38px);margin-left:auto}
.hi-site-nav a {font-size:12px;font-weight:550;letter-spacing:.04em;white-space:nowrap;position:relative}
.hi-site-nav a::after {content:"";height:1px;position:absolute;bottom:-6px;left:0;right:100%;background:currentColor;transition:right .2s}
.hi-site-nav a:hover::after,.hi-site-nav a[aria-current="page"]::after {right:0}
.hi-header-actions {display:flex;align-items:center;margin-left:clamp(8px,2vw,25px)}
.hi-header-contact {font-size:11px;font-weight:650;background:var(--hi-deep);color:#fff!important;padding:14px 16px;min-width:155px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.hi-header-contact span {font-size:18px;line-height:1}
.hi-menu-toggle {display:none;position:relative;width:46px;height:46px;flex-shrink:0;cursor:pointer;background:transparent;border:1px solid var(--hi-line);border-radius:0;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:8px}
.hi-menu-toggle span {width:21px;height:1px;background:var(--hi-deep);transition:transform .2s}
/* Hero */
.hi-home-hero {background:var(--hi-warm)}
.hi-home-hero__grid {display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);min-height:min(760px,calc(100svh - 88px));align-items:stretch;position:relative}
.hi-home-hero__copy {min-width:0;padding:clamp(52px,7vw,110px) clamp(32px,5vw,80px) 32px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hi-home-hero__copy .hi-eyebrow {margin-bottom:clamp(24px,4vw,60px)}
body.hi-relaunch .hi-home-hero h1 {font-size:clamp(56px,6.35vw,100px);line-height:1.035;max-width:780px;letter-spacing:-.056em}
.hi-home-hero__copy>p {font-size:clamp(15px,1.3vw,18px);line-height:1.8;max-width:460px;color:#4D686D;margin:34px 0 0}
.hi-hero-actions {display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:40px}
.hi-home-hero__foot {margin-top:auto;padding-top:75px;width:100%;display:flex;gap:12px;justify-content:space-between;color:#607E83;letter-spacing:.17em;font-size:9px;font-weight:650}
.hi-home-hero__visual {position:relative;min-width:0;overflow:hidden;max-height:900px;background:#D9E7E8}
.hi-home-hero__visual>img {width:100%;height:100%!important;display:block;object-fit:cover;object-position:center 47%;min-height:610px}
.hi-hero-overlay {position:absolute;bottom:25px;left:25px;right:25px;display:flex;align-items:end;justify-content:space-between;gap:15px;color:#fff;font:italic 23px/1.25 var(--hi-serif);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hi-hero-overlay__star {font:36px var(--hi-sans)}
/* Intro */
.hi-intro {background:var(--hi-paper)}
.hi-intro__grid {display:grid;grid-template-columns:minmax(0,.37fr) minmax(0,.63fr);gap:clamp(24px,5vw,90px)}
.hi-intro h2,.hi-approach h2,.hi-contact-info h2 {font-size:clamp(43px,5.15vw,74px);line-height:1.1;margin-bottom:25px}
.hi-intro__grid>div>p {font-size:clamp(16px,1.45vw,19px);max-width:650px;color:#536F75;line-height:1.9}
.hi-intro__grid .hi-text-link {margin-top:15px}
/* Listings */
.hi-listings-section {background:#EDF3F4}
.hi-section-heading {display:flex;gap:36px;align-items:end;justify-content:space-between;margin-bottom:44px}
.hi-section-heading h2 {font-size:clamp(42px,4.25vw,65px);line-height:1.12}
.hi-section-heading__description {max-width:310px;color:#5A7479;font-size:15px;line-height:1.8;margin-bottom:4px!important}
.hi-property-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.1vw,29px);align-items:start}
.hi-property-card {min-width:0;background:var(--hi-paper);height:100%;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.hi-property-card:hover {transform:translateY(-5px);box-shadow:0 16px 40px rgba(24,40,33,.07)}
.hi-property-card__image-link {position:relative;display:block;width:100%;aspect-ratio:1.35;overflow:hidden;background:#DCE9EB}
.hi-property-card__image {display:block;width:100%;height:100%!important;object-fit:cover;transition:transform .5s}
.hi-property-card:hover .hi-property-card__image {transform:scale(1.045)}
.hi-property-card__tag {position:absolute;top:16px;left:16px;padding:7px 13px;background:var(--hi-paper);color:var(--hi-deep);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:650}
.hi-property-card__body {padding:clamp(20px,2vw,29px);display:flex;flex-direction:column;flex:1;min-width:0}
.hi-property-card__place {font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#2A5B63;font-weight:650;margin-bottom:12px}
body.hi-relaunch .hi-property-card h3 {font:400 clamp(21px,1.8vw,27px)/1.25 var(--hi-serif);letter-spacing:-.025em;min-height:2.5em;margin:0 0 25px}
.hi-property-card__facts {display:flex;flex-wrap:wrap;align-items:start;gap:16px;color:#283836;padding-top:16px;border-top:1px solid var(--hi-line);font-size:14px}
.hi-property-card__facts span {display:flex;gap:4px;flex-wrap:wrap;align-items:baseline}
.hi-property-card__facts small {color:#617F84;font-size:10px}
.hi-property-card__bottom {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:24px}
.hi-property-card__bottom strong {font-size:17px;font-weight:600;letter-spacing:-.025em;overflow-wrap:break-word}
.hi-arrow {font-size:21px;line-height:1;border:1px solid var(--hi-line);width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hi-section-cta {text-align:center;margin-top:45px}
.hi-empty {grid-column:1/-1}
/* Approach */
.hi-approach {background:var(--hi-paper)}
.hi-approach__grid {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,8vw,130px);align-items:center}
.hi-approach__photo {position:relative;min-width:0}
.hi-approach__photo img {width:100%;height:clamp(480px,58vw,720px)!important;object-fit:cover;display:block}
.hi-approach__caption {position:absolute;left:24px;bottom:24px;background:var(--hi-paper);color:var(--hi-deep);font:italic 18px var(--hi-serif);padding:13px 17px;max-width:calc(100% - 48px)}
.hi-approach h2 {margin:0 0 35px}
.hi-approach__item {border-top:1px solid var(--hi-line);display:grid;grid-template-columns:42px minmax(0,1fr);gap:15px;padding:24px 0}
.hi-approach__item>span {font-size:11px;letter-spacing:.08em;color:#809389}
body.hi-relaunch .hi-approach__item h3 {font-size:24px;margin-bottom:7px}
.hi-approach__item p {color:#75847c;font-size:14px;line-height:1.7;margin:0}
.hi-approach__content>.hi-text-link {margin-top:22px}
/* CTA and Footer */
.hi-sell-banner {background:var(--hi-forest);color:#f9f8f3;padding:clamp(75px,8vw,135px) 0}
.hi-sell-banner__inner {display:flex;align-items:end;justify-content:space-between;gap:35px}
.hi-sell-banner h2,.hi-footer h2 {font-size:clamp(42px,5.3vw,78px);line-height:1.1;max-width:780px}
.hi-sell-banner h2 em,.hi-footer h2 em {color:#BADFE3}
.hi-sell-banner p:not(.hi-eyebrow) {font-size:16px;max-width:550px;color:#DCEDEF;line-height:1.9;margin:22px 0 0}
.hi-sell-banner__inner .hi-button {flex-shrink:0}
.hi-footer {background:var(--hi-deep);color:#fff;padding-top:90px}
.hi-footer__top {display:flex;align-items:end;justify-content:space-between;gap:30px;padding-bottom:70px;border-bottom:1px solid #65848A}
.hi-footer h2 {font-size:clamp(42px,4.65vw,70px)}
.hi-footer__bottom {display:flex;justify-content:space-between;gap:40px;padding-top:55px;padding-bottom:60px}
.hi-footer__brand {display:block;font-family:var(--hi-serif);letter-spacing:.09em;font-size:21px;margin-bottom:15px}
.hi-footer__bottom p {font-size:13px;color:#CEE0E2;max-width:300px;line-height:1.7}
.hi-footer__bottom nav {max-width:480px;display:flex;flex-wrap:wrap;column-gap:28px;row-gap:13px;align-content:start}
.hi-footer__bottom nav a {font-size:12px;color:#EFF7F8}
.hi-footer__legal {border-top:1px solid #65848A;display:flex;justify-content:space-between;padding-top:22px;padding-bottom:25px;font-size:10px;color:#BED8DC;letter-spacing:.09em}
/* Archive */
.hi-archive-hero {padding:clamp(88px,8vw,130px) 0 clamp(95px,9vw,155px);background:var(--hi-forest);color:#fff}
.hi-archive-hero h1,.hi-subpage-hero h1,.hi-not-found h1 {font-size:clamp(52px,7vw,102px);line-height:1.05;max-width:950px;margin-bottom:30px}
.hi-archive-hero h1 em {color:#D3EEF0}
.hi-archive-hero p:not(.hi-eyebrow) {font-size:16px;color:#E0ECEE;line-height:1.85;max-width:520px;margin:0}
.hi-filter-panel {padding:22px;background:var(--hi-paper);display:grid;grid-template-columns:1fr 1fr .9fr .9fr auto;gap:12px;align-items:end;margin-top:-135px;margin-bottom:70px;position:relative;box-shadow:0 14px 40px rgba(25,45,38,.09)}
.hi-field {min-width:0;display:flex;flex-direction:column;gap:7px}
.hi-field label {font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#527179;font-weight:650}
body.hi-relaunch .hi-field :is(input,select) {height:46px;border:1px solid var(--hi-line);border-radius:0;background:#fff;color:var(--hi-deep);padding:0 11px;width:100%;font-size:13px;min-width:0;box-shadow:none}
.hi-filter-submit {min-height:46px;height:46px;align-self:end;gap:20px;white-space:nowrap}
.hi-archive-results {display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:30px;padding-bottom:14px;border-bottom:1px solid var(--hi-line)}
.hi-archive-results .hi-eyebrow,.hi-archive-results>p {margin:0;font-size:12px}
.hi-pagination {margin:50px 0 0}
.hi-pagination ul {list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.hi-pagination :is(a,span) {border:1px solid var(--hi-line);padding:9px 14px;display:inline-block;font-size:13px}
.hi-pagination .current {background:var(--hi-deep);color:#fff}
.hi-empty-state {text-align:center;max-width:600px;margin:auto;padding:70px 0}
.hi-empty-state h2 {font-size:36px;margin-bottom:12px}
/* Property detail */
.hi-property-breadcrumb {display:flex;align-items:center;gap:12px;padding-top:28px;padding-bottom:25px;font-size:11px;color:#567A80;flex-wrap:wrap}
.hi-property-breadcrumb a {text-decoration:underline!important;text-underline-offset:3px}
.hi-single-intro {padding-bottom:40px}
.hi-single-intro__grid {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
.hi-single-intro h1 {font-size:clamp(37px,4.4vw,66px);line-height:1.12;max-width:925px}
.hi-single-intro__price {text-align:right;min-width:190px;padding-bottom:8px}
.hi-single-intro__price p {font-size:10px;letter-spacing:.15em;color:#46727A;margin-bottom:10px}
.hi-single-intro__price strong {font-size:clamp(21px,2vw,29px);white-space:normal;font-weight:500;line-height:1.2}
.hi-single-hero {background:var(--hi-paper)}
.hi-single-hero__frame {position:relative;background:#DCE9EB;height:clamp(350px,55vw,760px);overflow:hidden}
.hi-single-hero__image {width:100%;height:100%!important;object-fit:cover;object-position:center}
.hi-single-hero__badge {position:absolute;top:25px;left:25px;padding:10px 17px;background:var(--hi-paper);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:650}
.hi-single-details__grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.39fr);gap:clamp(38px,8vw,125px);align-items:start}
.hi-single-details__main h2 {font-size:clamp(40px,5vw,72px)}
.hi-fact-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:48px 0 70px;border-top:1px solid var(--hi-line)}
.hi-fact {padding:24px 12px 24px 0;border-bottom:1px solid var(--hi-line);display:flex;flex-direction:column;gap:10px;min-width:0}
.hi-fact span {text-transform:uppercase;color:#66888E;font-size:10px;letter-spacing:.13em}
.hi-fact strong {font-family:var(--hi-serif);font-size:clamp(19px,2vw,28px);font-weight:400;line-height:1.2;overflow-wrap:break-word}
.hi-single-description {border-top:1px solid var(--hi-line);padding-top:33px;max-width:790px}
.hi-single-description h3 {font-size:34px;margin-bottom:25px}
.hi-single-description :is(p,div) {font-size:15px;color:#4D696E;line-height:1.95;overflow-wrap:break-word}
.hi-single-description img {height:auto}
.hi-single-contact {position:sticky;top:40px;background:#E5F0F2;padding:35px;min-width:0}
.hi-single-contact h3 {font-size:clamp(33px,3vw,50px);margin-bottom:20px}
.hi-single-contact p:not(.hi-eyebrow) {font-size:14px;line-height:1.8;color:#51757B}
.hi-single-contact .hi-button {display:flex;width:100%;margin:25px 0 24px}
.hi-single-contact .hi-text-link {font-size:12px}
.hi-related-section {background:var(--hi-warm)}
/* About, contact and legal */
.hi-subpage-hero {padding:clamp(70px,7vw,125px) 0;background:var(--hi-warm)}
.hi-subpage-hero__grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(35px,5vw,80px);align-items:center}
.hi-subpage-hero__grid h1 {font-size:clamp(52px,6.3vw,91px)}
.hi-subpage-hero p:not(.hi-eyebrow) {color:#58757A;font-size:17px;line-height:1.85;max-width:540px}
.hi-subpage-hero__image img {width:100%;height:clamp(300px,36vw,490px)!important;object-fit:cover}
.hi-values {background:var(--hi-mist)}
.hi-values__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hi-values__grid article {padding:35px;background:var(--hi-paper)}
.hi-values__grid article>span {font-size:11px;letter-spacing:.15em;color:#48838D}
.hi-values__grid h3 {font-size:30px;margin:35px 0 10px}
.hi-values__grid p {font-size:14px;line-height:1.85;color:#617A80}
.hi-contact-hero {padding-bottom:85px}
.hi-contact-section {background:var(--hi-paper)}
.hi-contact-grid {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,9vw,130px)}
.hi-contact-info p:not(.hi-eyebrow) {color:#58777C;line-height:1.8;max-width:340px}
.hi-contact-info__address {border-top:1px solid var(--hi-line);padding:20px 0;display:flex;flex-direction:column;gap:5px}
.hi-contact-info__address strong {font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.hi-contact-info__address a,.hi-contact-info__address span {color:#366C76;font-size:15px}
.hi-contact-form {background:var(--hi-warm);padding:clamp(25px,5vw,55px);min-width:0}
.hi-contact-form :is(input,textarea,select) {background:#fff!important;border:1px solid var(--hi-line)!important;color:var(--hi-deep)!important;max-width:100%!important}
.hi-contact-form button,.hi-contact-form .ff-btn-submit {background:var(--hi-deep)!important;color:#fff!important;border-radius:0!important;padding:13px 25px!important}
.hi-test-form-notice {padding:22px;background:#fff;border-left:2px solid var(--hi-accent)}
.hi-test-form-notice h3 {font-size:23px;margin-bottom:13px}
.hi-test-form-notice p {color:#536F75;font-size:14px;line-height:1.8}
.hi-page-content {min-height:60vh;background:var(--hi-paper)}
.hi-page-content__inner {max-width:910px}
.hi-page-content h1,.hi-not-found h1 {font-size:clamp(45px,6vw,80px);margin-bottom:45px}
.hi-legal-content {font-size:15px;line-height:1.85;overflow-wrap:anywhere}
.hi-legal-content :is(h2,h3,h4) {font-size:clamp(24px,3vw,36px);margin:30px 0 13px}
.hi-legal-content a {text-decoration:underline!important;text-underline-offset:3px}
.hi-legal-content :is(ul,ol) {padding-left:1.4em}
.hi-index-entry {border-top:1px solid var(--hi-line);padding:30px 0}
.hi-index-entry h2 {font-size:30px}
.hi-not-found {min-height:65vh}
/* TABLET: narrower columns and unstack hero */
@media (max-width:1100px) {
 .hi-site-nav {gap:16px}
 .hi-brand__name {font-size:15px}
 .hi-header-contact {display:none}
 .hi-home-hero__grid {min-height:0}
 .hi-home-hero__copy {padding-right:30px}
 .hi-home-hero__foot {padding-top:60px}
 .hi-filter-panel {grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px}
 .hi-filter-submit {grid-column:3;grid-row:1/3;height:100%;align-items:center;align-self:stretch}
 .hi-property-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .hi-property-card h3 {min-height:0!important}
 .hi-property-grid>.hi-property-card:last-child:nth-child(odd) {grid-column:auto}
 .hi-single-details__grid {gap:35px}
}
/* TABLET/MOBILE: dedicated navigation and single-column grids */
@media (max-width:1120px) {
 body.hi-relaunch .hi-site-header {height:76px}
 .hi-header-actions {margin-left:auto}
 .hi-menu-toggle {display:flex}
 .hi-site-nav {position:absolute;top:76px;left:0;right:0;background:var(--hi-paper);border-top:1px solid var(--hi-line);box-shadow:0 20px 35px rgba(20,40,32,.1);padding:25px var(--hi-pad) 30px;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;max-height:calc(100dvh - 76px);overflow:auto}
 .hi-site-nav.is-open {display:flex}
 .hi-site-nav a {font:400 26px var(--hi-serif);letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--hi-line)}
 .hi-site-nav a:after {display:none}
 .hi-home-hero__grid {grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
 body.hi-relaunch .hi-home-hero h1 {font-size:clamp(54px,7vw,78px)}
 .hi-home-hero__visual>img {min-height:550px}
 .hi-home-hero__copy>p {margin-top:26px}
 .hi-hero-actions {margin-top:30px}
 .hi-intro__grid {grid-template-columns:1fr 2fr}
 .hi-sell-banner__inner {align-items:start;flex-direction:column}
 .hi-single-intro__grid {grid-template-columns:1fr}
 .hi-single-intro__price {text-align:left;padding:0}
 .hi-single-details__grid {grid-template-columns:1fr}
 .hi-single-contact {position:static}
 .hi-single-contact .hi-button {max-width:340px}
 .hi-approach__grid {gap:35px}
}
@media (max-width:720px) {
 :root {--hi-pad:23px}
 .hi-section {padding-block:73px}
 .hi-site-header__inner {gap:12px}
 .hi-brand__symbol {font-size:31px}
 .hi-brand__name {font-size:14px}
 .hi-brand__name small {font-size:8px}
 .hi-home-hero__grid {grid-template-columns:1fr;width:100%}
 .hi-home-hero__copy {padding:75px var(--hi-pad) 36px;max-width:100%}
 .hi-home-hero__copy .hi-eyebrow {margin-bottom:32px}
 body.hi-relaunch .hi-home-hero h1 {font-size:clamp(54px,11vw,76px)}
 .hi-home-hero__copy>p {font-size:16px;line-height:1.8;max-width:480px}
 .hi-hero-actions {width:100%;gap:21px;align-items:flex-start}
 .hi-home-hero__foot {padding-top:60px;gap:15px;flex-wrap:wrap}
 .hi-home-hero__visual {width:100%;max-height:none;aspect-ratio:1.15}
 .hi-home-hero__visual>img {min-height:0;height:100%!important;object-position:center 45%}
 .hi-hero-overlay {font-size:18px;left:22px;bottom:22px;right:22px}
 .hi-intro__grid {grid-template-columns:1fr;gap:26px}
 .hi-intro h2,.hi-approach h2,.hi-contact-info h2 {font-size:clamp(42px,9vw,64px)}
 .hi-section-heading {display:block;margin-bottom:30px}
 .hi-section-heading__description {margin:20px 0 0!important}
 .hi-section-heading h2 {font-size:clamp(41px,8vw,54px)}
 .hi-property-grid {grid-template-columns:1fr;gap:24px}
 .hi-property-card__image-link {aspect-ratio:1.33}
 .hi-property-card__body {padding:25px}
 body.hi-relaunch .hi-property-card h3 {font-size:25px;min-height:0}
 .hi-approach__grid {grid-template-columns:1fr}
 .hi-approach__photo img {height:440px!important}
 .hi-approach__content {padding-top:20px}
 .hi-approach h2 {margin-bottom:32px}
 .hi-sell-banner h2,.hi-footer h2 {font-size:clamp(45px,8vw,64px)}
 .hi-footer {padding-top:67px}
 .hi-footer__top {flex-direction:column;align-items:start;padding-bottom:55px}
 .hi-footer__bottom {flex-direction:column;padding:42px 0;gap:25px}
 .hi-footer__legal {gap:12px;flex-wrap:wrap}
 .hi-archive-hero {padding:75px 0 135px}
 .hi-archive-hero h1,.hi-subpage-hero h1 {font-size:clamp(48px,10vw,73px)}
 .hi-filter-panel {margin-top:-105px;grid-template-columns:1fr 1fr;gap:14px;padding:18px;margin-bottom:55px}
 .hi-filter-submit {grid-column:1/-1;grid-row:auto;min-height:52px;height:52px}
 .hi-single-hero__frame {height:auto;aspect-ratio:1.2}
 .hi-single-intro {padding-bottom:25px}
 .hi-single-intro h1 {font-size:clamp(38px,8vw,56px)}
 .hi-single-intro__grid {gap:25px}
 .hi-single-details__main h2 {font-size:50px}
 .hi-fact-grid {grid-template-columns:repeat(2,minmax(0,1fr));margin:35px 0 50px}
 .hi-single-contact {padding:32px 26px}
 .hi-subpage-hero__grid {grid-template-columns:1fr}
 .hi-subpage-hero__image img {height:320px!important}
 .hi-values__grid {grid-template-columns:1fr}
 .hi-values__grid article {padding:30px}
 .hi-contact-grid {grid-template-columns:1fr;gap:45px}
 .hi-contact-form {padding:27px}
}
@media (max-width:390px) {
 :root {--hi-pad:17px}
 .hi-brand {gap:7px}
 .hi-brand__name {font-size:13px}
 .hi-brand__symbol {font-size:28px}
 .hi-property-card__facts {gap:10px}
 .hi-hero-actions .hi-button {width:100%}
 .hi-filter-panel {grid-template-columns:1fr}
 .hi-fact-grid {grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce) {
 *,*:before,*:after {scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}

/* HOPPMANN Corporate Identity, extracted from the original Blocksy palette:
   primary #448A94, secondary #2A5B63, dark typography #283836. */
body.hi-relaunch .hi-site-header {border-top:4px solid var(--hi-brand)}
body.hi-relaunch .hi-brand__symbol, body.hi-relaunch .hi-brand__name small {color:var(--hi-brand)}
body.hi-relaunch .hi-home-hero h1 em, body.hi-relaunch .hi-intro h2 em,
body.hi-relaunch .hi-approach h2 em, body.hi-relaunch .hi-subpage-hero h1 em {color:var(--hi-brand)}
body.hi-relaunch .hi-button--dark {background:var(--hi-brand);color:#082A30!important}
body.hi-relaunch .hi-button--dark:hover {background:var(--hi-deep);color:#fff!important}
body.hi-relaunch .hi-header-contact {background:var(--hi-brand);color:#082A30!important}
body.hi-relaunch .hi-header-contact:hover {background:var(--hi-deep);color:#fff!important}
body.hi-relaunch .hi-property-card__tag {border-bottom:3px solid var(--hi-brand)}
body.hi-relaunch .hi-property-card__image-link:focus-visible,
body.hi-relaunch .hi-text-link:focus-visible {outline-color:var(--hi-brand)}
body.hi-relaunch .hi-single-contact {border-left:4px solid var(--hi-brand)}
body.hi-relaunch .hi-sell-banner {background:linear-gradient(112deg,var(--hi-deep) 25%,#357682 100%)}
body.hi-relaunch .hi-archive-hero {background:linear-gradient(115deg,var(--hi-deep) 0%,#357682 160%)}
body.hi-relaunch .hi-archive-hero .hi-eyebrow,
body.hi-relaunch .hi-sell-banner .hi-eyebrow {color:#E2F0F2}
body.hi-relaunch .hi-property-card__place {color:var(--hi-deep)}

/* v1.2 – Fluent Forms integration, local preview is fully visible */
.hi-contact-form__embed { min-width: 0; }
.hi-contact-form__embed .ff-el-group,
.hi-contact-form__embed .ff-el-input--content { max-width: 100%; }
.hi-contact-form__embed .ff-el-form-control { box-sizing: border-box; width: 100%; }
.hi-contact-form__embed label { color: var(--hi-deep); font-weight: 600; }
.hi-form-test-feedback {
  border-left: 3px solid var(--hi-accent);
  background: #fff; padding: 13px 16px;
  font-size: 14px; line-height: 1.6;
}


/* VERSION 1.3 – Original HOPPMANN identity, original living-room hero and legible navigation.
   Brand artwork is pixel-identical; only fully transparent canvas margins were removed. */
body.hi-relaunch .hi-site-header {
  height: 112px;
  background: #fff;
  border-top: 4px solid var(--hi-brand);
  border-bottom: 1px solid var(--hi-line);
}
body.hi-relaunch .hi-site-header__inner {
  gap: clamp(18px, 2.2vw, 32px);
}
body.hi-relaunch .hi-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
}
body.hi-relaunch .hi-brand__logo {
  display: block;
  width: clamp(205px, 18.1vw, 255px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
body.hi-relaunch .hi-site-nav {
  gap: clamp(20px, 2.05vw, 32px);
}
body.hi-relaunch .hi-site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hi-ink);
  font-size: clamp(14px, 1.02vw, 15.5px);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: .005em;
}
body.hi-relaunch .hi-site-nav a:hover,
body.hi-relaunch .hi-site-nav a[aria-current="page"] {
  color: var(--hi-deep);
}
/* White lettering on the darker CI turquoise meets normal-text contrast requirements. */
body.hi-relaunch .hi-header-contact,
body.hi-relaunch .hi-header-contact:visited {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  min-width: 204px;
  padding: 14px 21px;
  gap: 16px;
  background: var(--hi-deep);
  color: #fff !important;
  font-size: 14.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .005em;
  border: 2px solid var(--hi-deep);
  transition: background-color .18s ease, border-color .18s ease;
}
body.hi-relaunch .hi-header-contact:hover,
body.hi-relaunch .hi-header-contact:focus-visible {
  background: #173E46;
  border-color: #173E46;
  color: #fff !important;
}
body.hi-relaunch .hi-header-contact span {font-size: 22px;line-height: 1}
body.hi-relaunch .hi-button--dark {background: var(--hi-deep);color:#fff!important}
body.hi-relaunch .hi-button--dark:hover {background:#173E46;color:#fff!important}
body.hi-relaunch .hi-home-hero__visual>img {
  object-position: 52% center;
}
body.hi-relaunch .hi-footer__logo {display:block;width:222px;max-width:100%;height:auto}
@media (max-width: 1120px) {
  body.hi-relaunch .hi-site-header {height: 90px}
  body.hi-relaunch .hi-header-contact {display:none}
  body.hi-relaunch .hi-menu-toggle {display:flex;width:50px;height:50px}
  body.hi-relaunch .hi-site-nav {
    position:absolute;top:90px;left:0;right:0;
    background:#fff;border-top:1px solid var(--hi-line);
    box-shadow:0 20px 35px rgba(20,40,32,.1);
    padding:25px var(--hi-pad) 30px;
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    max-height:calc(100dvh - 90px);overflow:auto;
  }
  body.hi-relaunch .hi-site-nav.is-open {display:flex}
  body.hi-relaunch .hi-site-nav a {
    display:flex;min-height:58px;
    font:400 26px/1.25 var(--hi-serif);
    letter-spacing:-.02em;padding:14px 0;
    border-bottom:1px solid var(--hi-line);
  }
  body.hi-relaunch .hi-site-nav a::after {display:none}
  body.hi-relaunch .hi-brand__logo {width:220px}
}
@media (max-width: 720px) {
  body.hi-relaunch .hi-site-header {height:82px}
  body.hi-relaunch .hi-site-nav {top:82px;max-height:calc(100dvh - 82px)}
  body.hi-relaunch .hi-brand__logo {width:clamp(150px,46vw,205px)}
  body.hi-relaunch .hi-menu-toggle {width:48px;height:48px}
  body.hi-relaunch .hi-home-hero__visual>img {object-position:52% center}
}
@media (max-width: 390px) {
  body.hi-relaunch .hi-brand__logo {width:clamp(145px,45vw,174px)}
}


/* VERSION 1.4 – Header geometry and aligned object-card facts.
   The logo stays pixel-identical to the customer's original artwork. */
body.hi-relaunch .hi-brand__logo {
  width: 192px;
  max-width: 100%;
  height: auto;
  max-height: 78px;
  object-fit: contain;
}
body.hi-relaunch .hi-brand {padding-block: 0}

/* A symmetric three-column grid centers the *entire menu* independently of
   the logo and CTA widths – no manually offset positioning. */
@media (min-width: 1121px) {
  body.hi-relaunch .hi-site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(12px, 1.7vw, 28px);
  }
  body.hi-relaunch .hi-brand {justify-self: start}
  body.hi-relaunch .hi-site-nav {
    justify-self: center;
    margin-left: 0;
  }
  body.hi-relaunch .hi-header-actions {
    justify-self: end;
    margin-left: 0;
  }
}
/* Keep mobile/tablet navigation comfortable inside the narrower header. */
@media (max-width: 1120px) {
  body.hi-relaunch .hi-brand__logo {width: 180px;max-height: 73px}
}
@media (max-width: 720px) {
  body.hi-relaunch .hi-brand__logo {width: clamp(151px, 39vw, 172px);max-height: 70px}
}
@media (max-width: 390px) {
  body.hi-relaunch .hi-brand__logo {width: clamp(145px, 42vw, 160px)}
}

/* The facts and price now form a single footer unit. Short titles can grow
   into available space above the unit; all facts and prices align across a row. */
body.hi-relaunch .hi-property-card__summary {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  min-width: 0;
}
body.hi-relaunch .hi-property-card__summary .hi-property-card__facts {
  margin-top: 0;
}
body.hi-relaunch .hi-property-card__summary .hi-property-card__bottom {
  margin-top: 0;
  padding-top: 22px;
}


/* v1.5: refinements requested during desktop review; mobile layouts remain fluid. */
body.hi-relaunch .hi-site-nav a,
body.hi-relaunch .hi-header-contact {text-transform:uppercase;letter-spacing:.075em}
/* Preserve natural-case mobile labels only if explicitly desired; here CAPS throughout. */

body.hi-relaunch .hi-approach__caption {
  background:transparent;
  box-shadow:none;
  border:0;
  padding:0;
  color:var(--hi-deep);
  font-size:clamp(21px,2.45vw,33px);
  font-style:italic;
  text-shadow:0 1px 5px rgba(255,255,255,.98),0 0 14px rgba(255,255,255,.66);
  line-height:1.25;
  max-width:calc(100% - 54px);
}
/* The white filter panel overlaps the dark banner approximately 50/50. */
body.hi-relaunch .hi-archive-hero + .hi-listings-section {padding-top:0}
body.hi-relaunch .hi-filter-panel {margin-top:-58px}
/* Center pagination below the property card grid. */
body.hi-relaunch .hi-pagination {text-align:center}
body.hi-relaunch .hi-pagination ul {justify-content:center;align-items:center}

/* House cards only: room size, plot size, rooms, baths in a stable 2-by-2 matrix. */
body.hi-relaunch .hi-property-card__facts--house {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(12px,2vw,24px);
  row-gap:12px;
}
body.hi-relaunch .hi-property-card__facts--house > span {
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-content:start;
  gap:3px 6px;
  overflow-wrap:anywhere;
}
body.hi-relaunch .hi-property-card__facts--house small {line-height:1.4}

body.hi-relaunch .hi-footer__tagline {max-width:none}
body.hi-relaunch .hi-footer__tagline span {display:block}
@media (min-width:900px){
 body.hi-relaunch .hi-footer__tagline span:last-child {white-space:nowrap}
}
/* These two summaries are intended as single sentences on wide displays. */
body.hi-relaunch .hi-archive-hero p:not(.hi-eyebrow),
body.hi-relaunch .hi-contact-hero .hi-container > p:not(.hi-eyebrow) {max-width:none}
@media (min-width:1080px) {
 body.hi-relaunch .hi-archive-hero p:not(.hi-eyebrow),
 body.hi-relaunch .hi-contact-hero .hi-container > p:not(.hi-eyebrow) {
   white-space:nowrap;
   font-size:clamp(15px,1.13vw,18px);
 }
}
body.hi-relaunch .hi-contact-info__management span {line-height:1.6;color:#366C76}
body.hi-relaunch .hi-contact-info__management a {text-decoration:underline;text-underline-offset:3px}
@media (max-width:1120px){
 body.hi-relaunch .hi-filter-panel {margin-top:-58px}
}
@media (max-width:720px) {
 body.hi-relaunch .hi-filter-panel {margin-top:-42px}
 body.hi-relaunch .hi-archive-hero p:not(.hi-eyebrow),
 body.hi-relaunch .hi-contact-hero .hi-container > p:not(.hi-eyebrow) {white-space:normal}
 body.hi-relaunch .hi-approach__caption {font-size:clamp(19px,5.1vw,26px)}
 body.hi-relaunch .hi-footer__tagline span:last-child {white-space:normal}
 body.hi-relaunch .hi-property-card__facts--house {column-gap:12px;row-gap:10px}
}


/* v1.6: Match the white italic hero photo lettering. One line on desktop,
   graceful wrapping on smaller viewports. Preserve the original photograph. */
body.hi-relaunch .hi-approach__photo::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(16, 28, 30, .49), rgba(16, 28, 30, 0));
}
body.hi-relaunch .hi-approach__caption {
  position: absolute;
  z-index: 1;
  inset: auto clamp(18px, 2vw, 30px) clamp(22px, 2.4vw, 34px);
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: var(--hi-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.48vw, 22px);
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.57);
}
@media (max-width: 720px) {
  body.hi-relaunch .hi-approach__caption {
    font-size: clamp(18px, 3.5vw, 23px);
    white-space: normal;
    overflow-wrap: normal;
  }
}


/* v1.7 – Datenschutz-Checkbox in Fluent Forms: gut lesbare Schrift
   auch wenn das Formular eigene, zu helle Farben mitbringt. */
body.hi-relaunch .hi-contact-form__embed .ff-el-form-check-label,
body.hi-relaunch .hi-contact-form__embed .ff-el-form-check-label span,
body.hi-relaunch .hi-contact-form__embed .ff-el-form-check-label strong,
body.hi-relaunch .hi-contact-form__embed .ff-el-checkbox label,
body.hi-relaunch .hi-contact-form__embed .ff-el-checkbox label span,
body.hi-relaunch .hi-contact-form__embed .ff_t_c,
body.hi-relaunch .hi-contact-form__embed .ff_t_c * {
  color: #283836 !important;
  opacity: 1 !important;
}
body.hi-relaunch .hi-contact-form__embed .ff-el-form-check-label a,
body.hi-relaunch .hi-contact-form__embed .ff-el-checkbox label a,
body.hi-relaunch .hi-contact-form__embed .ff_t_c a {
  color: #2A5B63 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.hi-relaunch .hi-contact-form__embed input[type="checkbox"] {
  accent-color: #2A5B63;
}
/* "Wir hören gerne zu." hat im Template einen ausdrücklichen
   Zeilenumbruch; auf schmalen Displays darf die erste Zeile umbrechen. */


/* v1.8 – eindeutiger Objektbezug im bestehenden Kontaktformular. */
body.hi-relaunch .hi-contact-property-ref {
  background: #e9f1f1;
  border-left: 3px solid #448a94;
  padding: 19px 22px;
  margin: 16px 0 25px;
  color: #283836;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
body.hi-relaunch .hi-contact-property-ref__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #2a5b63;
}
body.hi-relaunch .hi-contact-property-ref strong {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body.hi-relaunch .hi-contact-property-ref__meta {
  font-size: 14px;
  color: #476467;
  line-height: 1.5;
}
body.hi-relaunch .hi-contact-property-ref__meta a {
  color: #2a5b63;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.hi-relaunch #anfrage { scroll-margin-top: 24px; }


/* v1.9.1 – Fluent Forms terms checkbox: restore reliable native interaction.
   Older blanket text-input styles also matched checkbox inputs, obscuring the
   checked state in WebKit/Safari. Scope the correction to the actual consent
   field so all other controls keep their design. */
body.hi-relaunch .hi-contact-form__embed .fluentform .ff-el-tc .ff_tc_label {
  cursor: pointer;
}
body.hi-relaunch .hi-contact-form__embed .fluentform .ff-el-tc .ff_tc_checkbox {
  vertical-align: top;
  width: 30px !important;
  padding-top: 4px !important;
}
body.hi-relaunch .hi-contact-form__embed .fluentform .ff-el-tc input.ff-el-form-check-input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  display: inline-block !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline-offset: 3px;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  accent-color: #2A5B63 !important;
  cursor: pointer;
  vertical-align: middle;
}
body.hi-relaunch .hi-contact-form__embed .fluentform .ff-el-tc .ff_t_c {
  cursor: pointer;
}
body.hi-relaunch .hi-contact-form__embed .fluentform .ff-el-tc input.ff-el-form-check-input[type="checkbox"]:focus-visible {
  outline: 2px solid #2A5B63 !important;
}