/*!
Theme Name: Muckel & Smit
Theme URI: https://www.muckelundsmit.de
Author: Muckel & Smit Immobilien GbR
Author URI: https://www.muckelundsmit.de
Description: Custom WordPress Theme für Muckel & Smit Immobilienmakler im Kreis Viersen. Pixel-genaue Migration vom HTML-Dummy mit Gold/Schwarz/Off-White Farbschema, Cormorant Garamond + DM Sans Schriften und Apple-inspirierter Ästhetik.
Version: 1.0.5.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muckel-smit
Tags: real-estate, custom-design, gold-accent

────────────────────────────────────────────────────────────────────────
HINWEIS ZU !important:
Verbliebene !important-Deklarationen befinden sich ausschließlich in
Mobile-Overrides (@media max-width: 768px / 480px). Sie überschreiben
Inline-Styles aus dem migrierten Content. Nach Bereinigung der Inline-
Styles im Editor können diese ebenfalls entfernt werden.
────────────────────────────────────────────────────────────────────────
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. LOKALE WEBFONTS
   WOFF2-Dateien gehören in /fonts/ — Details siehe fonts/README.txt
   ═══════════════════════════════════════════════════════════════════════ */

/* === Cormorant Garamond — Display Font === */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 105%;
  src: url('fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  size-adjust: 105%;
  src: url('fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  size-adjust: 105%;
  src: url('fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === DM Sans — Body Font === */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-v17-latin_latin-ext-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-v17-latin_latin-ext-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. THEME-STYLES — übernommen aus HTML-Dummy
   ═══════════════════════════════════════════════════════════════════════ */

:root{--black:#111110;
--off-white:#F7F5F0;
--warm-gray:#E8E4DC;
--mid-gray:#9E9B94;
--light-gray:#F0EDE6;
--gold:#B8935A;
--gold-light:#D4A96A;
--gold-pale:#F5ECD9;
--success:#2D6A4F;
--font-display:'Cormorant Garamond',Georgia,serif;
--font-body:'DM Sans',system-ui,sans-serif;
--max-w:1200px;
--pad:clamp(20px,5vw,60px);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0.0, 0.8, 0.0);
--ease-inout: cubic-bezier(0.45, 0, 0.15, 1);
--ease-spring:cubic-bezier(0.22, 1.0, 0.36, 1.0);
--dur-fast: .35s;
--dur-base: .75s;
--dur-slow: 1.1s;}

html{scroll-behavior:smooth;margin:0;padding:0;color-scheme:light only}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-body);background:var(--off-white);color:var(--black);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;width:100%}







/* ══════════════════════════════════
HEADER
══════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:100;background:var(--black);height:70px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,0.06);gap:24px}
.logo{font-family:var(--font-display);font-size:24px;font-weight:400;color:#fff;text-decoration:none;letter-spacing:.06em;cursor:pointer;line-height:1;white-space:nowrap;flex-shrink:0;display:block;background:none;border:none;padding:0;margin:0}
.logo span{color:var(--gold);font-size:17px;font-weight:300;font-style:italic;margin:0 5px;vertical-align:0px}
.nav{display:flex;align-items:center;gap:28px;justify-content:center;min-width:0}
.nav-link{color:rgba(255,255,255,.6);font-size:13px;font-weight:400;text-decoration:none;letter-spacing:.04em;cursor:pointer;transition:color .2s;background:none;border:none;font-family:var(--font-body)}
.nav-link:hover{color:#fff}
.nav-link.active{color:#fff}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--black);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:16px 0 8px;min-width:220px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:200}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:all}
.nav-dropdown-item{display:block;padding:10px 20px;color:rgba(255,255,255,.6);font-size:13px;cursor:pointer;transition:color .2s;background:none;border:none;font-family:var(--font-body);width:100%;text-align:left}
.nav-dropdown-item:hover{color:#fff;background:rgba(255,255,255,.04)}
.header-cta{background:var(--gold);color:var(--black);border:none;padding:10px 22px;border-radius:980px;font-family:var(--font-body);font-size:13px;white-space:nowrap;flex-shrink:0;font-weight:500;cursor:pointer;transition:background .2s;white-space:nowrap}
.header-cta:hover{background:var(--gold-light)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1.5px;background:#fff;transition:all .25s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:900px){.site-header{grid-template-columns:auto auto;justify-content:space-between;gap:12px;padding:0 16px}.nav{display:none}.header-cta{display:none}.hamburger{display:flex}}

/* MOBILE DRAWER */
.mobile-drawer{position:fixed;inset:0;top:70px;background:var(--black);z-index:90;padding:clamp(24px,5vw,40px) var(--pad) 40px;overflow-y:auto;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.mobile-drawer.open{transform:translateX(0)}
.mobile-nav-section{margin-bottom:8px}
.mobile-nav-link{display:block;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.07);padding:18px 0;font-family:var(--font-body);font-size:18px;font-weight:400;color:rgba(255,255,255,.75);text-align:left;cursor:pointer;transition:color .2s;letter-spacing:-.01em}
.mobile-nav-link:hover{color:var(--gold)}
.mobile-nav-sub{padding:8px 0 8px 12px;display:flex;flex-direction:column;gap:2px}
.mobile-nav-sub-link{background:none;border:none;padding:10px 0;font-family:var(--font-body);font-size:14px;color:rgba(255,255,255,.45);cursor:pointer;text-align:left;transition:color .2s}
.mobile-nav-sub-link:hover{color:var(--gold)}
.mobile-nav-footer{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px}
.mobile-nav-phone{font-family:var(--font-display);font-size:24px;color:var(--gold);font-weight:600}
.mobile-nav-hours{font-size:12px;color:rgba(255,255,255,.3);margin-top:4px}

/* ══════════════════════════════════
STARTSEITE
══════════════════════════════════ */
/* Hero */
.hero{background:var(--black);padding:clamp(32px,4vw,56px) var(--pad) clamp(32px,4vw,56px)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;max-width:var(--max-w);margin:0 auto}
@media(max-width:768px){.hero{padding:48px 18px 56px}.hero-inner{grid-template-columns:1fr;gap:36px}.hero-display{font-size:clamp(40px,7.5vw,56px) !important;margin-bottom:18px;hyphens:none}.hero-sub{margin-bottom:28px;font-size:15px}.hero-actions{margin-bottom:32px;gap:10px}.hero-actions .btn-primary,.hero-actions .btn-outline{flex:1 1 auto;justify-content:center}.hero-stats{flex-wrap:nowrap;gap:0;padding-top:20px}.hero-stat-num{font-size:22px}.hero-stat-label{font-size:11px}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:12px}
.hero-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
.hero-display{font-family:var(--font-display);font-size:clamp(40px,6vw,80px);font-weight:600;line-height:1.1;color:#fff;margin-bottom:14px;letter-spacing:-.02em;hyphens:none}
.hero-display em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:clamp(14px,1.4vw,16px);color:rgba(255,255,255,.55);line-height:1.75;margin-bottom:16px;max-width:500px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{background:var(--gold);color:var(--black);border:none;padding:14px 28px;border-radius:980px;font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.btn-primary:hover{background:var(--gold-light);transform:scale(1.02)}
.btn-outline{background:transparent;color:rgba(255,255,255,.75);border:none;padding:14px 4px;font-family:var(--font-body);font-size:14px;font-weight:400;cursor:pointer;transition:color .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-outline:hover{color:#fff}
.hero-stats{display:flex;gap:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);margin-bottom:24px;align-items:center}
.hero-stat-link{text-decoration:none;color:inherit;transition:opacity .2s}
.hero-stat-link:hover{opacity:.75}
.hero-stat-divider{width:1px;height:28px;background:rgba(255,255,255,.12);margin:0 20px;flex-shrink:0}
.hero-stat-num{font-family:var(--font-display);font-size:clamp(22px,2.5vw,28px);font-weight:600;color:#fff;line-height:1}
.hero-stat-label{font-size:11px;color:rgba(255,255,255,.4);margin-top:4px;line-height:1.3}

/* Hero Visual */
.hero-visual{position:relative}
.hero-img-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-img-placeholder{text-align:center;padding:40px}
.hero-img-placeholder p{font-family:var(--font-display);font-size:18px;color:rgba(255,255,255,.3);margin-top:12px;font-style:italic}
.hero-badge{position:absolute;bottom:-20px;left:-20px;background:var(--gold);color:var(--black);padding:16px 20px;border-radius:4px}
.hero-badge-num{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1}
.hero-badge-text{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* Trust bar */
.trust-bar{background:var(--warm-gray);padding:16px var(--pad)}
.trust-bar-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}
.trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--black)}
.trust-icon{width:26px;height:26px;background:var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon svg{width:12px;height:12px;color:var(--gold)}
.trust-sep{color:var(--mid-gray);font-size:16px}

/* Section base */
.section{padding:clamp(80px,10vw,120px) var(--pad)}
.section-inner{max-width:var(--max-w);margin:0 auto;width:100%}
.section-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:16px}
.section-title{font-family:var(--font-display);font-size:clamp(26px,3.5vw,44px);font-weight:600;color:var(--black);line-height:1.15;margin-bottom:20px;hyphens:none}
.section-sub{font-size:17px;color:var(--mid-gray);max-width:560px;line-height:1.8;margin-bottom:40px;font-weight:300}
.title-white{color:#fff}
.sub-white{color:rgba(255,255,255,.5)}

/* Leistungen */
.leistungen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:700px){.leistungen-grid{grid-template-columns:1fr}}
.leistung-card{background:#fff;padding:clamp(40px,5vw,60px) clamp(32px,4vw,48px);cursor:pointer;transition:background .2s;position:relative;overflow:hidden}
.leistung-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--black);transform:scaleX(0);transition:transform .3s}
.leistung-card:hover{background:var(--light-gray)}
.leistung-card:hover::after{transform:scaleX(1)}
.leistung-num{font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--warm-gray);line-height:1;margin-bottom:20px}
.leistung-icon{width:48px;height:48px;border-radius:12px;background:rgba(184,147,90,.1);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.leistung-icon svg{width:22px;height:22px;color:var(--gold);opacity:1}
.leistung-title{font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--black);margin-bottom:12px;letter-spacing:-.01em}
.leistung-desc{font-size:14px;color:var(--mid-gray);line-height:1.75;margin-bottom:20px}
.leistung-link{font-size:13px;font-weight:500;color:var(--black);display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font-family:var(--font-body);transition:opacity .2s}

