/* ===================================================================
   GINII WITH A BOTTLE — shared styles
   70s retro sun/floral palette, matched to the client's own artwork.
   Bewusst ohne externe Schriftarten-Ladung (siehe Datenschutzerklärung) —
   es werden ausschliesslich system-eigene Schriftarten verwendet.
=================================================================== */

:root{
  --cream:      #fbecd2;
  --cream-2:    #f6e3bf;
  --paper:      #fff8ea;
  --rust:       #c14a1f;
  --rust-deep:  #9c3517;
  --clay:       #e07a2e;
  --clay-deep:  #c85e1c;
  --mustard:    #e9a83a;
  --olive:      #6b7a3a;
  --brown:      #2e1a10;
  --brown-soft: #4a2c1a;
  --line:       rgba(46,26,16,0.18);

  --font-display: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --font-body:    Georgia, "Palatino Linotype", "Times New Roman", serif;
  --font-accent:  Rockwell, "Arial Black", "Segoe UI Black", Georgia, serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -10%, #fff3dc 0%, var(--cream) 45%, var(--cream-2) 100%);
  color:var(--brown);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- sunburst backdrop ---------- */
.sunburst{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% 8%,
      rgba(224,122,46,0.07) 0deg 6deg,
      transparent 6deg 12deg);
  mask-image: radial-gradient(circle at 50% 8%, black 0%, black 35%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 8%, black 0%, black 35%, transparent 72%);
}

/* ---------- flower motif (signature element) ---------- */
.flower{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:middle;
}
.flower-corner{
  position:absolute;
  width:clamp(70px, 9vw, 130px);
  height:clamp(70px, 9vw, 130px);
  z-index:2;
  filter: drop-shadow(0 3px 6px rgba(46,26,16,0.12));
}
.flower-corner.tl{ top:-18px; left:-18px; transform:rotate(-8deg); }
.flower-corner.tr{ top:-18px; right:-18px; transform:rotate(10deg) scaleX(-1); }
.flower-corner.bl{ bottom:-18px; left:-18px; transform:rotate(14deg); }
.flower-corner.br{ bottom:-18px; right:-18px; transform:rotate(-12deg) scaleX(-1); }

@media (max-width: 720px){
  .flower-corner{ width:56px; height:56px; }
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(251,236,210,0.88);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  max-width:1080px;
  margin:0 auto;
}
.logo-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:0.04em;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--rust-deep);
}
.logo-mark img{ height:38px; width:auto; display:block; }
.logo-mark .script{
  font-style:italic;
  font-weight:500;
  font-size:0.9rem;
  color:var(--brown-soft);
}
.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.02em;
}
.nav-links a{
  text-decoration:none;
  color:var(--brown-soft);
  position:relative;
  padding-bottom:3px;
  transition:color .2s ease;
}
.nav-links a:hover,
.nav-links a.active{ color:var(--rust); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--clay);
  border-radius:2px;
}
.nav-toggle{ display:none; }

@media (max-width: 640px){
  .nav-links{ gap:16px; font-size:0.85rem; }
  .logo-mark img{ height:30px; }
  .logo-mark .script{ display:none; }
}

/* ---------- hero title block ---------- */
.hero-title-wrap{
  position:relative;
  text-align:center;
  padding:64px 20px 8px;
}
.eyebrow-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:14px auto 6px;
  color:var(--rust);
}
.eyebrow-rule .bar{
  height:2px;
  width:64px;
  background:var(--brown);
  opacity:0.75;
}
.brand-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.2rem, 10vw, 6.2rem);
  letter-spacing:0.05em;
  margin:0;
  color:var(--brown);
  line-height:0.95;
}
.brand-sub{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  color:var(--brown-soft);
  margin:2px 0 0;
}
.tagline{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--rust);
  font-size:clamp(1.6rem, 4.4vw, 2.6rem);
  text-align:center;
  margin:18px 0 0;
}

/* ---------- section dividers with flower ---------- */
.flower-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:34px 0 18px;
}
.flower-divider .flower{ width:26px; height:26px; flex:none; }
.flower-divider .rule{
  height:2px;
  background:var(--rust);
  opacity:0.55;
  flex:1;
  max-width:220px;
}

