/* ==========================================================================
   OK Projekt und Verwaltung GmbH — site.css
   Design: Elfenbein · Champagner-Gold · warmes Anthrazit
   Schriften: Cormorant Garamond (Serif) + Inter (Sans), lokal gehostet
   ========================================================================== */

@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400i.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-500.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-300.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');}

:root{
  --cream:#f6f1e8;        /* Haupt-Hintergrund, warmes Elfenbein */
  --cream-2:#fffdf8;      /* helle Karten / Panels */
  --cream-3:#efe7d7;      /* Sektionswechsel, weicher Ton */
  --panel:#1b1712;        /* dunkle Akzentflächen (Top-Bar, Footer) */
  --panel-2:#221d16;

  --ink:#221d16;          /* Haupttext */
  --ink-80:rgba(34,29,22,.82);
  --ink-60:rgba(34,29,22,.6);
  --ink-45:rgba(34,29,22,.45);

  --gold:#b0863a;         /* Primär-Gold (Akzenttext, mittel) */
  --gold-deep:#8a6529;    /* dunkles Gold (kleiner Text / Kicker) */
  --gold-bright:#d9b978;  /* helles Gold (Deko, Linien) */
  --gold-grad:linear-gradient(135deg,#e7cd93 0%,#c49f57 45%,#a07a36 100%);
  --cream-on-dark:#f3ecdd;

  --line:rgba(34,29,22,.12);
  --line-2:rgba(34,29,22,.2);
  --gold-line:rgba(176,134,58,.4);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --header-h:74px;
  --topbar-h:40px;

  --shadow-card:0 12px 34px rgba(34,29,22,.09);
  --shadow-soft:0 20px 50px rgba(34,29,22,.12);
  --shadow-lg:0 34px 80px rgba(34,29,22,.18);
  --gold-glow:0 0 0 1px rgba(176,134,58,.25), 0 18px 44px rgba(176,134,58,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
img,picture,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
input,textarea,select{font:inherit; color:inherit}
::selection{background:var(--gold); color:#fff}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--cream-3)}
::-webkit-scrollbar-thumb{background:var(--gold-bright); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:.005em; color:var(--ink)}
.serif{font-family:var(--serif)}
p{max-width:70ch}

.kicker{
  font-family:var(--sans);
  font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{content:""; width:30px; height:1px; background:var(--gold); opacity:.85}
.kicker--center{justify-content:center}
.kicker--center::after{content:""; width:30px; height:1px; background:var(--gold); opacity:.85}

.lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-80); line-height:1.8; font-weight:300}

/* --- Layout -------------------------------------------------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:920px}
main{flex:1 0 auto}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--cream2{background:var(--cream-2)}
.section--cream3{background:var(--cream-3)}
.section__head{max-width:66ch; margin-inline:auto; text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__title{font-size:clamp(2.1rem,4.6vw,3.3rem); margin-top:1.1rem}
.section__title em{font-style:italic; color:var(--gold)}
.rule{height:2px; width:64px; background:var(--gold-grad); border:0; border-radius:2px; margin:1.4rem 0}
.rule--center{margin-inline:auto}
.text-gold{color:var(--gold)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 2.1em; font-size:.76rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  border:1px solid var(--gold); color:var(--gold-deep); border-radius:40px;
  transition:color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .3s var(--ease);
}
.btn::after{content:""; position:absolute; inset:0; background:var(--gold-grad); z-index:-1; opacity:0; transition:opacity .5s var(--ease)}
.btn:hover{color:#fff; border-color:transparent; box-shadow:var(--gold-glow)}
.btn:hover::after{opacity:1}
.btn--solid{color:#fff; border-color:transparent; background:var(--gold-grad)}
.btn--solid::after{opacity:1}
.btn--solid:hover{color:#fff; transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-2); color:var(--ink)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:var(--cream); border-color:transparent}
.btn--sm{padding:.7em 1.5em; font-size:.7rem}
.btn:active{transform:translateY(0)}

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.74rem; font-weight:500; text-transform:uppercase; letter-spacing:.18em;
  color:var(--gold-deep); padding-bottom:.35em;
  border-bottom:1px solid var(--gold-line);
  transition:border-color .4s var(--ease), gap .3s var(--ease), color .3s;
}
.textlink:hover{border-color:var(--gold); gap:.9em; color:var(--gold)}

/* --- Top-Bar (Kontaktzeile) ---------------------------------------------- */
.topbar{
  background:var(--panel); color:var(--cream-on-dark);
  font-size:.78rem; letter-spacing:.02em;
  height:var(--topbar-h); display:flex; align-items:center;
}
.topbar__inner{display:flex; align-items:center; justify-content:flex-end; gap:1.8rem; flex-wrap:wrap}
.topbar a{display:inline-flex; align-items:center; gap:.5em; color:var(--cream-on-dark); transition:color .3s}
.topbar a:hover{color:var(--gold-bright)}
.topbar .sep{width:1px; height:15px; background:rgba(243,236,221,.2)}
.topbar svg{width:15px; height:15px; color:var(--gold-bright); flex:none}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{background:rgba(255,253,248,.96); box-shadow:0 6px 24px rgba(34,29,22,.07)}
.site-header__inner{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.brand{display:inline-flex; align-items:center; gap:.7rem; flex:none}
.brand__mark{height:52px; width:auto; transition:transform .5s var(--ease)}
.brand:hover .brand__mark{transform:scale(1.05) rotate(-2deg)}
.brand__name{display:flex; flex-direction:column; line-height:1.05}
.brand__name b{font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:.04em; color:var(--ink)}
.brand__name span{font-size:.6rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold-deep)}

.nav{display:flex; align-items:center; gap:clamp(1.1rem,2.1vw,1.9rem)}
.nav__link{
  position:relative; font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-80);
  padding:.5em 0; transition:color .35s var(--ease); white-space:nowrap;
}
.nav__link::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold-grad); border-radius:2px; transition:width .4s var(--ease)}
.nav__link:hover{color:var(--gold)}
.nav__link.is-active{color:var(--gold)}
.nav__link.is-active::after{width:100%}