/* USP dark section */
.usp-section{background:var(--black);padding:clamp(80px,10vw,130px) var(--pad)}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06)}
@media(max-width:700px){.usp-grid{grid-template-columns:1fr;gap:0;background:transparent}}
.usp-item{background:var(--black);padding:clamp(40px,5vw,64px) clamp(32px,4vw,52px)}
.usp-icon-wrap{width:48px;height:48px;border-radius:12px;background:rgba(184,147,90,.1);display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.usp-icon-wrap svg{width:22px;height:22px;color:var(--gold)}
.usp-title{font-family:var(--font-display);font-size:24px;font-weight:600;color:#fff;margin-bottom:14px;line-height:1.2}
.usp-desc{font-size:14px;color:rgba(255,255,255,.45);line-height:1.8}

/* Reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:700px){.reviews-grid{grid-template-columns:1fr}}
.review-card{background:#fff;padding:clamp(28px,3vw,40px);border-radius:16px}
.review-stars{color:var(--gold);letter-spacing:2px;margin-bottom:16px;font-size:14px}
.review-text{font-size:15px;font-style:italic;color:var(--black);line-height:1.75;margin-bottom:20px}
.review-author{font-size:13px;font-weight:500;color:var(--mid-gray)}
.review-cta{text-align:center;margin-top:32px}
.review-cta a{color:rgba(255,255,255,.5);font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:3px}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:800px}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.team-card{background:#fff;border-radius:16px;overflow:hidden}
.team-img{aspect-ratio:3/2;background:var(--warm-gray);display:flex;align-items:center;justify-content:center}
.team-img-ph{text-align:center}
.team-img-ph svg{width:48px;height:48px;color:var(--mid-gray)}
.team-info{padding:24px 28px}
.team-name{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--black);margin-bottom:4px}
.team-role{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.team-bio{font-size:14px;color:var(--black);line-height:1.75;margin-bottom:12px}
.team-quote{font-size:14px;color:var(--mid-gray);line-height:1.7;font-style:italic;border-left:2px solid var(--warm-gray);padding-left:14px;margin-top:12px}
.ueber-story{margin-bottom:60px}
.ueber-story-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:28px}
.ueber-story-text p{font-size:16px;color:var(--mid-gray);line-height:1.8;margin:0}
@media(max-width:768px){.ueber-story-text{grid-template-columns:1fr}}
.ueber-warum{margin-top:64px;padding-top:56px;border-top:1px solid var(--warm-gray)}

/* CTA Banner */
.cta-banner{background:var(--black);padding:clamp(60px,8vw,100px) var(--pad)}
.cta-banner-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
@media(max-width:700px){.cta-banner-inner{flex-direction:column;align-items:flex-start}.cta-banner-actions{align-items:flex-start}}
.cta-banner-title{font-family:var(--font-display);font-size:clamp(32px,4vw,52px);font-weight:600;color:#fff;line-height:1.1;margin-bottom:12px;hyphens:none}
.cta-banner-sub{font-size:15px;color:rgba(255,255,255,.5)}
.cta-banner-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex-shrink:0}
@media(max-width:700px){.cta-banner-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex-shrink:0}}
.cta-phone{font-family:var(--font-display);font-size:26px;color:#fff;text-decoration:none;display:block}
.cta-phone-sub{font-size:11px;color:rgba(255,255,255,.35);text-align:right;margin-top:4px}

/* ══════════════════════════════════
VERKAUFEN PAGE
══════════════════════════════════ */
.page-hero{background:var(--black);padding:clamp(80px,10vw,130px) var(--pad) clamp(60px,8vw,100px)}
.page-hero-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media(max-width:768px){.page-hero-inner{grid-template-columns:1fr}}
.page-hero-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.page-hero-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(32px,5vw,60px);font-weight:600;color:#fff;line-height:1.1;margin-bottom:22px;hyphens:none}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:36px}

/* Process steps */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr};.process-grid .process-arrow{display:none}}
@media(max-width:500px){.process-grid{grid-template-columns:1fr}}
.process-step{background:#fff;padding:32px 24px;text-align:center;position:relative}
.process-step-num{width:40px;height:40px;border-radius:50%;background:var(--gold-pale);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);margin:0 auto 18px}
.process-step-title{font-size:14px;font-weight:500;color:var(--black);margin-bottom:10px}
.process-step-desc{font-size:12px;color:var(--mid-gray);line-height:1.7}
.process-arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;background:var(--warm-gray);border-radius:50%;display:flex;align-items:center;justify-content:center}
.process-arrow svg{width:12px;height:12px;color:var(--mid-gray)}

/* FAQ */
.faq-list{border-top:1px solid var(--warm-gray)}
.faq-item{border-bottom:1px solid var(--warm-gray)}
.faq-q{width:100%;background:none;border:none;padding:22px 0;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--black);cursor:pointer;text-align:left;gap:20px}
.faq-q svg{width:18px;height:18px;color:var(--mid-gray);flex-shrink:0;transition:transform .3s}
.faq-item.open .faq-q svg{transform:rotate(45deg)}

