/* ===========================================================
   SÓLLER RENTALS – sollerrentals.com
   Statisches HTML/CSS – keine externen Dienste, DSGVO-sauber
   =========================================================== */

:root{
  --beige:#eae6e0;
  --cream:#fbf9f5;
  --ink:#1e1d1b;
  --soft:#5d5a55;
  --rust:#8a4a2e;
  --olive:#8b8c52;
  --line:#d8d2c8;
  --serif:'Didot','Bodoni MT','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Avenir Next','Futura','Century Gothic','Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Header ---------- */
header{background:var(--beige);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,.05)}
.header-in{max-width:1280px;margin:0 auto;padding:10px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-in .logo img{height:170px;width:auto;transition:height .3s ease}
header.small .logo img{height:104px}
nav{display:flex;gap:44px;flex-wrap:wrap;align-items:center}
nav a{font-size:17.5px;letter-spacing:.01em;padding:6px 2px;color:var(--ink)}
nav a:hover{color:var(--rust)}
nav a.active{text-decoration:underline;text-underline-offset:6px}
.lang{margin-left:18px;font-size:14.5px;letter-spacing:.14em;color:var(--soft)}
.lang a{padding:4px 5px}
.lang a.active{color:var(--rust);font-weight:600;text-decoration:none}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:12px;
  flex-direction:column;gap:6px}
.menu-btn span{display:block;width:27px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .3s ease,opacity .3s ease}
header.open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
header.open .menu-btn span:nth-child(2){opacity:0}
header.open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Allgemein ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
section{padding:64px 0}
.eyebrow{font-size:16px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rust);margin-bottom:16px}
.sec-title{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(32px,4vw,46px);line-height:1.15;margin-bottom:28px}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:90px 0 30px}
.hero h1{font-family:var(--serif);font-weight:500;
  font-size:clamp(46px,7vw,84px);line-height:1.08;letter-spacing:.01em;
  opacity:0;animation:fadeUp 1.1s ease .15s forwards}
.hero .sub{color:var(--rust);font-size:20px;margin-top:34px;line-height:1.6;
  opacity:0;animation:fadeUp 1.1s ease .5s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ---------- Bildkarten (Home) – rund ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:56px;
  max-width:1080px;margin-left:auto;margin-right:auto}
.cards3 img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  box-shadow:0 14px 38px rgba(60,40,20,.13)}
.cards3 img:nth-child(2){transition-delay:.18s}
.cards3 img:nth-child(3){transition-delay:.36s}

/* ---------- Separator (Wellen aus dem Logo) ---------- */
.sep{display:flex;justify-content:center;padding:58px 0 0}
.sep svg{display:block}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1.6fr .9fr;gap:60px;align-items:start}
.about .txt p{margin-bottom:22px;color:var(--soft)}
.about img{width:100%;aspect-ratio:1/1;object-fit:cover;--rvt:translateX(70px);
  position:sticky;top:210px}

/* ---------- Eigentümer-Block ---------- */
.owners{border-top:1px solid var(--line);padding-top:54px;padding-bottom:10px}
.owners-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:0 64px;align-items:start}
.owners-grid p{margin-bottom:20px;color:var(--soft);font-size:15.5px}
.usps-sec{padding:28px 0 76px}

/* ---------- Vorteile-Panel (Ihre Vorteile auf einen Blick) ---------- */
.adv{background:var(--beige);padding:38px 38px 26px;--rvt:translateX(70px);
  position:sticky;top:210px}
.adv .eyebrow{margin-bottom:24px}
.adv h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.35;
  margin-bottom:20px}
.adv ul{list-style:none;margin:0;padding:0}
.adv li{display:flex;gap:15px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line);color:var(--ink);font-size:15.5px;line-height:1.55;
  opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}
