/* ============================================================
   bundj.de – Onepager (Phase 1: Reichweite, kein Angebot)
   Farbwelt: Petrol/Teal + warmer Kupfer-Akzent
   ============================================================ */

:root{
  --teal:#20343a;          /* Petrol aus dem Porträt-Hintergrund */
  --teal-dark:#1a2b30;
  --ink:#23302f;
  --ink-soft:#5b6a68;
  --line:#e6e1d6;
  --accent:#c47d3e;        /* warmer Kupfer-Akzent */
  --accent-deep:#a5642c;
  --paper:#ffffff;
  --sand:#f5f2ea;          /* warmes Off-White */
  --maxw:940px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;line-height:1.16;letter-spacing:-0.01em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;}
section{padding:74px 0;}
.sand{background:var(--sand);}

/* ---------------- FOTO-HERO ---------------- */
.hero{
  position:relative;background:var(--teal);color:#fff;
  min-height:560px;display:flex;align-items:center;overflow:hidden;
}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero-text{max-width:560px;}

.hero-photo{position:absolute;top:0;right:0;height:100%;width:48%;z-index:1;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;}
/* linke Bildkante weich in das Petrol auslaufen lassen */
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--teal) 0%, rgba(32,52,58,.65) 22%, rgba(32,52,58,0) 55%);}

.brand{font-weight:800;letter-spacing:.02em;font-size:20px;color:#fff;margin:0 0 36px;}
.brand .dot{color:var(--accent);}
.hero .kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#e6b483;font-weight:700;margin:0 0 16px;}
.hero h1{font-size:clamp(31px,4.4vw,50px);margin:0 0 22px;color:#fff;}
.hero p.sub{font-size:clamp(17px,2vw,21px);color:#dfe6e3;max-width:500px;margin:0 0 26px;}
.hero .meta{display:inline-block;font-size:13.5px;letter-spacing:.04em;color:#fff;font-weight:600;
  border-left:3px solid var(--accent);padding-left:14px;}

/* USP-Cluster im Hero (erster Viewport) */
.hero .usp{list-style:none;padding:0;margin:24px 0 0;max-width:520px;}
.hero .usp li{position:relative;padding:0 0 0 24px;margin:0 0 10px;color:#eef3f1;font-size:16.5px;line-height:1.5;}
.hero .usp li:last-child{margin-bottom:0;}
.hero .usp li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(196,125,62,.22);}
.hero .usp b{color:#fff;font-weight:700;}

/* USP-Punkte als Fließtext mit fetter Einleitung */
.point{max-width:700px;margin:0 0 18px;}
.point b{color:var(--teal);}

/* ---------------- INHALTSBLÖCKE ---------------- */
h2{font-size:clamp(23px,3vw,31px);margin:0 0 6px;color:var(--teal);}
.rule{width:54px;height:4px;background:var(--accent);border-radius:3px;margin:0 0 22px;}
.lead{color:var(--ink-soft);margin:0 0 26px;max-width:640px;}
p.body{max-width:680px;}
p.body + p.body{margin-top:16px;}

ul.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;max-width:780px;}
ul.grid li{padding:0 0 0 28px;position:relative;}
ul.grid li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(196,125,62,.16);}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:860px;margin-top:8px;}
.fields div{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;
  padding:18px 20px;box-shadow:0 2px 12px rgba(32,52,58,.05);transition:transform .25s ease, box-shadow .25s ease;}
.fields div:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(32,52,58,.10);}
.fields strong{display:block;font-weight:700;margin-bottom:2px;color:var(--teal);}
.fields span{color:var(--ink-soft);font-size:15.5px;}

/* ---------------- KONTAKT ---------------- */
.contact{background:var(--teal);color:#fff;}
.contact h2{color:#fff;}
.contact .note{color:#cdd8d4;max-width:600px;}
.contact a{color:#fff;text-decoration:none;border-bottom:2px solid var(--accent);transition:color .2s ease;}
.contact a:hover{color:#f0c79b;}
.contact .links{font-size:21px;line-height:2.1;margin-top:6px;}

/* ---------------- FOOTER ---------------- */
footer{background:var(--teal-dark);color:#9fb0ad;font-size:14.5px;line-height:1.7;padding:52px 0 62px;}
footer h3{color:#fff;font-family:Georgia,serif;font-size:17px;margin:0 0 10px;font-weight:600;}
footer a{color:#d7e0dd;}
footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
footer .small{font-size:13px;margin-top:8px;color:#7e918e;}

/* ---------------- DEZENTE ANIMATION ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}
/* Hero-Elemente leicht gestaffelt beim Laden */
.hero .reveal{transition-duration:.8s;}
.hero .reveal:nth-child(2){transition-delay:.08s;}
.hero .reveal:nth-child(3){transition-delay:.16s;}
.hero .reveal:nth-child(4){transition-delay:.24s;}
.hero .reveal:nth-child(5){transition-delay:.32s;}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:820px){
  .hero{display:block;min-height:0;}
  .hero .wrap{padding-top:56px;padding-bottom:0;}
  .hero-text{max-width:none;}
  .hero p.sub{max-width:none;}
  .hero-photo{position:relative;width:100%;height:300px;margin-top:34px;}
  .hero-photo::after{background:linear-gradient(0deg, var(--teal) 0%, rgba(32,52,58,0) 55%);}
}
@media(max-width:640px){
  ul.grid{grid-template-columns:1fr;}
  footer .cols{grid-template-columns:1fr;gap:32px;}
}

/* Bewegung respektieren */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .fields div{transition:none;}
  html{scroll-behavior:auto;}
}