/* ══════════════════════════════════
LANDINGPAGE (Willich/Viersen)
══════════════════════════════════ */
.lp-hero{background:var(--black);padding:clamp(80px,10vw,130px) var(--pad) clamp(60px,8vw,100px)}
.lp-hero-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
@media(max-width:768px){.lp-hero-inner{grid-template-columns:1fr}}
.local-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(184,147,90,.12);border:1px solid rgba(184,147,90,.3);border-radius:4px;padding:6px 14px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.local-tag svg{width:12px;height:12px}
.lp-h1{font-family:var(--font-display);font-size:clamp(32px,5vw,60px);font-weight:600;color:#fff;line-height:1.1;margin-bottom:22px;hyphens:none}
.lp-h1 em{font-style:italic;color:var(--gold)}
.lp-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:40px}
.lp-checklist{list-style:none;margin-bottom:40px;display:flex;flex-direction:column;gap:12px;padding:0}
.lp-checklist li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:rgba(255,255,255,.7);text-align:left}
.lp-checklist li svg{width:16px;height:16px;min-width:16px;color:var(--gold);flex-shrink:0;margin-top:2px}
.lp-form-card{background:var(--off-white);border-radius:4px;padding:clamp(28px,4vw,44px);box-shadow:0 28px 80px rgba(0,0,0,.4)}
.lp-form-title{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--black);margin-bottom:6px}
.lp-form-sub{font-size:13px;color:var(--mid-gray);margin-bottom:28px}
.lp-form-sub strong{color:var(--success)}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:6px}
.form-input{width:100%;padding:13px 16px;border:1.5px solid var(--warm-gray);border-radius:4px;font-family:var(--font-body);font-size:15px;color:var(--black);background:#fff;transition:border-color .2s;outline:none}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:var(--mid-gray)}
.form-textarea{width:100%;padding:13px 16px;border:1.5px solid var(--warm-gray);border-radius:4px;font-family:var(--font-body);font-size:15px;color:var(--black);background:#fff;transition:border-color .2s;outline:none;resize:vertical;min-height:85px}
.form-textarea:focus{border-color:var(--gold)}
.form-textarea::placeholder{color:var(--mid-gray)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.btn-full{width:100%;background:var(--black);color:#fff;border:none;padding:16px 24px;font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;border-radius:980px;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.btn-full:hover{background:#2a2a28}
.form-note{font-size:11px;color:var(--mid-gray);text-align:center;margin-top:10px}
.form-divider{text-align:center;font-size:12px;color:var(--mid-gray);margin:14px 0;position:relative}
.form-divider::before,.form-divider::after{content:'';position:absolute;top:50%;width:calc(50% - 18px);height:1px;background:var(--warm-gray)}
.form-divider::before{left:0}.form-divider::after{right:0}
.btn-phone{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 20px;border:1.5px solid var(--warm-gray);border-radius:980px;background:#fff;color:var(--black);font-family:var(--font-body);font-size:14px;font-weight:500;text-decoration:none;transition:border-color .2s}
.btn-phone:hover{border-color:var(--gold)}
.btn-phone svg{width:15px;height:15px;color:var(--gold)}

/* Market numbers */
.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media(max-width:600px){.market-grid{grid-template-columns:1fr 1fr}}
.market-card{background:#fff;padding:28px 24px;text-align:center}
.market-num{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--black);line-height:1;margin-bottom:6px}
.market-num span{color:#fff}
.market-label{font-size:12px;color:var(--mid-gray);line-height:1.5}

/* Local text block */
.local-text-block{background:#fff;border-radius:16px;padding:clamp(36px,5vw,56px);margin-top:60px}
.local-text-block h2{font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:600;color:var(--black);margin-bottom:20px;line-height:1.2}
.local-text-block p{font-size:15px;color:var(--mid-gray);line-height:1.85;margin-bottom:16px}
.local-text-block p:last-child{margin-bottom:0}

/* ══════════════════════════════════
BEWERTUNG PAGE
══════════════════════════════════ */
.bewertung-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start;max-width:var(--max-w);margin:0 auto;padding:clamp(50px,6vw,80px) var(--pad)}
@media(max-width:768px){.bewertung-layout{grid-template-columns:1fr}}
.bewertung-tool{background:#fff;border-radius:16px;padding:clamp(28px,4vw,48px)}
.bewertung-tool--accent{position:relative;box-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);border-color:rgba(184,147,90,.25)}
.bewertung-tool--accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#b8935a,#8a6b3d);border-radius:4px 0 0 4px}
.bewertung-tool-eyebrow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:10px}
/* ═══ BEWERTER NEU ═══ */
.bew-progress{display:flex;gap:8px;justify-content:flex-start;margin:0 0 28px}
.bew-dot{width:10px;height:10px;border-radius:50%;background:var(--warm-gray);border:none;padding:0;cursor:pointer;transition:all .25s var(--ease-out)}
.bew-dot.done{background:var(--mid-gray)}
.bew-dot.active{background:var(--gold);width:28px;border-radius:12px}
.bew-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bewx-step{display:none}
.bewx-step.active{display:block;animation:fadeUp .6s var(--ease-out) both}
.bew-q{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--black);margin-bottom:18px}
.bew-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.bew-tile{background:#fafaf8;border:1.5px solid var(--warm-gray);border-radius:4px;padding:22px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font-family:var(--font-body);font-size:14px;color:var(--black);transition:all .2s var(--ease-out)}
.bew-tile svg{width:28px;height:28px;color:var(--mid-gray);transition:color .2s}
.bew-tile:hover{border-color:var(--gold);background:#fff;transform:translateY(-1px)}
.bew-tile.selected{background:var(--black);color:#fff;border-color:var(--black)}
.bew-tile.selected svg{color:var(--gold)}
.bew-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bew-err{display:none;color:var(--error, #c0392b);font-size:12px;margin-top:8px}
.bew-global-error{display:none;background:#fff0f0;color:var(--error, #c0392b);border:1px solid #f5c2c2;border-radius:4px;padding:12px;font-size:13px;margin-bottom:16px;text-align:center}
.bew-nav{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--warm-gray)}
.bew-back{background:none;border:none;color:var(--mid-gray);font-size:13px;cursor:pointer;padding:8px 4px;font-family:var(--font-body)}
.bew-back:hover{color:var(--black)}
.bew-hint{flex:1;text-align:center;font-size:12px;color:var(--mid-gray)}
.bew-nav .btn-primary{flex-shrink:0}
.bew-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mid-gray);line-height:1.5;cursor:pointer;margin-top:6px}
.bew-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold);flex-shrink:0}
.bew-check a{color:var(--black);text-decoration:underline}
.bew-spinner{width:36px;height:36px;border:3px solid var(--warm-gray);border-top-color:var(--gold);border-radius:50%;margin:0 auto;animation:bewspin .8s linear infinite}
@keyframes bewspin{to{transform:rotate(360deg)}}
@media(max-width:600px){.bew-tile-grid{grid-template-columns:1fr 1fr}.bew-nav{flex-wrap:wrap}.bew-hint{order:3;flex-basis:100%;margin-top:8px}}

.bewertung-tool-title{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--black);margin-bottom:8px}
.bewertung-tool-sub{font-size:13px;color:var(--mid-gray);margin-bottom:28px}
.obj-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.obj-btn{padding:18px 12px;border:1.5px solid var(--warm-gray);border-radius:4px;background:#fff;cursor:pointer;text-align:center;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--black);transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px}
.obj-btn:hover,.obj-btn.selected{border-color:var(--gold);background:var(--gold-pale);color:var(--black)}
.obj-btn svg{width:28px;height:28px;color:var(--gold)}
.bewertung-steps{display:flex;gap:6px;margin-bottom:28px}
.bew-step{flex:1;height:3px;background:var(--warm-gray);border-radius:4px}
.bew-step.done{background:var(--gold)}

/* ══════════════════════════════════
ÜBER UNS PAGE
══════════════════════════════════ */
.vision-text{font-family:var(--font-display);font-size:clamp(26px,4vw,48px);font-weight:600;color:var(--black);line-height:1.15;max-width:800px;margin-bottom:48px;hyphens:none}
.vision-text em{font-style:italic;color:var(--gold)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:700px){.values-grid{grid-template-columns:1fr}}
.value-card{background:#fff;padding:clamp(32px,4vw,48px) clamp(28px,3vw,40px);border-radius:16px}
.value-num{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.value-title{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--black);margin-bottom:12px;line-height:1.2}
.value-desc{font-size:14px;color:var(--mid-gray);line-height:1.75}

/* ══════════════════════════════════
KONTAKT PAGE
══════════════════════════════════ */
.kontakt-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);max-width:var(--max-w);margin:0 auto;padding:clamp(70px,9vw,110px) var(--pad)}
@media(max-width:768px){.kontakt-layout{grid-template-columns:1fr}}
.kontakt-info-block{margin-bottom:32px}
.kontakt-info-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.kontakt-info-val{font-size:20px;font-weight:500;color:var(--black);text-decoration:none;display:block;font-family:var(--font-display)}
.kontakt-info-val:hover{color:var(--gold)}
.kontakt-info-sub{font-size:13px;color:var(--mid-gray);margin-top:4px}
.map-placeholder{background:var(--warm-gray);border-radius:16px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;margin-top:32px}
.map-placeholder p{font-size:13px;color:var(--mid-gray);text-align:center}
.nap-block{background:var(--black);border-radius:16px;padding:28px;margin-top:24px}
.nap-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.nap-item:last-child{margin-bottom:0}
.nap-icon{width:32px;height:32px;background:rgba(184,147,90,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nap-icon svg{width:15px;height:15px;color:var(--gold)}
.nap-label{font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.nap-val{font-size:14px;color:#fff}

/* ══════════════════════════════════
BLOG PAGE
══════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-img{aspect-ratio:16/9;background:var(--warm-gray);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-card-img svg{width:40px;height:40px;color:var(--mid-gray)}
.blog-card-body{padding:24px}
.blog-tag{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.blog-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--black);margin-bottom:10px;line-height:1.25}
.blog-excerpt{font-size:13px;color:var(--mid-gray);line-height:1.7;margin-bottom:16px}
.blog-meta{font-size:12px;color:var(--mid-gray);display:flex;gap:12px}
.blog-read-more{font-size:13px;font-weight:400;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:5px;margin-top:14px;text-decoration:none}

/* ══════════════════════════════════
FOOTER
══════════════════════════════════ */
.site-footer{background:#0A0A09;padding:clamp(50px,7vw,80px) var(--pad) 28px}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06)}
@media(max-width:800px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-top{grid-template-columns:1fr}}
.footer-brand{font-family:var(--font-display);font-size:22px;font-weight:400;color:#fff;margin-bottom:14px;display:block;letter-spacing:.06em}
.footer-brand span{color:var(--gold);font-size:16px;font-weight:300;font-style:italic;margin:0 5px;vertical-align:0px}
.footer-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.75;margin-bottom:20px;max-width:280px}
.footer-col-title{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;cursor:pointer;background:none;border:none;font-family:var(--font-body);text-align:left;transition:color .2s}
.footer-links a:hover,.footer-links button:hover{color:rgba(255,255,255,.8)}
.footer-links button{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;cursor:pointer;background:none;border:none;font-family:var(--font-body);text-align:left;transition:color .2s;padding:0}
.footer-contact-item{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.45);margin-bottom:10px}
.footer-contact-item svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.25)}
.footer-legal{display:flex;gap:20px}
.footer-legal a,.footer-legal button{font-size:12px;color:rgba(255,255,255,.25);text-decoration:none}
.footer-legal a:hover,.footer-legal button:hover{color:rgba(255,255,255,.5)}

/* ══ OBJEKTE PAGE ══ */
/* ── Objekte Aktuell USP Grid ── */
.aktuell-usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:56px;max-width:780px}
@media(max-width:600px){.aktuell-usp-grid{grid-template-columns:1fr}}
.aktuell-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.aktuell-preview-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.aktuell-preview-grid{grid-template-columns:1fr}}
.reviews-objekte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.reviews-objekte-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.reviews-objekte-grid{grid-template-columns:1fr}}

/* ── Objekte Tabs + Filter ── */
.objekte-tabs{display:flex;gap:0;border-bottom:1px solid var(--warm-gray);margin-bottom:40px}
.objekte-tab{background:none;border:none;border-bottom:2px solid transparent;padding:14px 24px;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--mid-gray);cursor:pointer;margin-bottom:-1px;transition:all .2s}
.objekte-tab.active{color:var(--black);border-bottom-color:var(--black)}
.objekte-tab-count{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--warm-gray);border-radius:50%;font-size:11px;font-weight:600;color:var(--mid-gray);margin-left:8px}
.objekte-tab.active .objekte-tab-count{background:var(--black);color:#fff}
.objekte-tab-panel{display:none}
.objekte-tab-panel.active{display:block}
.objekte-empty{text-align:center;padding:80px 20px;max-width:520px;margin:0 auto}
.objekte-empty-icon{width:64px;height:64px;background:var(--light-gray);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.objekte-empty-icon svg{width:28px;height:28px;color:var(--mid-gray)}
.objekte-empty h3{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--black);margin-bottom:12px}
.objekte-empty p{font-size:15px;color:var(--mid-gray);line-height:1.8;margin-bottom:28px}
.objekte-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filter-btn{background:#fff;border:1px solid var(--warm-gray);border-radius:980px;padding:8px 18px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--mid-gray);cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-btn:hover{border-color:var(--black);color:var(--black)}
.filter-btn.active{background:var(--black);border-color:var(--black);color:#fff}
.objekt-card.hidden{display:none}
@media(max-width:580px){.objekte-filter{gap:6px}.filter-btn{padding:7px 14px;font-size:12px}.objekte-tab{padding:12px 16px;font-size:14px}}

.objekte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.objekte-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.objekte-grid{grid-template-columns:1fr}}

.objekt-card{background:#fff;border-radius:16px;overflow:hidden;position:relative;transition:transform .2s}
.objekt-card:hover{transform:translateY(-4px)}

.objekt-img{position:relative;aspect-ratio:4/3;background:var(--warm-gray);display:flex;align-items:center;justify-content:center;overflow:hidden}
.objekt-img svg{width:48px;height:48px;color:var(--mid-gray)}
.objekt-img-overlay{position:absolute;inset:0;background:rgba(17,17,16,0.45)}

.verkauft-badge{position:absolute;top:16px;left:16px;background:var(--success);color:#fff;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:4px;display:flex;align-items:center;gap:6px;z-index:2}
.verkauft-badge svg{width:12px;height:12px}

.verkauft-duration{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.85);font-size:11px;padding:5px 10px;border-radius:4px;z-index:2}

.objekt-type-badge{position:absolute;bottom:16px;left:16px;background:var(--black);color:rgba(255,255,255,.8);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:4px;z-index:2}

.objekt-body{padding:24px}
.objekt-location{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.objekt-location svg{width:12px;height:12px}
.objekt-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--black);margin-bottom:14px;line-height:1.2}
.objekt-details{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.objekt-detail{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mid-gray)}
.objekt-detail svg{width:13px;height:13px;color:var(--gold);flex-shrink:0}
.objekt-price-row{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--warm-gray)}
.objekt-price-label{font-size:11px;color:var(--mid-gray);text-transform:uppercase;letter-spacing:.06em}
.objekt-price{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--black)}
.objekt-sold-tag{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--success);background:#f0faf4;padding:4px 10px;border-radius:4px}
.objekt-sold-tag svg{width:12px;height:12px}

.objekte-cta-box{background:var(--black);border-radius:16px;padding:clamp(36px,5vw,56px);margin-top:56px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media(max-width:700px){.objekte-cta-box{grid-template-columns:1fr}}
.objekte-cta-title{font-family:var(--font-display);font-size:clamp(24px,3.5vw,36px);font-weight:600;color:#fff;margin-bottom:10px;line-height:1.2}
.objekte-cta-sub{font-size:15px;color:rgba(255,255,255,.5)}

/* ══ BEWERTUNG SEO TEXT ══ */
.bew-seo-section{background:var(--off-white);padding:clamp(60px,8vw,100px) var(--pad)}
.bew-seo-inner{max-width:var(--max-w);margin:0 auto}
.bew-market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:40px 0}
@media(max-width:700px){.bew-market-grid{grid-template-columns:1fr 1fr}}
.bew-market-card{background:#fff;padding:24px 20px;text-align:center}
.bew-market-num{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--black);line-height:1;margin-bottom:6px}
.bew-market-num span{color:#fff}
.bew-market-label{font-size:12px;color:var(--mid-gray);line-height:1.5}
.bew-text-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:52px}
@media(max-width:700px){.bew-text-cols{grid-template-columns:1fr}}
.bew-text-block h3{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--black);margin-bottom:14px}
.bew-text-block p{font-size:15px;color:var(--mid-gray);line-height:1.85;margin-bottom:12px}
.bew-text-block p:last-child{margin-bottom:0}

/* ── Animations ── */
.fade-in{animation:fadeUp .7s var(--ease-out) both}

/* ── Exposé Section (Verkaufen-Seite) ── */
.expose-section{background:var(--black);padding:clamp(80px,10vw,120px) var(--pad)}
.expose-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,80px);align-items:start}
.expose-title{font-family:var(--font-display);font-size:clamp(26px,3.5vw,44px);font-weight:600;color:#fff;line-height:1.15;margin-bottom:20px;hyphens:none}
.expose-desc{font-size:15px;color:rgba(255,255,255,.55);line-height:1.8}
.expose-section .magazin-label{color:var(--mid-gray)}
@media(max-width:768px){
  .expose-inner{grid-template-columns:1fr;gap:32px}
}

/* ── Magazin Section ── */
.magazin-section{background:var(--off-white);padding:clamp(80px,10vw,120px) var(--pad)}
.magazin-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,80px);align-items:start}
.magazin-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:12px}
.magazin-title{font-family:var(--font-display);font-size:clamp(26px,4vw,44px);font-weight:600;color:var(--black);line-height:1.15;margin-bottom:20px;hyphens:none}
.magazin-desc{font-size:15px;color:var(--mid-gray);line-height:1.8}
.magazin-flip-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.magazin-flip{width:100%;height:540px;border:none;display:block}
@media(max-width:768px){
  .magazin-inner{grid-template-columns:1fr;gap:32px}
  .magazin-flip{height:420px}
}
@media(max-width:480px){
  .magazin-flip{height:320px}
}

/* ── Cookie Banner ── */










@media(max-width:600px){}

