/* =====================================================================
   Riegerhof × Die Richtige Immobilie — Landingpage
   AUSRICHTUNG: Hausmarke (bestehende D.R.I.-Page) — Variante C "Hybrid".
   - Schrift:  Inter trägt ALLES (Body, UI, Section-Headlines, Kleintext).
               Playfair Display NUR für Hero-Headline + große Kennzahlen (Premium-Akzent).
   - Farben:   Hausmarke  blau #159FE3 / #0879B8, Anthrazit-Buttons #2D2D2D, helles Layout.
   - Radius 8px, weiche Schatten — wie bestehende Seite.
   ===================================================================== */

:root{
  /* Hausmarke (aus bestehender Page übernommen) */
  --bg:#F7F7F4; --surface:#FFFFFF; --text:#2D2D2D; --muted:#5F6368; --line:#D9D9D6;
  --blue:#159FE3; --blue-dark:#0879B8; --soft-blue:#EAF7FD;
  --ink-2:#1c2226;            /* tiefes Neutral für Foto-Scrim/Footer */
  --ok:#0879B8; --err:#c0392b;

  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Playfair Display", Georgia, serif; /* nur Hero-Headline + große Kennzahlen */

  --space:clamp(1rem, 4vw, 2rem);
  --section-y:clamp(3rem, 9vw, 6rem);
  --radius:8px; --radius-lg:12px;
  --maxw:1120px; --maxw-text:720px;
  --shadow:0 16px 38px rgba(45,45,45,.07);
  --shadow-soft:0 10px 24px rgba(45,45,45,.045);
  --border:1px solid var(--line);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:clamp(1rem,2.3vw,1.05rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--blue-dark); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space)}
.wrap.narrow{max-width:860px}

/* ---------- Headlines (Inter) — Serif nur im Hero ---------- */
h1,h2,h3{font-family:var(--font-sans); font-weight:800; line-height:1.15; letter-spacing:-.01em; color:var(--text); margin:0 0 .5em; text-wrap:balance}
p{text-wrap:pretty; overflow-wrap:break-word}
.usp p,.contact-card p{hyphens:auto}
h1{font-size:clamp(2rem,6.4vw,3.4rem)}
h2{font-size:clamp(1.55rem,4.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,2.8vw,1.35rem); font-weight:700}

/* ---------- Eyebrow / Lead / Fineprint (Inter) ---------- */
.eyebrow{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:800; color:var(--blue-dark); margin:0 0 1rem; display:block}
.eyebrow-light{color:#bfe3f6}
.tick{display:none}  /* bestehende Hausmarke nutzt keinen Tick */
.lead{font-size:clamp(1.05rem,2.5vw,1.18rem); color:var(--muted); max-width:var(--maxw-text); margin:0 0 1.6rem}
.fineprint{font-size:.82rem; line-height:1.55; color:var(--muted); margin:.8rem 0 0}
.fineprint-light{color:rgba(255,255,255,.72)}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-sans); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.5rem; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, background .2s ease, box-shadow .2s ease; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.05rem; font-size:.85rem}
.btn-block{width:100%; padding:1.05rem}
/* primär = Marken-Blau (poppt auf Foto + AA-lesbar mit Weiß: 4,8:1) */
.btn-accent{background:var(--blue-dark); color:#fff}
.btn-accent:hover{background:#066291; box-shadow:0 8px 22px -8px rgba(8,121,184,.55)}
/* sekundär = Outline Blau (auf hellem Grund) */
.btn-outline{background:transparent; color:var(--blue-dark); border-color:var(--blue)}
.btn-outline:hover{background:var(--soft-blue)}
/* hero-sekundär auf Bild */
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(247,247,244,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:var(--border)}
.header-inner{display:flex; align-items:center; gap:1rem; min-height:64px}
.brand-logo{height:40px; width:auto}
.header-nav{display:none; margin-left:auto; gap:1.4rem}
.header-nav a{font-family:var(--font-sans); font-size:.9rem; font-weight:500; color:var(--text); letter-spacing:.01em}
.header-nav a:hover{color:var(--blue-dark); text-decoration:none}
.site-header .btn{margin-left:auto}
.header-nav + .btn{margin-left:0}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:clamp(560px,92vh,820px); display:flex; align-items:flex-end; overflow:hidden; background:#1c2226}
/* Bild-Trailer: ruhige Ken-Burns-Bewegung + sanfter Crossfade (4 Slides, 32s Loop) */
.hero-slides{position:absolute; inset:0; overflow:hidden}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:opacity,transform; animation:heroFadeA 32s linear infinite}
.hero-slide:nth-child(1){animation-delay:0s; animation-name:heroFadeA}
.hero-slide:nth-child(2){animation-delay:8s; animation-name:heroFadeB}
.hero-slide:nth-child(3){animation-delay:16s; animation-name:heroFadeA}
.hero-slide:nth-child(4){animation-delay:24s; animation-name:heroFadeB}
@keyframes heroFadeA{
  0%{opacity:0; transform:scale(1.05)}
  4%{opacity:1}
  25%{opacity:1; transform:scale(1.14)}
  29%{opacity:0; transform:scale(1.15)}
  100%{opacity:0; transform:scale(1.15)}
}
@keyframes heroFadeB{
  0%{opacity:0; transform:scale(1.15)}
  4%{opacity:1}
  25%{opacity:1; transform:scale(1.06)}
  29%{opacity:0; transform:scale(1.05)}
  100%{opacity:0; transform:scale(1.05)}
}
/* eleganter Übergang: dezenter Kopf-Scrim, klare Bildmitte, satter Fuß für Lesbarkeit der Headline */
.hero-overlay{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(20,26,30,.42) 0%, rgba(20,26,30,.12) 26%, rgba(20,26,30,.10) 52%, rgba(20,26,30,.52) 78%, rgba(16,21,24,.88) 100%),
  radial-gradient(120% 80% at 22% 92%, rgba(8,40,58,.40) 0%, rgba(8,40,58,0) 60%)}