/* ---------- copy blocks (homepage story) ---------- */
.story-copy p{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1.15rem;
  margin:0 0 4px;
  color:var(--brown-soft);
}
.story-copy p.lede{ font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg: var(--rust);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-accent);
  font-weight:700;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--paper);
  background:var(--btn-bg);
  border:1.5px solid rgba(255,255,255,0.35);
  padding:16px 34px;
  border-radius:999px;
  box-shadow: 0 6px 0 rgba(46,26,16,0.18), 0 10px 22px rgba(156,53,23,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
  font-size:0.92rem;
  text-align:center;
  justify-content:center;
  line-height:1.3;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 8px 0 rgba(46,26,16,0.18), 0 14px 26px rgba(156,53,23,0.3);
}
.btn:active{ transform:translateY(1px); box-shadow:0 3px 0 rgba(46,26,16,0.18); }
.btn .spark{ opacity:0.85; }

.btn-outline{
  background:transparent;
  color:var(--rust-deep);
  border:1.5px solid var(--rust-deep);
  box-shadow:none;
}
.btn-outline:hover{ background:rgba(193,74,31,0.08); }

.btn-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ---------- feature pill bar ---------- */
.pill-bar{
  border:1.5px solid var(--rust);
  border-radius:999px;
  padding:20px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  background:var(--paper);
  box-shadow: 0 4px 18px rgba(46,26,16,0.08);
}
.pill-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-accent);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.01em;
  color:var(--brown);
}
.pill-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 28%, var(--mustard), var(--clay-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff8ea;
  flex:none;
}
.pill-dot{ color:var(--rust); opacity:0.6; font-size:1.4rem; }

@media (max-width:640px){
  .pill-bar{ gap:16px; padding:18px 20px; }
  .pill-dot{ display:none; }
}

/* ---------- truck photo frame ---------- */
.truck-frame{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(46,26,16,0.22);
  border:6px solid var(--paper);
  outline:2px solid var(--line);
}
.truck-frame img{ width:100%; height:100%; object-fit:cover; }

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  margin-top:80px;
  padding:56px 32px 40px;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--cream-2);
}
.footer-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  color:var(--rust-deep);
  letter-spacing:0.04em;
}
.footer-tag{
  font-style:italic;
  color:var(--brown-soft);
  margin:6px 0 20px;
}
.footer-instagram{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--rust-deep);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.92rem;
  margin-bottom:22px;
  padding:8px 18px;
  border:1.5px solid var(--rust);
  border-radius:999px;
  transition: background .18s ease;
}
.footer-instagram:hover{ background:rgba(193,74,31,0.08); }
.footer-links{
  display:flex;
  gap:24px;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0 0 22px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.92rem;
}
.footer-links a{ text-decoration:none; color:var(--brown-soft); }
.footer-links a:hover{ color:var(--rust); }
.footer-note{ font-size:0.85rem; color:var(--brown-soft); opacity:0.75; }

/* ---------- fade-in on load ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  animation: revealUp .8s ease forwards;
}
@keyframes revealUp{
  to{ opacity:1; transform:translateY(0); }
}
.d1{ animation-delay:.05s; }
.d2{ animation-delay:.15s; }
.d3{ animation-delay:.25s; }
.d4{ animation-delay:.35s; }
.d5{ animation-delay:.45s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- hero logo image (client artwork) ---------- */
.logo-hero{
  display:block;
  max-width:560px;
  width:100%;
  margin:0 auto;
}

/* ---------- flyer artwork blocks (client-supplied graphics) ---------- */
.flyer-block{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(46,26,16,0.14);
}
.flyer-block img{ width:100%; display:block; }

/* ---------- section spacing ---------- */
section{ position:relative; }
.section-pad{ padding:70px 0; }
.section-pad-sm{ padding:40px 0; }

hr.soft{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---------- legal footer row ---------- */
.footer-links.legal{
  margin-top:-10px;
  font-weight:500;
  font-size:0.82rem;
  opacity:0.85;
}

/* ---------- legal page content (Impressum / Datenschutz) ---------- */
.legal-content{
  max-width:760px;
  margin:0 auto;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:22px;
  padding:44px clamp(24px,5vw,56px);
  box-shadow:0 10px 26px rgba(46,26,16,0.10);
}
.legal-content h1{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.4rem);
  color:var(--rust-deep);
  margin-top:0;
}
.legal-content h2{
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--brown);
  margin:34px 0 10px;
}
.legal-content p, .legal-content li{
  color:var(--brown-soft);
  font-size:1rem;
}
.legal-content ul{ padding-left:22px; }
.legal-content a{ color:var(--rust); font-weight:600; }
.legal-content .placeholder{
  background:rgba(233,168,58,0.22);
  border:1px dashed var(--mustard);
  border-radius:6px;
  padding:0 6px;
}
.legal-updated{
  font-size:0.85rem;
  color:var(--brown-soft);
  opacity:0.75;
  margin-top:36px;
}