/* ============================================================
   ClusterBuy – Landing Styles (index.html) – OKTAGON-VERSION
   ------------------------------------------------------------
   Re-ordered + cleaned (no visual changes intended)
   ============================================================ */

/* ========================= 1) RESET & BASIS ========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body{
  /* Typografie global wie Hero */
  font-family: var(--font-ui);
  font-size: var(--text-size);
  line-height: var(--text-line);

  color: var(--color-text);
  background: var(--color-bg);
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ================= 2) DESIGN-TOKENS + TYPOGRAFIE ================= */
:root{
  /* Farben */
  --bg:#f6f7fb;
  --card:#fff;
  --border:#e8e8ec;
  --text:#111;
  --link:#0a66c2;

  --dl-color-theme-neutral-dark:#191818;
  --dl-color-theme-neutral-light:#FBFAF9;
  --dl-color-theme-primary1:#FFD786;        /* Akzent */
  --dl-color-theme-secondary1:#FFFFFF;
  --dl-color-theme-secondary2:#FBF1EB;

  --color-text:var(--dl-color-theme-neutral-dark);
  --color-bg:var(--dl-color-theme-neutral-light);
  --color-surface:var(--dl-color-theme-secondary1);
  --color-surface-soft:var(--dl-color-theme-secondary2);
  --color-accent:var(--dl-color-theme-primary1);
  --color-border:#CCC;
  --color-border-subtle:#E6E6E6;

  /* Layout */
  --header-h:80px;
  --logo-h:50px;

  /* Länderfarben (Areas) */
  --c-white:#fff;
  --c-ch-red:#D00000;
  --c-ge-red:#CF142B;

  /* Abstände */
  --gap-title-to-hex: 36px;
  --gap-hx-to-hex:    16px;
  --after-service-gap: clamp(0px, 0vw, 0px);

  /* Oktagon-Layout */
  --oct-overlap: -0.18;

  /* Typografie – responsive Größen (für Headlines / Stats etc.) */
  --fs-300: clamp(12px, 1.2vw, 14px);
  --fs-400: clamp(14px, 1.4vw, 16px);
  --fs-500: clamp(16px, 1.8vw, 18px);
  --fs-600: clamp(18px, 2.2vw, 22px);
  --fs-700: clamp(22px, 3.0vw, 28px);
  --fs-800: clamp(28px, 3.8vw, 36px);

  /* Service-Kette (Bestellprozess) */
  --oct-cut: 0.30;
  --oct-eps: 0.008;
  --oct-step: calc(1 - var(--oct-cut) + var(--oct-eps));
  --service-shift-x: -300px;   /* negativ = nach links */

  /* Globale Schrift wie Hero */
  --font-ui: Raleway, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Playfair Display", serif;

  --text-size: 14px;        /* wie Hero */
  --text-line: 1.6;
  --text-letter: .08em;
}

h1, h2, h3, .section-title{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
}

.section-title{ font-size: var(--fs-700); }
.stat .num{ font-size: var(--fs-600); }
.stat .label{
  font-size: var(--fs-300);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 380px){
  :root{
    --fs-700: clamp(20px, 4vw, 24px);
    --fs-800: clamp(24px, 5vw, 30px);
  }
}

/* ===================== 3) HEADER & NAVIGATION ===================== */
.home-container2,
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background:#fff;
  border-bottom:1px solid #E6E6E6;
  z-index:1000;
}

.site-header-inner{
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand,
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-logo{
  display:block;
  height:var(--logo-h);
  width:auto;
}

.home-main{ max-width:none; margin:0px 0; padding:0 16px; }

/* Desktop-Nav */
.site-nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav-links a{ padding:8px 6px; border-radius:6px; }
.site-nav-links a:hover{ background:rgba(0,0,0,.06); }

.btn-portal{
  border:1px solid var(--color-border);
  padding:8px 12px;
  border-radius:8px;
  background:var(--color-accent);
  color:var(--color-text);
  font-weight:600;
  text-decoration:none;
}

/* Mobile-Nav */
.nav-toggle{
  display: none;
  border: none;
  background: transparent;
  font-size: 28px;
  color: #111;
  cursor: pointer;
  margin-left: 12px;
  transition: opacity .2s ease;
}

.nav-toggle:hover{ opacity:.6; }

.mobile-nav{
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: 220px;
  background: #fff;
  border-left: 1px solid var(--color-border-subtle);
  box-shadow: -4px 0 12px rgba(0,0,0,0.08);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 999;
}

.mobile-nav.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }
.mobile-nav a{
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--text-line);
}
.mobile-nav a:hover{ background: rgba(0,0,0,0.04); }