.hero-content{position:relative; z-index:2; padding-block:clamp(2.4rem,7vw,4rem); color:#fff}
.hero h1{font-family:var(--font-display); font-weight:700; color:#fff; letter-spacing:-.005em; margin-bottom:.4em; text-shadow:0 2px 30px rgba(10,20,26,.45)}
.hero-sub{font-family:var(--font-sans); font-size:clamp(1.05rem,2.5vw,1.22rem); max-width:640px; color:#eef2f4; margin:0 0 1.6rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem}
.hero-trust{list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; padding:0; margin:0 0 1.2rem; border-top:1px solid rgba(255,255,255,.22); padding-top:1.1rem}
.hero-trust li{font-family:var(--font-sans); font-size:.78rem; letter-spacing:.04em; color:#cfe7f5; text-transform:uppercase}
.hero-trust strong{display:block; font-family:var(--font-sans); font-size:1.45rem; color:#fff; letter-spacing:-.01em; font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y)}
.section-soft{background:var(--surface)}     /* weiße Sektion */
.section-tint{background:var(--soft-blue)}    /* zarte Blau-Tönung (statt Petrol) */

/* ---------- Cards / USP ---------- */
.card{background:var(--surface); border:var(--border); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,1.9rem); box-shadow:var(--shadow)}
.usp-grid{display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:1.6rem}
.usp .usp-ico{font-family:var(--font-sans); width:46px; height:46px; border-radius:var(--radius); background:var(--soft-blue); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; margin-bottom:1rem}
.usp h3{margin-bottom:.4em}
.usp p{font-size:.97rem; color:var(--muted); margin:0}

/* ---------- Eckdaten ---------- */
.facts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1.6rem}
.fact{background:var(--surface); border:var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; box-shadow:var(--shadow-soft)}
.fact-num{font-family:var(--font-sans); font-size:clamp(1.5rem,4.6vw,2.05rem); font-weight:700; color:var(--text); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fact-lbl{font-family:var(--font-sans); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--blue-dark); line-height:1.35; font-weight:600}
.timeline{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:1.6rem; padding-top:1.4rem; border-top:var(--border)}
.tl-item{display:flex; flex-direction:column}
.tl-k{font-family:var(--font-sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.tl-v{font-family:var(--font-sans); font-size:1.2rem; color:var(--text); font-weight:700}
.tl-sep{width:34px; height:1px; background:var(--line)}

/* ---------- Lage ---------- */
.lage-grid{display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:1.2rem}
.dist-list{list-style:none; margin:0; padding:0}
.dist-list li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.85rem 0; border-bottom:var(--border)}
.dist-list li:last-child{border-bottom:none}
.d-name{font-family:var(--font-sans); font-weight:600; color:var(--text)}
.d-val{font-family:var(--font-sans); font-size:.92rem; color:var(--blue-dark); white-space:nowrap; font-weight:600}
.lage-fig{margin:0}
.lage-fig img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow)}
figcaption{font-family:var(--font-sans); font-size:.82rem; color:var(--muted); margin-top:.6rem}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1.5rem}
.g-item{margin:0; position:relative; border-radius:var(--radius); overflow:hidden; background:#e8ecee}
.g-item img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease}
.g-item:hover img{transform:scale(1.04)}
.g-item figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; padding:.7rem .8rem .55rem; color:#fff; font-size:.78rem; background:linear-gradient(180deg,transparent,rgba(28,34,38,.78))}
.g-wide{grid-column:span 2}
.g-wide img{aspect-ratio:16/9}

/* ---------- AfA-Rechner ---------- */
.calc{margin-top:1.4rem}
.calc-input label{font-family:var(--font-sans); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.7rem}
.calc-field{display:flex; align-items:center; gap:1rem}
.calc-field input[type=range]{flex:1; accent-color:var(--blue)}
#gw-out{font-family:var(--font-sans); font-size:1.4rem; color:var(--text); min-width:9ch; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.calc-table{width:100%; border-collapse:collapse; margin-top:1.4rem; font-family:var(--font-sans); font-variant-numeric:tabular-nums}
.calc-table th,.calc-table td{text-align:right; padding:.6rem .4rem; font-size:.92rem}
.calc-table th:first-child,.calc-table td:first-child{text-align:left}
.calc-table thead th{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--line); font-weight:700}
.calc-table tbody td{border-bottom:1px solid var(--line); color:var(--text)}
.calc-table tfoot td{font-weight:700; padding-top:.9rem; color:var(--text)}
.num-accent{font-family:var(--font-sans); color:var(--blue-dark)!important; font-weight:700; font-size:1.1rem; font-variant-numeric:tabular-nums}
.afa-note{font-family:var(--font-sans); font-size:.85rem; color:var(--muted); margin-top:1rem; padding-left:1rem; border-left:3px solid var(--blue)}

