/* =====================================================
   Scharfe Immobilien – zentrale Design-Tokens
   Farben & Schriften HIER anpassen, gilt für alle Seiten
   ===================================================== */
:root{
  --navy:        #11304a;   /* Primärfarbe (Header, Überschriften) */
  --navy-light:  #1d4a6e;
  --gold:        #c29a4f;   /* Akzent (Buttons, Hervorhebungen)    */
  --gold-dark:   #a8813a;
  --bg:          #ffffff;
  --bg-alt:      #f3f5f7;   /* Wechselsektionen                    */
  --text:        #22303e;
  --muted:       #6b7a89;
  --line:        #e3e8ee;

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:   "Segoe UI",system-ui,-apple-system,Helvetica,sans-serif;

  --radius:      12px;
  --shadow:      0 2px 10px rgba(17,48,74,.08);
  --container:   1120px;
}

/* ============ Schriften (lokal gehostet, DSGVO-konform) ============
   Dateien von https://gwfh.mranftl.com/fonts/playfair-display
   herunterladen und in assets/fonts/ ablegen. Bis dahin greift
   automatisch der Georgia-Fallback. */
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/playfair-display-v37-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/playfair-display-v37-latin-800.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display";font-style:italic;font-weight:700;font-display:swap;
  src:url("fonts/playfair-display-v37-latin-700italic.woff2") format("woff2");
}

