/*
Theme Name: Massow Immobilien
Theme URI: https://massow-immobilien.de
Author: Webagentur Friedrich
Description: Maklerseite fuer Massow Immobilien (Giessen / Mittelhessen). Objekt-Typ "Immobilie" mit Suche und Ergebnisseiten. Helles Premium-Design (Ink-Blau + Gold).
Version: 1.0
Text Domain: massow
*/

:root{
  --ink:#0f1b2d; --ink-soft:#27384f; --paper:#f7f5f1; --white:#fff;
  --gold:#bb9457; --gold-dark:#9c7a3f; --line:#e3ddd2; --muted:#6c7689;
  --radius:14px; --shadow:0 18px 50px -22px rgba(15,27,45,.35);
  --shadow-sm:0 6px 22px -12px rgba(15,27,45,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Outfit',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.02em}
select,input,textarea,button,optgroup,option{font-family:'Outfit',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Outfit';font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:var(--gold-dark)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--ink-soft)}
.eyebrow{font-family:'Outfit';font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark)}

/* HEADER */
header#hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(15,27,45,.1);transition:box-shadow .3s,padding .3s;padding:14px 0}
header#hdr.solid{box-shadow:0 2px 16px rgba(15,27,45,.13);padding:12px 0}
.nav{display:flex;align-items:center;color:var(--ink)}
.brand{display:flex;align-items:center;margin-right:auto}
.site-logo{height:52px;width:auto;display:block}
.menu{display:flex;gap:28px;font-size:16px;font-weight:500;margin-right:24px}
.menu a{color:var(--ink);opacity:.75;transition:.2s}.menu a:hover{opacity:1;color:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-phone{font-weight:600;font-size:15px;color:var(--ink)}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px;line-height:0}

/* HERO + SUCHE */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:140px 24px 80px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('img/hero-start.jpg') center/cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,27,45,.72),rgba(15,27,45,.55) 45%,rgba(15,27,45,.78))}
.hero .eyebrow{color:var(--gold);margin-bottom:20px;display:block;min-height:1.6em}
.hero h1{font-size:clamp(38px,6vw,72px);max-width:14ch;margin-bottom:20px;font-weight:500}
.hero p.lead{font-size:clamp(16px,2vw,20px);max-width:54ch;opacity:.9;margin-bottom:42px}

