/*
Theme Name: Wedel Real Estate
Theme URI: https://wedel-realestate.de
Author: Wedel Real Estate
Description: Modernes Block-Theme für den Immobilienmakler Wedel Real Estate — Wiesbaden & Frankfurt. Verkaufen und Vermieten. Vorbereitet für ImmoScout24-Plugins (z. B. WP-ImmoMakler).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
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: wedel
Tags: full-site-editing, block-patterns, custom-colors, real-estate, business
*/

/* =========================================================
   Wedel Real Estate — ergänzende Styles
   (Farben/Schriften kommen aus theme.json; hier liegen
   Animationen und Spezial-Komponenten wie die Hero-Skyline)
   ========================================================= */

:root{
  --ink:#111111;
  --ink-soft:#3a3a3a;
  --line:#e2e2e2;
  --paper:#ffffff;
  --mist:#f6f5f3;
  --gold:#9a8a6b;
  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

::selection{background:var(--ink);color:#fff}

/* ---------- HEADER (Kopfbereich) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.wedel-brand{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.28em;
  font-size:20px;
  color:#fff;
  transition:color .4s ease;
  text-transform:uppercase;
  line-height:1;
}
.wedel-brand small{
  display:block;font-size:9px;letter-spacing:.42em;
  font-weight:500;margin-top:4px;opacity:.85;
}
.site-header.scrolled .wedel-brand{color:var(--ink)}
.site-header.scrolled .wp-block-navigation a{color:var(--ink-soft)}

/* ---------- HERO ---------- */
.wedel-hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;color:#fff;
}
/* ====== HIER IHR EIGENES VIDEO EINSETZEN ======
   Im Block-Editor: Hero-Gruppe auswählen und ein
   Cover-Block mit Videohintergrund (Wiesbaden/Frankfurt)
   verwenden. Die animierte Skyline unten ist nur Platzhalter.
   ============================================== */
.wedel-hero-skyline{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#1a2430 0%,#2c3a4a 42%,#41556b 100%);
  overflow:hidden;
}
.wedel-sky-glow{
  position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  width:140%;height:60%;
  background:radial-gradient(ellipse at center bottom,rgba(214,180,120,.32),transparent 62%);
  animation:wedelGlow 9s ease-in-out infinite;
}
@keyframes wedelGlow{0%,100%{opacity:.7}50%{opacity:1}}
.wedel-skyline-strip{position:absolute;bottom:0;left:0;width:200%;height:46%;display:flex}
.wedel-skyline-strip.back{opacity:.55;height:54%;animation:wedelDrift 90s linear infinite}
.wedel-skyline-strip.front{animation:wedelDrift 60s linear infinite}
@keyframes wedelDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wedel-building{
  align-self:flex-end;margin-right:5px;position:relative;
  background:linear-gradient(180deg,#0d141c,#141d28);
  border-top:1px solid rgba(255,255,255,.04);
}
.wedel-building::before{
  content:'';position:absolute;inset:8px 6px auto 6px;height:60%;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 4px,rgba(232,205,140,.5) 4px 8px),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.45) 7px 12px);
  opacity:.5;
}
.wedel-hero-content{position:relative;z-index:3;padding:0 24px;max-width:880px;margin:0 auto}
.wedel-hero-eyebrow{font-size:12px;letter-spacing:.4em;text-transform:uppercase;font-weight:400}
.wedel-hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(42px,7vw,86px);line-height:1.04;
  margin:22px 0 26px;letter-spacing:.01em;color:#fff;
}
.wedel-hero h1 em{font-style:italic;font-weight:400}
.wedel-hero p.lead{
  font-size:clamp(15px,1.8vw,18px);font-weight:300;
  max-width:540px;margin:0 auto 38px;color:rgba(255,255,255,.88);
}
.wedel-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- BUTTONS ---------- */
.wedel-btn{
  display:inline-block;padding:15px 36px;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border:1px solid #fff;color:#fff;transition:.35s ease;cursor:pointer;background:transparent;
}
.wedel-btn:hover{background:#fff;color:var(--ink)}
.wedel-btn-solid{background:#fff;color:var(--ink)}
.wedel-btn-solid:hover{background:transparent;color:#fff}

/* ---------- ABSCHNITTE ---------- */
.wedel-eyebrow{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}

/* ---------- LEISTUNGEN ---------- */
.wedel-services{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}
.wedel-service{padding:clamp(40px,5vw,68px);transition:background .4s ease}
.wedel-service:first-child{border-right:1px solid var(--line)}
.wedel-service:hover{background:var(--mist)}
.wedel-service .num{font-family:var(--display);font-size:18px;color:var(--gold);letter-spacing:.1em;margin-bottom:24px}
.wedel-service h3{font-family:var(--display);font-weight:600;font-size:30px;margin-bottom:16px}
.wedel-service ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0}
.wedel-service li{font-size:14px;color:var(--ink-soft);padding-left:22px;position:relative}
.wedel-service li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}

/* ---------- ABLAUF ---------- */
.wedel-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.wedel-step{text-align:center}
.wedel-step .s-num{font-family:var(--display);font-size:40px;color:var(--ink);line-height:1;margin-bottom:18px;display:inline-block}
.wedel-step .s-num::after{content:'';display:block;width:30px;height:1px;background:var(--gold);margin:14px auto 0}
.wedel-step h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;font-weight:600}

/* ---------- REGIONEN ---------- */
.wedel-region-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wedel-region{position:relative;aspect-ratio:16/10;overflow:hidden;display:flex;align-items:flex-end;padding:36px;color:#fff}
.wedel-region.wi{background:linear-gradient(160deg,#2a3645,#46586d)}
.wedel-region.fra{background:linear-gradient(160deg,#1e2935,#384a5e)}
.wedel-region::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5));z-index:1}
.wedel-region h3{font-family:var(--display);font-size:34px;font-weight:600;position:relative;z-index:2}

/* ---------- KONTAKT ---------- */
.wedel-contact{background:var(--ink);color:#fff}
.wedel-contact h2,.wedel-contact h3{color:#fff}

/* ---------- REVEAL-ANIMATION ---------- */
.wedel-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.wedel-reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .wedel-services{grid-template-columns:1fr}
  .wedel-service:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .wedel-steps{grid-template-columns:1fr 1fr;gap:32px}
  .wedel-region-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .wedel-reveal{opacity:1;transform:none}
}