/* ── Legal Pages (Impressum, Datenschutz, AGB) ── */
.legal-page{background:var(--off-white);padding:clamp(80px,10vw,120px) var(--pad) clamp(60px,8vw,100px)}
.legal-inner{max-width:780px;margin:0 auto}
.legal-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:16px}
.legal-title{font-family:var(--font-display);font-size:clamp(32px,5vw,52px);font-weight:600;color:var(--black);line-height:1.1;margin-bottom:48px}
.legal-body h2{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--black);margin:40px 0 12px;line-height:1.3}
.legal-body h3{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--black);margin:28px 0 8px}
.legal-body p{font-size:15px;color:var(--mid-gray);line-height:1.85;margin-bottom:14px}
.legal-body a{color:var(--black);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--gold)}
.legal-body strong{color:var(--black);font-weight:500}
.legal-body ul,.legal-body ol{margin:0 0 14px 20px}
.legal-body li{font-size:15px;color:var(--mid-gray);line-height:1.85;margin-bottom:6px}
.legal-divider{height:1px;background:var(--warm-gray);margin:48px 0}
.legal-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--mid-gray);cursor:pointer;background:none;border:none;font-family:var(--font-body);margin-bottom:32px;transition:color .2s}
.legal-back:hover{color:var(--black)}
@media(max-width:768px){.legal-body h2{font-size:18px}}

/* ── Mobile sticky CTA bar ── */

/* ═══ Sticky CTA Bar (mobile only) — EINE saubere Definition ═══ */
.mobile-sticky{
  position:fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left:50%; right:auto;
  transform: translate(-50%, calc(100% + 24px));
  width: calc(100vw - 24px);
  max-width: 400px;
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  gap:0;
  z-index:90;
  padding:8px 4px;
  background: rgba(17,17,16,.92);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.mobile-sticky.visible{ transform: translate(-50%, 0); opacity:1; pointer-events:auto; }
.mobile-sticky.hidden-scroll{ transform: translate(-50%, calc(100% + 24px)); opacity:0; pointer-events:none; }

/* Drei GLEICH GROSSE Bereiche, je Gold-Icon oben + Label drunter, kein Rahmen */
.mobile-sticky-main,
.mobile-sticky-icon{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  text-decoration:none;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:6px 4px;
  width:auto; height:auto; border-radius:0;
  color: var(--gold);
  transition: opacity .15s ease;
}
.mobile-sticky-main:active,
.mobile-sticky-icon:active{ opacity:.55; transform:none; }

/* alle Icons gleich groß, Gold (auch WhatsApp) */
.mobile-sticky-main svg,
.mobile-sticky-icon svg{ width:22px; height:22px; color: var(--gold); flex:none; }
.mobile-sticky-tel,
.mobile-sticky-wa{ background:transparent !important; color: var(--gold) !important; }

/* Labels unter den Icons */
.mobile-sticky .ms-label{
  font-family: var(--font-body);
  font-size:10.5px; font-weight:500; line-height:1.15;
  color: rgba(247,245,240,.92);
  text-align:center; white-space:normal;
}

body.drawer-open .mobile-sticky{ opacity:0 !important; pointer-events:none !important; }

/* Desktop: niemals anzeigen */
@media (min-width: 769px){
  .mobile-sticky{ display:none !important; }
}

/* ── WhatsApp floating button (desktop) ── */
/* ══ BREADCRUMB ══ */
.breadcrumb-bar{background:#F4F1EB;border-bottom:1px solid var(--warm-gray);padding:0 var(--pad)}
.breadcrumb-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:7px;height:34px;font-size:12px;color:var(--mid-gray)}
.breadcrumb-list{list-style:none;display:flex;align-items:center;gap:6px;padding:7px 0;flex-wrap:wrap}
.breadcrumb-item{display:flex;align-items:center}
.breadcrumb-link{display:flex;align-items:center;gap:5px;background:none;border:none;font-family:var(--font-body);font-size:12px;color:var(--mid-gray);cursor:pointer;padding:3px 0;transition:color .2s;letter-spacing:.02em}
.breadcrumb-link svg{flex-shrink:0;opacity:.6}
.breadcrumb-link:hover{color:var(--gold)}
.breadcrumb-sep{display:flex;align-items:center;color:var(--warm-gray);padding:0 2px}
.breadcrumb-sep svg{flex-shrink:0}
.breadcrumb-current{font-size:12px;font-weight:500;color:var(--black);letter-spacing:.02em}
@media(max-width:480px){.breadcrumb-bar{padding:0 20px}.breadcrumb-list{gap:4px}}

.wa-float{position:fixed;bottom:28px;right:28px;z-index:500;width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);cursor:pointer;text-decoration:none;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:26px;height:26px;color:#fff}
/* WhatsApp Float ausblenden — WA sitzt jetzt in der Sticky-Pill */
.wa-float{display:none !important}
@media (max-width: 768px){
  .mobile-sticky{ gap:6px; padding:5px; }
  .mobile-sticky-primary{ font-size:13px; padding:11px 16px; }
}

/* ── Zeitungsformat highlight box ── */
.zeitung-box{background:var(--black);border-radius:4px;padding:clamp(32px,4vw,48px);display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;margin-top:52px}
@media(max-width:600px){.zeitung-box{grid-template-columns:1fr}}
.zeitung-preview{width:120px;height:160px;background:rgba(184,147,90,.08);border:1px solid rgba(184,147,90,.2);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0}
.zeitung-preview svg{width:36px;height:36px;color:var(--gold)}
.zeitung-preview-label{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(184,147,90,.6)}
.zeitung-text h3{font-family:var(--font-display);font-size:26px;font-weight:600;color:#fff;margin-bottom:12px;line-height:1.2}
.zeitung-text p{font-size:14px;color:rgba(255,255,255,.5);line-height:1.8}
.zeitung-text strong{color:rgba(255,255,255,.8);font-weight:500}

/* ── Diskret price label ── */
.diskret-note{font-size:11px;color:var(--mid-gray);font-style:italic;margin-top:4px}

/* ── Proximity note ── */
.proximity-note{display:flex;align-items:center;gap:10px;background:var(--gold-pale);border:1px solid rgba(184,147,90,.2);border-radius:4px;padding:14px 18px;margin-top:28px;font-size:14px;color:var(--black)}
.proximity-note svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}

/* ── Trust ribbon (above hero) ── */
.trust-ribbon{background:var(--gold);padding:9px var(--pad);text-align:center;font-size:13px;font-weight:500;color:var(--black);letter-spacing:.02em}
.trust-ribbon a{color:var(--black);text-decoration:underline;text-underline-offset:2px}

/* ════════════════════════════════════════════════════
APPLE-FEELING ANIMATION SYSTEM
Pure CSS + minimal Vanilla JS – zero external libs
Kein GSAP, kein AOS, kein Performance-Verlust
════════════════════════════════════════════════════ */

/* ── 1. Keyframes ── */
@keyframes fadeUp {from {opacity:0; transform:translateY(20px)} to {opacity:1; transform:translateY(0)}}
@keyframes fadeDown {from {opacity:0; transform:translateY(-14px)} to {opacity:1; transform:translateY(0)}}
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
@keyframes scaleIn {from {opacity:0; transform:scale(.97)} to {opacity:1; transform:scale(1)}}
@keyframes slideInLeft {from {opacity:0; transform:translateX(-16px)} to {opacity:1; transform:translateX(0)}}
@keyframes slideInRight {from {opacity:0; transform:translateX(16px)} to {opacity:1; transform:translateX(0)}}
@keyframes lineGrow {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@keyframes countUp {from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:translateY(0)}}

/* ── 2. Easing tokens ── */

/* ── 3. Hero – einfliegende Elemente ── */
.hero-eyebrow, .hero h1 {animation: fadeDown .9s .05s var(--ease-out) both}
.hero-display {animation: fadeUp 1.0s .15s var(--ease-out) both}
.hero h1,
.lp-h1 {animation: fadeUp .65s .12s var(--ease-out) both}
.hero-sub,
.lp-sub {animation: fadeUp .65s .22s var(--ease-out) both}
.hero-actions {animation: fadeUp .9s .42s var(--ease-out) both}
.hero-metrics,
.hero-badge-row{animation: fadeUp .55s .44s var(--ease-out) both}
.hero-visual {animation: scaleIn .9s .1s var(--ease-out) both}
.lp-checklist {animation: fadeUp .55s .30s var(--ease-out) both}
.lp-form-card {animation: slideInRight .60s .20s var(--ease-out) both}
.page-hero-eyebrow {animation: fadeDown .45s .05s var(--ease-out) both}
.page-hero h1 {animation: fadeUp .60s .10s var(--ease-out) both}
.page-hero-sub {animation: fadeUp .60s .20s var(--ease-out) both}
.page-hero-actions {animation: fadeUp .55s .30s var(--ease-out) both}

/* Reset hero anims when page switches – handled via .page.active */


/* ── 4. Scroll Reveal System ── */
.reveal {opacity: 0;
transform: translateY(36px);
transition:
opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);}
.reveal.visible {opacity: 1;
transform: translateY(0);}

/* Stagger-Varianten */
.reveal-delay-1 {transition-delay: .12s}
.reveal-delay-2 {transition-delay: .24s}
.reveal-delay-3 {transition-delay: .38s}
.reveal-delay-4 {transition-delay: .52s}
.reveal-delay-5 {transition-delay: .68s}

/* Richtungsvarianten */
.reveal-left {transform: translateX(-20px)}
.reveal-right {transform: translateX(20px)}
.reveal-scale {transform: scale(.96)}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {transform: none}

/* Respektiert prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {.reveal,
.hero-eyebrow, .hero h1, .lp-h1,
.hero-sub, .lp-sub, .hero-actions,
.hero-metrics, .hero-visual, .lp-checklist,
.lp-form-card, .page-hero-eyebrow,
.page-hero h1, .page-hero-sub {animation: none;
transition: none;
opacity: 1;
transform: none;}}

/* ── 6. Hover-Effekte – Karten ── */
.leistung-card,
.value-card,
.usp-card,
.review-card,
.blog-card,
.obj-card,
.team-card,
.link-card-item {transition:
transform var(--dur-fast) var(--ease-inout),
box-shadow var(--dur-fast) var(--ease-inout),
background var(--dur-fast) var(--ease-inout);}
.leistung-card:hover,
.value-card:hover,
.review-card:hover,
.blog-card:hover,
.obj-card:hover,
.team-card:hover {transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,.08);}
.link-card-item:hover {transform: translateX(5px)}

/* ── 7. Button Hover ── */
.btn-primary,
.btn-outline,
.btn-secondary,
.header-cta,
.btn-gold {transition:
background var(--dur-fast) var(--ease-inout),
color var(--dur-fast) var(--ease-inout),
transform var(--dur-fast) var(--ease-spring),
box-shadow var(--dur-fast) var(--ease-inout);
will-change: transform;}
.btn-primary:hover,
.header-cta:hover,
.btn-gold:hover {transform: translateY(-1px); box-shadow: 0 6px 20px rgba(184,147,90,.28)}
.btn-primary:active,
.header-cta:active {transform: translateY(0); box-shadow: none}

/* ── 8. Gold underline on links ── */
.nav-link::after {content: '';
display: block;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease-out);
margin-top: 2px;}
.nav-link:hover::after {transform: scaleX(1)}