.search{width:100%;max-width:920px;background:rgba(255,255,255,.97);border-radius:18px;box-shadow:var(--shadow);padding:10px;display:flex;flex-wrap:wrap;gap:6px}
.search .tabs{display:flex;width:100%;gap:4px;padding:4px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.search .tab{font-weight:600;font-size:14px;color:var(--muted);padding:8px 18px;border-radius:999px;cursor:pointer;transition:.2s}
.search .tab.active{background:var(--ink);color:#fff}
.search .fields{display:flex;width:100%;gap:6px;flex-wrap:wrap}
.field{flex:1 1 0;min-width:140px;text-align:left;padding:8px 14px;border-radius:10px;transition:.15s}
.field:hover{background:var(--paper)}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.field select,.field input{width:100%;border:0;background:transparent;font-family:'Outfit';font-size:15px;font-weight:500;color:var(--ink);outline:none;cursor:pointer}
.search .go{align-self:center;padding:0 8px}
.search .go .btn{height:52px;padding:0 28px}
.hero-stats{display:flex;gap:40px;margin-top:46px;flex-wrap:wrap;justify-content:center}
.hero-stats div{text-align:center}
.hero-stats b{display:block;font-family:'Outfit';font-size:30px;font-weight:600;color:#fff}
.hero-stats span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* SECTIONS */
section{padding:96px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(30px,4vw,46px);margin:14px 0}
.sec-head p{color:var(--muted);font-size:17px}

/* KARTEN */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .2s ease;cursor:pointer;border:1px solid var(--line);display:block;will-change:transform}
.card:hover{box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .ph img{transform:scale(1.06)}
.card .badge{position:absolute;top:14px;left:14px;background:var(--gold);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.card .fav{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:17px}
.card .body{padding:20px 22px 24px}
.card .price{font-family:'Outfit';font-size:24px;font-weight:600;color:var(--ink)}
.card h3{font-size:18px;font-weight:600;margin:6px 0 4px}
.card .loc{color:var(--muted);font-size:14px}
.card .specs{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.card .loc svg,.card .specs svg,.immo .loc svg{vertical-align:-2px;color:var(--gold)}
.card .specs span{font-weight:500}

/* LEISTUNGEN */
.services{background:var(--ink);color:#fff}
.services .sec-head h2{color:#fff}.services .sec-head p{color:rgba(255,255,255,.7)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:30px 26px;transition:.25s}
.svc:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.svc .ic{width:50px;height:50px;border-radius:12px;background:var(--gold);display:grid;place-items:center;margin-bottom:18px}
.svc .ic svg{color:#fff;display:block}
.svc h3{font-size:20px;margin-bottom:10px}
.svc p{font-size:14.5px;color:rgba(255,255,255,.72)}

/* WARUM */
.why{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.why-img{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4}
.why-img img{width:100%;height:100%;object-fit:cover}
.why-img .float{position:absolute;bottom:22px;left:22px;right:22px;background:rgba(255,255,255,.96);border-radius:12px;padding:18px 22px;display:flex;gap:22px;box-shadow:var(--shadow-sm)}
.why-img .float b{font-family:'Outfit';font-size:26px;display:block;color:var(--gold-dark)}
.why-img .float span{font-size:12.5px;color:var(--muted)}
.why h2{font-size:clamp(30px,4vw,44px);margin:14px 0 22px}
.why ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:18px}
.why li{display:flex;gap:15px;align-items:flex-start}
.why li .tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;margin-top:2px}
.why li .tick svg{display:block}
.why li b{display:block;font-weight:600;font-size:17px}
/* 16px ist die Untergrenze aus der QA-Checkliste, vorher 14.5px. */
.why li p{color:var(--muted);font-size:16px}

/* CTA */
.cta-band{background:linear-gradient(120deg,var(--ink),var(--ink-soft));color:#fff;text-align:center;border-radius:24px;padding:64px 40px;margin:0 24px;position:relative;z-index:2}
.cta-band h2{font-size:clamp(28px,4vw,42px);max-width:18ch;margin:0 auto 16px}
.cta-band p{opacity:.8;max-width:46ch;margin:0 auto 30px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* NAV DROPDOWN */
.has-drop{position:relative}
.has-drop>a::after{content:"▾";font-size:13px;margin-left:4px;opacity:.7}
.drop{display:none;position:absolute;top:calc(100% + 10px);left:0;background:#fff;border-radius:12px;min-width:210px;padding:8px;box-shadow:0 12px 40px rgba(15,27,45,.14);border:1px solid rgba(15,27,45,.08)}
.has-drop:hover .drop{display:block}
.drop a{display:block;padding:10px 16px;border-radius:8px;font-size:14.5px;white-space:nowrap;transition:.15s;opacity:.75;color:var(--ink)}
.drop a:hover{background:rgba(15,27,45,.05);opacity:1;color:var(--gold)}
/* Hover-Brücke: schließt den Lücke zwischen Nav-Item und Dropdown */
.drop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-phone{display:flex;align-items:center;gap:7px;font-weight:600;font-size:15px}
.nav-phone svg{flex-shrink:0}
.burger svg{display:block}

/* MOBILE MENÜ */
.mob-menu{position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--ink);z-index:200;overflow-y:auto;transition:right .3s cubic-bezier(.4,0,.2,1);padding:72px 0 40px}
.mob-menu.open{right:0}
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
.mob-overlay.open{opacity:1;pointer-events:all}
.mob-inner{padding:0 24px;display:flex;flex-direction:column;gap:0}
.mob-link{color:rgba(255,255,255,.85);font-size:17px;font-weight:500;padding:13px 0;display:block;border-bottom:1px solid rgba(255,255,255,.07)}
.mob-link:hover{color:var(--gold)}
.mob-group{border-bottom:1px solid rgba(255,255,255,.07)}
.mob-toggle{width:100%;background:none;border:0;color:rgba(255,255,255,.85);font-family:'Outfit';font-size:17px;font-weight:500;text-align:left;padding:13px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.mob-toggle::after{content:"▾";font-size:13px;transition:transform .2s;opacity:.6}
.mob-toggle.open::after{transform:rotate(180deg)}
.mob-sub{display:none;padding:0 0 8px 12px;flex-direction:column}
.mob-sub.open{display:flex}
.mob-sub a{color:rgba(255,255,255,.62);font-size:15px;padding:8px 0;display:block}
.mob-sub a:hover{color:var(--gold)}
.mob-cta{margin-top:22px;width:100%;text-align:center;justify-content:center}
.mob-contact{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.6);font-size:14px;margin-top:14px;padding:10px 0}
.mob-contact a{color:rgba(255,255,255,.6)}.mob-contact a:hover{color:var(--gold)}
.mob-contact svg{color:var(--gold);flex-shrink:0}

/* UNTERSEITEN HERO */
.pg-hero{position:relative;padding:140px 24px 80px;color:#fff;text-align:left;overflow:hidden}
.pg-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) center/cover no-repeat}
.pg-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(15,27,45,.88) 50%,rgba(15,27,45,.55))}
.pg-hero .eyebrow{color:var(--gold);margin-bottom:16px;display:block}
.pg-hero h1{font-size:clamp(32px,5vw,58px);max-width:16ch;font-weight:500;margin-bottom:18px}
.pg-lead{font-size:18px;opacity:.85;max-width:50ch;line-height:1.65;font-weight:400}

/* FEATURE-STRIP */
.feat-strip{background:#fff;border-bottom:1px solid var(--line);padding:36px 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.feat{display:flex;gap:16px;align-items:flex-start;padding:20px 28px;border-right:1px solid var(--line)}
.feat:last-child{border-right:0}
.feat-ic{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--gold);display:grid;place-items:center}
.feat-ic svg{color:#fff;display:block}
.feat b{display:block;font-size:15px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.feat p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}

/* SEITENHEADER (Archiv) */
.page-top{background:var(--ink);color:#fff;padding:120px 0 56px}
.page-top .page-lead{font-size:18px;opacity:.8;max-width:50ch;margin-top:14px;font-weight:400;line-height:1.6}

/* UNTERSEITEN LAYOUT */
.page-body{padding:72px 0 0}
.page-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.massow-inhalt{min-width:0}
.massow-inhalt h2{font-size:clamp(24px,3vw,36px);margin:52px 0 18px;letter-spacing:-.02em}
.massow-inhalt h2:first-child{margin-top:0}
.massow-inhalt h3{font-size:20px;font-weight:600;margin:32px 0 10px;color:var(--ink)}
.massow-inhalt p{color:var(--ink-soft);font-size:16.5px;line-height:1.78;margin-bottom:16px}
.massow-inhalt ul,.massow-inhalt ol{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:10px}
.massow-inhalt ul li,.massow-inhalt ol li{padding-left:22px;position:relative;color:var(--ink-soft);font-size:16px;line-height:1.65}
.massow-inhalt ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.massow-inhalt ol{counter-reset:pc-ol}
.massow-inhalt ol li::before{counter-increment:pc-ol;content:counter(pc-ol)".";position:absolute;left:0;top:0;font-weight:700;color:var(--gold);font-size:15px}
.cta-link{display:inline-block;margin-top:32px;background:var(--gold);color:#fff;padding:13px 28px;border-radius:999px;font-weight:600;font-size:15px;transition:.2s}
.cta-link:hover{background:var(--gold-dark)}
.info-box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:20px 24px;margin:32px 0;font-size:15px;color:var(--ink-soft)}
.info-box strong{color:var(--ink)}
.steps{display:flex;flex-direction:column;gap:18px;margin:24px 0}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.step-body b{display:block;font-weight:600;margin-bottom:4px}
.step-body p{color:var(--muted);font-size:14.5px;margin:0}

/* KONTAKT-SIDEBAR */
.page-sidebar{position:sticky;top:96px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
.contact-card .eyebrow{display:block;margin-bottom:10px}
.contact-card h3{font-size:20px;margin-bottom:20px;line-height:1.2}
.contact-card .btn{width:100%;margin-top:10px}
.cc-meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.75}
.cc-meta strong{color:var(--ink)}
.cc-meta span{font-size:13.5px;display:block;margin-top:6px}
.usp-box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.usp-item{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.usp-item svg{color:var(--gold);flex-shrink:0}

/* TESTIMONIALS */
.testimonials{background:var(--paper);padding:80px 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm)}
.testi-stars{display:flex;gap:3px;color:var(--gold);margin-bottom:16px}
.testi-stars svg{fill:var(--gold);stroke:none}
.testi-text{color:var(--ink-soft);font-size:15.5px;line-height:1.72;margin-bottom:20px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0}
.testi-author strong{font-size:14px;color:var(--ink)}

/* FOOTER */
footer.site{background:var(--ink);color:rgba(255,255,255,.7);padding:140px 0 34px;margin-top:0}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.fcols h4{color:#fff;font-family:'Outfit';font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.fcols a{display:block;padding:5px 0;font-size:14.5px;transition:.2s}.fcols a:hover{color:var(--gold)}
.fbrand b{font-family:'Outfit';color:#fff;font-size:22px}
.fbrand p{margin-top:14px;font-size:14px;max-width:30ch}
.fbottom{display:flex;justify-content:space-between;padding-top:26px;font-size:13px;flex-wrap:wrap;gap:12px}

/* ERGEBNIS-/ARCHIVSEITE */
.page-top .eyebrow{color:var(--gold)}
.page-top h1{font-size:40px;margin-top:8px}
.page-top .sub{opacity:.7;margin-top:6px}
.results-bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;padding:16px 0}
.results-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.chip b{color:var(--ink)}
.sortsel{border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-family:'Outfit';font-weight:500;font-size:14px;background:#fff}
.results-body{padding:40px 0 90px}
.count{color:var(--muted);font-size:15px;margin-bottom:24px}
.empty{color:var(--muted);font-size:16px;padding:40px 0}

/* EINZELOBJEKT */
.immo{padding:150px 0 90px}
.immo-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:start}
.immo-hero-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;margin-bottom:28px}
.immo-hero-img img{width:100%;height:100%;object-fit:cover}
.immo h1{font-size:clamp(28px,4vw,42px);margin:6px 0 10px}
.immo .loc{color:var(--muted);font-size:16px;margin-bottom:24px}
.immo .desc{font-size:16.5px;color:var(--ink-soft);line-height:1.75}
.immo .desc p{margin-bottom:16px}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
.spec-grid .s{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.spec-grid .s span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.spec-grid .s b{font-family:'Outfit';font-size:22px;font-weight:600}
.immo-side{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
.immo-side .price{font-family:'Outfit';font-size:32px;font-weight:600;margin-bottom:4px}
.immo-side .badge{display:inline-block;background:var(--gold);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:16px}
.immo-side .btn{width:100%;margin-top:10px}
.immo-side .contact{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.back-link{color:var(--gold-dark);font-weight:600;font-size:14px;display:inline-block;margin-bottom:18px}

/* SINGLE: BILDGALERIE */
.immo-gallery{margin-bottom:36px}
.immo-main-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;background:var(--line)}
.immo-main-wrap img{width:100%;height:100%;object-fit:cover;transition:.35s}
.immo-gallery-badge{position:absolute;top:16px;left:16px;background:var(--gold);color:#fff;font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:999px;z-index:2}
.immo-photo-count{position:absolute;bottom:14px;right:14px;background:rgba(15,27,45,.7);color:#fff;font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;display:flex;align-items:center;gap:5px;backdrop-filter:blur(6px)}
.immo-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.immo-thumb{width:100px;height:72px;object-fit:cover;border-radius:10px;cursor:pointer;border:3px solid transparent;opacity:.72;transition:.2s;flex-shrink:0}
.immo-thumb.active,.immo-thumb:hover{opacity:1;border-color:var(--gold)}

/* SINGLE: LAYOUT */
.immo-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:48px;align-items:start}
.immo-main h1{font-size:clamp(26px,3.5vw,40px);margin:6px 0 10px}
.immo-addr{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:15px;margin-bottom:28px}
.immo-addr svg{color:var(--gold);flex-shrink:0}

/* SINGLE: SPEC-GRID V2 (mit Icon) */
.spec-grid-v2{grid-template-columns:repeat(3,1fr)}
.spec-grid-v2 .s{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.spec-grid-v2 .s-ic{color:var(--gold);margin-bottom:2px}
.spec-grid-v2 .s span{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.spec-grid-v2 .s b{font-size:17px;font-weight:600;line-height:1.1}

/* SINGLE: AUSSTATTUNG */
.immo-ausstattung,.immo-desc,.immo-energie{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.immo-ausstattung h3,.immo-desc h3,.immo-energie h3{font-size:18px;font-weight:600;margin-bottom:14px}
.aust-list{display:flex;flex-wrap:wrap;gap:9px}
.aust-item{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.aust-item svg{color:var(--gold);flex-shrink:0}

/* SINGLE: BESCHREIBUNG */
.immo-desc .desc p{color:var(--ink-soft);font-size:16px;line-height:1.78;margin-bottom:14px}

/* SINGLE: ENERGIEAUSWEIS */
.energie-row{display:flex;gap:20px;flex-wrap:wrap}
.energie-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 20px;min-width:130px}
.energie-item span{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.energie-item b{font-size:22px;font-weight:700}
.ekl{display:inline-block;padding:2px 12px;border-radius:6px;color:#fff}
.ekl-aplus,.ekl-a{background:#2d8a43}
.ekl-b,.ekl-c{background:#7db83a}
.ekl-d{background:#c8b400}
.ekl-e{background:#d97706}
.ekl-f,.ekl-g{background:#dc2626}
.ekl-h{background:#7f1d1d}

/* SINGLE: PREISBOX & SIDEBAR */
.immo-side{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
.immo-price-box{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.price-type{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;font-weight:600}
.immo-price-box .price{font-family:'Outfit';font-size:34px;font-weight:700;color:var(--ink);line-height:1}
.price-extra{font-size:13px;color:var(--muted);margin-top:5px}
.price-prov{font-size:13px;color:var(--ink-soft);margin-top:6px;display:flex;align-items:center;gap:5px}
.price-prov svg{color:var(--gold)}
.immo-side .btn{width:100%;margin-top:10px}
.immo-contact-info{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.8}
.immo-contact-info strong{color:var(--ink)}
.immo-usps{margin-top:16px;padding:16px;background:var(--paper);border-radius:12px;display:flex;flex-direction:column;gap:9px}
.immo-usps .usp-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.immo-usps .usp-item svg{color:var(--gold);flex-shrink:0}

/* FAQ SECTION */
.faq-section{padding:80px 0;background:var(--paper)}
.faq-section .sec-head{margin-bottom:44px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:960px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.faq-q{font-weight:600;font-size:16px;color:var(--ink);margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.faq-q::before{content:"Q";background:var(--gold);color:#fff;border-radius:50%;width:22px;height:22px;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.faq-a{font-size:14.5px;color:var(--ink-soft);line-height:1.72;padding-left:32px}

@media(max-width:980px){
  .menu{display:none}.burger{display:flex;align-items:center;justify-content:center}.nav-cta{gap:10px}
  .grid,.svc-grid,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .why,.immo-grid,.page-layout{grid-template-columns:1fr;gap:36px}
  .immo-side,.page-sidebar{position:static}
  .feat{border-right:0;border-bottom:1px solid var(--line)}
  .feat:last-child{border-bottom:0}
  /* Feature-Strip: letztes Item bei ungerader Anzahl zentrieren */
  .feat-grid .feat:last-child:nth-child(odd){grid-column:1/-1;max-width:50%;margin:0 auto}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .spec-grid-v2{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  /* "Warum"-Block: Float-Box nicht mehr absolut über Bild */
  .why-img .float{position:static;margin-top:14px;border-radius:10px;justify-content:center}
}
@media(max-width:680px){
  .menu,.nav-phone{display:none}
  .site-logo{height:40px}
  .burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px}
  .nav-cta .btn{font-size:13px;padding:9px 14px;height:42px;line-height:1.2}
  .nav-cta{gap:8px}
  .grid,.svc-grid,.spec-grid,.feat-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .search .fields{flex-direction:column}.field{min-width:100%}
  .search .go{width:100%}.search .go .btn{width:100%}
  .hero-stats{gap:16px}.fcols{grid-template-columns:1fr}
  .immo-thumbs{gap:7px}.immo-thumb{width:72px;height:52px}
  .spec-grid-v2{grid-template-columns:repeat(2,1fr)}
  /* Seiten-Hero: weniger Top-Abstand, zentriert */
  .pg-hero{padding:78px 20px 40px;text-align:center}
  .pg-hero h1{max-width:100%}
  /* Archiv-Header */
  .page-top{padding:76px 0 30px}
  .page-top h1{font-size:26px}
  /* CTA-Band am Seitenende: weniger Innenabstand */
  .cta-band{padding:42px 20px;margin:0 12px;border-radius:16px}
  .cta-band h2{font-size:clamp(22px,6vw,30px)}
  /* Karten-Specs auf Mobile lesbarer */
  .card .specs{font-size:15px;gap:14px}
  .card .loc{font-size:15px}
}

/* FADE-IN ON SCROLL */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}
.fade-in.visible{opacity:1;transform:none}

/* STICKY CTA BAR (Desktop) */
.sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:48;background:var(--ink);color:#fff;padding:14px 24px;align-items:center;justify-content:center;gap:20px;font-size:14.5px;font-weight:500;transform:translateY(100%);transition:transform .35s ease;box-shadow:0 -4px 24px rgba(15,27,45,.18)}
.sticky-cta.scta-visible{transform:none}
.sticky-cta span{opacity:.85}
.sticky-cta .scta-close{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.45);font-size:22px;cursor:pointer;line-height:1;padding:4px 8px}
.sticky-cta .scta-close:hover{color:#fff}
@media(max-width:680px){.sticky-cta{display:none}}

/* TYPING CURSOR */
@keyframes blink-cursor{0%,100%{border-color:var(--gold)}50%{border-color:transparent}}
/* Ohne Cursor (Sven 03.08.2026): der blinkende Strich stand am rechten
   Rand des Elements statt am Textende und sah nach Fehler aus. */
.hero .eyebrow.typing{border-right:0;padding-right:0;animation:none}

/* SHIMMER BUTTON */
@keyframes btn-sheen{0%{left:-100%}55%,100%{left:150%}}
.btn-shimmer{position:relative;overflow:hidden}
.btn-shimmer::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:btn-sheen 2.6s ease-in-out infinite}

/* FLOATING PHONE BUTTON (nur Mobile) */
.float-phone{display:flex;position:fixed;bottom:22px;right:20px;z-index:100;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#fff;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(187,148,87,.5);visibility:hidden;opacity:0;transform:scale(0.85);transition:opacity .3s,transform .3s,visibility 0s .3s}
.float-phone.fp-visible{visibility:visible;opacity:1;transform:scale(1);transition:opacity .3s,transform .3s,visibility 0s}
.float-phone:hover{background:var(--gold-dark);transform:scale(1.1)}
.float-phone svg{display:block}
@media(min-width:681px){.float-phone{display:none!important}}

/* ── SV-Argument (Verkäufer-Seiten) ─────────────────────────────── */
.sv-argument{background:var(--ink);color:#fff;border-radius:10px;padding:24px;margin-top:20px}
.sv-arg-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:var(--gold);margin-bottom:12px}
.sv-argument p{font-size:.88rem;color:#c8cdd6;line-height:1.6;margin:0 0 12px}
.sv-quote{border-left:3px solid var(--gold);margin:14px 0 0;padding:8px 0 8px 14px;font-style:italic;font-size:.95rem;color:#fff;background:transparent}

/* ── SV Buyer Note (Objektseite Sidebar) ─────────────────────────── */
.sv-buyer-note{display:flex;gap:12px;align-items:flex-start;background:#f8f9fb;border:1px solid #e8eaed;border-radius:8px;padding:16px;margin-top:18px}
.sv-buyer-note svg{flex-shrink:0;margin-top:2px;color:var(--gold-dark)}
.sv-buyer-note strong{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.sv-buyer-note p{font-size:.8rem;color:var(--muted);line-height:1.55;margin:0}

/* ═══════════════════════════════════════════════════════════════
   v3: LUXUS-LAYER
   Ruhiger, groesserer, hochwertigerer Auftritt. Mehr Weissraum,
   groessere Radien, groessere Bilder, weichere Schatten.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --radius:20px; --radius-lg:30px;
  --shadow:0 30px 70px -34px rgba(15,27,45,.42);
  --shadow-sm:0 14px 40px -22px rgba(15,27,45,.30);
}

/* Rhythmus */
section{padding:118px 0}
.sec-head{max-width:720px;margin:0 auto 64px}
.sec-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:600;letter-spacing:-.025em;margin:16px 0 14px}
.sec-head p{font-size:18px}
/* Akzent-Unterzeile statt grauem Fliesstext (imaxx-Prinzip) */
.sec-accent{color:var(--gold-dark)!important;font-weight:600;font-size:17px!important}
.sec-more{text-align:center;margin-top:52px}

/* ── Objektkarten ────────────────────────────────────────────── */
.grid{gap:34px}
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:3/2}
.card .ph img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.card:hover .ph img{transform:scale(1.07)}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,27,45,.28));opacity:0;transition:opacity .35s}
.card:hover .ph::after{opacity:1}
.card .body{padding:24px 26px 28px}
.card .price{font-size:26px;font-weight:700;letter-spacing:-.02em}
.card h3{font-size:19px;margin:8px 0 6px;line-height:1.32}
.card .loc,.card .specs{font-size:15px}
.card .badge{background:rgba(255,255,255,.94);color:var(--ink);font-size:12.5px;padding:7px 15px;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(15,27,45,.16)}
.card .fav{background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}

/* ── Kategorie-Kacheln (grosse Bildkarten) ───────────────────── */
.kats{background:var(--white)}
.kat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kat{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.kat:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.kat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.kat:hover img{transform:scale(1.07)}
.kat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,45,.05) 30%,rgba(15,27,45,.55) 62%,rgba(15,27,45,.88))}
.kat-body{position:absolute;left:0;right:0;bottom:0;padding:32px 30px;color:#fff;z-index:2}
.kat-count{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.kat-body h3{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;color:#fff}
.kat-body p{font-size:15.5px;color:rgba(255,255,255,.82);line-height:1.5}
.kat-body::after{content:"→";display:inline-block;margin-top:14px;font-size:19px;color:var(--gold);transform:translateX(0);transition:transform .3s}
.kat:hover .kat-body::after{transform:translateX(8px)}

/* Orte-Zeile */
.ort-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:44px}
.ort-label{font-size:15px;color:var(--muted);margin-right:6px}
.qchip{display:inline-flex;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500;color:var(--ink-soft);transition:.2s}
.qchip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.qchip-all{background:transparent;border-color:var(--gold);color:var(--gold-dark);font-weight:600}
.qchip-all:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ── Such-Band auf Unterseiten ───────────────────────────────── */
.srch-band{background:var(--ink);color:#fff;padding:96px 0}
.srch-head{text-align:center;max-width:700px;margin:0 auto 40px}
.srch-head .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
.srch-head h2{font-size:clamp(30px,4vw,48px);font-weight:600;letter-spacing:-.025em;color:#fff;margin-bottom:12px}
.srch-head p{color:rgba(255,255,255,.72);font-size:17px}
.srch-band .search{margin:0 auto;max-width:960px}
.srch-quick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px}
.srch-band .qchip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.srch-band .qchip:hover{background:#fff;border-color:#fff;color:var(--ink)}
.srch-band .qchip-all{background:transparent;border-color:var(--gold);color:var(--gold)}
.srch-band .qchip-all:hover{background:var(--gold);color:#fff}

/* ── Suchleiste auf der Ergebnisseite ────────────────────────── */
.archive-search{background:var(--ink);padding:0 0 44px}
.archive-search .search{max-width:100%;box-shadow:0 20px 50px -26px rgba(0,0,0,.6)}
.archive-top{padding-bottom:36px}

/* Suchformular allgemein etwas grosszuegiger */
.search{border-radius:22px;padding:12px}
.search .tab{font-size:15px;padding:9px 22px}
.search .field select,.search .field input{font-size:15.5px}
.search-locked .fields{padding-top:2px}

/* Teaser-Sektion */
.teaser-sec{background:var(--paper)}

/* ── Feintuning bestehender Bausteine ────────────────────────── */
.svc{border-radius:var(--radius);padding:34px 30px}
.svc h3{font-size:21px}
.svc p{font-size:15.5px}
.why{gap:76px}
.why-img{border-radius:var(--radius-lg)}
.testi{border-radius:var(--radius);padding:34px 32px;border:0;box-shadow:var(--shadow-sm)}
.testi-text{font-size:16px}
.faq-item{border-radius:var(--radius);padding:26px 28px;border:0;box-shadow:var(--shadow-sm)}
.faq-q{font-size:17.5px}
.faq-a{font-size:15.5px}
.cta-band{border-radius:var(--radius-lg);padding:78px 44px}
.contact-card,.immo-side{border-radius:var(--radius);border:0;box-shadow:var(--shadow-sm)}
.immo-hero-img,.immo-main-wrap{border-radius:var(--radius-lg)}
.pg-hero{padding:170px 24px 100px}
.pg-hero h1{font-size:clamp(34px,5.2vw,62px);font-weight:600;letter-spacing:-.025em}
.page-top{padding:150px 0 60px}
.page-top h1{font-size:clamp(32px,4.6vw,54px);font-weight:600;letter-spacing:-.025em}
.feat-strip{padding:44px 0}
.feat b{font-size:16.5px}

@media(max-width:980px){
  section{padding:80px 0}
  .kat-grid{grid-template-columns:repeat(2,1fr)}
  .kat-grid .kat:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
  .srch-band{padding:70px 0}
  .pg-hero{padding:120px 24px 64px}
  .page-top{padding:118px 0 44px}
}
@media(max-width:680px){
  section{padding:64px 0}
  .sec-head{margin-bottom:40px}
  .kat-grid{grid-template-columns:1fr;gap:20px}
  .kat{aspect-ratio:4/3}
  .kat-grid .kat:last-child:nth-child(odd){aspect-ratio:4/3}
  .kat-body{padding:24px 22px}
  .kat-body h3{font-size:25px}
  .ort-row{justify-content:flex-start}
  .srch-band{padding:52px 0}
  .srch-quick{justify-content:flex-start}
  .cta-band{padding:44px 22px}
  .card .body{padding:20px 20px 24px}
}

/* Teaser mit weniger als drei Objekten: Karten mittig, nicht linksbuendig */
.grid-1{grid-template-columns:minmax(0,400px);justify-content:center}
.grid-2{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center}
@media(max-width:680px){.grid-2{grid-template-columns:1fr}}

/* Mindestschriftgroessen: Dropdown-Links und Kontakt-Metablock auf 16px */
.drop a{font-size:16px}
.mob-sub a{font-size:16px}
.cc-meta,.contact-card .cc-meta{font-size:16px}
.fcols a{font-size:16px}

/* Lesbarer Fliesstext nirgends unter 16px (Ausnahmen: Eyebrows, Badges,
   Mikro-Meta wie Rollen unter Namen). */
.step-body p,.usp-item,.svc p,.feat p,.aust-item,.immo-contact-info,
.sv-argument p,.sticky-cta,.testi-author strong,.card .loc,.card .specs,
.blog-card p,.team-card p,.faq-a,.immo-usps .usp-item,.price-prov,
.massow-inhalt ul li,.massow-inhalt ol li{font-size:16px}
.svc p,.feat p,.step-body p,.blog-card p{line-height:1.62}
.btn,.cta-link,.count,.sortsel{font-size:16px}
.qchip,.chip,.testi-text,.wpcf7 p,.wpcf7-list-item-label,.fbrand p,.fbottom{font-size:16px}
@media(max-width:680px){.nav-cta .btn{font-size:14px}}

/* Objektzahl auf den Kategorie-Kacheln war auf hellen Bildern nicht lesbar:
   Verlauf frueher ansetzen + leichter Schatten. */
.kat::after{background:linear-gradient(180deg,rgba(15,27,45,.10) 18%,rgba(15,27,45,.62) 56%,rgba(15,27,45,.92))}
.kat-count{text-shadow:0 1px 6px rgba(0,0,0,.5)}
.kat-body h3,.kat-body p{text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* ═══════════════════════════════════════════════════════════════
   v4a: UNTERSEITEN
   Der alte Seitenkopf war ein flacher Bildbalken mit einer Zeile
   darauf, der Inhalt darunter reiner Fliesstext. Beides ersetzt.
   ═══════════════════════════════════════════════════════════════ */

/* ── Seitenkopf: Text links, Bild rechts ─────────────────────── */
.pg-head{background:var(--white);padding:150px 0 90px;position:relative}
.pgh-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:70px;align-items:center}
.pgh-text .eyebrow{display:block;margin-bottom:18px}
.pgh-text h1{font-size:clamp(36px,4.6vw,60px);font-weight:600;letter-spacing:-.028em;line-height:1.06;margin-bottom:22px;max-width:15ch}
.pg-head .pg-lead{font-size:19px;line-height:1.68;color:var(--ink-soft);opacity:1;max-width:46ch;margin-bottom:34px;font-weight:400}
.pgh-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline{background:transparent;border-color:rgba(15,27,45,.22);color:var(--ink)}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.pgh-meta{display:flex;gap:44px;margin-top:44px;padding-top:32px;border-top:1px solid var(--line);flex-wrap:wrap}
.pgh-meta b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pgh-meta span{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pgh-img{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.pgh-img img{width:100%;height:100%;object-fit:cover}

/* ── Fliesstext: Karten statt Aufzaehlungen ──────────────────── */
.page-body{padding:96px 0 0}
.massow-inhalt h2{font-size:clamp(26px,3.2vw,40px);margin:64px 0 20px}
.rich-lead{font-size:19px!important;line-height:1.7!important;color:var(--ink-soft)}
.rich-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px 0 8px}
.rich-card{background:#fff;border-radius:var(--radius);padding:26px 26px 28px;box-shadow:var(--shadow-sm)}
.rc-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gold);color:#fff;margin-bottom:16px}
.rc-ic svg{display:block}
.rich-card b{display:block;font-size:18px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.rich-card p{font-size:16px!important;line-height:1.62!important;color:var(--muted);margin:0!important}
.rich-links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0 8px}
.rich-link{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-sm);font-size:17px;font-weight:600;color:var(--ink);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s}
.rich-link:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--gold-dark)}
.rich-link i{font-style:normal;font-size:20px;color:var(--gold);transition:transform .28s}
.rich-link:hover i{transform:translateX(6px)}

/* Abstand vor dem dunklen Suchband: der Button klebte vorher daran */
.page-body{padding-bottom:96px}
.page-body + .srch-band{margin-top:0}
.cta-link{margin-top:34px}

@media(max-width:980px){
  .pg-head{padding:118px 0 64px}
  .pgh-grid{grid-template-columns:1fr;gap:40px}
  .pgh-text h1{max-width:100%}
  .pgh-img{aspect-ratio:16/10;order:-1}
  .page-body{padding:64px 0}
  .rich-cards,.rich-links{grid-template-columns:1fr}
}
@media(max-width:680px){
  .pg-head{padding:100px 0 48px}
  .pgh-meta{gap:26px;margin-top:32px;padding-top:24px}
  .pgh-meta b{font-size:19px}
  .pgh-actions .btn{flex:1 1 100%}
  .massow-inhalt h2{margin:46px 0 16px}
}

/* Menue nach Vorhaben: laengere Labels, deshalb enger gesetzt und der
   Umschaltpunkt zum Burger-Menue frueher. */
.menu{gap:22px;font-size:15.5px;margin-right:18px}
.wrap.nav{max-width:1280px}
@media(max-width:1150px){
  .menu{display:none}
  .burger{display:flex;align-items:center;justify-content:center}
}

/* Karten-Grid im Fliesstext: letzte Karte bei ungerader Anzahl ueber die
   volle Breite, sonst steht sie allein und wirkt wie ein Fehler. */
.rich-cards .rich-card:last-child:nth-child(odd){grid-column:1/-1}
.rich-links .rich-link:last-child:nth-child(odd){grid-column:1/-1}

/* Kein horizontaler Scroll: das geschlossene Off-Canvas-Menue liegt
   rechts ausserhalb des Viewports und schob die Seite sonst auf. */
html,body{overflow-x:hidden}
/* Team-Grid traegt einen Inline-Style mit zwei Spalten, der auf Mobile
   ueberschrieben werden muss, sonst ragt die zweite Karte heraus. */
@media(max-width:680px){
  .team-grid{grid-template-columns:1fr!important}
}
.massow-inhalt strong,.massow-inhalt p strong{font-size:inherit}
.massow-inhalt > p{font-size:16.5px}

/* ═══════════════════════════════════════════════════════════════
   KONTAKTFORMULAR (Contact Form 7)
   Die Formulare liefen bis 02.08.2026 komplett ungestylt aus, also
   mit Browser-Standardfeldern. Auf einer Kundenseite unbrauchbar.
   ═══════════════════════════════════════════════════════════════ */
.wpcf7{margin-top:26px}
.wpcf7 form>p,.wpcf7 .cf7-feld{margin:0 0 16px}
.wpcf7 label{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:7px}

.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 input[type=number],.wpcf7 input[type=date],
.wpcf7 select,.wpcf7 textarea{
  width:100%;font-family:'Outfit',system-ui,sans-serif;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.wpcf7 textarea{min-height:150px;resize:vertical;line-height:1.6}
.wpcf7 select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7689' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--muted);opacity:1}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(187,148,87,.18)}

/* Auswahlfelder (Radio / Checkbox) als anklickbare Chips */
.wpcf7 .wpcf7-radio,.wpcf7 .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:10px}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:9px;margin:0;font-weight:500;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;
  transition:border-color .2s,background .2s}
.wpcf7 .wpcf7-list-item label:hover{border-color:var(--gold)}
.wpcf7 .wpcf7-list-item input[type=radio],.wpcf7 .wpcf7-list-item input[type=checkbox]{
  width:17px;height:17px;accent-color:var(--gold);flex-shrink:0;margin:0;cursor:pointer}
.wpcf7 .wpcf7-list-item-label{font-size:16px}

/* Datenschutz-Zustimmung: keine Chip-Optik, sondern eine ruhige Zeile */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label{background:transparent;border:0;padding:0;
  align-items:flex-start;gap:11px;font-weight:400}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{font-size:16px;line-height:1.55;color:var(--ink-soft)}
.wpcf7 .wpcf7-acceptance a{color:var(--gold-dark);font-weight:600;text-decoration:underline}
.wpcf7 .wpcf7-acceptance input[type=checkbox]{margin-top:3px}

/* Absenden */
.wpcf7 input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;
  font-size:16px;font-weight:600;color:#fff;background:var(--gold);border:0;border-radius:999px;
  padding:15px 34px;cursor:pointer;transition:background .2s,transform .2s;width:auto;margin-top:6px}
.wpcf7 input[type=submit]:hover{background:var(--gold-dark);transform:translateY(-2px)}
.wpcf7 input[type=submit]:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Meldungen */
.wpcf7 .wpcf7-not-valid{border-color:#c0392b}
.wpcf7 .wpcf7-not-valid-tip{font-size:15px;color:#c0392b;margin-top:6px}
.wpcf7 .wpcf7-response-output{font-size:16px;line-height:1.6;border-radius:12px;
  border-width:1px;padding:14px 18px;margin:20px 0 0}
.wpcf7 form.sent .wpcf7-response-output{border-color:#2a7f4f;background:rgba(42,127,79,.08);color:#1f6b40}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{border-color:#c0392b;background:rgba(192,57,43,.07);color:#a8322a}
.wpcf7-spinner{margin-left:12px}

@media(max-width:680px){
  .wpcf7 input[type=submit]{width:100%}
  .wpcf7 .wpcf7-radio,.wpcf7 .wpcf7-checkbox{gap:8px}
}

/* ═══════════════════════════════════════════════════════════════
   DEZENTE EINTRITTSANIMATIONEN (Sven 02.08.2026)
   Kurze Wege, weiche Kurve, nichts hüpft. In einem Block bewegt
   sich nie zweimal dasselbe: Kicker blendet auf, Überschrift
   kommt langsam von links, Karten steigen leicht auf.
   ═══════════════════════════════════════════════════════════════ */
.anim{opacity:0;will-change:opacity,transform}
.anim.sichtbar{opacity:1;transform:none}

/* Überschrift: langsam von links, kurzer Weg */
.anim-left{transform:translateX(-26px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
/* Karten und Blöcke: sanft aufsteigen */
.anim-up{transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
/* Kicker, Unterzeile, Bilder: nur aufblenden, keine Bewegung */
.anim-in{transition:opacity .8s ease}
/* Der Kicker ueber der Ueberschrift kommt leicht von oben (Sven 03.08.2026) */
.anim-down{transform:translateY(-14px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}

/* Wer Bewegung reduziert haben will, bekommt alles sofort und ruhig */
@media(prefers-reduced-motion:reduce){
  .anim,.anim-left,.anim-up,.anim-in,.anim-down{opacity:1!important;transform:none!important;transition:none!important}
}

/* Der Cursor des durchlaufenden Kickers */
.eyebrow.typing{border-right:0;padding-right:0;animation:none}
@keyframes kicker-cursor{0%,100%{border-color:currentColor}50%{border-color:transparent}}
/* Damit der Kicker beim Tippen nicht die Zeile umbricht und alles verschiebt */
.pgh-text .eyebrow,.hero .eyebrow,.sv-hero .eyebrow{display:inline-block;min-height:1.5em}

/* ============================================================
   v4, UMBAU 02.08.2026: RUECKRUF, VERSPRECHEN, PROVISION
   Eigener Layer am Dateiende, damit der Bestand unangetastet
   bleibt und der Umbau rueckholbar ist (wie v3).
   ============================================================ */

/* --- Hero: zweite Handlungsebene unter der Suche --- */
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media(max-width:520px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;min-height:48px}
}

/* --- Unser Versprechen (ersetzt die frueheren Kundenstimmen) --- */
.promise{padding:100px 0;background:var(--white)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.promise-item{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px 28px;transition:.25s}
.promise-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.promise-ic{width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.promise-item h3{font-size:20px;margin-bottom:10px;line-height:1.25}
.promise-item p{font-size:16px;color:var(--muted);line-height:1.6}
@media(max-width:960px){.promise-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.promise{padding:72px 0}.promise-grid{grid-template-columns:1fr;gap:18px}}

/* --- Rueckruf anfordern --------------------------------------
   Drei Felder, mehr nicht. Vorbild: der Rueckruf-Block auf
   malermassow.de. Drei Varianten: karte (Sidebar der Objektseite),
   band (breite Sektion ueber dem Footer), inline (im Fliesstext).  */
.rueckruf{border-radius:22px;background:var(--ink);color:#fff}
.rueckruf-inner{padding:32px 28px}
.rueckruf .eyebrow{color:var(--gold);display:inline-flex;align-items:center;gap:7px;margin-bottom:12px}
.rueckruf h3{font-size:24px;color:#fff;margin-bottom:10px;line-height:1.2}
.rueckruf-text{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:22px;line-height:1.6}
.rueckruf-alt{font-size:16px;color:rgba(255,255,255,.7);margin-top:18px}
.rueckruf-alt a{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(187,148,87,.5)}
.rueckruf-fallback{font-size:17px;color:#fff}
.rueckruf-fallback a{color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:7px;min-height:44px}

/* Formularfelder im dunklen Block */
.rueckruf .wpcf7-form-control-wrap{display:block;margin-bottom:14px}
.rueckruf input[type=text],.rueckruf input[type=tel],.rueckruf input[type=email]{
  width:100%;padding:15px 16px;font-size:16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff}
.rueckruf input::placeholder{color:rgba(255,255,255,.5)}
.rueckruf input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold);background:rgba(255,255,255,.12)}
.rueckruf .wpcf7-list-item{margin:0}
.rueckruf .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.72);line-height:1.5;cursor:pointer}
.rueckruf .wpcf7-acceptance input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--gold)}
.rueckruf .wpcf7-acceptance a{color:var(--gold);text-decoration:underline}
.rueckruf input[type=submit]{
  width:100%;min-height:52px;margin-top:16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--gold);color:#fff;font-size:16px;font-weight:600;transition:.2s}
.rueckruf input[type=submit]:hover{background:var(--gold-dark)}
.rueckruf .wpcf7-not-valid-tip{color:#ffb4a8;font-size:14.5px;margin-top:5px}
.rueckruf .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border-radius:12px;font-size:15.5px;border:1px solid rgba(255,255,255,.3)}

/* Variante: Karte in der Sidebar der Objektseite */
.rueckruf-karte{margin-top:18px}

/* Variante: breites Band ueber dem Footer */
.rueckruf-band{border-radius:0;margin-top:90px}
.rueckruf-band .rueckruf-inner{max-width:1180px;margin:0 auto;padding:64px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;align-items:start}
.rueckruf-band .eyebrow,.rueckruf-band h3,.rueckruf-band .rueckruf-text{grid-column:1}
.rueckruf-band h3{font-size:34px}
.rueckruf-band .wpcf7{grid-column:2;grid-row:1 / span 4}
.rueckruf-band .rueckruf-alt{grid-column:1}
@media(max-width:860px){
  .rueckruf-band .rueckruf-inner{grid-template-columns:1fr;padding:52px 24px}
  .rueckruf-band .wpcf7{grid-column:1;grid-row:auto}
  .rueckruf-band h3{font-size:27px}
}

/* Variante: im Fliesstext einer Unterseite */
.rueckruf-inline{margin:44px 0}

/* --- Provision --------------------------------------------- */
.card-prov{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted);display:flex;align-items:center;gap:7px}
.card-prov-frei{color:var(--gold-dark);font-weight:600}
.badge-frei{background:var(--gold);color:#fff}
.price-prov-frei{color:var(--gold-dark);font-weight:600}
.prov-hinweis{font-size:15px;color:var(--muted);line-height:1.5;margin:12px 2px 18px}

/* --- FAQ auf Unterseiten ------------------------------------ */
.pg-faq{padding:96px 0;background:var(--white)}
.pg-faq .faq-list{max-width:840px;margin:44px auto 0;display:flex;flex-direction:column;gap:14px}
.pg-faq details{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s}
.pg-faq details[open]{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.pg-faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 26px;font-size:19px;font-weight:600;position:relative;line-height:1.35;min-height:44px}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"";position:absolute;right:26px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:.25s}
.pg-faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.pg-faq .faq-body{padding:0 26px 24px;font-size:16.5px;color:var(--muted);line-height:1.7}
@media(max-width:640px){.pg-faq{padding:72px 0}.pg-faq summary{font-size:19px;padding:20px 48px 20px 20px}.pg-faq .faq-body{padding:0 20px 20px}}

/* --- Seniorengerechte Seite ---------------------------------
   Groessere Schrift, groessere Ziele, ruhigere Farben. Gilt nur
   auf dieser einen Seite, nicht global.                         */
.page-senioren .massow-inhalt{font-size:19px;line-height:1.75}
.page-senioren .massow-inhalt h2{font-size:32px;margin-top:44px}
.page-senioren .massow-inhalt li{font-size:19px;line-height:1.7}
.page-senioren .btn{font-size:17px;padding:16px 28px;min-height:52px}
.page-senioren .rueckruf h3{font-size:27px}
.page-senioren .rueckruf input[type=text],
.page-senioren .rueckruf input[type=tel]{font-size:17px;padding:17px 16px}
.page-senioren .rueckruf input[type=submit]{font-size:17px;min-height:56px}
.senior-tel{display:flex;align-items:center;gap:14px;background:var(--white);border:2px solid var(--gold);
  border-radius:18px;padding:22px 26px;margin:32px 0;font-size:22px;font-weight:600;min-height:64px}
.senior-tel span{font-size:16px;font-weight:400;color:var(--muted);display:block}
@media(max-width:640px){.senior-tel{font-size:19px;flex-direction:column;align-items:flex-start;gap:8px}}

/* --- Schritt-fuer-Schritt-Ablauf ---------------------------- */
.ablauf{counter-reset:schritt;display:flex;flex-direction:column;gap:20px;margin:40px 0}
.ablauf .schritt{display:flex;gap:22px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.ablauf .schritt::before{counter-increment:schritt;content:counter(schritt);
  flex:0 0 46px;height:46px;border-radius:50%;background:var(--ink);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600}
.ablauf .schritt b{display:block;font-size:19px;margin-bottom:6px}
.ablauf .schritt p{font-size:16.5px;color:var(--muted);line-height:1.65}
@media(max-width:560px){.ablauf .schritt{flex-direction:column;gap:14px;padding:22px}}

/* --- Lead-Seite Bewertung: Formular steht ganz oben --------- */
.bewertung-lead{padding:80px 0 90px;background:var(--white)}
.bewertung-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.bewertung-text h2{font-size:38px;margin:12px 0 16px;line-height:1.1}
.bewertung-text > p{font-size:17px;color:var(--muted);line-height:1.7}
.bewertung-punkte{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.bewertung-punkte li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.bewertung-punkte li svg{color:var(--gold);flex-shrink:0;margin-top:4px}
.bewertung-alt{margin-top:26px;font-size:16px;color:var(--muted)}
.bewertung-alt a{color:var(--gold-dark);font-weight:600;border-bottom:1px solid rgba(156,122,63,.4)}
.bewertung-form{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:34px 32px;box-shadow:var(--shadow-sm)}
@media(max-width:900px){
  .bewertung-grid{grid-template-columns:1fr;gap:34px}
  .bewertung-text h2{font-size:30px}
  .bewertung-lead{padding:60px 0 70px}
}
@media(max-width:520px){.bewertung-form{padding:24px 20px}}

/* Inhalt ueber die volle Breite, wenn die Sidebar nur ablenkt */
.massow-inhalt-breit{max-width:820px;margin:0 auto}

/* Auf der Lead- und der Seniorenseite gibt es keine Sidebar, deshalb
   darf der Fliesstext dort ruhig etwas groesser sein. */
.layout-lead .massow-inhalt-breit{font-size:17.5px}

/* QA 02.08.2026: alles Lesbare muss mindestens 16px haben (CLAUDE.md).
   Die Navigation lag bei 15,5px, der Hinweistext im alten Kontaktformular
   bei 15px. */
.nav > a, .nav a, .mob-link { font-size: 16px; }
.wpcf7 .cf7-hinweis, .wpcf7-form p > .hinweis, .bw-hinweis { font-size: 16px; line-height: 1.55; }
.wpcf7-form div, .wpcf7-form p { font-size: 16px; }

/* --- Vermarktungsstatus: verkauft und vermietet ---------------
   Referenzen bleiben sichtbar, aber als erledigt erkennbar. Bild in
   Graustufen, Label oben links, kein Link mehr. */
.card-erledigt{cursor:default}
.card-erledigt .ph img{filter:grayscale(1);opacity:.72}
.card-erledigt:hover{transform:none;box-shadow:var(--shadow-sm)}
.card-erledigt:hover .ph img{transform:none}
.card-erledigt .price{color:var(--muted)}
.badge-status{background:var(--ink);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.badge-verkauft{background:#7d2b2b}
.badge-vermietet{background:#2c5340}
.badge-reserviert{background:#8a6a1f}

/* Hinweisband auf der Detailseite eines erledigten Objekts */
.immo-erledigt{background:var(--ink);color:#fff;border-radius:16px;padding:20px 24px;margin-bottom:22px;
  display:flex;gap:14px;align-items:flex-start}
.immo-erledigt b{display:block;font-size:19px;margin-bottom:4px}
.immo-erledigt p{font-size:16px;color:rgba(255,255,255,.8);line-height:1.6}
.immo-erledigt svg{color:var(--gold);flex-shrink:0;margin-top:3px}

/* --- Nachtrag 02.08.2026 (Sven): Menue, Status-Optik --- */

/* "Start" ist der einzige Menuepunkt ohne Untermenue und muss sich
   trotzdem genauso verhalten wie die anderen. */
.menu .menu-top{font-weight:600;font-size:16px;padding:10px 0;position:relative}
.menu .menu-top::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.25s}
.menu .menu-top:hover::after{transform:scaleX(1)}

/* Status-Label: gehoert nach vorn, nicht in den Hintergrund (Sven 02.08.2026).
   Groesser, kraeftige Farbe, eigener Schatten, sitzt ueber dem Bild. */
.badge-status{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;box-shadow:0 6px 18px -6px rgba(15,27,45,.55);
  border:1px solid rgba(255,255,255,.28);z-index:3}
.badge-verkauft{background:#8f2f2f;color:#fff}
.badge-vermietet{background:#25543f;color:#fff}
.badge-reserviert{background:var(--gold);color:#fff}

/* Verkauft und vermietet: deutlich zurueckgenommen, das Objekt ist durch. */
.card-erledigt .ph img{filter:grayscale(1);opacity:.72}

/* Reserviert: NICHT ausgegraut, nur ruhiger. Da laeuft noch etwas,
   das soll man dem Objekt ansehen (Sven 02.08.2026). */
.card-reserviert .ph img{filter:saturate(.75);opacity:.94}
.card-reserviert{border-color:var(--gold)}
.card-reserviert .price{color:var(--ink)}

/* Der Hinweis, warum die Karte nicht klickbar ist. Ohne ihn wirkt sie kaputt. */
.card-hinweis{margin-top:10px;font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.card-reserviert .card-hinweis{color:var(--gold-dark);font-weight:600}

/* Bilder im Fliesstext: brechen die Textwand auf, ohne Inhalt zu kosten. */
.inhaltsbild{margin:44px 0 34px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
.inhaltsbild img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.massow-inhalt-breit .inhaltsbild{margin:40px 0 30px}
@media(max-width:640px){.inhaltsbild{margin:32px 0 26px;border-radius:16px}}

/* QA-Nachlauf 02.08.2026: alles Lesbare auf mindestens 16px (CLAUDE.md). */
.card-hinweis{font-size:16px}
.wpcf7-response-output,.wpcf7-not-valid-tip,.wpcf7 .screen-reader-response{font-size:16px}

/* ============================================================
   ELEMENTOR-ANPASSUNG (02.08.2026)
   Nach dem Wechsel auf Hello Elementor fehlt alles, was vorher
   das eigene Theme gesetzt hat: Schrift, Farben, Abstaende.
   Hello bringt bewusst fast nichts mit. Was hier steht, holt den
   Look der Seite zurueck, ohne Elementor die Kontrolle zu nehmen.
   Sven kann in Elementor weiterhin alles einzeln uebersteuern.
   ============================================================ */

body, .elementor-widget-text-editor, .elementor-widget-heading {
  font-family: 'Outfit', system-ui, sans-serif;
}
body { color: var(--ink); background: var(--paper); line-height: 1.6; }

/* Elementor-Ueberschriften in die Hausfarbe, nicht ins Standardblau */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: 44px; }
.elementor-widget-heading h2.elementor-heading-title { font-size: 34px; }
.elementor-widget-heading h3.elementor-heading-title { font-size: 22px; }

/* Der Kicker ueber der Ueberschrift: kleiner, gold, gesperrt.
   Er kommt als <div>-Ueberschrift aus dem Seitenkopf. */
.elementor-widget-heading div.elementor-heading-title {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
}

/* Fliesstext: Groesse und Zeilenlaenge wie vorher, alles ab 16px */
.elementor-widget-text-editor { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.elementor-widget-text-editor p { margin-bottom: 16px; }
.elementor-widget-text-editor ul { margin: 0 0 18px 20px; }
.elementor-widget-text-editor li { margin-bottom: 10px; }
.elementor-widget-text-editor a { color: var(--gold-dark); font-weight: 600; }

/* Knoepfe im Stil der Seite, auch die von Elementor */
.elementor-button {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  min-height: 48px;
}
.elementor-widget-button { margin-right: 10px; display: inline-block; }

/* Icon-Kacheln (Leistungen auf der Startseite) */
.elementor-widget-icon-box .elementor-icon { color: var(--gold); }
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  font-size: 16px; color: var(--muted); line-height: 1.6;
}

/* Elementor-Inhaltsbreite auf das Raster der Seite bringen */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1180px; }

.elementor-widget-shortcode { width: 100%; }

/* ⚠ HIER STAND DER GRUND FUER DIE FEHLENDEN ABSTAENDE AUF DER GANZEN SEITE
   (gefunden 03.08.2026). Eine Regel setzte bei JEDEM Baustein, der in einer
   Elementor-Sektion steckt, padding oben und unten auf 0:

     .elementor-widget-shortcode .feat-strip, .promise, .pg-faq,
     .teaser-sec, .kats { padding-top:0; padding-bottom:0 }

   Sie stammt aus dem ersten Umbau, als die Elementor-Sektionen selbst noch
   Innenabstand mitbrachten und sich beides addiert haette. Seit die Sektionen
   auf 0 stehen und die Bausteine ihren Abstand selbst mitbringen, hat die
   Regel genau das Gegenteil bewirkt: die Abschnitte klebten aufeinander, am
   auffaelligsten der Argumente-Streifen direkt an der Unterkante der FAQ-Box.
   Nicht wieder einbauen. Wer Abstand aendern will, aendert ihn am Baustein. */

/* Hello Elementor druckt den Seitentitel; unsere Seiten haben ihre eigene H1.
   Der Filter im Plugin schaltet ihn ab, das hier faengt Reste ab. */
.page .entry-title, .page-header .entry-title { display: none; }

/* Sprungmarke von Hello: war 14px, Mindestgroesse ist 16px */
.skip-link { font-size: 16px !important; }

@media (max-width: 900px) {
  .elementor-widget-heading h1.elementor-heading-title { font-size: 33px; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: 27px; }
}

/* --- Dunkle Flaechen: heller Text -------------------------------
   Nach dem Wechsel auf Hello Elementor stand auf dem dunklen Hero und in
   den Abschluss-Baendern dunkler Text auf dunklem Grund, die Fakten-Leiste
   war praktisch unsichtbar. Elementor-Sektionen mit dunklem Hintergrund
   tragen jetzt die Klasse massow-dunkel. */
.massow-dunkel .elementor-heading-title { color: #fff; }
.massow-dunkel .elementor-widget-heading div.elementor-heading-title { color: var(--gold); }
.massow-dunkel .elementor-widget-text-editor { color: rgba(255,255,255,.85); }
.massow-dunkel .elementor-widget-text-editor a { color: var(--gold); }
.massow-dunkel .pgh-meta b { color: #fff; }
.massow-dunkel .pgh-meta span { color: rgba(255,255,255,.7); }
.massow-dunkel .pgh-meta { border-top-color: rgba(255,255,255,.18); }

/* Footer: Links waren gold auf dunkelblau und dadurch schwer zu lesen. */
.ehf-footer .elementor-widget-text-editor { color: rgba(255,255,255,.82); }
.ehf-footer .elementor-widget-text-editor a { color: #e8e2d6; font-weight: 400; }
.ehf-footer .elementor-widget-text-editor a:hover { color: var(--gold); }
.ehf-footer .hfe-copyright-wrapper { color: rgba(255,255,255,.6); font-size: 16px; }

/* Kopfbereich des Headers: Menue in der Hausschrift */
.ehf-header .hfe-nav-menu a { font-family: 'Outfit', system-ui, sans-serif; font-size: 16px; }

/* --- Ueberschriften im Fliesstext festnageln -----------------------
   Nach dem Theme-Wechsel kamen die H2 im Fliesstext weiss auf hellem
   Grund heraus. Die Farbe stammt aus einer Regel ausserhalb dieses
   Stylesheets (Elementor bzw. Hello Elementor laden nach uns), deshalb
   hier ausnahmsweise mit !important. Ohne das ist der halbe Text der
   Unterseiten unlesbar. */
.elementor-widget-text-editor .massow-inhalt h2,
.elementor-widget-text-editor .massow-inhalt h3,
.elementor-widget-text-editor .massow-inhalt h4 { color: var(--ink) !important; }
.elementor-widget-text-editor .massow-inhalt p,
.elementor-widget-text-editor .massow-inhalt li { color: var(--ink-soft) !important; }
.elementor-widget-text-editor .massow-inhalt .rich-card b,
.elementor-widget-text-editor .massow-inhalt .rich-card strong { color: var(--ink) !important; }

/* Hello Elementor bringt eine Sprungmarke "Zum Hauptinhalt springen" mit 14px.
   Sie ist zwar nur beim Tabben sichtbar, aber dann eben lesbar sein. */
.skip-link, .screen-reader-text, a.skip-link.screen-reader-text { font-size: 16px !important; }

/* Letzte QA-Reste 02.08.2026, alles Lesbare auf mindestens 16px.
   Die Sprungmarke kommt vom Header-Footer-Builder und heisst hfe-skip-link,
   nicht skip-link. Deshalb hat die vorherige Regel nicht gegriffen. */
.hfe-skip-link { font-size: 16px !important; }

/* Info-Kaesten im Fliesstext lagen bei 15px. */
.info-box { font-size: 16px; }

/* Beschriftungen der Suchfelder lagen bei 11px. Sie sind versal und gesperrt,
   dafuer erlaubt die Hausregel 11 bis 12,5px; 12,5 ist der sichere Wert. */
.field-label { font-size: 12.5px; }

/* Letzte beide Funde: Provisionszeile auf der Objektkarte und die Unterzeile
   der Kategorie-Kacheln lagen knapp unter 16px.
   Die Feldbeschriftungen der Suche bleiben bei 12,5px: versal und gesperrt,
   dafuer erlaubt die Hausregel 11 bis 12,5px ausdruecklich. */
.card-prov{font-size:16px}
.kat-body p{font-size:16px}

/* --- Fakten-Leiste auf dunklem Grund ------------------------------
   Die Grundregeln setzen .pgh-meta b auf var(--ink) und span auf var(--muted).
   Auf dem dunklen Hero war das praktisch unsichtbar. Die vorherige Regel hatte
   dieselbe Spezifitaet wie das Original und verlor je nach Reihenfolge, deshalb
   hier hoeher gewichtet. */
.massow-dunkel .pgh-meta b,
.elementor-section.massow-dunkel .pgh-meta b { color: #fff !important; }
.massow-dunkel .pgh-meta span,
.elementor-section.massow-dunkel .pgh-meta span { color: rgba(255,255,255,.72) !important; font-size: 12.5px; }
.massow-dunkel .pgh-meta { border-top-color: rgba(255,255,255,.2) !important; justify-content: center; }

/* --- Kopfzeile auf dem Handy --------------------------------------
   Der Elementor-Header stapelte auf schmalen Bildschirmen Logo, Menue-Knopf
   und Kontakt-Knopf untereinander und war dadurch dreimal so hoch wie noetig.
   Auf dem Handy gehoert alles in eine Zeile. */
@media (max-width: 767px) {
  .ehf-header .elementor-section .elementor-container {
    display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
  }
  .ehf-header .elementor-column { width: auto !important; }
  .ehf-header .elementor-column:first-child { flex: 1 1 auto; }
  .ehf-header .elementor-widget-image { text-align: left; }
  .ehf-header .elementor-widget-image img { max-width: 150px; }
  .ehf-header .elementor-widget-button { margin: 0 0 0 10px; }
  .ehf-header .elementor-button { padding: 11px 18px; font-size: 15.5px; min-height: 44px; }
  .ehf-header .hfe-nav-menu__toggle { margin-left: auto; }
}

/* Helle Fakten-Leiste fuer dunkle Abschnitte, gesteuert ueber
   [massow_fakten hell="1"]. */
.pgh-meta-hell b { color: #fff !important; }
.pgh-meta-hell span { color: rgba(255,255,255,.75) !important; }
.pgh-meta-hell { border-top-color: rgba(255,255,255,.22) !important; justify-content: center; }

/* Fakten-Leiste im dunklen Hero der Startseite.
   Der Weg ueber ein Shortcode-Attribut kam nicht an und die Elementor-Klasse
   wird nicht ausgegeben. Die Startseite hat den dunklen Hero aber immer als
   ersten Abschnitt, das ist eindeutig genug und unabhaengig von Elementor. */
body.home .elementor-section:first-of-type .pgh-meta b { color: #fff !important; }
body.home .elementor-section:first-of-type .pgh-meta span { color: rgba(255,255,255,.75) !important; }
body.home .elementor-section:first-of-type .pgh-meta {
  border-top-color: rgba(255,255,255,.22) !important; justify-content: center;
}

/* Elementor gibt Knoepfen die Groessenklasse elementor-size-sm mit 15px.
   Zwei Klassen schlagen die einfache .elementor-button-Regel, deshalb hier
   ausgeschrieben. Mindestgroesse bleibt 16px. */
.elementor-button.elementor-size-xs,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md { font-size: 16px; }

/* Elementor-Spalten muessen auf schmalen Bildschirmen umbrechen duerfen.
   ⚠ Fund 03.08.2026: Elementor setzt die Spalten per Media-Query korrekt auf
   width:100%, der Behaelter ist aber ein Flex-Kasten OHNE Umbruch. Vier
   Spalten mit je 100% werden dann einfach zusammengedrueckt, statt
   untereinander zu rutschen. Sichtbare Folge auf dem Handy: die vier
   Leistungs-Kacheln und die vier Fusszeilen-Spalten standen weiter
   nebeneinander, ein Wort je Zeile, und ragten ueber den rechten Rand hinaus.
   Eine Zeile behebt das fuer die ganze Seite. */
@media (max-width: 1024px) {
  /* !important, weil Elementor und das JEG-Kit spaeter nowrap setzen. */
  .elementor-section .elementor-container { flex-wrap: wrap !important; }
}

/* ⚠ Der eigentliche Uebeltaeter (03.08.2026): Der Header-Footer-Builder liefert
   die Regel `.ehf-header .elementor-column{width:auto!important}` aus. Gemeint
   ist damit nur seine eigene Kopfzeile, die Klasse `ehf-header` haengt aber am
   <body>. Damit galt sie fuer JEDE Spalte der ganzen Seite und hat wegen
   !important auch Elementors eigene Umbruch-Regel geschlagen. Deshalb standen
   auf dem Handy die vier Leistungs-Kacheln und die vier Fusszeilen-Spalten
   weiter nebeneinander, ein Wort je Zeile.
   Wir holen die Umbruch-Regel fuer Seiteninhalt und Fusszeile zurueck. Die
   echte Kopfzeile bleibt ausgenommen, dort ist width:auto richtig: Logo links,
   Menue-Knopf rechts. */
@media (max-width: 767px) {
  /* body.ehf-header davor ist Absicht: die Plugin-Regel `.ehf-header
     .elementor-column` ist ebenfalls !important, es entscheidet also die
     Spezifitaet. Ohne die Body-Klasse verliert unsere Regel. */
  body.ehf-header .site-main .elementor-column,
  body.ehf-header footer .elementor-column { width: 100% !important; }
}


/* ⚠ Namenskollision, gefunden 03.08.2026: Hello Elementor legt den GESAMTEN
   Seiteninhalt in <div class="page-content">. Genau an dieser Klasse hing bis
   heute unser komplettes Fliesstext-CSS (Ueberschriftgroessen, Textfarbe,
   Abstaende, Karten aus Aufzaehlungen). Damit wurde jeder Baustein der Seite
   als Fliesstext gestaltet. Sichtbarste Folge: die vier Leistungs-Kacheln auf
   dunklem Grund bekamen ueber `.page-content h3{color:var(--ink)}` dunkelblaue
   Schrift und waren praktisch unsichtbar. Unser Wrapper heisst deshalb jetzt
   .massow-inhalt, die Theme-Klasse bleibt unberuehrt. Niemals wieder eine
   Klasse benutzen, die das aktive Theme schon fuer etwas anderes vergibt. */

/* =========================================================
   KORREKTUREN NACH DEM THEME-WECHSEL (03.08.2026)
   Alles hier gleicht Unterschiede zwischen dem alten Theme und
   Hello Elementor aus. Jede Regel hat einen konkreten Fund von Sven
   als Anlass.
   ========================================================= */

/* Hello Elementor unterstreicht JEDEN Link. Das alte Theme nicht.
   Betraf Fusszeile, Telefonnummern, E-Mail, Datenschutz-Zeile. */
/* !important und die Elementor-Vorsaetze sind noetig: Hello Elementor und
   Elementor setzen die Unterstreichung mit hoeherer Spezifitaet, eine
   einfache a-Regel verliert. */
body a, body a:hover, body a:focus,
.elementor a, .elementor a:hover,
footer.site a, .btn, .btn:hover { text-decoration: none !important; }
/* Der Datenschutz-Link im Formular bleibt bewusst unterstrichen, er ist eine
   Pflichtangabe und soll als Link erkennbar sein. */
.wpcf7-acceptance a { text-decoration: underline !important; }
/* Im Fliesstext bleibt ein Link trotzdem erkennbar, aber dezent. */
.massow-inhalt p a:not(.btn) { border-bottom: 1px solid rgba(187,148,87,.5); }

/* Logo in der ersten Fusszeilen-Spalte, wie im Original.
   Zwei Fallen: Elementor setzt `.elementor img{height:auto}` und schlaegt
   damit eine einfache Klassenregel, deshalb der Elementor-Vorsatz. Und das
   Logo hat eine dunkelblaue Wortmarke, die auf dem dunklen Grund der
   Fusszeile fast unsichtbar waere, deshalb wird es weiss gefaerbt. */
.fbrand-logo,
.elementor .fbrand-logo {
  display: block; height: 62px; width: auto; margin-bottom: 16px;
  filter: brightness(0) invert(1); opacity: .92;
}

/* Der Rueckruf im Seitenfluss war ueber die volle Breite gezogen, die
   Eingabefelder dadurch armlang. Er ist eine Karte, kein Band. */
.rueckruf-inline { max-width: 760px; margin: 44px auto; border-radius: 22px; }
.rueckruf-inline .rueckruf-inner { padding: 34px 30px; }

/* Die Datenschutz-Zeile stand dunkel auf dunklem Grund und war nicht
   zu lesen. CF7 setzt die Farbe am Label, nicht am Kasten. */
.rueckruf .wpcf7-acceptance label,
.rueckruf .wpcf7-acceptance .wpcf7-list-item-label,
.rueckruf .wpcf7-list-item-label { color: rgba(255,255,255,.82); }
.rueckruf .wpcf7-acceptance a { color: var(--gold); }

/* Zwischen dem letzten Abschnitt und der Fusszeile fehlte jede Luft.
   Wo direkt darueber das Rueckruf-Band steht, bringt das seinen
   eigenen Abstand mit, dort waere es doppelt. */
footer.site { margin-top: 72px; }
.rueckruf-band + footer.site { margin-top: 0; }

/* =========================================================
   SEITENAUFBAU, ÜBERARBEITUNG 03.08.2026 (Sven)
   „Es soll einfach sein, aber ein roter Faden. Logisch aufgebaut."
   ========================================================= */

/* Der Seitenkopf hatte 150px Luft nach oben. Das stammt aus der Zeit, als der
   Header durchsichtig ÜBER dem Inhalt lag. Der Elementor-Header steht jetzt
   als eigene Zeile im Fluss, dadurch war der Abstand doppelt. */
.pg-head { padding: 64px 0 56px; }

/* Text und Bild sollen oben und unten auf einer Linie enden. Vorher war das
   Bild auf ein festes Seitenverhältnis gezwungen und mittig zentriert, dadurch
   ragte es je nach Textlänge oben oder unten heraus. */
.pgh-grid { align-items: stretch; }
.pgh-img  { aspect-ratio: auto; min-height: 440px; height: 100%; }
.pgh-text { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 980px) {
  .pg-head { padding: 44px 0 56px; }
  .pgh-img { aspect-ratio: 16/10; min-height: 0; }
}

/* Der Hero der Startseite hatte denselben doppelten Abstand. */
.hero { padding-top: 88px; }
@media (max-width: 768px) { .hero { padding-top: 64px; } }

/* ---- Ablauf-Block: Schritte links, Bild rechts ----
   Steht direkt unter dem Seitenkopf. Wer auf eine solche Seite kommt, will
   zuerst wissen, wie das Ganze funktioniert, und erst danach etwas ausfüllen. */
.ablauf-sec  { padding: 64px 0 72px; background: var(--white); }
.ablauf-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: stretch; }
.ablauf-text { display: flex; flex-direction: column; justify-content: center; }
.ablauf-text h2 { font-size: clamp(28px,3vw,38px); margin: 14px 0 10px; letter-spacing: -.02em; }
.ablauf-lead { font-size: 17px; color: var(--muted); margin-bottom: 30px; }
.ablauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.ablauf-liste li { display: flex; gap: 18px; align-items: flex-start; }
.ablauf-nr { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--gold);
  color: #fff; font-weight: 600; font-size: 16px; display: grid; place-items: center; margin-top: 2px; }
.ablauf-liste b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.ablauf-liste p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.ablauf-bild { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 440px; }
.ablauf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 980px) {
  .ablauf-sec  { padding: 56px 0; }
  .ablauf-grid { grid-template-columns: 1fr; gap: 36px; }
  .ablauf-bild { min-height: 0; aspect-ratio: 16/10; order: -1; }
}

/* ---- Formular: Beschriftung und Auswahl gehören zusammen ----
   Das <br> hinter der Beschriftung erzeugte eine ganze Leerzeile zwischen
   „Ich suche zum" und den beiden Knöpfen darunter (Svens Fund). */
.wpcf7 label > br { display: none; }
.wpcf7 .wpcf7-radio, .wpcf7 .wpcf7-checkbox { margin-top: 9px; }
.wpcf7 form > p, .wpcf7 .cf7-feld { margin: 0 0 22px; }

/* ---- Argumente-Streifen: ruhiger, kleinere Symbole ----
   Die drei gefüllten Gold-Kacheln waren lauter als die Aussage daneben. */
.feat-ic { width: 40px; height: 40px; border-radius: 11px;
  background: rgba(187,148,87,.12); border: 1px solid rgba(187,148,87,.28); }
.feat-ic svg { color: var(--gold-dark); }
.feat { padding: 22px 26px; }

/* =========================================================
   RHYTHMUS DER ABSCHNITTE (Sven 03.08.2026)
   „Die Abschnitte sollen sich farblich immer wieder absetzen."
   Regel: heller Ton und Weiß wechseln sich ab, und zwei gleich
   gebaute Blöcke stehen nie direkt hintereinander.
   ========================================================= */
.sec-hell { background: var(--paper); }

/* Seitenkopf hell, Ablauf weiß, Formular hell, FAQ weiß, Argumente hell. */
.pg-head      { background: var(--paper); }
.ablauf-sec   { background: #fff; }
.pg-faq       { background: #fff; }
.feat-strip   { background: var(--paper); border-bottom: 0; padding: 68px 0 76px; }
/* Der Streifen stand ohne jeden Abstand unter der FAQ-Box. */
.faq-section + * .feat-strip, .feat-strip { border-top: 1px solid var(--line); }

/* Formular gestapelt: Einleitung mittig darüber, Formular darunter.
   Zwei Spalten standen hier direkt unter dem zweispaltigen Ablauf-Block. */
.bewertung-gestapelt .bewertung-grid { grid-template-columns: 1fr; gap: 26px; }
.bewertung-gestapelt .bewertung-text { text-align: center; max-width: 62ch; margin: 0 auto; }
.bewertung-gestapelt .bewertung-text > p { margin: 0 auto; }
.bewertung-gestapelt .bewertung-form { max-width: 780px; margin: 0 auto; width: 100%; }
.bewertung-gestapelt { padding: 72px 0 84px; }

/* Der Abschluss liegt als Karte auf hellem Grund und ragt in die Fußzeile.
   Er hatte zuletzt einen eigenen dunklen Abschnitt um sich herum, dadurch war
   der Effekt weg und es standen zwei dunkle Flächen übereinander. */
/* Weiss, damit nicht zwei helle Flaechen aneinanderstossen: der
   Argumente-Streifen darueber ist bereits im hellen Ton. */
.cta-sec { background: #fff; padding: 76px 0 0; }
.cta-sec .cta-band { margin-bottom: -70px; }
.cta-sec + footer.site,
.massow-inhalt + footer.site { margin-top: 0; }
@media (max-width: 768px) { .cta-sec .cta-band { margin-bottom: -48px; } }

/* Fußzeilenspalten gleich hoch und gleich ausgerichtet. */
.fcols > div { align-content: start; }

/* Unsere Umriss-Symbole. Ohne diese Regel füllt Hello Elementor sie aus
   (`svg{fill:currentColor}`) und aus einer Uhr wird ein Punkt, aus einem
   Schild ein Klumpen. Genau das waren die „hässlichen Symbole". */
svg.mzw-icon { fill: none !important; stroke: currentColor; }

/* ---- Ablauf als waagerechte Schrittfolge ---- */
.ablauf-reihe { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ablauf-reihe li { position: relative; padding: 0 28px; }
.ablauf-reihe li + li { border-left: 1px solid var(--line); }
.ablauf-nr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: #fff; font-weight: 600; font-size: 17px; margin-bottom: 16px; }
.ablauf-reihe b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.ablauf-reihe p { font-size: 16px; color: var(--muted); line-height: 1.62; }
.ablauf-sec .sec-head { margin-bottom: 44px; }

@media (max-width: 980px) {
  .ablauf-reihe { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .ablauf-reihe li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .ablauf-reihe { grid-template-columns: 1fr; gap: 26px; }
  .ablauf-reihe li { border-left: 0 !important; padding: 0; }
}

/* Der Argumente-Streifen klebte ohne jeden Abstand an der FAQ-Box und
   überdeckte deren untere Kante. */
.pg-faq      { padding: 88px 0 96px; background: #fff; }
.feat-strip  { margin-top: 0; padding: 72px 0 80px; }


/* Die erste Fusszeilen-Spalte wirkte deutlich kuerzer als die drei
   Linkspalten daneben. Sie bekommt etwas mehr Inhalt und Luft. */
.fbrand p { margin-top: 12px; max-width: 34ch; line-height: 1.65; }
.fbrand-rolle { display: block; margin-top: 6px; font-size: 16px; color: rgba(255,255,255,.72); }
.fbrand-tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 19px; font-weight: 600; color: #fff; }
.fbrand-tel svg { color: var(--gold); }
.fbrand-hinweis { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.6); }

/* Der Abschluss ragt sichtbar in die Fusszeile hinein, die abgerundeten
   Ecken liegen im Dunklen.

   ⚠ Der erste Versuch lief ueber margin-bottom:-84px an der Karte. Das hat
   nur 12px gebracht: die Elementor-Huellen um den Baustein herum behalten
   ihre eigene Hoehe, der negative Abstand der Karte verkleinert sie nicht.
   Deshalb jetzt andersherum: die FUSSZEILE wird nach oben gezogen und
   bekommt oben so viel Innenabstand, dass ihre Spalten frei bleiben. Die
   Karte braucht dazu nur einen hoeheren z-index, sonst malt die spaeter im
   Dokument stehende Fusszeile darueber. */
/* ⚠ Der z-index gehoert an die KARTE, nicht an den Abschnitt. Lag er am
   Abschnitt, wurde dessen weisser Hintergrund mit angehoben und hat die
   hochgezogene Fusszeile genau in dem Bereich wieder verdeckt, in dem die
   Ueberlappung sichtbar sein soll. Die Karte allein anheben, den Abschnitt
   ohne Stapelkontext lassen. */
.cta-sec { position: static; }
.cta-sec .cta-band { margin-bottom: 0; position: relative; z-index: 2; }
footer.site { margin-top: -96px; padding-top: 168px; position: relative; z-index: 1; }
@media (max-width: 768px) {
  footer.site { margin-top: -64px; padding-top: 124px; }
}
/* Wo das Rueckruf-Band direkt ueber der Fusszeile steht, gibt es keine Karte,
   die hineinragen koennte. Dort bleibt die Fusszeile, wo sie hingehoert. */
.rueckruf-band + footer.site { margin-top: 0; padding-top: 64px; }


/* Der Abschluss liegt jetzt in der Inhaltsbreite, der eigene Rand von
   24px daneben ist damit ueberfluessig. */
.cta-sec .wrap > .cta-band { margin-left: 0; margin-right: 0; }

/* =========================================================
   EINE GRÖSSE FÜR ALLE ABSCHNITTS-ÜBERSCHRIFTEN (03.08.2026)
   Die H2 kamen aus fünf verschiedenen Regeln und waren dadurch
   unterschiedlich groß: Suchband 48px, Abschnittskopf 58px,
   Formular 38px, Ablauf 38px, Abschluss 42px. Auf einer Seite
   untereinander sah das nach Zufall aus.
   ========================================================= */
.sec-head h2,
.srch-head h2,
.ablauf-sec h2,
.bewertung-text h2,
.pg-faq .sec-head h2,
.cta-band h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
}
@media (max-width: 900px) {
  .sec-head h2, .srch-head h2, .ablauf-sec h2,
  .bewertung-text h2, .pg-faq .sec-head h2, .cta-band h2 { font-size: 30px; }
}

/* ---- Formularfelder: überall derselbe Abstand ----
   Beschriftung zu Feld 9px, Feld zu Feld 22px. Vorher hatten nur die
   Auswahlgruppen einen Abstand zur Beschriftung, die Textfelder klebten dran. */
.wpcf7 label { margin-bottom: 0; }
.wpcf7 label > br { display: none; }
.wpcf7 .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox { display: block; margin-top: 9px; }
.wpcf7 form > p,
.wpcf7 .cf7-feld { margin: 0 0 22px; }
/* Die Datenschutz-Zeile ist keine Beschriftung mit Feld darunter,
   sondern eine Zeile mit Kästchen davor. */
.wpcf7 .wpcf7-acceptance .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-acceptance { margin-top: 0; }

/* Der Abschluss darf etwas breiter sein als der Inhalt der Fußzeile,
   sonst stehen zwei gleich breite Kanten direkt übereinander. */
.cta-sec .wrap { max-width: 1300px; }

/* Nur noch halb so tief in die Fußzeile, das wirkt ruhiger. */
footer.site { margin-top: -48px; padding-top: 120px; }
@media (max-width: 768px) { footer.site { margin-top: -34px; padding-top: 96px; } }

/* Die Fakten-Leiste war ein Flex-Streifen mit 44px Abstand. Seit dort
   „Projekte am Bau begleitet" steht, passte die dritte Angabe nicht mehr
   in die Zeile und rutschte darunter. Als Dreier-Raster bleiben alle drei
   nebeneinander, die Unterzeile darf umbrechen. */
.pgh-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; align-items: start; }
.pgh-meta span { display: block; line-height: 1.4; }
@media (max-width: 640px) {
  .pgh-meta { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .pgh-meta span { font-size: 12.5px; }
}

/* =========================================================
   BILD LINKS, TEXT RECHTS (03.08.2026)
   Der Argument-Block der Unterseiten. Bewusst gespiegelt zum
   Seitenkopf (dort Text links, Bild rechts), sonst stehen zwei
   gleich gebaute Blöcke auf einer Seite und sie liest sich wie
   eine Vorlage. Hintergrund hell, damit der Farbwechsel
   hell/weiß über die Seite durchläuft.
   ========================================================= */
.bildtext-sec  { background: var(--paper); padding: 88px 0; }
.bildtext-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.bildtext-bild { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.bildtext-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bildtext-text .eyebrow { display: block; margin-bottom: 16px; }
.bildtext-text h2 { margin: 0 0 18px; }
.bildtext-text > p { font-size: 17px; line-height: 1.72; color: var(--ink-soft); }
.bildtext-punkte { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.bildtext-punkte li { display: flex; align-items: flex-start; gap: 11px; font-size: 16.5px; line-height: 1.5; }
.bildtext-punkte svg { color: var(--gold-dark); flex: 0 0 auto; margin-top: 3px; }
.bildtext-fuss { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 16px; line-height: 1.7; color: var(--muted); }
.bildtext-fuss a { color: var(--gold-dark); font-weight: 600; }

@media (max-width: 900px) {
  /* Bild zuerst, sonst steht auf dem Handy ein Textblock ohne Anker oben. */
  .bildtext-sec { padding: 64px 0; }
  .bildtext-grid { grid-template-columns: 1fr; gap: 34px; }
  .bildtext-bild img { aspect-ratio: 16/10; }
}