.mobile-nav .btn-portal{
  display:block;
  margin:12px;
  text-align:center;
  background:var(--color-accent);
  border-radius:8px;
  padding:10px;
  font-weight:600;
}

/* ========================= 4) SEKTIONEN ========================= */
.section{
  background:transparent;
  padding:clamp(36px,6vw,72px) 16px;
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

.section-title{ margin:0 0 8px; text-align:center; }
.title-underline{ margin:8px auto var(--gap-title-to-hex); }

/* About-Rahmen */
#about .section-title{ margin-bottom:0; }
#about .title-underline{ width:72px; height:2px; }
#about .hex{ margin-top:0; }

/* ====================== 5) OKTAGONE – BASIS ====================== */
.hex{
  --hex-bg: var(--dl-color-theme-primary1);
  position:relative;
  display:grid;
  place-items:left;
  text-align:center;

  width:min(520px,85vw);
  aspect-ratio:1 / 1;
  background:var(--hex-bg);

  clip-path: polygon(
    30% 0, 70% 0,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0 70%, 0 30%
  );

  padding:clamp(12px, 2.6vw, 22px);
  margin:16px auto;
  line-height:1.3;
}

.hex > * + *{ margin-top:6px; }

/* Varianten */
.hex--decent_orange{ --hex-bg: #FFD786; }
.hex--sun{ --hex-bg: #FFD786; }
.hex--light{ --hex-bg: #e6e6e6; }
.hex--hero{ box-shadow: 0 10px 28px rgba(0,0,0,.08); }

/* Globaler Soft-Innenrand (außer Service, dort gezielt deaktiviert) */
.hex::after{
  content:"";
  position:absolute;
  inset: 14px;
  clip-path: inherit;
  border: 1px solid rgba(0,0,0,0.22);
  pointer-events:none;
}

/* ====================== 6) HERO (Start) ====================== */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#start .hex-pair{ margin-top: var(--gap-title-to-hex); }

#start .hex-content{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size: var(--text-size)!important;
}

/* Text im Hero wie Top-Navigation */
.text-hero-body{
  font-family: var(--font-ui);
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--color-text);
  margin: 0;
}

/* Lead (finale Version mit clamp + Uppercase) */
.text-hero-lead{
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.2vw, 13px) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: var(--text-line);
  margin: 0 0 8px 0;
  color: var(--color-text);
}

/* Optional: zwei Hero-Oktagone nebeneinander */
.hex-pair{
  display:flex;
  gap: var(--gap-hx-to-hex);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.hex--special{ width: min(560px, 88vw); }
.hex--adjacent{ width: min(560px, 88vw); }

/* HERO: beide Oktagons größer */
#start .hex--special,
#start .hex--adjacent{
  width: min(580px, 92vw);
}

#start .hex--special,
#start .hex--adjacent{
  width: min(580px, 92vw);
}




#start .hex--adjacent{ background: #e6e6e6; }

/* Rechtes Hero-Oktagon (Video) */
#start .hex--adjacent .hero-video{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#start .hex--adjacent .video-caption{
  font-family: var(--font-ui);
  font-size: var(--text-size);
  letter-spacing: .08em;
  color: #111;
  margin: 0 0 10px 0;
  text-align: center;
}

#start .hex--adjacent .video-embed{
  width: 90%;
  max-width: none;
  aspect-ratio: 16 / 9;
}

#start .hex--adjacent iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* ====================== 7) SERVICE (Bestellprozess – Kette) ====================== */

/* Bühne */
.hex-chain{
  --oct-w: clamp(320px, 32vw, 410px);
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: calc((var(--oct-w) * var(--oct-step)) + var(--oct-w) + 40px);
}

/* Basestyle der Oktagone */
#service .hex-chain .hex{
  position: absolute;
  width: var(--oct-w);
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: clamp(12px, 2vw, 18px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Deaktiviere Ränder/Shadows im Service (wie original) */
#service .hex::after,
#service .hex--hero::after,
#service .hex--special::after{ display: block !important; }

/* Positionierung (bis zu 5 Elemente; 1–4 genutzt, 5 optional) */
#service .hex-chain .hex:nth-child(1){
  left: calc(50vw + var(--service-shift-x) - (var(--oct-w) * 0.5) - (var(--oct-w) * var(--oct-step)));
  top:  calc(var(--oct-w) * var(--oct-step));
}

#service .hex-chain .hex:nth-child(2){
  left: calc(50vw + var(--service-shift-x) - (var(--oct-w) * 0.5));
  top: 0;
}

#service .hex-chain .hex:nth-child(3){
  left: calc(50vw + var(--service-shift-x) - (var(--oct-w) * 0.5) + (var(--oct-w) * var(--oct-step)));
  top:  calc(var(--oct-w) * var(--oct-step));
}