/* ── 9. Leistung card bottom line ── */
.leistung-card::after {content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .38s var(--ease-out);}
.leistung-card:hover::after {transform: scaleX(1)}

/* ── 10. Smooth image lazy-load fade ── */
img[loading=lazy] {opacity: 0;
transition: opacity .4s var(--ease-out);}
img[loading=lazy].loaded {opacity: 1}

/* ── 11. Trust ribbon scroll indicator ── */
.trust-ribbon-inner {display: flex;
gap: 20px;
animation: marquee 32s linear infinite;
white-space: nowrap;}
@keyframes marquee {0% {transform: translateX(0)}
100% {transform: translateX(-50%)}}
@media (prefers-reduced-motion: reduce) {.trust-ribbon-inner {animation: none}}

/* ── 12. Counter number – animate in ── */
.stat-number,
.counter-num {display: inline-block;
animation: countUp .5s var(--ease-out) both;}

/* ── 13. FAQ smooth open/close ── */
.faq-a {display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height .38s var(--ease-inout),
opacity .28s var(--ease-out),
padding .28s var(--ease-out);
padding-bottom: 0;}
.faq-item.open .faq-a {max-height: 400px;
opacity: 1;
padding-bottom: 22px;}

/* ── 14. Input focus ring ── */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.12);
transition: border-color .2s, box-shadow .2s;}

/* ── 15. Mobile sticky CTA slide-up ── */
/* sticky transform handled in main rule */

/* ════════════════════════════════════════════════
IDENTITY ELEMENTS – einzigartig, nicht Standard
════════════════════════════════════════════════ */

/* /* Trust Badges inline (Formulare) */
.trust-badges-row {display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.trust-badge-inline {display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--gold)}
.trust-badge-inline svg {flex-shrink:0}

/* Zeitungsformat Preview Box */
.zeitung-preview-box {background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius:4px;
padding: clamp(24px,3vw,36px);
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
align-items: center;
margin-top: 32px;}
.zeitung-preview-thumb {width: 80px;
height: 106px;
background: rgba(184,147,90,.06);
border: 1px solid rgba(184,147,90,.2);
border-radius:4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
flex-shrink: 0;}
.zeitung-preview-thumb svg {color: var(--gold); opacity:.7}
.zeitung-preview-thumb-label {font-size: 8px; letter-spacing:.1em; text-transform:uppercase; color:rgba(184,147,90,.5)}
.zeitung-preview-text h4 {font-family:var(--font-display); font-size:20px; font-weight:600; color:#fff; margin-bottom:8px; line-height:1.2}
.zeitung-preview-text p {font-size:13px; color:rgba(255,255,255,.45); line-height:1.75}
.zeitung-preview-text strong {color:rgba(255,255,255,.7); font-weight:500}
@media(max-width:480px) {.zeitung-preview-box {grid-template-columns:1fr} .zeitung-preview-thumb {display:none}}

/* ── Zeitungsreif Dedicated Section ── */
.zt-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,96px);align-items:start;margin-top:40px;padding-top:40px;border-top:1px solid var(--warm-gray)}
@media(max-width:768px){.zt-section{grid-template-columns:1fr;gap:40px}}
.zt-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:14px}
.zt-headline{font-family:var(--font-display);font-size:clamp(26px,3.5vw,40px);font-weight:600;color:var(--black);line-height:1.1;margin-bottom:18px;letter-spacing:-.01em}
.zt-intro{font-size:15px;color:var(--mid-gray);line-height:1.8;margin-bottom:36px}
.zt-intro strong{color:var(--black);font-weight:500}
.zt-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:28px}
.zt-step{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.zt-step-num{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--gold);opacity:.7;padding-top:2px}
.zt-step strong{display:block;font-size:15px;font-weight:500;color:var(--black);margin-bottom:5px}
.zt-step p{font-size:13px;color:var(--mid-gray);line-height:1.75;margin:0}
.zt-visual{position:relative}
.zt-photo-wrap{aspect-ratio:3/4;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zt-badge{margin-top:16px;background:rgba(184,147,90,.08);border:1px solid rgba(184,147,90,.18);border-radius:4px;padding:14px 18px;text-align:center}
.zt-badge-label{display:block;font-size:13px;font-weight:500;color:var(--gold);margin-bottom:3px}
.zt-badge-sub{font-size:12px;color:var(--mid-gray)}

/* Proximity Signal */
.proximity-signal {display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(184,147,90,.08);
border: 1px solid rgba(184,147,90,.18);
border-radius:4px;
padding: 8px 14px;
font-size: 13px;
color: rgba(255,255,255,.6);
margin-top: 20px;}
.proximity-signal svg {color:var(--gold); flex-shrink:0}
.proximity-signal strong {color:#fff; font-weight:500}

/* Signature Trennlinie in Sektionen */
.section-signature {display: flex;
align-items: center;
gap: 16px;
margin-bottom: 48px;}
.section-signature-line {flex: 1;
height: 1px;
background: linear-gradient(to right, var(--gold), transparent);
max-width: 120px;}
.section-signature-text {font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold);
white-space: nowrap;}

/* Anti-generic: kein „Willkommen", kein Stock-Stil */
/* Stattdessen: echte Personen-Badges */
.person-badge {display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius:980px;
padding: 8px 16px 8px 8px;
font-size: 13px;
color: rgba(255,255,255,.7);}
.person-badge-avatar {width: 32px;
height: 32px;
background: var(--gold);
border-radius:50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--black);
flex-shrink: 0;}

/* Review Star row – nicht generisch */
.review-stars-row {display:flex; align-items:center; gap:3px; margin-bottom:14px}
.review-stars-row svg {color:var(--gold)}
.review-platform {font-size:10px; color:var(--mid-gray); margin-left:6px; letter-spacing:.04em}