/* ---------- Finanzierung / Rendite ---------- */
.finance-intro{display:grid; gap:1.2rem; grid-template-columns:1fr; align-items:start}
.finance-summary{box-shadow:var(--shadow-soft); background:linear-gradient(145deg, var(--surface), var(--soft-blue))}
.finance-summary strong{display:block; font-family:var(--font-sans); font-size:1.05rem; color:var(--blue-dark); margin-bottom:.4rem}
.finance-summary p{font-family:var(--font-sans); color:var(--muted); margin:0}
.finance-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.4rem}
.finance-card{box-shadow:var(--shadow-soft)}
.finance-kicker{display:inline-flex; align-items:center; justify-content:center; width:2.15rem; height:2.15rem; border-radius:var(--radius); background:var(--soft-blue); color:var(--blue-dark); font-family:var(--font-sans); font-weight:800; font-size:.82rem; margin-bottom:.95rem}
.finance-card h3{margin-bottom:.45em}
.finance-card p{font-family:var(--font-sans); color:var(--muted); font-size:.97rem; margin:0}
.finance-cta{display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; justify-content:space-between; margin-top:1.35rem; padding-top:1.25rem; border-top:var(--border)}
.finance-cta .fineprint{max-width:680px; margin:0}

/* ---------- Formular ---------- */
.lead-form{margin-top:1.6rem; background:var(--surface)}
.field{margin-bottom:1.1rem; display:flex; flex-direction:column}
.field-row{display:grid; grid-template-columns:1fr; gap:0}
.field label{font-family:var(--font-sans); font-size:.82rem; font-weight:700; letter-spacing:.01em; color:var(--text); margin-bottom:.4rem}
.req{color:var(--blue-dark)} .opt{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0}
.field input,.field select{font-family:var(--font-sans); font-size:1rem; padding:.85rem .9rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus,.field select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,159,227,.18)}
.field input.invalid,.field select.invalid{border-color:var(--err); box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field-check{flex-direction:row; align-items:flex-start; gap:.6rem}
.field-check input{margin-top:.25rem; width:18px; height:18px; flex:0 0 auto; accent-color:var(--blue)}
.field-check label{font-family:var(--font-sans); font-size:.86rem; font-weight:400; letter-spacing:0; color:var(--muted); margin:0; line-height:1.5}
.err{font-family:var(--font-sans); font-size:.78rem; color:var(--err); min-height:1em; margin-top:.35rem}
.err-block{flex-basis:100%}
.form-foot{margin-top:1rem; color:var(--muted)}
.form-status{margin-top:1.2rem; padding:1.1rem 1.2rem; border-radius:var(--radius); font-family:var(--font-sans); font-size:.95rem}
.form-status.success{background:var(--soft-blue); border:1.5px solid var(--blue); color:var(--blue-dark)}
.form-status.error{background:rgba(192,57,43,.07); border:1.5px solid var(--err); color:#922b21}
.form-status h3{color:var(--text); margin:0 0 .3em; font-size:1.2rem}
.btn-accent[aria-busy=true]{opacity:.7; pointer-events:none}

/* ---------- Kontakt / Footer ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.5rem}
.contact-card h3{font-size:1.05rem; margin-bottom:.3em}
.contact-card p{font-family:var(--font-sans); color:var(--muted); margin:0}
.site-footer{background:var(--ink-2); color:#c4cace; padding-block:clamp(2.4rem,6vw,3.4rem)}
.footer-logo{height:36px; filter:brightness(0) invert(1) opacity(.9); margin-bottom:1.2rem}
.footer-legal{font-family:var(--font-sans); font-size:.8rem; line-height:1.6; color:#9aa1a6; max-width:760px; margin:0 0 1.2rem}
.footer-nav{display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1rem}
.footer-nav a{font-family:var(--font-sans); font-size:.82rem; color:#c4cace; letter-spacing:.02em}
.footer-note{font-family:var(--font-sans); font-size:.76rem; color:#7b8186; margin:0}

/* ---------- Legal Pages ---------- */
.legal-page{background:var(--bg)}
.legal-main{padding-block:clamp(2.4rem,7vw,4.8rem)}
.legal-shell{max-width:900px}
.legal-card{background:var(--surface); border:var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:clamp(1.4rem,4vw,2.6rem)}
.legal-card h1{font-family:var(--font-sans); font-size:clamp(2rem,5vw,3rem); color:var(--text); margin-bottom:.35em}
.legal-card h2{font-size:clamp(1.25rem,3vw,1.65rem); margin-top:1.8em}
.legal-card h3{font-size:1.05rem; margin-top:1.3em}
.legal-card p,.legal-card li{font-size:.98rem; color:var(--muted)}
.legal-card ul{padding-left:1.2rem}
.legal-meta{color:var(--blue-dark); font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.6rem}
.legal-address{padding:1rem 1.1rem; background:var(--soft-blue); border-radius:var(--radius); border:1px solid rgba(21,159,227,.22)}
.legal-back{display:inline-flex; margin-bottom:1rem; font-weight:700}
.legal-divider{height:1px; background:var(--line); margin:1.6rem 0}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .field-row{grid-template-columns:1fr 1fr; gap:1rem}
  .lage-grid{grid-template-columns:1fr 1fr; align-items:center}
  .facts-grid{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .finance-intro{grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr)}
}
@media (min-width:860px){
  .header-nav{display:flex}
  .site-header .btn{margin-left:1.4rem}
  .usp-grid{grid-template-columns:repeat(3,1fr)}
  .finance-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .g-wide{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important; transition:none!important; animation:none!important}
  .g-item img{transition:none}
  /* Trailer aus -> erstes Bild statisch, scharf */
  .hero-slide{opacity:0; transform:none!important}
  .hero-slide:nth-child(1){opacity:1}
}

/* ===================== CONSENT-BANNER ===================== */
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{background:var(--bg); border-color:var(--muted)}
.consent-banner{position:fixed; left:0; right:0; bottom:0; z-index:200; background:rgba(255,255,255,.98); backdrop-filter:saturate(160%) blur(8px); border-top:var(--border); box-shadow:0 -8px 30px -12px rgba(0,0,0,.18); transform:translateY(110%); transition:transform .35s ease}
.consent-banner.show{transform:translateY(0)}
.consent-inner{max-width:1080px; margin:0 auto; padding:1rem 1.2rem; display:flex; gap:1.1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.consent-text{font-family:var(--font-sans); font-size:.86rem; line-height:1.5; color:var(--text); margin:0; flex:1 1 360px; max-width:64ch}
.consent-actions{display:flex; gap:.6rem; flex:0 0 auto}
@media (max-width:560px){
  .consent-inner{flex-direction:column; align-items:stretch; gap:.8rem}
  .consent-actions{justify-content:stretch}
  .consent-actions .btn{flex:1}
}