@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Dancing+Script:wght@600&display=swap');

:root{
  --bg:#f4eee5; --ink:#1f2325; --ink-soft:rgba(31,35,37,.68);
  --accent:#35657c; --accent-soft:rgba(53,101,124,.12);
  --sand:#ecd4b3;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);overflow-x:hidden}

/* Hintergrund */
.background-wrapper{position:fixed;inset:0;z-index:-2;background:url("images/Van.jpg") center/cover no-repeat fixed}
.background-overlay{
  position:absolute;inset:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:
    radial-gradient(circle at 15% 10%, rgba(236,212,179,.55), rgba(236,212,179,0) 45%),
    linear-gradient(125deg, rgba(244,238,229,.9) 10%, rgba(46,93,111,.32) 80%);
}

/* Header jetzt sticky und nimmt Platz im Layout ein */
.site-header{
  position:sticky; top:12px; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin:18px 16px 0; /* Abstand zu den Rändern */
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(244,238,229,.35);
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  padding:10px 16px 10px 10px; box-shadow:0 10px 30px rgba(19,37,45,.08)
}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  padding:4px 16px 4px 6px;border-radius:999px;
  background:rgba(244,238,229,.78);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 25px rgba(0,0,0,.12)
}
.brand-logo{
  width:clamp(62px,6vw,82px);height:clamp(62px,6vw,82px);
  border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.8);
  background:#fff;filter:drop-shadow(0 3px 10px rgba(0,0,0,.2))
}
.brand-label{font-weight:600;letter-spacing:.08em;font-size:.85rem;white-space:nowrap;text-transform:uppercase;color:rgba(31,35,37,.85)}
.top-nav{display:flex;gap:.6rem}
.ghost-link{background:rgba(244,238,229,.7);border:1px solid rgba(31,35,37,.08);border-radius:999px;padding:6px 14px;font-size:.78rem;text-decoration:none;color:var(--ink);transition:.2s}
.ghost-link:hover{background:rgba(53,101,124,.13);border-color:rgba(53,101,124,.4)}

/* Typo & Socials (unverändert, weiße Schrift im Bild) */
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;margin:0 0 10px;color:#fff}
.handwriting{font-family:"Dancing Script",cursive}
.hej{font-size:clamp(2.2rem,5.2vw,3.2rem);margin:0 0 8px;color:#fff}
.hero-line{display:inline}
.hero-line-2{margin-left:.35rem}
.lead{font-size:1rem;line-height:1.6;margin:0 0 12px}
.lead .here{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);transition:.2s}
.lead .here:hover{border-bottom-color:#fff}
.no-wrap{white-space:nowrap}
.social-row{display:flex;align-items:center}
.social-btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:0 30px;height:50px;border-radius:999px;text-decoration:none;color:#fff;font-weight:600;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .18s ease, background .18s ease
}
.social-btn svg{width:22px;height:22px;fill:#fff}
.social-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.32)}

/* Van-Sektion */
.van-feature{width:100vw;margin-left:calc(50% - 50vw);margin-top:1.2rem;margin-bottom:3rem;display:flex;justify-content:center}
.van-hero{
  position:relative;width:min(900px,92vw);aspect-ratio:3416/4272;
  border-radius:35px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.25);
  background:radial-gradient(circle at 6% 12%, rgba(236,212,179,.55), rgba(236,212,179,0) 45%), #d6e0e4;
}
.van-hero-media{
  position:absolute;inset:0;display:flex;justify-content:center;align-items:center
}
.van-hero-img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:contrast(1.05) saturate(1.05)
}
.van-hero-overlay{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 40%),
    radial-gradient(circle at 90% 10%, rgba(53,101,124,.35), rgba(53,101,124,0) 50%);
  z-index:1
}

/* In Bild integrierte Textbox (weiße Schrift, obere Zone) */
.van-overlay-content{
  position:absolute; z-index:2;
  top:4%; left:clamp(28px,5vw,70px); right:clamp(190px,22vw,260px);
  max-width:360px;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35)
}