/* ── Process Steps NEW (Verkaufen) ── */
.process-grid-new {display: flex;
gap: 0;
align-items: flex-start;
margin-top: 8px;}
@media(max-width:900px) {.process-grid-new {flex-wrap:wrap; gap:32px}
.process-connector {display: none}
.process-step-new {width: calc(50% - 16px)}}
@media(max-width:480px) {.process-step-new {width: 100%}}
.process-step-new {display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
flex: 1;
padding: 0 8px 0 0;}
.process-step-num-new {width: 40px;
height: 40px;
border-radius:50%;
border: 1px solid rgba(184,147,90,.3);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--gold);
background: transparent;
flex-shrink: 0;}
.process-step-title-new {font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,.85);
line-height: 1.4;
margin-bottom: 4px;}
.process-step-desc-new {font-size: 12px;
color: rgba(255,255,255,.35);
line-height: 1.65;}
.process-connector {display: flex;
align-items: flex-start;
padding-top: 20px;
flex-shrink: 0;}
.process-connector::after {content: '';
display: block;
width: 16px;
height: 1px;
background: rgba(184,147,90,.25);
margin: 0 6px;}
/* ════ UTILITY CLASSES (replaces inline styles) ════ */
.page-hero-black{background:var(--black);padding:clamp(48px,6vw,72px) var(--pad) clamp(60px,7vw,90px)}
.page-hero-grid{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.page-hero-grid-start{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:768px){.page-hero-grid,.page-hero-grid-start{grid-template-columns:1fr}}
.h1-hero{font-family:var(--font-display);font-size:clamp(32px,5vw,60px);font-weight:600;color:#fff;line-height:1.1;margin-bottom:22px;hyphens:none}
.h1-hero em{font-style:italic;color:var(--gold)}
.h2-section{font-family:var(--font-display);font-size:clamp(26px,3vw,44px);font-weight:600;color:var(--black);margin-bottom:10px;line-height:1.15;hyphens:none}
.h2-section em{font-style:italic;color:var(--gold)}
.h3-card{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--black);margin-bottom:10px}
.card-white{background:#fff;padding:32px;border-radius:16px}
.card-white-sm{background:#fff;padding:24px;border-radius:4px}
.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-2-col-lg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media(max-width:768px){.grid-2-col,.grid-2-col-lg{grid-template-columns:1fr}}
.text-small-gray{font-size:14px;color:var(--mid-gray);line-height:1.75}
.text-sub-white{font-size:16px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:36px}
.eyebrow-gold{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.eyebrow-gold::before{content:'';display:block;width:24px;height:1px;background:var(--gold)}
.icon-gold-32 svg{width:32px;height:32px;stroke:var(--gold);stroke-width:1.5;fill:none;margin-bottom:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mt-28{margin-top:28px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.mb-28{margin-bottom:28px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.mb-60{margin-bottom:60px}
.fw-600{font-weight:600}.color-white{color:#fff}.color-gold{color:var(--gold)}
.bg-black-full{background:var(--black)}

/* ════ DESIGN UPGRADES (safe additions) ════ */

/* Rounded cards */
.leistung-card { border-radius:16px; }
.review-card { border-radius:16px; border-left: none; padding-top: 28px; }
.review-card::before { content:''; display:block; width:28px; height:3px; background:var(--gold); border-radius:4px; margin-bottom:18px; }
.team-card { border-radius:16px; }
.blog-card { border-radius:16px; }
.objekt-card { border-radius:16px; }
.bewertung-tool { border-radius:16px; }
.lp-form-card { border-radius:16px; }

/* Pill buttons */
.btn-primary {
  border-radius:980px;
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 2px 10px rgba(184,147,90,.2);
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(184,147,90,.3); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { border-radius:980px; }
.header-cta { border-radius:980px; }

/* Better text contrast */
.section-sub { color: #6e6e73; }
.usp-desc { color: rgba(255,255,255,.55); }

/* Card hover effects */
.leistung-card { transition: transform .3s ease, box-shadow .3s ease; }
.leistung-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.blog-card { transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.objekt-card { transition: transform .3s ease, box-shadow .3s ease; }
.objekt-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }

/* CTA glow */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before { content:''; position:absolute; top:-50%; left:-20%; width:60%; height:200%; background:radial-gradient(ellipse, rgba(184,147,90,.07) 0%, transparent 70%); pointer-events:none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius:4px; }

/* Internal link cards */
.internal-links { padding: clamp(32px,5vw,56px) var(--pad); background: var(--off-white); border-top: 1px solid var(--warm-gray); }
.internal-links-inner { max-width: var(--max-w); margin: 0 auto; }
.internal-links-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid-gray); margin-bottom: 16px; }
.internal-links-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.internal-link-card { background: #fff; border: 1px solid var(--warm-gray); border-radius:16px; padding: 12px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--black); font-family: var(--font-body); transition: border-color .2s ease, transform .2s ease; }
.internal-link-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.internal-link-card svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }

/* ── Dropdown hover bridge (verhindert Lücken-Problem) ── */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL MOBILE POLISH (≤768px) — gilt für ALLE Seiten
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* 0) Sicherheitsnetz: kein horizontaler Scroll */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  * { max-width: 100%; }
  .page-hero-inner[style] { padding-left: 18px !important; padding-right: 18px !important; }

  /* 1) Hero-Visuals (rechte Spalten) auf Mobile ausblenden,
        damit keine Leerflächen / Mindesthöhen Lücken erzeugen */
  .hero-visual,
  .page-hero-visual,
  .lp-hero-visual,
  .page-hero-img,
  .hero-card-floating { display:none !important; }

  /* 2) Alle 2-Spalten-Hero-Grids einspaltig */
  .leistungen-grid,
  .usp-grid,
  .reviews-grid,
  .team-grid,
  .values-grid,
  .blog-grid,
  .objekte-grid,
  .process-grid,
  .hero-inner,
  .page-hero-inner,
  .lp-hero-inner,
  .page-hero-grid,
  .page-hero-grid-start,
  .grid-2-col,
  .grid-2-col-lg,
  .bewertung-layout,
  .kontakt-layout,
  .obj-grid,
  .market-grid,
  .bew-market-grid,
  .bew-text-cols { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* 3) Page-Hero Inline-Style override (Bewertung/Kaufen etc.) */
  .page-hero-inner[style]{ grid-template-columns: 1fr !important; gap:32px !important; padding:64px 18px 48px !important; }

  /* 4) Hero/Page-Hero Paddings reduzieren (NICHT section pauschal!) */
  .hero, .page-hero, .lp-hero { padding-bottom: 56px !important; }

  /* 5) Hero-Stats: bleiben innerhalb der schwarzen Hero-Section */
  .hero-stats { margin-top: 8px; padding-top: 24px; }

  /* 6) Typo skalieren */
  h1, .page-hero h1, .lp-hero h1 { font-size: clamp(32px, 7vw, 48px) !important; line-height: 1.1 !important; }
  .lp-h1 { font-size: clamp(26px, 6.5vw, 44px) !important; line-height: 1.1 !important; }
  h2 { line-height: 1.15; }
  h3 { font-size: clamp(18px, 4.8vw, 22px) !important; }

  /* 7) Buttons besser tappbar */
  .btn-primary, .btn-outline, .header-cta { min-height: 48px; padding: 14px 22px; }
  .hero-actions, .page-hero-actions { gap: 10px; }
  .hero-actions .btn-primary, .hero-actions .btn-outline,
  .page-hero-actions .btn-primary, .page-hero-actions .btn-outline { flex: 1 1 100%; justify-content: center; }

  /* 8) Footer / Forms */
  .form-row { grid-template-columns: 1fr !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* 9) Trust-Bar (oben) lesbar */
  .trust-ribbon, .trust-ribbon-inner { font-size: 11px !important; }

  /* 10) Demo-Bar (Preview-Helper) auf Mobile minimiert */

  /* 11) Bilder responsive */
  img, video { max-width: 100%; height: auto; }

  /* 12) Tabellen / breite Container scrollbar machen statt zu sprengen */
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 13) Zeilenabstand zaehmen — 1.75 ist auf Mobile zu luftig */
  p, .hero-sub, .page-hero p, .lp-hero p, .card p { line-height: 1.55 !important; }

  /* 14) Page-Hero Padding sanfter, Eyebrow nicht umbrechen lassen */
  .page-hero-inner[style], .page-hero, .lp-hero { padding-top: 56px !important; padding-bottom: 48px !important; }
  .page-hero-eyebrow, .hero-eyebrow { font-size: 10px !important; letter-spacing: .12em !important; }

  /* 15) Karten-Grids (Leistungen, Reviews, Team, Werte, Blog, Objekte, Regionen) auf Mobile gestapelt */
  .leistungen-grid, .usp-grid, .reviews-grid, .team-grid, .values-grid,
  .blog-grid, .objekte-grid, .process-grid, .market-grid, .bew-market-grid,
  .objekte-cta-box { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* 16) Karten kompakter, weniger Innen-Padding */
  .leistung-card, .usp-card, .review-card, .team-card, .value-card,
  .blog-card, .objekt-card, .region-card, .market-card { padding: 24px !important; }

  /* 17) Section vertikale Spacings reduzieren */
  section { padding-top: clamp(40px, 8vw, 56px) !important; padding-bottom: clamp(40px, 8vw, 56px) !important; }

  /* 18) Inline-style Grids im HTML uebersteuern (Attribut-Selector schlaegt Inline-Style nicht – also via :is + !important auf den uebergeordneten Container) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 19) Inline-Padding der Page-Hero auf Mobile zaehmen (alle clamp-Varianten) */
  [style*="padding:clamp(80px"], [style*="padding: clamp(80px"] {
    padding: 48px 18px 40px !important;
  }

  /* 20) Lange Woerter (URLs, Komposita) sauber umbrechen – keine automatische Silbentrennung */
  h1, h2, h3 { hyphens: none; overflow-wrap: break-word; word-break: keep-all; }
  p, a, span, li { overflow-wrap: break-word; word-break: normal; hyphens: none; }

  /* 21) Inline font-size > 30px deckeln (Karten-Headlines, Stat-Zahlen) */
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:38px"] { font-size: 26px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:28px"] { font-size: 22px !important; }

  /* 22) Box-sizing fuer alle (kein versehentliches Sprengen durch Padding+width) */
  *, *::before, *::after { box-sizing: border-box; }

  /* 23) Inline width:NNNpx deckeln (SVG-Maps, dekorative Spalten) */
  [style*="width:900px"], [style*="width:800px"], [style*="width:768px"],
  [style*="width:700px"], [style*="width:600px"] { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 480px){
  .footer-top { grid-template-columns: 1fr !important; }
  .hero-stats { gap: 18px !important; }
  .hero-stat-num { font-size: 26px !important; }
}

/* v1.0.3: Bei wirklich engen Screens (<361px) darf Stats-Zeile umbrechen */
@media (max-width: 360px){
  .hero-stats,
  .lp-metrics {
    flex-wrap: wrap;
    gap: 14px 24px;
  }
}


/* Mobile Drawer: full-screen overlay, eigenes Logo/Close oben, Trust-Bar ausblenden waehrend offen */
@media (max-width: 900px){
  .mobile-drawer{ top: 0 !important; padding-top: 88px !important; }
  body.drawer-open .trust-ribbon{ display: none !important; }
  body.drawer-open .site-header{ background: #111110 !important; border-bottom: none !important; }
  body.drawer-open{ overflow: hidden; }
}


/* === FOTO-PLATZHALTER (additiv, v65) === */
.photo-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;background:linear-gradient(135deg,rgba(0,0,0,.04),rgba(0,0,0,.10));pointer-events:none}
.photo-ph-icon{width:34px;height:34px;color:var(--mid-gray);margin-bottom:10px;opacity:.7}
.photo-ph-label{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);opacity:.65;margin-bottom:4px}
.photo-ph-hint{font-size:11px;line-height:1.45;color:var(--mid-gray);max-width:240px;font-style:italic}
.team-img,.objekt-img,.blog-card-img{position:relative}
.team-img .photo-ph,.objekt-img .photo-ph,.blog-card-img .photo-ph{z-index:1}
.objekt-img .verkauft-badge,.objekt-img .verkauft-duration,.objekt-img .objekt-type-badge,.objekt-img .objekt-img-overlay{z-index:2}
.hero-img-wrap .photo-ph{background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.07))}
.hero-img-wrap .photo-ph-label{color:#fff;opacity:.55}
.hero-img-wrap .photo-ph-hint{color:rgba(255,255,255,.45)}
.hero-img-wrap .photo-ph-icon{color:rgba(255,255,255,.45)}
.expose-photo-slot{position:relative;aspect-ratio:3/4;background:var(--warm-gray);border:1px dashed rgba(0,0,0,.12);border-radius:4px;overflow:hidden;margin-top:24px;max-width:320px}
.story-photo-slot{position:relative;aspect-ratio:4/3;background:var(--warm-gray);border-radius:4px;overflow:hidden;margin:32px 0 8px 0}
@media (max-width:768px){
  .photo-ph-label{font-size:11px}
  .photo-ph-hint{font-size:10px;max-width:200px}
}

/* === ÜBER-UNS Hero-Gruppenfoto + Story-Block (v66) === */
.ueber-hero-photo{position:relative;aspect-ratio:21/9;max-width:var(--max-w);margin:-60px auto 0 auto;background:var(--black);border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15)}
@media (max-width:768px){.ueber-hero-photo{aspect-ratio:4/3;margin:-32px 16px 0 16px}}
.story-block{background:var(--light-gray);padding:clamp(60px,8vw,100px) 0}
.story-block-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(20px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media (max-width:900px){.story-block-inner{grid-template-columns:1fr;gap:40px}}
.story-block-photo{position:relative;aspect-ratio:3/2;background:var(--warm-gray);border-radius:4px;overflow:hidden}
.story-block-text h3{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);font-weight:600;color:var(--black);line-height:1.2;margin-bottom:20px}
.story-block-text h3 em{font-style:italic;color:var(--gold)}
.story-block-text p{font-size:16px;color:var(--mid-gray);line-height:1.8;margin-bottom:18px}
.story-block-text p:last-child{margin-bottom:0}
.story-signature{margin-top:28px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08);font-family:var(--font-display);font-style:italic;color:var(--dark);font-size:15px}

/* === VERKAUFEN PAGE - Story-Prozess Timeline (v67) === */
.verkaufen-hero-photo{position:relative;aspect-ratio:4/3;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.process-story{background:var(--light-gray);padding:clamp(40px,5vw,70px) 0;position:relative;overflow:hidden}
.process-story-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.process-story-intro{max-width:760px;margin:0 auto clamp(30px,4vw,50px) auto;text-align:center}
.process-story-timeline{position:relative;display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.process-story-timeline::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:1px;background:linear-gradient(to bottom,transparent,var(--gold) 8%,var(--gold) 92%,transparent);opacity:.35;transform:translateX(-.5px)}
.process-story-step{display:grid;grid-template-columns:1fr 80px 1fr;gap:clamp(20px,3vw,40px);align-items:center;position:relative}
.process-story-step.right{direction:rtl}
.process-story-step.right > *{direction:ltr}
.process-story-photo{position:relative;aspect-ratio:4/3;background:var(--warm-gray);border-radius:4px;overflow:hidden}
.process-story-center{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.process-story-num{width:64px;height:64px;border-radius:50%;background:var(--black);color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:24px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12)}
.process-story-body{padding:8px 0}
.process-story-meta{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;padding:5px 10px;background:rgba(184,134,11,.08);border-radius:4px}
.process-story-title{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:600;color:var(--black);line-height:1.2;margin-bottom:14px}
.process-story-desc{font-size:15px;color:var(--mid-gray);line-height:1.75;margin-bottom:14px}
.process-story-detail{font-size:13px;color:var(--dark);font-style:italic;opacity:.7}
/* NICHT-Block */
.nicht-block{max-width:900px;margin:clamp(50px,7vw,80px) auto 0 auto;padding:clamp(28px,4vw,44px);background:var(--black);color:#fff;border-radius:4px;position:relative}
.nicht-block-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:12px}
.nicht-block h3{font-family:var(--font-display);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.25;margin-bottom:22px;color:#fff}
.nicht-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;list-style:none;padding:0;margin:0}
.nicht-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.78)}
.nicht-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--gold)}
@media (max-width:900px){
  .process-story-timeline::before{left:32px}
  .process-story-step,.process-story-step.right{grid-template-columns:64px 1fr;direction:ltr;gap:20px;align-items:flex-start}
  .process-story-step > .process-story-photo{grid-column:2;order:2;margin-top:14px}
  .process-story-step > .process-story-body{grid-column:2;order:1}
  .process-story-step.right > .process-story-photo{order:2}
  .process-story-step.right > .process-story-body{order:1}
  .process-story-center{grid-column:1;grid-row:1/3;justify-content:flex-start;align-self:flex-start}
  .process-story-num{width:56px;height:56px;font-size:20px}
  .nicht-list{grid-template-columns:1fr}
}
/* ── Magazin Dark Section ── */
.magazin-dark .section-eyebrow{color:rgba(255,255,255,.4)}
.magazin-dark .section-title{color:#fff}
.magazin-dark .section-sub{color:rgba(255,255,255,.5)}

/* ── Team Dark Section ── */
.team-dark .section-eyebrow{color:rgba(255,255,255,.4)}
.team-dark .section-title{color:#fff}
.team-dark p{color:rgba(255,255,255,.55)}
.team-dark .team-name{color:#fff}
.team-dark .team-role{color:rgba(255,255,255,.45)}

/* ── Reviews Dark Section ── */
.reviews-dark .section-eyebrow{color:rgba(255,255,255,.4)}
.reviews-dark .section-title{color:#fff}
.reviews-dark .section-sub{color:rgba(255,255,255,.5)}
.reviews-dark .review-cta a{color:rgba(255,255,255,.4)}

/* ── FAQ Dark Section ── */
.faq-dark .section-eyebrow{color:rgba(255,255,255,.4)}
.faq-dark .section-title{color:#fff}
.faq-dark .section-sub{color:rgba(255,255,255,.5)}
.faq-dark .faq-item{border-color:rgba(255,255,255,.08)}
.faq-dark .faq-q{color:#fff}
.faq-dark .faq-q svg{color:rgba(255,255,255,.3)}
.faq-dark .faq-a{color:rgba(255,255,255,.55)}
.faq-dark .review-cta a{color:rgba(255,255,255,.5)}



/* ═══════════════════════════════════════════════════════════════════════
   3. WORDPRESS-SPEZIFISCH
   ═══════════════════════════════════════════════════════════════════════ */

/* WP-Admin Bar Versatz korrigieren */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* WordPress Custom Logo: Container und Bild */
.custom-logo-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.custom-logo {
  height: 36px;
  width: auto;
  display: block;
}
/* Nur EIN Logo (hell) im Einsatz — immer sichtbar, nicht umschalten.
   Das Logo bleibt auch bei offenem Menü / hellen Sektionen sichtbar. */
.logo-light { display: block !important; }
.logo-dark { display: none !important; }

/* Screen-Reader-only Klasse für visuell versteckte H1-Tags */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* WP Block-Editor sinnvolle Defaults für Custom-HTML-Content */
.entry-content > * {
  /* Inhalte aus dem migrierten HTML kommen mit eigenen Layouts —
     entry-content darf hier KEINE Container-Constraints setzen */
}

/* Blog-Übersicht (home.php) — Card-Grid */
.blog-archive {
  background: var(--off-white);
  padding: clamp(80px, 10vw, 120px) var(--pad);
}
.blog-archive-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.blog-archive-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.blog-archive-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: inline-block;
}
.blog-archive-header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  color: var(--black);
  line-height: 1.1;
  margin: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.blog-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.blog-card-wp {
  background: #fff;
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  padding: 32px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card-link:hover .blog-card-wp {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}
.blog-card-meta {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 14px;
}
.blog-card-wp h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.25;
  margin: 0 0 14px;
}
.blog-card-excerpt {
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;
}
.blog-card-link-arrow {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .04em;
  font-weight: 500;
}
.blog-pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.blog-pagination a,
.blog-pagination span {
  padding: 10px 18px;
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  text-decoration: none;
  color: var(--black);
  font-size: 14px;
  transition: all .2s;
}
.blog-pagination a:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.blog-pagination .current {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Single Post (single.php) */
.single-post-wrap {
  background: var(--off-white);
  padding: clamp(80px, 10vw, 120px) var(--pad);
}
.single-post-inner {
  max-width: 760px;
  margin: 0 auto;
}
.single-post-meta {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 18px;
}
.single-post-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 32px;
  color: var(--black);
}
.single-post-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--black);
}
.single-post-content h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  margin: 48px 0 18px;
}
.single-post-content h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 36px 0 14px;
}
.single-post-content p { margin: 0 0 22px; }
.single-post-content a { color: var(--gold); }
.single-post-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--mid-gray);
}
.single-post-content ul,
.single-post-content ol {
  margin: 0 0 22px;
  padding-left: 24px;
}
.single-post-content li { margin-bottom: 8px; }
.single-post-back {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--warm-gray);
}
.single-post-back a {
  color: var(--gold);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .04em;
}