/* Dropdown (Kooperation) */
.nav__item{position:relative; display:flex; align-items:center}
.nav__item--has-sub>.nav__link{display:inline-flex; align-items:center; gap:.4em}
.nav__caret{width:9px; height:9px; transition:transform .35s var(--ease)}
.nav__sub{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:190px; background:var(--cream-2); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-soft); padding:.5rem;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav__sub::before{content:""; position:absolute; top:-16px; left:0; right:0; height:16px}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav__item--has-sub:hover .nav__caret{transform:rotate(180deg)}
.nav__sub a{
  display:block; padding:.6em .9em; border-radius:9px; font-size:.8rem; letter-spacing:.04em;
  color:var(--ink-80); transition:background .25s, color .25s;
}
.nav__sub a:hover{background:var(--cream-3); color:var(--gold)}

.nav-toggle{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; z-index:60}
.nav-toggle span{display:block; height:2px; width:24px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .3s}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--cream)}
.hero::before{
  content:""; position:absolute; top:-30%; right:-10%; width:60vw; height:120%;
  background:radial-gradient(ellipse at center, rgba(217,185,120,.22), transparent 68%);
  z-index:0; pointer-events:none;
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(3rem,7vw,6rem);
  min-height:min(82vh,760px);
}
.hero__copy{max-width:38rem}
.hero__title{font-size:clamp(2.7rem,6vw,5rem); font-weight:500; line-height:1.04; letter-spacing:.01em}
.hero__title em{display:block; font-style:italic; color:var(--gold); font-weight:500}
.hero__lead{margin:1.8rem 0 2.4rem; max-width:46ch; font-size:clamp(1.08rem,1.6vw,1.28rem); color:var(--ink-80); line-height:1.75}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
.btn--phone{gap:.7em}
.btn--phone svg{width:16px; height:16px}

.hero__figure{position:relative; justify-self:center; width:100%; max-width:520px}
.hero__stage{position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--cream-3)}
.hero__stage::after{content:""; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px var(--gold-line); pointer-events:none; z-index:5}

/* Bild-Bühne: drei Objekte wechseln mit Ken-Burns + Überblendung */
.hero__slides{position:absolute; inset:0}
.hero__slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:opacity,transform; animation:heroSlide 18s var(--ease) infinite}
.hero__slide:nth-child(1){animation-delay:0s}
.hero__slide:nth-child(2){animation-delay:6s}
.hero__slide:nth-child(3){animation-delay:12s}
@keyframes heroSlide{
  0%{opacity:0; transform:scale(1.06)}
  4%{opacity:1}
  28%{opacity:1; transform:scale(1.13)}
  33%{opacity:0; transform:scale(1.14)}
  100%{opacity:0; transform:scale(1.06)}
}

/* Goldene Vermessungs-Scanlinie */
.hero__scan{position:absolute; left:7%; right:7%; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-bright) 22%,var(--gold-bright) 78%,transparent);
  box-shadow:0 0 14px rgba(217,185,120,.75); animation:heroScan 6.5s var(--ease) infinite}
@keyframes heroScan{0%{top:6%; opacity:0} 15%{opacity:.9} 85%{opacity:.9} 100%{top:94%; opacity:0}}

/* Sich zeichnende Gold-Eckwinkel (Architekten-Fokus) */
.hero__corner{position:absolute; width:28px; height:28px; z-index:4; pointer-events:none; opacity:0; animation:cornerIn .9s var(--ease) forwards}
.hero__corner--tl{top:15px; left:15px; border-top:2px solid var(--gold-bright); border-left:2px solid var(--gold-bright); border-top-left-radius:7px; animation-delay:.5s}
.hero__corner--tr{top:15px; right:15px; border-top:2px solid var(--gold-bright); border-right:2px solid var(--gold-bright); border-top-right-radius:7px; animation-delay:.65s}
.hero__corner--bl{bottom:15px; left:15px; border-bottom:2px solid var(--gold-bright); border-left:2px solid var(--gold-bright); border-bottom-left-radius:7px; animation-delay:.8s}
.hero__corner--br{bottom:15px; right:15px; border-bottom:2px solid var(--gold-bright); border-right:2px solid var(--gold-bright); border-bottom-right-radius:7px; animation-delay:.95s}
@keyframes cornerIn{from{opacity:0; transform:scale(.55)}to{opacity:.9; transform:scale(1)}}

.hero__badge{position:absolute; z-index:6; left:-1.4rem; bottom:2.2rem; background:var(--cream-2); border:1px solid var(--line);
  border-radius:14px; padding:.9rem 1.3rem; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:.85rem}
.hero__badge .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-60); line-height:1.4}