#service .hex-chain .hex:nth-child(4){
  left: calc(50vw + var(--service-shift-x) - (var(--oct-w) * 0.5) + 2*(var(--oct-w) * var(--oct-step)));
  top: 0;
}

#service .hex-chain .hex:nth-child(5){
  left: calc(50vw + var(--service-shift-x) - (var(--oct-w) * 0.5) + 3*(var(--oct-w) * var(--oct-step)));
  top:  calc(var(--oct-w) * var(--oct-step));
}

/* Typo */
.hex-title-service{
  margin: 0 0 6px 0;
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.8;
}

.text-service-body{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.4;
}

/* Video-Caption (Service) */
.video-caption{
  font-size: clamp(11px, 1.2vw, 13px) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: var(--text-line);
  margin-bottom: 8px;
}

/* Container im Video-Octagon (Bestellprozess) */
#service .hex-content--video{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#service .hex-content--video .video-caption{
  font-family: var(--font-ui);
  font-size: var(--text-size);
  letter-spacing: .08em;
  color: #111;
  margin: 0 0 10px 0;
  text-align: center;
}

#service .hex-content--video .video-embed{
  width: 85%;
  max-width: none;
  aspect-ratio: 16 / 9;
}

#service .hex-content--video .video-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Mobile: untereinander */
@media (max-width: 980px){
  .hex-chain{
    width: 100%;
    left: 0;
    transform: none;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 0;
  }

  #service .hex-chain .hex{
    position: static;
    width: clamp(300px, 84vw, 380px);
    aspect-ratio: 1 / 1;
  }
}

/* ================== 9) AREAS (Liefercluster) ================== */
#areas{
  --oct-w: 240px;
  --oct-cut: 0.30;

  --oct-side: calc(var(--oct-w) * (1 - (2 * var(--oct-cut))));

  --row-gap-y: 18px;
  --row2-x: calc((var(--oct-w) + var(--oct-side)) / 2);
  --row2-y: calc((var(--oct-w) * var(--oct-cut)) * -1);

  --row2-x-fine: -140px;
  --row2-y-fine: 0px;

  --areas-gray: #e6e6e6;
  --areas-orange: #FFD786;
}

/* Container */
#areas .hex-grid{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap-y);
}

/* Reihen */
#areas .hex-row{
  display: flex;
  width: fit-content;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  gap: var(--oct-side);
  margin-top: 0;
}

/* Reihe 2 verschieben */
#areas .hex-row:nth-child(even){
  transform: translate(
    var(--row2-x-fine),
    calc(var(--row2-y) + var(--row2-y-fine))
  );
}

/* Tiles */
#areas .hex-row .hex{
  width: var(--oct-w);
  aspect-ratio: 1 / 1;
  padding: 14px;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;

  --hex-bg: var(--areas-gray);
  color: #111;
}

/* NUR zweite Reihe komplett orange */
#areas .hex-row:nth-child(2) .hex{
  --hex-bg: var(--areas-orange) !important;
}

/* Flagge + Land */
#areas .cluster-country{
  display: grid;
  gap: 4px;
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-size);
  line-height: var(--text-line);
}

#areas .cluster-country .country-flag{
  font-size: 3.2rem;
  line-height: 1;
}

#areas .cluster-country .country-name{
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Next delivery */
#areas .cluster-next-delivery{
  display: grid;
  gap: 2px;
  margin-top: -6px;
  line-height: 1.2;
  font-size: 0.95rem;
  text-align: center;
  font-family: var(--font-ui);
}

#areas .cluster-next-delivery .next-label{ opacity: 0.85; }
#areas .cluster-next-delivery .next-date{ font-weight: 700; }

/* Responsive */
@media (max-width: 900px){
  #areas{ --oct-w: 220px; }
}

@media (max-width: 740px){
  #areas .hex-row{
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  #areas .hex-row:nth-child(even){ transform: none; }

  #areas .hex-row:nth-child(2) .hex{
    --hex-bg: var(--areas-orange) !important;
  }
}

/* ====================== 10) KONTAKT ====================== */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  gap:24px;
  align-items:start;
}

@media (max-width: 1000px){
  .contact-grid{ grid-template-columns: 1fr; }
}

#contact .contact-form-wrapper{
  width: 540px;
  height: auto;
  padding:16px 24px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:18px;
  box-shadow:0 2px 4px rgba(0,0,0,05);
}

#contact .contact-form-wrapper h3{
  text-align:center;
}

#contact .contact-form{
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

#contact .contact-form .form-row{ display:grid; gap:6px; margin-bottom:4px; }
#contact .contact-form .form-row.row-4{ grid-template-columns:80px 80px 1fr 1fr; }
#contact .contact-form .form-row.row-2{ grid-template-columns:1fr 1fr; }
#contact .contact-form .field{ display:flex; flex-direction:column; gap:2px; }