/* 404-Seite (404.php) */
.error404-wrap {
  background: var(--black);
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 10vw, 120px) var(--pad);
  text-align: center;
}
.error404-inner {
  max-width: 560px;
}
.error404-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 140px);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin: 0 0 14px;
}
.error404-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 22px;
}
.error404-inner p {
  color: rgba(255, 255, 255, .6);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 36px;
}
.error404-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--black);
  padding: 14px 28px;
  border-radius: 980px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background .2s;
}
.error404-cta:hover { background: var(--gold-light); }

/* Globale Spacing-Vereinheitlichung —
   alle Sections nutzen die gleichen Abstände wie im Prompt gefordert */
.section,
.entry-content > section {
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
}

/* Yoast Breadcrumbs — nutzen unser Design */
.yoast-breadcrumb {
  font-size: 12px;
  color: var(--mid-gray);
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.yoast-breadcrumb a { color: var(--mid-gray); text-decoration: none; }
.yoast-breadcrumb a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   v1.0.2 — Bugfixes & Refinements
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. DROPDOWN-NAVIGATION FIX
   Problem: Stadtnamen brachen mitten im Wort um (asymmetrisch).
   Fix: min-width erhöhen, Icon+Text als Flexbox, no-wrap.
   ─────────────────────────────────────────────────────────── */
.nav-dropdown-menu {
  min-width: 280px;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 10px 22px;
}
.nav-dropdown-item svg {
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   2. KONTRAST-FIXES
   ─────────────────────────────────────────────────────────── */

/* 2a) Footer: Telefonnummer + E-Mail-Link — heller machen
       Der Footer bleibt schwarz! Nur die Schriftfarbe wird heller. */
.site-footer .footer-contact-item {
  color: rgba(255, 255, 255, .72) !important;
  transition: color .2s;
}
.site-footer .footer-contact-item:hover,
.site-footer .footer-contact-item:focus {
  color: var(--gold) !important;
}
.site-footer .footer-contact-item svg {
  color: var(--gold);
  opacity: 0.85;
}

/* 2b) "Wichtiger Hinweis"-Box auf Bewertungsseite
       Im Dummy war diese Box auf schwarzem Background gedacht.
       Lösung: Box bekommt eigenen dunklen Background damit weißer Text
       wieder lesbar wird. Apple-Style "Akzent-Box" inmitten der
       hellen Section — bewusste visuelle Hervorhebung. */
.bewertung-info-box,
[class*="bewertung-layout"] > div:first-child > div[style*="background:rgba(255,255,255,.04)"],
[class*="bewertung-layout"] > div:first-child > div[style*="background: rgba(255,255,255,.04)"] {
  background: var(--black) !important;
  border-radius: 12px;
  padding: 32px !important;
  margin-top: 40px;
}
.bewertung-info-box .section-eyebrow,
[class*="bewertung-layout"] > div:first-child > div[style*="background:rgba(255,255,255"] .section-eyebrow {
  color: var(--gold) !important;
}

/* ───────────────────────────────────────────────────────────
   3. MOBILE — VERKAUFEN-SEITE FIXES
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 3a) Process-Timeline mobil
         Problem: Nummern-Kreise links + Content rechts wirkt
         auf kleinen Screens unausgewogen.
         Fix: Padding/Margin so anpassen dass Content sauber
         eingerückt ist und Kreise nicht zu sehr "schweben". */
  .verkaufen-process-step,
  [class*="process-step"] {
    padding-left: clamp(60px, 18vw, 90px);
  }

  /* 3b) Platzhalter-Visuals (ÜBERGABE/EXPOSÉ/etc.)
         Problem: Auf Mobile haben Visual-Boxes komische
         Hintergrund-Übergänge weil sie nicht ganzrandig sind.
         Fix: Volle Breite + sauberer Übergang. */
  [class*="hero-img-wrap"],
  [class*="visual-box"],
  div[style*="background:#1a1a18"] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
  }

  /* 3c) Hero-Section auf Verkaufen-Seite
         v1.0.3: ENTFERNT — der ursprüngliche .hero-inner-Selektor matchte
         versehentlich die Startseite (deren Hero-Wrapper auch .hero-inner heißt)
         und hat sie zentriert. Verkaufen verwendet .page-hero-inner, NICHT
         .hero-inner. Wir lösen Verkaufen-Layout über den schwarzen
         page-hero-black Override (siehe unten Block 5). */

  /* 3d) Headline-Bruch fix — lange deutsche Wörter
         "Immobilie zeitungsreif" soll mit Cormorant Garamond
         endlich in eine Zeile passen. Falls nicht: Hyphenation. */
  .lp-h1,
  .hero-display,
  .page-hero h1,
  .blog-title {
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 3e) Stats-Zeile bleibt nowrap auf normalen Mobile-Screens (>=361px),
         nur bei sehr engen Screens darf umgebrochen werden — siehe @media (max-width: 360px) Block unten */
}

/* ───────────────────────────────────────────────────────────
   4. STICKY BAR MOBILE — Show beim Scroll, hide on top
   ─────────────────────────────────────────────────────────── */
/* Sticky-Bar: zentrale Definition steht weiter oben (Sticky CTA Bar). */


/* ════════════════════════════════════════════════════════════
   v1.0.3 — VERKAUFEN-HERO FIX (Black-Header umarmt Bild)
   ════════════════════════════════════════════════════════════
   Problem: Auf Verkaufen-Seite ist <section class="page-hero-black">,
   auf Über-uns-Seite ist <div class="page-hero-black">. Die globale
   Mobile-Regel `section { padding !important }` ließ den schwarzen
   Hero auf Verkaufen zu klein erscheinen, wodurch das Foto darunter
   "schwebte" mit off-white Hintergrund.
   Fix: Höhere Spezifität via section.page-hero-black + !important. */