/* --- Startseite: kinematischer 3D-Hero ----------------------------------- */
.hero3d{position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center;
  background:
    radial-gradient(70% 50% at 66% 26%, rgba(217,185,120,.15), transparent 62%),
    radial-gradient(130% 90% at 50% 128%, rgba(176,134,58,.13), transparent 55%),
    linear-gradient(180deg, #17130e 0%, #130f0b 55%, var(--panel) 100%);}
.hero3d__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.hero3d__vignette{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(8,6,4,.5) 100%)}
.hero3d .container{position:relative; z-index:3}
.hero3d__inner{max-width:36rem}
.hero3d .kicker{color:var(--gold-bright)}
.hero3d .kicker::before{background:var(--gold-bright)}
.hero3d__title{font-family:var(--serif); font-weight:500; color:var(--cream-on-dark);
  font-size:clamp(2.7rem,6vw,5rem); line-height:1.04; letter-spacing:.01em; margin-top:1.3rem}
.hero3d__title em{display:block; font-style:italic; color:var(--gold-bright)}
.hero3d__lead{color:rgba(243,236,221,.78); font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.75;
  margin:1.6rem 0 2.4rem; max-width:36ch}
.hero3d__actions{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.hero3d .btn--ghost{border-color:rgba(243,236,221,.32); color:var(--cream-on-dark)}
.hero3d .btn--ghost::after{background:var(--gold-grad)}
.hero3d .btn--ghost:hover{color:#17130e; border-color:transparent}
.hero3d__cue{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:3;
  color:rgba(243,236,221,.5); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; text-align:center}
.hero3d__cue span{display:block; width:1px; height:32px; margin:.5rem auto 0;
  background:linear-gradient(var(--gold-bright),transparent); animation:heroCue 1.8s ease-in-out infinite}
@keyframes heroCue{0%,100%{transform:scaleY(.5);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1}}
.hero3d__inner>*{opacity:0; animation:heroRise .9s var(--ease) forwards}
.hero3d__inner>*:nth-child(1){animation-delay:.15s}.hero3d__inner>*:nth-child(2){animation-delay:.3s}
.hero3d__inner>*:nth-child(3){animation-delay:.45s}.hero3d__inner>*:nth-child(4){animation-delay:.6s}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.usps{margin-top:-1px}
@media (max-width:860px){
  .hero3d{min-height:94svh; align-items:flex-end; padding-bottom:8vh}
  .hero3d__inner{max-width:none; text-align:center; margin-inline:auto}
  .hero3d .kicker{justify-content:center}
  .hero3d__title{font-size:clamp(2.3rem,8vw,3rem)}
  .hero3d__lead{margin-inline:auto; font-size:1rem}
  .hero3d__actions{justify-content:center}
  .hero3d__cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero3d__inner>*,.hero3d__cue span{animation:none; opacity:1}
}

/* --- USP-Reihe (3 Punkte) ------------------------------------------------ */
.usps{
  position:relative; z-index:2; margin-top:-1px;
  background:var(--panel);
}
.usps__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.usp{
  padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,3vw,2.6rem);
  color:var(--cream-on-dark); position:relative;
}
.usp+.usp{border-left:1px solid rgba(243,236,221,.12)}
.usp__icon{width:38px; height:38px; color:var(--gold-bright); margin-bottom:1.1rem}
.usp h3{color:#fff; font-size:1.5rem; margin-bottom:.6rem}
.usp h3 b{color:var(--gold-bright); font-weight:500}
.usp p{font-size:.92rem; color:rgba(243,236,221,.72); line-height:1.7; max-width:34ch}

/* --- Über uns (Text + Kacheln) ------------------------------------------- */
.about__grid{display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem)}
.about__intro{max-width:64ch; margin-inline:auto; text-align:center}
.about__intro p{color:var(--ink-80); margin-inline:auto}
.about__intro p+p{margin-top:1rem}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2.5rem,5vw,3.5rem)}
.tile{
  background:var(--cream-2); border:1px solid var(--line); border-radius:16px;
  padding:2rem 1.6rem; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--gold-line)}
.tile__icon{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(217,185,120,.22), rgba(176,134,58,.12));
  color:var(--gold-deep); margin-bottom:1.2rem;
}
.tile__icon svg{width:26px; height:26px}
.tile h3{font-size:1.4rem; margin-bottom:.6rem; color:var(--ink)}
.tile p{font-size:.9rem; color:var(--ink-60); line-height:1.65}

/* --- Phasen (5-Schritt-Ablauf) ------------------------------------------- */
.phases{position:relative}
.phases__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem; counter-reset:phase}
.phase{position:relative; padding-top:3.4rem}
.phase::before{
  counter-increment:phase; content:counter(phase,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--gold);
  line-height:1;
}
.phase::after{
  content:""; position:absolute; top:1.15rem; left:3.2rem; right:-.7rem; height:1px;
  background:linear-gradient(90deg, var(--gold-line), transparent);
}
.phase:last-child::after{display:none}
.phase__dot{position:absolute; top:.7rem; left:2.5rem; width:9px; height:9px; border-radius:50%; background:var(--gold)}
.phase h3{font-size:1.15rem; margin-bottom:.6rem; color:var(--ink)}
.phase p{font-size:.86rem; color:var(--ink-60); line-height:1.65}

/* --- Kaufgesuche (Split Bild + Text) ------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; border-radius:18px; box-shadow:var(--shadow-soft); aspect-ratio:1/1; object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}
.split__media::before{
  content:""; position:absolute; inset:auto -14px -14px auto; width:55%; height:55%;
  border:1px solid var(--gold-line); border-radius:18px; z-index:-1;
}
.seeklist{list-style:none; padding:0; margin:1.6rem 0}
.seeklist li{position:relative; padding:.55rem 0 .55rem 1.9rem; color:var(--ink-80); font-size:.98rem; border-bottom:1px solid var(--line)}
.seeklist li::before{content:""; position:absolute; left:0; top:1.05rem; width:9px; height:9px; border-radius:50%; background:var(--gold-grad)}
.seeklist strong{color:var(--ink); font-weight:600}
.callout{
  margin-top:1.6rem; padding:1.3rem 1.5rem; background:var(--cream-2);
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px;
  font-size:.92rem; color:var(--ink-80); line-height:1.7;
}
.callout strong{color:var(--ink)}
.price-badge{
  display:inline-flex; align-items:baseline; gap:.5em; margin-top:1rem;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-60);
}
.price-badge b{font-family:var(--serif); font-size:1.5rem; letter-spacing:0; color:var(--gold); text-transform:none}

/* --- Kontakt-Sektion ----------------------------------------------------- */
.contact{position:relative; overflow:hidden}
.contact__grid{display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:center; gap:clamp(1.5rem,3.5vw,3rem)}
.contact__media img{width:100%; border-radius:18px; box-shadow:var(--shadow-soft); object-fit:cover}
.contact__media--l img{aspect-ratio:3/4}
.contact__media--r img{aspect-ratio:3/4}
.contact__copy{text-align:center}
.contact__copy p{margin:1.2rem auto 2rem; color:var(--ink-80)}