/* ============ Basis ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);font-size:16px;line-height:1.6;}
img{max-width:100%;display:block;}
a{color:var(--navy);}
h1,h2,h3{font-family:var(--font-display);color:var(--navy);line-height:1.25;}
h1{font-size:clamp(28px,4.5vw,46px);font-weight:800;}
h2{font-size:clamp(23px,3vw,32px);font-weight:700;margin-bottom:14px;}
h3{font-size:19px;font-weight:700;}
p{margin-bottom:14px;}
.container{max-width:var(--container);margin:0 auto;padding:0 22px;}
.narrow{max-width:760px;}
.center{text-align:center;}
.lead{font-size:18px;color:var(--navy-light);font-weight:600;}
.muted{color:var(--muted);}
.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:14px;}
.section{padding:72px 0;}
.section-alt{background:var(--bg-alt);}
.section-head{margin-bottom:34px;}

.btn{display:inline-block;border:none;border-radius:9px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold-dark);}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--navy);}
.btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);}
.btn-outline-light:hover{border-color:#fff;}

/* ============ Header ============ */
.site-header{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(0,0,0,.2);}
.header-inner{display:flex;align-items:center;gap:26px;height:68px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:700;font-size:18px;white-space:nowrap;font-family:var(--font-display);}
.logo-img{height:54px;width:auto;display:block;}
.logo-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;}
.logo em{font-style:normal;color:var(--gold);}
.main-nav{display:flex;gap:4px;flex:1;justify-content:center;}
.main-nav a{color:#b9c8d6;text-decoration:none;font-size:14.5px;font-weight:600;padding:9px 14px;border-radius:8px;}
.main-nav a:hover{color:#fff;}
.main-nav a.active{background:var(--navy-light);color:#fff;}
.header-phone{color:var(--gold);font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap;}
.nav-toggle{display:none;}
.nav-burger{display:none;}

@media(max-width:860px){
  .main-nav{position:fixed;inset:68px 0 auto 0;background:var(--navy);flex-direction:column;padding:10px 22px 22px;display:none;}
  .nav-toggle:checked ~ .main-nav{display:flex;}
  .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto;}
  .nav-burger span{width:24px;height:2.5px;background:#fff;border-radius:2px;}
  .header-phone{margin-left:8px;}
  .header-inner{gap:14px;}
}

/* ============ Hero ============ */
.hero{background:linear-gradient(rgba(13,34,53,.72),rgba(13,34,53,.78)),
       url("img/hero.webp") center/cover no-repeat;
       color:#fff;padding:110px 0 100px;}
@media(max-width:680px){
  .hero{background-image:linear-gradient(rgba(13,34,53,.72),rgba(13,34,53,.78)),url("img/hero-mobil.webp");}
}
.hero-inner{max-width:780px;}
.hero h1{color:#fff;margin-bottom:18px;}
.hero-sub{font-size:18px;color:#cdd9e4;margin-bottom:30px;max-width:600px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ============ Kachel-Trio ============ */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px;}
.tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;display:block;}
.tile:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(17,48,74,.13);}
.tile-icon{width:48px;height:48px;border-radius:11px;background:var(--bg-alt);color:var(--navy);font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tile h3{margin-bottom:8px;}
.tile p{font-size:14.5px;color:var(--muted);}
.tile-link{font-weight:700;color:var(--gold-dark);font-size:14px;}
.tile-highlight{border-top:4px solid var(--gold);}
.tile-highlight .tile-icon{background:var(--gold);color:#fff;}

/* ============ Immobilien-Grid ============ */
.property-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;}
.property-card{background:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;}
.property-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(17,48,74,.15);}
.pc-img{position:relative;height:210px;background:linear-gradient(135deg,#9fb0bf,#73879a);display:flex;align-items:center;justify-content:center;}
.pc-photo{color:#fff;font-size:13px;opacity:.8;}
.pc-badge{position:absolute;top:13px;left:13px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;}
.pc-badge-res{background:var(--gold);}
.pc-body{padding:19px 20px 18px;display:flex;flex-direction:column;flex:1;}
.pc-body h3{font-size:16.5px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pc-loc{font-size:13.5px;color:var(--muted);margin-bottom:13px;}
.pc-facts{list-style:none;display:flex;gap:16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;margin-bottom:15px;flex-wrap:wrap;}
.pc-facts strong{color:var(--navy);}
.pc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;}
.pc-price{font-size:20px;font-weight:800;color:var(--navy);}
.pc-more{font-size:13.5px;font-weight:700;color:var(--gold-dark);}

/* ============ Wizard ============ */
.wizard{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:34px 32px;max-width:680px;margin:0 auto;}
.wizard-progress{height:5px;background:var(--bg-alt);border-radius:999px;margin-bottom:28px;overflow:hidden;}
.wizard-bar{height:100%;width:8%;background:var(--gold);border-radius:999px;transition:width .3s;}
.wz-step{display:none;}
.wz-step.active{display:block;animation:wzIn .25s ease;}
@keyframes wzIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.wz-step.active{animation:none;}}
.wz-step h3{margin-bottom:20px;font-size:21px;}
.wz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.wz-opt{background:var(--bg);border:2px solid var(--line);border-radius:11px;padding:18px 14px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s;}
.wz-opt:hover{border-color:var(--gold);background:#fdf9f1;}
.wz-ico{display:block;font-size:26px;margin-bottom:8px;color:var(--navy);}
.wz-back{background:transparent;border:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;padding:8px 0;font-family:inherit;}
.wz-back:hover{color:var(--navy);}
.wz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.wz-fields{display:grid;gap:14px;margin-bottom:20px;}
.wz-fields-2{grid-template-columns:1fr 1fr;}
@media(max-width:560px){.wz-fields-2{grid-template-columns:1fr;}}
.wz-fields label{font-size:13px;font-weight:700;color:var(--navy-light);display:block;}
.wz-fields input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid #ccd5dd;border-radius:9px;font-size:15px;font-family:inherit;}
.wz-fields input:focus{outline:3px solid rgba(194,154,79,.25);border-color:var(--gold);}
.wz-consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);margin-bottom:20px;cursor:pointer;}
.wz-consent input{margin-top:3px;flex-shrink:0;width:16px !important;height:16px;padding:0;}
.wz-done{text-align:center;padding:18px 0;}
.wz-done-ico{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.wz-done p{margin-bottom:22px;}
.wz-error{outline:3px solid rgba(220,60,60,.3) !important;border-color:#d05050 !important;}

/* ============ Kontakt ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:46px;align-items:start;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{font-style:normal;background:var(--bg);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:24px 26px;line-height:1.8;}
.contact-form{background:var(--bg);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:28px 28px 26px;display:grid;gap:15px;}
.contact-form label{font-size:13px;font-weight:700;color:var(--navy-light);}
.contact-form input:not([type=checkbox]),.contact-form textarea{width:100%;margin-top:6px;padding:12px 13px;border:1px solid #ccd5dd;border-radius:9px;font-size:15px;font-family:inherit;}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid rgba(194,154,79,.25);border-color:var(--gold);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}

/* ============ Footer ============ */
.site-footer{background:var(--navy);color:#b9c8d6;padding:54px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:40px;}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;}}
.logo-footer{margin-bottom:16px;}
.site-footer p{font-size:14px;}
.site-footer a{color:#b9c8d6;text-decoration:none;}
.site-footer a:hover{color:#fff;}
.footer-nav{display:flex;flex-direction:column;gap:9px;font-size:14px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:13px;padding:18px 0;}

/* ============ Detailseite ============ */
.detail-head{padding:38px 0 8px;}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px;}
.breadcrumb a{color:var(--muted);}
.detail-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.detail-price{font-size:30px;font-weight:800;color:var(--navy);white-space:nowrap;}
.detail-loc{color:var(--muted);font-size:15px;}

.gallery-main{position:relative;margin:18px 0 8px;border-radius:var(--radius);overflow:hidden;background:#1a2b3c;cursor:pointer;user-select:none;}
.gallery-main img{width:100%;height:480px;object-fit:cover;display:block;transition:opacity .2s;}
@media(max-width:680px){.gallery-main img{height:260px;}}
.gallery-main .g-counter{position:absolute;bottom:14px;right:16px;background:rgba(13,30,46,.7);color:#fff;font-size:12.5px;padding:4px 11px;border-radius:999px;font-weight:600;pointer-events:none;}
.gallery-main .g-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(13,30,46,.6);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2;}
.gallery-main .g-arrow:hover{background:rgba(13,30,46,.9);}
.gallery-main .g-prev{left:12px;}
.gallery-main .g-next{right:12px;}
.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;}
.gallery-thumbs img{width:90px;height:62px;object-fit:cover;border-radius:7px;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .15s,opacity .15s;opacity:.65;}
.gallery-thumbs img.active{border-color:var(--gold);opacity:1;}
.gallery-hint{font-size:12px;color:var(--muted);margin-bottom:6px;}
/* Lightbox */
.lb-overlay{display:none;position:fixed;inset:0;background:rgba(8,18,28,.95);z-index:200;flex-direction:column;align-items:center;justify-content:center;}
.lb-overlay.open{display:flex;}
.lb-overlay img{max-width:min(1200px,95vw);max-height:85vh;object-fit:contain;border-radius:9px;display:block;}
.lb-overlay .lb-counter{color:#fff;font-size:13px;margin-top:14px;font-weight:600;opacity:.7;}
.lb-overlay .lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;line-height:1;opacity:.8;}
.lb-overlay .lb-close:hover{opacity:1;}
.lb-overlay .g-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:26px;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lb-overlay .g-arrow:hover{background:rgba(255,255,255,.25);}
.lb-overlay .g-prev{left:16px;}
.lb-overlay .g-next{right:16px;}
@media(max-width:680px){.lb-overlay .g-arrow{width:38px;height:38px;font-size:18px;}}
.gallery-hint{font-size:12px;color:var(--muted);margin-bottom:6px;}

.detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:36px;align-items:start;padding-bottom:70px;}
@media(max-width:880px){.detail-grid{grid-template-columns:1fr;}}
.facts-table{width:100%;border-collapse:collapse;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:28px;}
.facts-table td{padding:11px 16px;border-bottom:1px solid #f0f3f6;font-size:14.5px;}
.facts-table tr:last-child td{border-bottom:none;}
.facts-table td:first-child{color:var(--muted);width:46%;}
.facts-table td:last-child{font-weight:600;color:var(--navy);}
.energy-scale{display:flex;border-radius:8px;overflow:hidden;margin:10px 0 4px;font-size:11px;font-weight:800;color:#fff;text-align:center;}
.energy-scale span{flex:1;padding:7px 0;}
.energy-scale .on{outline:3px solid var(--navy);outline-offset:-3px;position:relative;}
.detail-text h3{margin:26px 0 10px;}
.sidebar-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;position:sticky;top:92px;}
.sidebar-card h3{margin-bottom:14px;}
.expose-btn{display:flex;align-items:center;gap:12px;background:var(--bg-alt);border:1px solid var(--line);border-radius:11px;padding:14px 16px;text-decoration:none;color:var(--navy);font-weight:700;font-size:14.5px;margin-bottom:22px;}
.expose-btn:hover{border-color:var(--gold);}
.expose-btn .pdf-ico{width:40px;height:40px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.expose-btn small{display:block;font-weight:500;color:var(--muted);font-size:12px;}

/* ============ Team (Über uns) ============ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;margin-top:38px;}
.team-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.team-card img{width:100%;aspect-ratio:2/3;object-fit:cover;}
.team-body{padding:18px 20px 20px;}
.team-body h3{font-size:18px;margin-bottom:3px;}
.team-role{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold-dark);margin-bottom:11px;}
.team-body p{font-size:14px;color:var(--muted);margin-bottom:0;}
.checklist{list-style:none;display:grid;gap:11px;margin:20px 0 8px;}
.checklist li{padding-left:30px;position:relative;font-size:15.5px;}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ============ Bewertungs-CTA (Startseite) ============ */
.cta-banner{background:linear-gradient(120deg,var(--navy),var(--navy-light));border-radius:18px;padding:44px 46px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:0 8px 26px rgba(17,48,74,.22);}
@media(max-width:640px){.cta-banner{padding:32px 26px;}}

/* ============ Transparenter Header über dem Hero (Startseite) ============ */
.header-overlay{position:absolute;top:0;left:0;right:0;background:transparent;box-shadow:none;z-index:50;}
.header-overlay .header-inner{height:92px;}
.header-overlay .logo-img{height:68px;}
.header-overlay .main-nav a{font-family:var(--font-display);font-size:16.5px;font-weight:600;color:#fff;padding:9px 13px;border-radius:0;}
.header-overlay .main-nav a.active,.header-overlay .main-nav a:hover{background:transparent;color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;}
.header-overlay .header-phone{font-family:var(--font-display);color:#fff;border:1px solid rgba(255,255,255,.85);border-radius:6px;padding:11px 22px;font-weight:600;font-size:15px;}
.header-overlay .header-phone:hover{background:rgba(255,255,255,.12);}
@media(max-width:860px){
  .header-overlay .main-nav{background:rgba(13,34,53,.96);}
  .header-overlay .nav-toggle:checked ~ .main-nav{display:flex;}
}

/* Hero auf der Startseite: zentriert, hoch, Bild deutlich sichtbar */
.hero-home{background:linear-gradient(rgba(13,30,46,.42),rgba(13,30,46,.5)),
       url("img/hero.webp") center/cover no-repeat;
       min-height:58vh;display:flex;align-items:center;padding:150px 0 70px;}
@media(max-width:680px){
  .hero-home{background-image:linear-gradient(rgba(13,30,46,.45),rgba(13,30,46,.55)),url("img/hero-mobil.webp");min-height:52vh;}
}
.hero-home .hero-inner{max-width:880px;margin:0 auto;text-align:center;}
.hero-home .hero-sub{margin-left:auto;margin-right:auto;}
.hero-home .hero-actions{justify-content:center;}

/* ============ Sticky-Header beim Scrollen ============ */
.header-overlay{position:fixed;transition:background .25s,box-shadow .25s;}
.header-overlay.scrolled{background:rgba(13,30,46,.96);box-shadow:0 1px 10px rgba(0,0,0,.25);}
.header-overlay.scrolled .header-inner{height:68px;}

/* ============ Cookie-Banner ============ */
.ck-banner{position:fixed;bottom:0;left:0;right:0;background:var(--navy);color:#e0e8f0;padding:18px 22px;z-index:300;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 -2px 14px rgba(0,0,0,.25);transform:translateY(0);transition:transform .3s;}
.ck-banner.hidden{transform:translateY(110%);}
.ck-banner p{margin:0;font-size:13.5px;flex:1;min-width:240px;}
.ck-banner a{color:var(--gold);}
.ck-actions{display:flex;gap:9px;flex-shrink:0;}
.ck-btn{border:none;border-radius:8px;padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.ck-ok{background:var(--gold);color:#fff;}
.ck-ok:hover{background:var(--gold-dark);}
.ck-info{background:transparent;color:#aebfce;border:1px solid #aebfce;}
.ck-info:hover{color:#fff;border-color:#fff;}

/* ============ Spam-Schutz: Honeypot-Felder ============ */
/* Absolut positioniert außerhalb des sichtbaren Bereichs.
   Nicht display:none (Bots erkennen das) sondern per Position versteckt. */
.hp-wrap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;tab-size:0;}
.hp-wrap input,.hp-wrap label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}