/* Pfote weiß und neben „Emma“ */
.paw-icon{display:inline-flex;align-items:center;margin-left:.4rem;transform:translateY(.06em)}
.paw-svg{width:1.15em;height:1.15em;fill:#fff}
.emma-wrap{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}

/* Tag unten im Bild */
.van-hero-tag{
  position:absolute;bottom:20px;left:24px;background:rgba(244,238,229,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:7px 20px 8px;
  font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(31,35,37,.9);
  box-shadow:0 14px 40px rgba(0,0,0,.2)
}

/* Rundes Bild (bereits +15% größer gesetzt in vorherigem Schritt) */
.heart-badge{position:absolute;top:14%;right:24px;width:160px;height:160px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));z-index:3}
.circle-photo{width:100%;height:100%;border-radius:50%;overflow:hidden;border:4px solid rgba(244,238,229,.98);background:#d4c9bb;display:flex;align-items:center;justify-content:center}
.circle-photo img{width:140%;height:140%;object-fit:cover;object-position:center 35%;transform:translateY(-15%)}

/* Footer */
.footer{text-align:center;padding:14px 12px 30px;color:rgba(244,238,229,.9);position:relative;z-index:5}
.impressum-link{color:rgba(244,238,229,.95);font-weight:600;text-decoration:none}
.impressum-link:hover{text-decoration:underline}
.footer-note{display:block;margin-top:6px;font-size:.68rem;opacity:.75}

/* Responsive */
@media (max-width:720px){
  .site-header{margin:14px 12px 0;padding:8px 12px 8px 8px;gap:.9rem}
  .brand{padding:2px 10px 2px 4px;gap:8px}
  .brand-logo{width:58px;height:58px}
  .brand-label{font-size:.78rem}
  .ghost-link{padding:4px 10px;font-size:.72rem}

  .van-feature{margin-top:.6rem}
  .van-hero{
    width:calc(100% - 22px);
    border-radius:0;
    box-shadow:none;
    background:transparent;
    padding:0;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
  }
  .van-hero-overlay{display:none}
  .van-hero-media{
    position:relative;
    order:2;
    width:100%;
    height:auto;
  }
  .van-hero-img{
    position:relative;
    width:100%;
    height:auto;
    border-radius:28px;
    box-shadow:0 20px 45px rgba(0,0,0,.18)
  }
  .mobile-hero{
    position:relative;
    z-index:3;
    top:auto;left:auto;right:auto;
    margin:0 auto 16px;
    padding:20px 22px 22px;
    border-radius:28px;
    background:rgba(244,238,229,.95);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 25px 50px rgba(0,0,0,.16);
    color:var(--ink);
    text-shadow:none;
  }
  .mobile-hero .kicker,
  .mobile-hero .hej,
  .mobile-hero .lead,
  .mobile-hero .social-btn span,
  .mobile-hero .here{color:var(--ink)}
  .mobile-hero .lead .here{border-bottom-color:rgba(31,35,37,.3)}
  .mobile-hero .paw-svg{fill:var(--ink)}
  .hero-line{display:block}
  .hero-line-1{margin-bottom:3px}
  .hero-line-2{display:flex;align-items:center;gap:.35rem;margin-left:0}
  .hej{font-size:2rem;line-height:1.18;margin-bottom:6px}
  .lead{width:100%;margin:8px 0 16px;font-size:.98rem}
  .social-row{width:100%;justify-content:center}
  .social-btn{
    width:100%;
    max-width:340px;
    justify-content:center;
    padding:0 34px;
    height:50px;
    margin:0 auto;
    color:#fff
  }

  .heart-badge{
    width:82px;
    height:82px;
    top:12px;
    right:18px;
    bottom:auto;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.22))
  }
  .heart-badge .circle-photo{border:none}
  .van-hero-tag{display:none}
  .van-feature{margin-bottom:0;padding-bottom:0}
  .footer{display:none}
}
@media (max-width:560px){
  .heart-badge{top:10px;right:14px}
}