/* --- Footer (dunkel, modern) --------------------------------------------- */
.site-footer{flex-shrink:0; background:var(--panel); color:var(--cream-on-dark); padding-top:clamp(3rem,6vw,4.5rem)}
.site-footer__top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(1.6rem,3vw,2.6rem); padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.footcol h4{font-family:var(--serif); font-size:1.35rem; font-weight:600; color:#fff; margin-bottom:1.1rem; position:relative; padding-bottom:.7rem}
.footcol h4::after{content:""; position:absolute; left:0; bottom:0; width:42px; height:2px; background:var(--gold-grad); border-radius:2px}
.footcol p, .footcol a{font-size:.9rem; color:rgba(243,236,221,.7); line-height:1.75}
.footcol a{transition:color .3s, padding-left .3s}
.footcol--brand .foot-logo{height:60px; width:auto; margin-bottom:1rem}
.footcol--brand .foot-tag{font-size:.88rem; color:rgba(243,236,221,.6); max-width:32ch}
.footcol--links a{display:block; padding:.3rem 0}
.footcol--links a:hover{color:var(--gold-bright); padding-left:.4rem}
.foot-contact{display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem}
.foot-contact a{display:inline-flex; align-items:center; gap:.6em}
.foot-contact a:hover{color:var(--gold-bright)}
.foot-contact svg{width:15px; height:15px; color:var(--gold-bright); flex:none}
.foot-name{color:#fff; font-weight:500; font-size:1rem; margin-bottom:.3rem}
.social{display:inline-flex; gap:.7rem; margin-top:.2rem}
.social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,236,221,.22); display:grid; place-items:center; transition:background .3s, border-color .3s, transform .3s}
.social a:hover{background:var(--gold-grad); border-color:transparent; transform:translateY(-3px)}
.social svg{width:18px; height:18px}
.site-footer__bottom{border-top:1px solid rgba(243,236,221,.12); padding-block:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.site-footer__bottom p{font-size:.8rem; color:rgba(243,236,221,.5)}
.site-footer__bottom a{color:rgba(243,236,221,.7); transition:color .3s}
.site-footer__bottom a:hover{color:var(--gold-bright)}

/* --- IT-Seite: Ansatz (nummeriert) --------------------------------------- */
.approach{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem)}
.approach__item{position:relative}
.approach__num{display:block; font-family:var(--serif); font-size:clamp(2.8rem,5vw,4rem); font-weight:600; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9; margin-bottom:.4rem}
.approach__item h3{font-size:1.4rem; margin-bottom:.7rem; color:var(--ink)}
.approach__item p{font-size:.92rem; color:var(--ink-60); line-height:1.7}
.approach__item::after{content:""; display:block; width:38px; height:2px; background:var(--gold-line); margin-top:1.1rem}

/* --- IT-Seite: Kernkompetenzen (Karten mit Bild) ------------------------- */
.compgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem)}
.compcard{background:var(--cream-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.compcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--gold-line)}
.compcard__media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--panel)}
.compcard__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease)}
.compcard:hover .compcard__media img{transform:scale(1.07)}
.compcard__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(27,23,18,.35))}
.compcard__body{padding:1.5rem 1.4rem}
.compcard__body h3{font-size:1.3rem; margin-bottom:.5rem; color:var(--ink)}
.compcard__body p{font-size:.87rem; color:var(--ink-60); line-height:1.65}

/* --- CTA-Band (dunkel, für Verweis auf kuehhas.info) --------------------- */
.cta-band{position:relative; overflow:hidden; background:var(--panel); border-radius:22px;
  padding:clamp(2.6rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem); text-align:center; box-shadow:var(--shadow-soft)}
.cta-band::before{content:""; position:absolute; inset:-40% 30% auto -10%; height:120%;
  background:radial-gradient(ellipse at center, rgba(217,185,120,.18), transparent 65%); pointer-events:none}
.cta-band>*{position:relative; z-index:1}
.cta-band .kicker{color:var(--gold-bright)}
.cta-band .kicker::before,.cta-band .kicker::after{background:var(--gold-bright)}
.cta-band h2{color:#fff; font-size:clamp(1.9rem,4vw,2.9rem); margin:1rem 0}
.cta-band h2 em{font-style:italic; color:var(--gold-bright)}
.cta-band p{color:rgba(243,236,221,.75); max-width:56ch; margin:0 auto 2rem}
.btn--onDark{border-color:rgba(243,236,221,.35); color:var(--cream-on-dark)}
.btn--onDark::after{background:var(--gold-grad)}
.btn--onDark:hover{color:#1b1712; border-color:transparent}

/* --- Kooperation: Partner-Karten ----------------------------------------- */
.partnergrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1.4rem,2.6vw,2rem)}
.partner{position:relative; display:flex; flex-direction:column; background:var(--cream-2); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.partner:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--gold-line)}
.partner__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--panel)}
.partner__media>img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease)}
.partner:hover .partner__media>img{transform:scale(1.06)}
/* Marken-Header (Logo/Wortmarke) mit edlem dunklem Grund */
.partner__media--brand{display:grid; place-items:center; padding:1.5rem;
  background:radial-gradient(ellipse at 50% 40%, rgba(217,185,120,.16), transparent 70%), var(--panel)}
.partner__media--brand img{width:auto; height:auto; max-width:62%; max-height:66%; object-fit:contain}
.wordmark{text-align:center; line-height:1.15}
.wordmark b{display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; letter-spacing:.06em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.wordmark span{display:block; margin-top:.4rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.26em; color:rgba(243,236,221,.72)}
/* Nummer-Badge */
.partner__num{position:absolute; top:0; left:0; z-index:2; font-family:var(--serif); font-weight:600; font-size:1.1rem;
  color:#1b1712; background:var(--gold-grad); padding:.3em .8em; border-bottom-right-radius:12px}
.partner__body{display:flex; flex-direction:column; flex:1; padding:1.6rem 1.5rem}
.partner__loc{font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-deep); margin-bottom:.5rem}
.partner__body h3{font-size:1.5rem; margin-bottom:.6rem; color:var(--ink)}
.partner__body p{font-size:.9rem; color:var(--ink-60); line-height:1.7}
.tags{display:flex; flex-wrap:wrap; gap:.45rem; margin:1.2rem 0 1.4rem}
.tag{font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-deep);
  border:1px solid var(--gold-line); border-radius:30px; padding:.35em .8em}
.partner__link{margin-top:auto; display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-deep);
  border-bottom:1px solid var(--gold-line); padding-bottom:.35em; transition:gap .3s var(--ease), color .3s, border-color .3s}
.partner__link:hover{gap:.85em; color:var(--gold); border-color:var(--gold)}

/* --- Team ---------------------------------------------------------------- */
.team-subhead{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); font-weight:600; color:var(--ink); text-align:center; margin:0 0 clamp(1.6rem,3.5vw,2.6rem)}
.team-subhead::after{content:""; display:block; width:52px; height:2px; background:var(--gold-grad); margin:.8rem auto 0; border-radius:2px}
.team-subhead+.team-subhead,.teamgrid+.team-subhead{margin-top:clamp(3rem,6vw,5rem)}

.teamgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2rem)}
.teamgrid--lead{grid-template-columns:repeat(2,1fr); max-width:960px; margin-inline:auto}
.teamcard{display:flex; flex-direction:column; background:var(--cream-2); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.teamcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--gold-line)}
.teamcard__photo{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel)}
.teamcard__photo img{width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.03); transition:filter .7s var(--ease), transform .9s var(--ease)}
@media (hover:hover){.teamcard:hover .teamcard__photo img{filter:none; transform:scale(1.04)}}
@media (hover:none){.teamcard__photo img{filter:none}}
.teamcard__photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%,rgba(27,23,18,.28))}
/* Firmen-Logo statt Porträt */
.teamcard__logo{aspect-ratio:4/5; display:grid; place-items:center; padding:2rem; background:#fff}
.teamcard__logo img{max-width:84%; max-height:46%; object-fit:contain}
.teamcard__body{display:flex; flex-direction:column; flex:1; padding:1.5rem 1.5rem 1.6rem}
.teamcard__body h3{font-size:1.4rem; color:var(--ink); line-height:1.15; margin-bottom:.45rem}
.teamcard__role{font-size:.82rem; color:var(--gold-deep); font-weight:500; line-height:1.5; margin-bottom:.5rem}
.teamcard__note{font-size:.82rem; color:var(--ink-60); line-height:1.6; margin-bottom:.7rem}
.teamcard__langs{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-45); margin-bottom:1rem}
.teamcard__contact{list-style:none; padding:1rem 0 0; margin:auto 0 0; display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--line)}
.teamcard__contact li{display:flex; align-items:flex-start; gap:.6em; font-size:.82rem; color:var(--ink-60); line-height:1.45}
.teamcard__contact svg{width:14px; height:14px; color:var(--gold); flex:none; margin-top:.2em}
.teamcard__contact a{color:var(--ink-60); transition:color .3s; word-break:break-word}
.teamcard__contact a:hover{color:var(--gold)}
/* Geschäftsführung: horizontal, hervorgehoben */
.teamgrid--lead .teamcard{flex-direction:row}
.teamgrid--lead .teamcard__photo{aspect-ratio:auto; width:44%; flex:none}
.teamgrid--lead .teamcard__body{padding:1.9rem 1.8rem}
.teamgrid--lead .teamcard__body h3{font-size:1.7rem}

/* --- Kontakt: Karte + Info-Kacheln --------------------------------------- */
.contact-map{position:relative; height:clamp(280px,40vw,440px); overflow:hidden; background:var(--cream-3); border-bottom:1px solid var(--gold-line)}
.contact-map img{width:100%; height:100%; object-fit:cover}
.contact-map__route{position:absolute; right:clamp(1rem,4vw,2.5rem); top:clamp(1rem,4vw,1.8rem); z-index:2; background:var(--cream-2); box-shadow:var(--shadow-card)}
.infocards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(-4.5rem,-7vw,-5.5rem); position:relative; z-index:3}
.infocard{background:var(--cream-2); border:1px solid var(--line); border-radius:16px; padding:clamp(1.6rem,3vw,2.4rem); text-align:center; box-shadow:var(--shadow-soft); transition:transform .5s var(--ease)}
.infocard:hover{transform:translateY(-5px)}
.infocard__icon{width:54px; height:54px; margin:0 auto 1.1rem; border-radius:50%; border:1px solid var(--gold-line); display:grid; place-items:center; color:var(--gold)}
.infocard__icon svg{width:24px; height:24px}
.infocard h3{font-size:1.5rem; margin-bottom:.7rem; color:var(--ink)}
.infocard p{font-size:1.02rem; color:var(--ink-80); line-height:1.7; font-weight:400}
.infocard a{color:var(--ink); font-weight:500; transition:color .3s}
.infocard a:hover{color:var(--gold)}