section.page-hero-black {
  padding-top: clamp(80px, 10vw, 120px) !important;
  padding-bottom: clamp(60px, 7vw, 90px) !important;
}
@media (max-width: 768px) {
  section.page-hero-black {
    padding-top: clamp(56px, 11vw, 80px) !important;
    padding-bottom: clamp(40px, 9vw, 64px) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   v1.0.3 — TELEFON-ICON FIX (Regionsseiten)
   ════════════════════════════════════════════════════════════
   Problem: Auf den 10 Regions-Seiten ist im SVG-Telefon-Icon nur
   ~50% des Lucide-Phone-Pfads enthalten (XML-Export-Verlust). Das
   führt zur "\" Optik. Fix: Defektes SVG ausblenden und sauberes
   Phone-Icon via ::before Pseudo-Element + Data-URI rendern.
   Scope: nur .lp-hero (Regionsseiten), berührt KEINE anderen
   tel-Links (Footer, etc.). */
.lp-hero a[href^="tel:"] svg {
  display: none !important;
}
.lp-hero a[href^="tel:"]::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   v1.0.3 — RESPONSIVE-BILD-SYSTEM (Theme-weit)
   ════════════════════════════════════════════════════════════
   Schutz vor Layout-Bombs: Egal welches Bild ein User hochlädt,
   es bricht NIE das Layout. Plus: Object-fit-Defaults für Hero-
   Visuals und Card-Bilder, lazy-loading explizit aktiviert. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Hero-Visuals und Card-Bilder fit'en in ihren Container */
.hero-img-wrap img,
.ueber-hero-photo img,
.page-hero-img img,
.team-img img,
.objekt-img img,
.blog-card-img img,
.hero-visual img,
.page-hero-visual img,
.lp-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Inline-Bilder im Beitragstext: schöner Look out of the box */
.entry-content img,
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 24px 0;
}

/* ════════════════════════════════════════════════════════════
   v1.0.3 — ACCESSIBILITY: Skip-Link + Screen-Reader-Text
   ════════════════════════════════════════════════════════════
   Standard WordPress-Accessibility-Klassen. Skip-Link wird
   beim Tab-Fokus sichtbar und erlaubt Tastatur-Nutzern den
   Sprung direkt zum Hauptinhalt (überspringt Navigation). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus,
.skip-link:focus {
  background-color: var(--gold);
  color: var(--black);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 12px;
  padding: 12px 20px;
  text-decoration: none;
  top: 12px;
  width: auto;
  z-index: 9999;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.4 — UPDATES                                                   
   Datum: 2026-06-05                                                  
   17 Punkte: Mobile-Nav Drumelia-Style, Sticky-Glass, Hover-Underline,
   Auto-Hide-Header, Breadcrumb-Schwarz, Verkaufen-Section-Hell,      
   Trust-Stats-DM-Sans, Footer-Icon-Padding, Schema-Erweiterung       
   ═══════════════════════════════════════════════════════════════════ */


/* ─── PKT 17: Trust-Stats auf Startseite → DM Sans statt Cormorant ─── */
.hero-stat-num {
  font-family: var(--font-body) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}


/* ─── PKT 14: Verkaufen-Seite expose-section → hell statt schwarz ─── */
.expose-section {
  background: var(--off-white) !important;
}
.expose-section .magazin-label,
.expose-section .section-eyebrow {
  color: var(--mid-gray) !important;
}
.expose-section h1,
.expose-section h2,
.expose-section h3,
.expose-section .section-title,
.expose-section .magazin-headline {
  color: var(--black) !important;
}
.expose-section p,
.expose-section .section-sub,
.expose-section .magazin-sub,
.expose-section .magazin-body {
  color: var(--mid-gray) !important;
}
.expose-section em {
  color: var(--gold) !important;
}


/* ─── PKT 15: Footer Telefon-Icon-Padding fixen ─── */
.footer-contact-item {
  padding-left: 2px;
}
.footer-contact-item svg {
  margin-left: 0;
  flex-shrink: 0;
}
/* Mobile: Footer-Inner braucht etwas mehr horizontalen Atem damit das Icon nicht klemmt */
@media (max-width: 500px) {
  .site-footer {
    padding-left: max(var(--pad), 20px);
    padding-right: max(var(--pad), 20px);
  }
  .footer-contact-item {
    padding-left: 4px;
  }
}


/* ─── PKT 5: Hover-Underline animiert (Desktop-Nav + Footer-Links) ─── */
@media (min-width: 901px) {
  /* Desktop-Nav-Links */
  .nav-link {
    position: relative;
    display: inline-block;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    width: 100%;
  }
  /* Footer-Links */
  .footer-links a,
  .footer-legal a,
  .footer-legal-list a {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .footer-links a::after,
  .footer-legal a::after,
  .footer-legal-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .3s cubic-bezier(.4,0,.2,1);
  }
  .footer-links a:hover::after,
  .footer-links a:focus-visible::after,
  .footer-legal a:hover::after,
  .footer-legal a:focus-visible::after,
  .footer-legal-list a:hover::after,
  .footer-legal-list a:focus-visible::after {
    width: 100%;
  }
}


/* ─── PKT 12: ENTFERNT in v1.0.5.1 ─── */
/* Die schwarze Breadcrumb-Bar wurde komplett rausgenommen. */
/* Die helle Breadcrumb (Yoast-Block in den Pages) bleibt erhalten. */



/* ─── PKT 11: Auto-Hide Header beim Runter-Scrollen ─── */
.site-header {
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.site-header.hidden-scroll {
  transform: translateY(-100%);
}
/* Drawer-offen → Header bleibt sichtbar (X muss erreichbar sein) */
body.drawer-open .site-header.hidden-scroll {
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV — Drumelia-Style + Logo-mittig + 75%-Breite + Backdrop
   Punkte 1, 6, 8, 9, 10, 13
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ─── PKT 9: Mobile-Header — Logo mittig, Hamburger rechts ─── */
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    /* Spalte 1: leer (Spacer)  |  Spalte 2: Logo (center)  |  Spalte 3: Hamburger (right) */
  }
  .site-header .logo {
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }
  .site-header .nav,
  .site-header .header-cta {
    display: none;
  }
  .site-header .hamburger {
    grid-column: 3;
    justify-self: end;
  }


  /* ─── PKT 8 + 10: Drawer → Drumelia-Style + 75% Breite ─── */
  .mobile-drawer {
    background: #F7F5F0;             /* off-white — passt zur Brand */
    color: var(--black);
    width: 75vw;
    max-width: 420px;
    left: auto;
    right: 0;
    top: 0;
    height: 100vh;
    padding: 80px 28px 32px;
    box-shadow: -8px 0 40px rgba(0,0,0,.08);
  }


  /* ─── PKT 13: Dunkles Logo im Drawer-Header ─── */
  .mobile-drawer .drawer-logo {
    position: absolute;
    top: 28px;
    left: 28px;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--black);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -.01em;
  }
  .mobile-drawer .drawer-logo span {
    color: var(--gold);
    font-style: italic;
    font-weight: 400;
    margin: 0 4px;
  }


  /* ─── PKT 1: Logo-Überlappung — Schließen-Button nicht über Items ─── */
  .mobile-drawer .drawer-close {
    position: absolute;
    top: 28px;
    right: 24px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--black);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* ─── PKT 8: Drumelia-Look der Nav-Items ─── */
  .mobile-drawer .mobile-nav-section {
    margin-bottom: 4px;
  }
  .mobile-drawer .mobile-nav-link {
    display: block;
    padding: 16px 0;
    color: var(--black);
    background: none;
    border: none;                    /* PKT 6: Trennlinien raus */
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;           /* PKT 6: Unterstriche raus */
    text-align: left;
    transition: color .2s, padding-left .2s;
  }
  .mobile-drawer .mobile-nav-link:hover,
  .mobile-drawer .mobile-nav-link:focus-visible {
    color: var(--gold);
    padding-left: 6px;
  }


  /* ─── PKT 2: Regionen — Akkordeon-Trigger (Button) ─── */
  .mobile-drawer .mobile-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    color: var(--black);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: color .2s;
  }
  .mobile-drawer .mobile-nav-trigger:hover {
    color: var(--gold);
  }
  .mobile-drawer .mobile-nav-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform .25s ease;
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--mid-gray);
  }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-trigger svg {
    transform: rotate(180deg);
  }


  /* ─── PKT 2 + 3: Akkordeon-Submenu mit Stagger ─── */
  .mobile-drawer .mobile-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    padding-left: 8px;
  }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-submenu {
    max-height: 800px;
  }
  .mobile-drawer .mobile-nav-sub-link {
    display: block;
    padding: 12px 0;
    color: var(--mid-gray);
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    text-decoration: none;
    text-align: left;
    transition: color .2s, padding-left .2s, opacity .3s, transform .3s;

    /* Initial-Zustand für Stagger-Reveal */
    opacity: 0;
    transform: translateY(-6px);
  }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link {
    opacity: 1;
    transform: translateY(0);
  }
  /* Hermès-Welle: kaskadierende Delays */
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(1) { transition-delay: .05s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(2) { transition-delay: .10s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(3) { transition-delay: .15s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(4) { transition-delay: .20s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(5) { transition-delay: .25s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(6) { transition-delay: .30s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(7) { transition-delay: .35s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(8) { transition-delay: .40s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(9) { transition-delay: .45s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(10) { transition-delay: .50s; }
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link:nth-child(11) { transition-delay: .55s; }
  .mobile-drawer .mobile-nav-sub-link:hover {
    color: var(--black);
    padding-left: 4px;
  }


  /* ─── Drawer-Footer (CTA + Phone) — angepasst auf hellen Hintergrund ─── */
  .mobile-drawer .mobile-nav-footer {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .mobile-drawer .mobile-nav-footer .header-cta {
    background: var(--black) !important;
    color: #fff !important;
  }
  .mobile-drawer .mobile-nav-phone {
    color: var(--black);
    font-size: 18px;
    font-family: var(--font-display);
    margin-top: 14px;
    display: block;
    text-decoration: none;
  }
  .mobile-drawer .mobile-nav-hours {
    color: var(--mid-gray);
    font-size: 12px;
    margin-top: 4px;
  }


  /* ─── PKT 10: Backdrop links (abgedunkelt, klickbar zum Schließen) ─── */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 89;                    /* unter dem Drawer (90) */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    cursor: pointer;
  }
  .drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
  }


  /* Sticky-Bar Glass-Look entfernt — zentrale Definition steht weiter oben. */

}  /* /max-width:900px */


/* ─── PKT 1 (zusätzlich): Mobile-Drawer hat im neuen Layout kein top:70px mehr nötig ─── */
/* — siehe Drawer-Definition oben: top:0; height:100vh; padding-top:80px für Header-Platz */


/* ─── Reduced-Motion-Respekt — kein Stagger, sofort sichtbar ─── */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer .mobile-nav-sub-link,
  .mobile-drawer .mobile-nav-group.open .mobile-nav-sub-link {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .site-header.hidden-scroll {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   END v1.0.4 UPDATES                                                  
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v1.0.5 — HOTFIX                                                    
   Datum: 2026-06-06                                                  
   Behebt 4 Bugs aus v1.0.4-Live-Test:                                
   - Bug 1: Logo nicht wirklich mittig (justify-content overridden)   
   - Bug 2: Doppeltes Logo im Drawer (Header-Logo + drawer-logo)     
   - Bug 3: Doppeltes X (Hamburger-X + drawer-close)                  
   - Bug 4: Top-Bar doppelt (Folge aus 2+3)                           
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ─── HOTFIX Bug 1: Logo MUSS wirklich mittig sein ─── */
  .site-header {
    justify-content: normal !important;  /* hebt vererbtes space-between auf */
    grid-template-columns: 1fr auto 1fr !important;
  }
  .site-header .logo {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  .site-header .hamburger {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  /* ─── HOTFIX Bug 2 + 4: Drawer-Logo entfernen ─── */
  /* Header-Logo bleibt sichtbar (Drawer überdeckt es nur teilweise) */
  /* → kein doppeltes Logo mehr */
  .mobile-drawer .drawer-logo {
    display: none !important;
  }
  /* Drawer-Padding-Top reduzieren weil kein Logo mehr oben */
  .mobile-drawer {
    padding-top: 32px !important;
  }

  /* ─── HOTFIX Bug 3: Drawer-Close-Button entfernen ─── */
  /* Hamburger wird beim Öffnen automatisch zum X — das reicht */
  .mobile-drawer .drawer-close {
    display: none !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   END v1.0.5 HOTFIX                                                  
   ═══════════════════════════════════════════════════════════════════ */