#contact .contact-form label{
  font-size: var(--text-size);
  color:var(--color-text);
  font-family: var(--font-ui);
  line-height: var(--text-line);
}

#contact .contact-form .input,
#contact .contact-form .select,
#contact .contact-form .textarea{
  width:100%;
  font-size: var(--text-size);
  font-family: var(--font-ui);
  line-height: var(--text-line);
  height:26px;
  padding:2px 4px;
  border:1px solid #ccc;
  border-radius:4px;
  background:var(--color-surface);
  color:var(--color-text);
}

#contact .contact-form .textarea{
  min-height:70px;
  resize:vertical;
  height:auto;
}

#contact .contact-form .select{ appearance:none; }
#contact .contact-form .actions{ text-align:right; margin-top:6px; }

#contact .contact-form .btn-submit{
  display:inline-block;
  padding:6px 12px;
  font-size: var(--text-size);
  font-family: var(--font-ui);
  line-height: var(--text-line);
  border:1px solid #ccc;
  border-radius:4px;
  background:var(--dl-color-theme-primary1);
  color:#000;
  cursor:pointer;
  transition:filter .2s ease;
}

#contact .contact-form .btn-submit:hover{ filter:brightness(.98); }

#contact .contact-right .hex{
  max-width: 520px;
  width: 100%;

  /* Text mittig im Oktagon */
  display: grid;
  place-items: center;
  text-align: center;
  margin-top: 0px;
}

#contact .contact-right .hex > div{
  max-width: 85%;
}

/* Kontakt-Oktagon rechts hat kein .hex-content -> gezielt überschreiben */
#contact .contact-right .hex h3,
#contact .contact-right .hex p,
#contact .contact-right .hex a{
  font-family: var(--font-ui);
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--color-text);
}

#contact .contact-right .hex h3{ font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
#contact .contact-right .hex p{ font-weight: 400; }

/* ================== 11) FOOTER ================== */
.site-footer{
  text-align:center;
  padding: 18px 12px;
  border-top:1px solid var(--color-border-subtle);
  background:#fff;
  font-size: var(--text-size);
  font-family: var(--font-ui);
  line-height: var(--text-line);
}

/* ====================== 12) RESPONSIVE TWEAKS ===================== */
@media (max-width: 1000px){
  .site-nav-links { display: none; }
  .nav-toggle { display: inline-block; }
}

@media (max-width: 640px){
  #start .hex, #about .hex{ --oct-w: clamp(320px, 86vw, 520px); }
  .hero{ min-height:60vh; }
  .stats-bar{ flex-wrap:wrap; gap:10px; }
}

/* ================= 13) UTILITIES ================= */
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-16 { margin-bottom: 16px; }

.grid-center { display: grid; gap: 0; justify-items: center; }
.hex-col-gap2 { display: flex; flex-direction: column; gap: 2px; }

/* Überschriften in Oktagonen: einheitlich, bold, UPPERCASE */
.hex h3,
.hex h4{
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.4;
  margin: 0 0 8px 0;
}

/* Typografie in Oktagonen: wie Hero (zentral, für alle Inhalte) */
.hex,
.hex p,
.hex a,
.hex li{
  font-family: var(--font-ui);
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--color-text);
}

/* Optional: falls irgendwo noch andere Defaults greifen */
p, li, a, label, input, select, textarea, button{
  font-family: var(--font-ui);
  line-height: var(--text-line);
}

/* Anchor offsets (wie bei dir) */
#start,
#service,
#about,
#areas,
#contact{
  scroll-margin-top: 40px !important;
}

#contact{
  padding-bottom: 280px;
}


.section-title{
  letter-spacing: .32em;   /* Abstand zwischen Buchstaben */
  text-transform: uppercase;
}

.section-title.spaced span{
  margin-right: 1.2em;     /* Abstand zwischen Wörtern */
}

.section-title.spaced span:last-child{
  margin-right: 0;
}


#areas .cluster-country{
  gap: 2px;
  margin-top: 2px;
}

#areas .cluster-next-delivery{
  gap: 0px;
  margin-top: -2px;
  line-height: 1.15;
}


/* AREAS: mehr Abstand oben im Oktagon */
#areas .hex-row .hex{
  padding-top: 48px;      /* vorher effektiv ~14px */
}

html, body{
  height: 100%;
}

body{
  background-color: var(--color-bg);
  background-image: url("/assets/svg/bg-main.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

.site-bg{
  position: fixed;
  inset: 0;
  background: url("/assets/svg/bg-main.svg") center top / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}