/* --- Formular ------------------------------------------------------------ */
.contactform{max-width:760px; margin-inline:auto}
.field{margin-bottom:1.1rem}
.field label{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-60); margin-bottom:.5rem}
.field label .req{color:var(--gold)}
.input,textarea.input{width:100%; background:var(--cream-2); border:1px solid var(--line-2); border-radius:10px;
  padding:.85em 1em; color:var(--ink); font-size:.95rem; font-weight:300; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.input::placeholder{color:var(--ink-45)}
.input:focus,textarea.input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,134,58,.13)}
textarea.input{resize:vertical; min-height:130px; line-height:1.6}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--ink-60); margin:.4rem 0 1.4rem; line-height:1.6}
.consent input{margin-top:.25rem; accent-color:var(--gold); flex:none; width:17px; height:17px}
.consent a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px}
.form-status{margin-top:.9rem; font-size:.9rem; color:var(--ink-60); min-height:1.2em}
.form-status.is-error{color:#a5492f}
.form-status.is-ok{color:var(--gold-deep)}

/* Flash-Meldungen */
.flash{padding:1rem 1.2rem; border:1px solid var(--line-2); border-radius:10px; margin-bottom:1.4rem; font-size:.92rem; max-width:760px; margin-inline:auto}
.flash--success{border-color:var(--gold-line); background:rgba(176,134,58,.09); color:var(--gold-deep)}
.flash--error{border-color:#c98a76; background:rgba(197,120,90,.12); color:#9a4f38}

/* --- Reveal-Animationen -------------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}

.hero__copy>*{opacity:0; animation:heroIn .9s var(--ease) forwards}
.hero__copy>*:nth-child(1){animation-delay:.1s}
.hero__copy>*:nth-child(2){animation-delay:.24s}
.hero__copy>*:nth-child(3){animation-delay:.38s}
.hero__copy>*:nth-child(4){animation-delay:.52s}
.hero__figure{opacity:0; animation:heroIn 1s var(--ease) .35s forwards}
@keyframes heroIn{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}

/* --- Sonstiges ----------------------------------------------------------- */
.skip-link{position:absolute; left:-999px; top:0; z-index:100; background:var(--gold); color:#fff; padding:.6em 1em; border-radius:0 0 8px 0}
.skip-link:focus{left:0; top:0}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  :root{--header-h:66px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .compgrid{grid-template-columns:repeat(2,1fr)}
  .teamgrid{grid-template-columns:repeat(2,1fr)}
  .phases__grid{grid-template-columns:repeat(2,1fr); gap:2rem 1.6rem}
  .phase::after{display:none}

  /* Mobiles Menü ab hier: 8 Navigationspunkte brauchen Platz */
  .topbar{display:none}
  .nav-toggle{display:flex}
  /* WICHTIG: kein backdrop-filter mobil — sonst wird der Header zum Bezugsrahmen
     für das fixed-Menü und das Overlay landet daneben statt über der Seite */
  .site-header{background:var(--cream-2); backdrop-filter:none; -webkit-backdrop-filter:none}
  .site-header.is-scrolled{background:var(--cream-2)}
  .nav{
    position:fixed; inset:0; z-index:45; flex-direction:column; justify-content:center; gap:1.4rem;
    background:rgba(255,253,248,.985);
    transform:translateX(100%); transition:transform .5s var(--ease);
    overflow-y:auto; padding:5.5rem 1.5rem 2.5rem;
  }
  .nav__link{font-size:1.15rem}
  .nav__item{flex-direction:column; align-items:center}
  .nav__sub{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    background:transparent; border:0; padding:.4rem 0 0; min-width:0; text-align:center;
  }
  .nav__sub a{padding:.35em}
  .nav__caret{display:none}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr; text-align:center; min-height:auto}
  .hero__copy{max-width:none; margin-inline:auto}
  .hero__lead{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__figure{max-width:440px; margin-top:1rem}
  .usps__grid{grid-template-columns:1fr}
  .usp+.usp{border-left:0; border-top:1px solid rgba(243,236,221,.12)}
  .usp p{max-width:none}
  .split{grid-template-columns:1fr; gap:2.5rem}
  .split--reverse .split__media{order:0}
  .contact__grid{grid-template-columns:1fr; gap:2rem}
  .contact__media{max-width:360px; margin-inline:auto}
  .contact__copy{order:-1}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .approach{grid-template-columns:1fr; gap:2.2rem}
  .partnergrid{grid-template-columns:1fr; max-width:520px; margin-inline:auto}
  .teamgrid--lead{grid-template-columns:1fr; max-width:560px}
  .teamgrid--lead .teamcard{flex-direction:column}
  .teamgrid--lead .teamcard__photo{width:100%; aspect-ratio:4/5}
  .infocards{grid-template-columns:1fr; max-width:440px; margin-inline:auto; margin-top:clamp(-3.5rem,-7vw,-4.5rem)}
}
@media (max-width:600px){
  .tiles{grid-template-columns:1fr}
  .compgrid{grid-template-columns:1fr}
  .teamgrid{grid-template-columns:1fr; max-width:400px; margin-inline:auto}
  .phases__grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr; gap:2rem}
  .hero__badge{left:0}
  .contact-map__route{position:static; display:flex; margin:1rem auto 0; width:max-content}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .hero__copy>*,.hero__figure{opacity:1}
  .hero__slide:first-child{opacity:1}   /* ohne Animation bleibt sonst kein Bild sichtbar */
  .hero__corner{opacity:.9}
  .hero__scan{display:none}
}

/* ============================ Immobilien-Übersicht ====================== */
.estate-intro{padding-bottom:clamp(2rem,5vw,3.5rem)}
.estate-intro__inner{text-align:center}
.estate-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(1.4rem,3vw,2.2rem)}
.estate-card{display:flex; flex-direction:column; background:var(--cream-2); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); color:var(--ink);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.estate-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold-line)}
.estate-card__media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--cream-3)}
.estate-card__media picture{display:block; width:100%; height:100%}
.estate-card__media img{width:100%; height:100%; object-fit:cover; display:block}
.estate-card__img{transition:transform 1.1s var(--ease)}
.estate-card:hover .estate-card__img{transform:scale(1.07)}
.estate-card__noimg{width:100%; height:100%; display:grid; place-items:center; font-family:var(--serif);
  font-size:2.6rem; letter-spacing:.12em; background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.estate-card__badge{position:absolute; top:1rem; left:1rem; z-index:2; background:rgba(27,23,18,.82);
  color:var(--cream-on-dark); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.42em .9em; border-radius:30px}
.estate-card__price{position:absolute; bottom:1rem; left:1rem; z-index:2; background:var(--gold-grad);
  color:#fff; font-weight:600; font-size:.95rem; padding:.5em 1em; border-radius:30px; box-shadow:0 8px 20px rgba(138,101,41,.35)}
.estate-card__body{display:flex; flex-direction:column; gap:.55rem; padding:1.3rem 1.4rem 1.5rem}
.estate-card__title{font-size:1.4rem; line-height:1.2}
.estate-card__loc{display:flex; align-items:center; gap:.4em; color:var(--ink-60); font-size:.88rem}
.estate-card__loc svg{width:16px; height:16px; color:var(--gold); flex:none}
.estate-card__facts{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0 .2rem}
.estate-card__facts li{display:flex; flex-direction:column; gap:.1rem; background:var(--cream-3); border-radius:10px; padding:.5rem .8rem}
.estate-card__facts span{font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep)}
.estate-card__facts b{font-weight:600; font-size:.9rem; color:var(--ink)}
.estate-card__cta{margin-top:.4rem; font-size:.76rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--gold-deep); font-weight:500; display:inline-flex; gap:.4em; transition:color .3s}
.estate-card:hover .estate-card__cta{color:var(--gold)}
.estate-empty{text-align:center; padding:clamp(2.5rem,6vw,4rem); background:var(--cream-2);
  border:1px dashed var(--gold-line); border-radius:18px; display:flex; flex-direction:column; align-items:center; gap:1.3rem}
.estate-empty p{color:var(--ink-80); max-width:46ch}

/* ============================ Immobilie-Detail ========================= */
.crumbs{background:var(--cream-2); border-bottom:1px solid var(--line); font-size:.82rem}
.crumbs .container{display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; padding-block:.9rem}
.crumbs a{color:var(--ink-60)} .crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{color:var(--ink-45)}
.crumbs__here{color:var(--ink); font-weight:500}

.prop-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem}
.prop-head__title{font-size:clamp(1.9rem,4vw,2.9rem); margin-top:.3rem}
.prop-head__loc{display:flex; align-items:center; gap:.45em; color:var(--ink-60); margin-top:.6rem; font-size:1rem}
.prop-head__loc svg{width:18px; height:18px; color:var(--gold); flex:none}
.prop-head__price{text-align:right; display:flex; flex-direction:column; gap:.25rem}
.prop-head__pricenum{font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--gold)}
.prop-head__ref{font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-45)}