.adv li:last-child{border-bottom:none}
.adv li svg{width:34px;flex:0 0 34px;margin-top:3px}
.adv li svg path{fill:none;stroke:var(--olive);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:62;stroke-dashoffset:62;transition:stroke-dashoffset .7s ease}
.adv.on li{opacity:1;transform:none}
.adv.on li svg path{stroke-dashoffset:0}
.adv.on li:nth-child(1){transition-delay:.15s}
.adv.on li:nth-child(2){transition-delay:.32s}
.adv.on li:nth-child(3){transition-delay:.49s}
.adv.on li:nth-child(4){transition-delay:.66s}
.adv.on li:nth-child(5){transition-delay:.83s}
.adv.on li:nth-child(6){transition-delay:1s}
.adv.on li:nth-child(7){transition-delay:1.17s}
.adv.on li:nth-child(8){transition-delay:1.34s}
.adv.on li:nth-child(9){transition-delay:1.51s}
.adv.on li:nth-child(1) svg path{transition-delay:.4s}
.adv.on li:nth-child(2) svg path{transition-delay:.57s}
.adv.on li:nth-child(3) svg path{transition-delay:.74s}
.adv.on li:nth-child(4) svg path{transition-delay:.91s}
.adv.on li:nth-child(5) svg path{transition-delay:1.08s}
.adv.on li:nth-child(6) svg path{transition-delay:1.25s}
.adv.on li:nth-child(7) svg path{transition-delay:1.42s}
.adv.on li:nth-child(8) svg path{transition-delay:1.59s}
.adv.on li:nth-child(9) svg path{transition-delay:1.76s}

/* ---------- USP 01/02/03 (gestaffelter Aufbau) ---------- */
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:30px}
.usp{border-top:1px solid var(--line);padding-top:34px}
.usp:nth-child(2){transition-delay:.22s}
.usp:nth-child(3){transition-delay:.44s}
.usp .num{font-family:var(--serif);font-size:44px;color:var(--olive)}
.usp h3{font-family:var(--serif);font-weight:500;font-size:26px;margin:18px 0 14px}
.usp p{color:var(--soft);font-size:16px;
  opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .8s ease}
.usp.on p{opacity:1;transform:none;transition-delay:.55s}
.usp:nth-child(2).on p{transition-delay:.77s}
.usp:nth-child(3).on p{transition-delay:.99s}

/* ---------- Services ---------- */
.service{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--line)}
.service:last-of-type{border-bottom:none}
.service h2{font-family:var(--serif);font-weight:500;font-size:42px;margin-bottom:26px}
.service p{color:var(--soft);text-align:justify}
.service img{width:100%;aspect-ratio:3/2;object-fit:cover}
.service .media{--rvt:translateX(80px)}
.service.rev .media{--rvt:translateX(-80px)}
@media(min-width:861px){.service.rev .media{order:-1}}

/* ---------- Apartments ---------- */
.page-title{font-family:var(--serif);font-weight:500;text-align:center;
  font-size:clamp(38px,5vw,58px);padding:64px 0 6px}
.apts{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 40px;padding:50px 0 80px}
.apt img{width:100%;aspect-ratio:1/1;object-fit:cover}
.apt figcaption{text-align:center;margin-top:18px;font-size:18.5px;line-height:1.45}
.apts .apt:nth-child(3n+2){transition-delay:.16s}
.apts .apt:nth-child(3n){transition-delay:.32s}

/* ---------- Kontakt ---------- */
.contact-hero{text-align:center;padding:90px 0 80px}
.contact-hero h1{font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,5.5vw,64px);margin-bottom:46px;
  opacity:0;animation:fadeUp 1s ease .15s forwards}
.contact-card{display:inline-block;background:#fff;border:1px solid var(--line);
  padding:48px 64px;text-align:center}
.contact-card .label{font-family:var(--serif);font-size:24px;margin-bottom:22px}
.contact-card p{font-size:19px;margin:10px 0;color:var(--soft)}
.contact-card a{color:var(--rust);border-bottom:1px solid var(--rust)}
.contact-card a:hover{opacity:.75}