.prop-gallery{margin-bottom:clamp(2rem,4vw,2.8rem)}
.prop-gallery__main{position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft); background:var(--cream-3); aspect-ratio:16/10}
.prop-gallery__main img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in}
/* Galerie-Steuerung über dem Hauptbild */
.gal-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(20,17,13,.42); backdrop-filter:blur(3px);
  opacity:.9; transition:background .3s, opacity .3s, transform .3s var(--ease)}
.gal-nav svg{width:24px; height:24px}
.prop-gallery__main:hover .gal-nav{opacity:1}
.gal-nav:hover{background:rgba(20,17,13,.7)}
.gal-nav--prev{left:.9rem} .gal-nav--prev:hover{transform:translateY(-50%) translateX(-2px)}
.gal-nav--next{right:.9rem} .gal-nav--next:hover{transform:translateY(-50%) translateX(2px)}
.gal-full{position:absolute; top:.9rem; right:.9rem; z-index:3; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; color:#fff; background:rgba(20,17,13,.42); backdrop-filter:blur(3px); transition:background .3s}
.gal-full svg{width:20px; height:20px}
.gal-full:hover{background:rgba(20,17,13,.7)}
.gal-count{position:absolute; bottom:.9rem; right:1rem; z-index:3; background:rgba(20,17,13,.55); color:#fff;
  font-size:.74rem; letter-spacing:.05em; padding:.3em .7em; border-radius:20px; backdrop-filter:blur(3px)}

/* Vollbild-Lightbox */
.lightbox{position:fixed; inset:0; z-index:2000; background:rgba(10,9,8,.94); display:flex; align-items:center; justify-content:center;
  padding:clamp(.5rem,3vw,2rem); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox__img{max-width:94vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.55); user-select:none; touch-action:pan-y}
.lightbox__close{position:absolute; top:1rem; right:1.2rem; width:46px; height:46px; font-size:1.9rem; line-height:1; color:#fff;
  background:rgba(255,255,255,.12); border-radius:50%; display:grid; place-items:center; transition:background .3s}
.lightbox__close:hover{background:rgba(255,255,255,.26)}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; color:#fff;
  background:rgba(255,255,255,.12); display:grid; place-items:center; transition:background .3s}
.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__nav svg{width:26px; height:26px}
.lightbox__nav--prev{left:1rem} .lightbox__nav--next{right:1rem}
.lightbox__count{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.82); font-size:.85rem; letter-spacing:.06em}
body.lb-locked{overflow:hidden}
@media (max-width:600px){
  .gal-nav{width:42px; height:42px} .gal-nav svg{width:21px; height:21px}
  .lightbox__nav{width:44px; height:44px} .lightbox__nav svg{width:22px; height:22px}
  .lightbox__nav--prev{left:.4rem} .lightbox__nav--next{right:.4rem}
}

/* Anfrage-Button in der dunklen CTA-Box: klar sichtbar (direkte Goldfüllung) */
.prop-cta__btn{width:100%; background:var(--gold-grad); color:#fff; border-color:transparent; box-shadow:0 10px 26px rgba(138,101,41,.42)}
.prop-cta__btn::after{display:none}
.prop-cta__btn:hover{color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(138,101,41,.55)}
.prop-cta__btn svg{width:18px; height:18px}

/* ============================ Anfrage-Modal (Pop-up) ==================== */
.modal{position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2rem); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease}
.modal.is-open{opacity:1; visibility:visible}
.modal__backdrop{position:absolute; inset:0; background:rgba(20,17,13,.62); backdrop-filter:blur(3px)}
.modal__card{position:relative; z-index:1; width:min(560px,100%); max-height:92vh; overflow-y:auto;
  background:var(--cream); border-radius:18px; box-shadow:var(--shadow-lg); padding:clamp(1.6rem,4vw,2.6rem);
  transform:translateY(14px) scale(.985); transition:transform .35s var(--ease)}
.modal.is-open .modal__card{transform:none}
.modal__close{position:absolute; top:.7rem; right:.9rem; width:40px; height:40px; font-size:1.7rem; line-height:1;
  color:var(--ink-60); border-radius:50%; display:grid; place-items:center; transition:background .3s, color .3s}
.modal__close:hover{background:var(--cream-3); color:var(--gold)}
.modal__title{font-size:clamp(1.4rem,3vw,1.8rem); margin-top:.15rem}
.modal__ref{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); margin:.35rem 0 1.4rem}
.modal .contactform .field{margin-bottom:.9rem}
.modal__done, .form-done{text-align:center; animation:doneIn .45s var(--ease)}
.modal__done{padding:1.4rem 0 .6rem}
.form-done{max-width:760px; margin-inline:auto; padding:clamp(2.4rem,5vw,3.4rem) 1.5rem;
  background:var(--cream-2); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-card)}
.modal__done-ico, .form-done__ico{width:66px; height:66px; margin:0 auto 1.3rem; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:var(--gold-grad); box-shadow:0 12px 28px rgba(138,101,41,.42)}
.modal__done-ico svg, .form-done__ico svg{width:32px; height:32px}
.modal__done h3{font-size:1.65rem; margin-bottom:.6rem}
.form-done h3{font-size:clamp(1.6rem,3vw,2rem); margin-bottom:.6rem}
.modal__done p, .form-done p{color:var(--ink-80); line-height:1.7; max-width:42ch; margin:0 auto 1.6rem}
.modal__done .btn{min-width:190px}
@keyframes doneIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (max-width:600px){
  .modal__card{padding:1.4rem 1.2rem 1.6rem}
}

/* ============================ Rechtsseiten ============================== */
.legal-page{max-width:60rem; margin-inline:auto}
.legal-page .lead{margin-bottom:1.6rem}
.legal-page h2{font-size:clamp(1.35rem,2.4vw,1.7rem); margin:2.4rem 0 .9rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--ink)}
.legal-page h2:first-of-type{border-top:0; padding-top:0; margin-top:1.6rem}
.legal-page h3{font-size:1.12rem; margin:1.6rem 0 .55rem; color:var(--gold-deep)}
.legal-page p{color:var(--ink-80); line-height:1.85; margin-bottom:1rem}
.legal-page ul, .legal-page ol{margin:0 0 1.1rem 1.35rem; color:var(--ink-80); line-height:1.8}
.legal-page li{margin-bottom:.5rem}
.legal-page li::marker{color:var(--gold)}
.legal-page a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px}
.legal-page a:hover{color:var(--gold)}
.legal-page strong{color:var(--ink)}
.datalist{display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:.55rem 1.4rem; margin:0 0 1.2rem}
.datalist dt{font-weight:500; color:var(--gold-deep); font-size:.9rem}
.datalist dd{color:var(--ink-80)}
.legal-part{margin-top:2.8rem; padding-top:2rem; border-top:2px solid var(--gold-line)}
.legal-part:first-of-type{border-top:0; padding-top:0; margin-top:1.5rem}
.legal-part__label{display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-deep);
  background:var(--cream-2); border:1px solid var(--gold-line); border-radius:20px; padding:.35em 1em; margin-bottom:.7rem}
.legal-part h2:first-of-type{border-top:0; padding-top:0; margin-top:.2rem}
.legal-stand{margin-top:2.5rem; font-size:.85rem; color:var(--ink-45)}
.legal-note{margin-top:1.6rem; padding:1rem 1.2rem; background:var(--cream-2); border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius:10px; font-size:.9rem; color:var(--ink-60)}
@media (max-width:560px){ .datalist{grid-template-columns:1fr; gap:.15rem 0} .datalist dd{margin-bottom:.7rem} }
.legal-page .table-wrap{overflow-x:auto; margin-bottom:1.4rem}
.legal-page table{width:100%; border-collapse:collapse; font-size:.92rem}
.legal-page th, .legal-page td{text-align:left; padding:.6rem .85rem; border-bottom:1px solid var(--line); color:var(--ink-80); vertical-align:top}
.legal-page thead th{color:var(--gold-deep); font-weight:500; border-bottom:1px solid var(--gold-line)}
.legal-index{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin:1.6rem 0}
.legal-index__item a{display:flex; flex-direction:column; gap:.35rem; height:100%; background:var(--cream-2); border:1px solid var(--line);
  border-radius:14px; padding:1.1rem 1.2rem; text-decoration:none; transition:border-color .3s, transform .3s, box-shadow .3s}
.legal-index__item a:hover{border-color:var(--gold-line); transform:translateY(-3px); box-shadow:var(--shadow-card)}
.legal-index__title{font-family:var(--serif); font-size:1.12rem; color:var(--ink); display:flex; justify-content:space-between; gap:.5rem; align-items:baseline}
.legal-index__arrow{color:var(--gold); transition:transform .3s}
.legal-index__item a:hover .legal-index__arrow{transform:translateX(3px)}
.legal-index__desc{font-size:.85rem; color:var(--ink-60); line-height:1.6}
.prop-gallery__thumbs{display:flex; gap:.7rem; margin-top:.8rem; overflow-x:auto; padding-bottom:.3rem}
.prop-thumb{flex:0 0 96px; width:96px; height:70px; border-radius:10px; overflow:hidden; border:2px solid transparent;
  cursor:pointer; padding:0; background:var(--cream-3); transition:border-color .3s, transform .3s}
.prop-thumb img{width:100%; height:100%; object-fit:cover}
.prop-thumb:hover{transform:translateY(-2px)}
.prop-thumb.is-active{border-color:var(--gold)}

.prop-grid{display:grid; grid-template-columns:1fr 340px; gap:clamp(1.8rem,4vw,3rem); align-items:start}
.prop-block{margin-bottom:2.2rem}
.prop-block h2{font-size:1.5rem; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line)}
.prose p{margin-bottom:1rem; color:var(--ink-80); line-height:1.85}
.prose p:last-child{margin-bottom:0}

.prop-facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; margin-bottom:2.4rem}
.prop-facts--inline{margin-bottom:0}
.prop-fact{background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.25rem}
.prop-fact__label{font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-deep)}
.prop-fact__val{font-family:var(--serif); font-size:1.2rem; font-weight:500; color:var(--ink)}

.chips{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem}
.chip{background:var(--cream-2); border:1px solid var(--gold-line); color:var(--ink-80); border-radius:30px;
  padding:.5em 1.1em .5em 2em; font-size:.86rem; position:relative}
.chip::before{content:""; position:absolute; left:1em; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--gold-grad)}

.prop-deflist{display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem}
.prop-deflist dt{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); padding-top:.15rem}
.prop-deflist dd{color:var(--ink-80)}

.prop-plans{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:1.2rem}
.prop-plan{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); background:#fff; transition:transform .4s var(--ease)}
.prop-plan:hover{transform:translateY(-4px)}
.prop-plan img{width:100%; display:block; object-fit:contain; max-height:260px; background:#fff}

.prop-downloads{display:flex; flex-direction:column; gap:.7rem; align-items:flex-start}
.dlink{display:inline-flex; align-items:center; gap:.8rem; background:var(--cream-2); border:1px solid var(--line);
  border-radius:12px; padding:.8rem 1.1rem; color:var(--ink); transition:border-color .3s, transform .3s, box-shadow .3s; max-width:100%}
.dlink:hover{border-color:var(--gold); transform:translateX(3px); box-shadow:var(--shadow-card)}
.dlink__ico{flex:none; background:var(--gold-grad); color:#fff; font-size:.62rem; font-weight:600; letter-spacing:.05em; padding:.35em .55em; border-radius:6px}

.prop-aside{position:sticky; top:100px}
.prop-cta{background:var(--panel); color:var(--cream-on-dark); border-radius:18px; padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-soft)}
.prop-cta__price{font-family:var(--serif); font-size:1.8rem; font-weight:600; color:var(--gold-bright)}
.prop-cta__ref{font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(243,236,221,.55); margin-top:.2rem}
.prop-cta .rule{margin:1.1rem 0}
.prop-cta__text{font-size:.92rem; line-height:1.7; color:rgba(243,236,221,.8); margin-bottom:1.3rem}
.prop-cta__btn{width:100%}
.prop-cta__contact{display:flex; flex-direction:column; gap:.4rem; margin-top:1.2rem; font-size:.9rem}
.prop-cta__contact a{color:var(--cream-on-dark); transition:color .3s}
.prop-cta__contact a:hover{color:var(--gold-bright)}
.prop-back{margin-top:2.5rem}

@media (max-width:900px){
  .prop-grid{grid-template-columns:1fr}
  .prop-aside{position:static; margin-top:.5rem}
}
@media (max-width:600px){
  .prop-head{flex-direction:column; align-items:flex-start}
  .prop-head__price{text-align:left}
  .estate-grid{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
}