/* ---------- Footer ---------- */
footer{background:var(--beige);margin-top:40px}
.footer-in{max-width:1280px;margin:0 auto;padding:34px 30px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.footer-in .flogo img{height:88px;width:auto}
.f-line{font-size:15.5px;color:var(--soft);line-height:1.7}
.f-line a{color:var(--soft);border-bottom:1px solid transparent;transition:color .2s ease}
.f-line a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.f-line a.fe{color:var(--rust);border-bottom-color:var(--rust)}
.f-sub{font-size:13.5px;color:var(--soft);opacity:.85;line-height:1.7}
.f-sub a{color:var(--soft);border-bottom:1px solid transparent}
.f-sub a:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* ---------- Rechtsseiten (Legal) ---------- */
.legal{max-width:820px;margin:0 auto;padding:80px 30px 40px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.5vw,50px);
  margin-bottom:10px}
.legal .updated{color:var(--soft);font-size:15px;margin-bottom:40px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:25px;
  margin:38px 0 14px;color:var(--ink)}
.legal p,.legal li{color:var(--soft);font-size:16.5px;line-height:1.8;margin-bottom:14px}
.legal ul{padding-left:22px;margin-bottom:14px}
.legal a{color:var(--rust);border-bottom:1px solid var(--rust)}
.legal a:hover{opacity:.75}
.legal .ph{background:#f3eee6;border:1px dashed var(--rust);border-radius:4px;
  padding:1px 7px;color:var(--rust);font-size:14.5px}

/* ---------- Cookie-Hinweis ---------- */
.cookie-bar{position:fixed;left:18px;right:18px;bottom:18px;z-index:200;
  max-width:560px;margin:0 auto;background:var(--beige);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(40,25,10,.22);border-radius:10px;
  padding:22px 24px;display:none}
.cookie-bar.show{display:block;animation:cbup .5s ease}
@keyframes cbup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cookie-bar p{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 16px}
.cookie-bar a{color:var(--rust);border-bottom:1px solid var(--rust)}
.cookie-bar .cb-btn{font-family:var(--sans);font-size:15px;letter-spacing:.02em;
  background:var(--rust);color:#fff;border:none;border-radius:6px;
  padding:11px 26px;cursor:pointer;transition:opacity .2s ease}
.cookie-bar .cb-btn:hover{opacity:.88}
@media(prefers-reduced-motion:reduce){.cookie-bar.show{animation:none}}

/* ---------- Scroll-Reveal ---------- */
.rv{opacity:0;transform:var(--rvt,translateY(36px));
  transition:opacity .95s ease,transform .95s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero h1,.hero .sub,.contact-hero h1{animation:none;opacity:1}
  .usp p{opacity:1;transform:none;transition:none}
  .adv li{opacity:1;transform:none;transition:none}
  .adv li svg path{stroke-dashoffset:0;transition:none}
}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .header-in{padding:8px 18px;gap:12px}
  .header-in .logo img{height:78px}
  header.small .logo img{height:78px}
  .menu-btn{display:flex}
  nav{position:absolute;top:100%;left:0;right:0;background:var(--beige);
    flex-direction:column;gap:0;align-items:stretch;text-align:center;
    padding:4px 0 20px;display:none;border-top:1px solid var(--line);
    box-shadow:0 16px 26px rgba(0,0,0,.09)}
  header.open nav{display:flex}
  nav a{padding:13px 30px;font-size:18px}
  nav a.active{text-underline-offset:5px}
  .lang{margin:12px 0 0;font-size:15px}
  .hero{padding:56px 0 24px}
  .cards3,.usps,.apts{grid-template-columns:1fr}
  .cards3 img,.usp,.apts .apt{transition-delay:0s!important}
  .about,.service{grid-template-columns:1fr;gap:34px}
  .owners-grid{grid-template-columns:1fr}
  .adv{position:static;padding:30px 24px 18px;margin-bottom:10px}
  .footer-in .flogo img{margin:0 auto}
  .contact-card{padding:36px 26px;width:100%}
}