/* ==============================
   DESIGN TOKENS
============================== */
:root{
  --steel:#1F3B57;
  --forest:#2E5E4E;
  --porcelain:#F5F7F9;
  --slate:#2B2B2B;
  --mist:#D9E1E8;
  --amber:#F6C244;
  --white:#fff;

  --terracotta:#C1440E;
  --espresso:#3D2B1F;
  --black:#2B2B2B;

  --radius:10px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --maxw:1100px;
  
  --bio-green:#4CAF50;
  --bio-green-dark:#3e9443;
}

#zelte, #zubehoer, #lieferpauschalen, #kontakt { scroll-margin-top: 24px; }

*{ box-sizing:border-box }
html{ scroll-behavior:auto }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--slate);
  background:var(--porcelain);
  line-height:1.5;
}
h1,h2,h3{ margin:0 0 .6rem }
h1,h2{ font-family:"Bebas Neue", Inter, sans-serif; letter-spacing:.5px }
h1{ font-size:clamp(38px,6vw,72px); line-height:1 }
h2{ font-size:clamp(28px,4vw,44px) }
p{ margin:.4rem 0 1rem }
a{ color:inherit }
img{ max-width:100%; display:block }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }

/* Fokus sichtbar */
.btn:focus-visible,
a:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}


/* ==============================
   Header/Hero
============================== */
header{
  color:#fff;
  background:
    linear-gradient(0deg, rgba(31,59,87,0.5), rgba(31,59,87,0.5)),
    url('img/hero-zelt.jpg') center/cover no-repeat;
}
.hero{ padding: clamp(140px, 20vh, 260px) 0 clamp(130px, 14vh, 200px) }

.kicker{
  display:inline-block; background:rgba(246,194,68,.95); color:#000;
  padding:6px 10px; border-radius:999px; font-size:14px; font-weight:600; margin-bottom:24px
}

.hero p{ font-size:clamp(16px,2.1vw,19px); max-width:680px }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }

.btn{
  display:inline-block; padding:14px 18px; border-radius:8px; text-decoration:none;
  font-weight:600; border:2px solid transparent; transition:.2s;
}
.btn.primary{ background:#fff; color:var(--steel) }
.btn.primary:hover{ transform:translateY(-1px) }
.btn.secondary{ background:transparent; color:#fff; border-color:#fff }
.btn.secondary:hover{ background:rgba(255,255,255,.12) }

/* ==============================
   USP
============================== */
.usps{
  background:#fff;
  box-shadow:var(--shadow);
  padding:30px 0;
  position:relative;
}
.usps::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:56px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--porcelain));
}
.usps .row{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:40px; align-items:stretch;
}
.usp{
  display:flex; align-items:flex-start; gap:14px; padding:8px 4px;
  transition: transform .15s ease;
}
.usp:hover{ transform: translateY(-2px) }
.usp .ico{
  width:42px; height:42px; flex:0 0 42px; padding:6px; border-radius:50%;
  background:var(--forest); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.usp > div{ line-height:1.4 }
.meta{ font-size:14px; color:#546372 }

@media (max-width:960px){ .usps .row{ grid-template-columns:repeat(2,1fr); gap:32px } }
@media (max-width:600px){ .usps .row{ grid-template-columns:1fr; gap:28px } }
@media (min-width:1024px){ .usps{ min-height: 28vh; } }

/* ==============================
   Produktkarten / Zelte
============================== */
section{ padding:64px 0 }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card{
  background:#fff; border:1px solid var(--mist); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card .body{ padding:16px }
.card.selected{ border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(193,68,14,.15) }
.pill{
  display:inline-block; font-size:12px; background:var(--porcelain); border:1px solid var(--mist);
  padding:4px 8px; border-radius:999px; margin-bottom:8px
}

/* Preisblock */
.priceblock{ margin:.5rem 0 .75rem }
.priceblock .price{ font-weight:700; color: var(--terracotta) }
.priceblock .notes{
  margin:.25rem 0 0; padding:0; list-style:none; color:#546372; font-size:.95rem; line-height:1.35;
}
.priceblock .notes li{ position:relative; padding-left:14px }
.priceblock .notes li::before{
  content:"•"; position:absolute; left:0; top:0; line-height:1; color:#9aa7b4;
}

/* Neuer Preis-Block */

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin:.5rem 0 .75rem;
  border-top:1px solid var(--mist);
  padding-top:14px;
}

.price-label span{
  display:block;
  font-weight:600;
  color:var(--slate);
}

.price-label small{
  display:block;
  font-size:.9rem;
  color:#546372;
}

.price-value{
  font-size:38px;   
  font-weight:900;       
  color:var(--terracotta);
  white-space:nowrap;
  letter-spacing:.5px;
  line-height:1;
  text-align:right;
  min-width:110px;
}

/* Button in Karten */
.btn.booking{ background:var(--terracotta); color:#fff; border-color:var(--terracotta) }
.btn.booking:hover{ background:#a8370b; border-color:#a8370b; transform:translateY(-2px) }

/* Karten-Layout */
.grid{ align-items:stretch }
.card{ display:flex; flex-direction:column }
.card .body{
  flex:1; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.card .body .btn.booking{ margin-top:auto; padding:10px 16px; line-height:1.15; font-size:.95rem }

/* ==============================
   Services
============================== */
.band{ background:linear-gradient(90deg, var(--forest), var(--steel)); color:#fff }

/* ==============================
   Zubehör (Checkliste)
============================== */
.zubehoer .meta{ color:var(--espresso); font-size:.95rem }
.addons{
  border:0; padding:0; margin:0 0 16px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
}
@media (max-width:700px){ .addons{ grid-template-columns:1fr } }

.addon{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.03); cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.addon:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.06) }
.addon:has(input:focus-visible){ outline:2px solid var(--terracotta); outline-offset:2px }

/* Checkbox-Optik */
.addon input{ position:absolute; opacity:0; pointer-events:none }
.addon .box{
  width:22px; height:22px; flex:0 0 22px; border-radius:6px; border:2px solid var(--espresso);
  display:inline-block; position:relative; transition:all .12s ease;
}
.addon input:checked + .box{ background:var(--terracotta); border-color:var(--terracotta) }
.addon input:checked + .box::after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:12px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg);
}

/* Texte & Preis */
.addon .txt{ display:flex; flex-direction:column; line-height:1.25 }
.addon .txt b{ font-weight:700; color:var(--black) }
.addon .txt em{ font-style:normal; color:#546372; font-size:.95rem }
.addon .price{
  font-weight:700;
  color:var(--terracotta);
  font-size:1.2rem;     /* größer */
  letter-spacing:.3px;
}

@media (max-width:520px){
  .addon{ grid-template-columns:auto 1fr; grid-template-rows:auto auto }
  .addon .price{ grid-column:2; font-size:.95rem }
}

/* Zähler-Variante */
.qty-control{ display:flex; align-items:center; gap:8px }
.qty-control button{
  background:var(--terracotta); color:#fff; border:none; width:28px; height:28px;
  border-radius:6px; font-size:18px; font-weight:bold; cursor:pointer; line-height:1; padding:0;
}
.qty-control button:hover{ background:#a8370b }
.qty-value{ min-width:18px; text-align:center; font-weight:600 }

/* ==============================
   Lieferpauschalen
============================== */
.rates{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px }
.rate-card{
  background:#fff; border:1px solid var(--mist); border-radius:var(--radius);
  padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.rate-card h3{ font-size:18px; margin:0 0 4px }
.rate-card .distance{ margin:0 0 8px; color:#546372 }
.rate-card .price{ font-size:22px; margin:0 0 6px; color:var(--steel) }
.rate-card .price b{ color:var(--terracotta) }
.rate-card .note{ margin:0; font-size:.95rem; color:#546372 }
.rate-card{ cursor:pointer }
.rate-card.selected{ border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(193,68,14,.12) }

@media (max-width:960px){ .rates{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .rates{ grid-template-columns:1fr } }


/* ==========================================
   PIZZA HERO – Freunde / Party-Vibe
========================================== */

.pizza-hero{
  position:relative;
  width:100%;
  min-height:75vh;

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

  color:#fff;
  overflow:hidden;

  background:
	linear-gradient(
	  to bottom,
	  rgba(60,70,40,.30),
	  rgba(0,0,0,.25)
	),
    linear-gradient(
      to top,
      rgba(88,100,60,.25),   /* OLIV */
      rgba(0,0,0,0)
    ),
    url('img/pizza-party-garten.jpg') center/cover no-repeat;
}

/* Optional: warmer Glow von unten */
.pizza-hero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:40%;
  background:linear-gradient(
    to top,
    rgba(193,68,14,.25),
    transparent
  );
  pointer-events:none;
}


/* Container */
.pizza-overlay{
  position:relative;
  z-index:2;
  max-width:900px;
  padding:40px 20px;
}


/* Headline */
.pizza-hero h2{
  font-family:"Bebas Neue", Inter, sans-serif;
  font-size:clamp(42px,6vw,90px);
  line-height:1.05;
  letter-spacing:.5px;
  margin-bottom:24px;
  text-shadow:0 8px 25px rgba(0,0,0,.45);
}


/* Subline */
.pizza-sub{
  font-size:20px;
  margin-bottom:32px;
  opacity:.95;
  font-weight:500;
}


/* Button */
.btn.pizza-hero-btn{
  background:linear-gradient(
    135deg,
    var(--terracotta),
    #a8370b
  );

  color:#fff;
  font-size:18px;
  padding:16px 32px;
  border-radius:8px;
  border:none;

  box-shadow:
    0 15px 35px rgba(0,0,0,.35),
    0 6px 14px rgba(193,68,14,.35);

  transition:.25s ease;
}

.btn.pizza-hero-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 45px rgba(0,0,0,.45),
    0 10px 20px rgba(193,68,14,.45);
}


/* RESPONSIVE*/

@media (max-width:900px){

  .pizza-hero{
    min-height:65vh;
  }

  .pizza-hero h2{
    font-size:clamp(36px,8vw,60px);
  }

  .pizza-sub{
    font-size:17px;
  }

  .btn.pizza-hero-btn{
    width:100%;
    max-width:320px;
  }
}

@media (max-width:600px){

  .pizza-hero{
    min-height:60vh;
  }

  .pizza-overlay{
    padding:30px 16px;
  }
}


/* ==============================
   FAQ
============================== */
details{ background:#fff; border:1px solid var(--mist); border-radius:8px; padding:12px 14px }
details+details{ margin-top:10px }
summary{ cursor:pointer; font-weight:600 }
.faq-answer b{ color:var(--terracotta) }

/* ==============================
   Direkter Kontakt
============================== */
.direct-contact{
  background:#fff;
  border:1px solid var(--mist);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px 20px;
  margin:40px 0;
}
.direct-contact h2{
  font-family:"Bebas Neue", Inter, sans-serif;
  color:var(--terracotta);
  margin-bottom:10px;
}
.direct-contact p{ margin:.5rem 0 }
.contact-highlight a{
  display:inline-block;
  font-size:1.2rem;
  font-weight:700;
  color:var(--steel);
  text-decoration:none;
  margin:4px 0;
}
.contact-highlight a:hover{
  color:var(--terracotta);
  text-decoration:underline;
}

/* ==============================
   Kontakt
============================== */
#kontakt{ display:flex; align-items:center; justify-content:center; min-height:88vh }
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px }
form{ background:#fff; border:1px solid var(--mist); border-radius:var(--radius); padding:16px }
label{ display:block; font-weight:600; margin-top:10px }
input, select, textarea{ width:100%; padding:12px; border:1px solid var(--mist); border-radius:8px; font:inherit; background:#fff }
textarea{ min-height:120px }
.hint{ font-size:12px; color:#6b7785 }
.wrap.contact{ display:flex; justify-content:center }
.wrap.contact > div{ max-width:600px; width:100% }

/* Consent – Terracotta-Stil (analog Addon-Checkboxen) */
.consent{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.85rem 1rem;
  border:1px solid var(--mist);
  border-radius:12px; background:#fff; box-shadow:var(--shadow);
  cursor:pointer; user-select:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* Checkbox-Kästchen wie bei Zubehör */
.consent .check{
  width:22px; height:22px; flex:0 0 22px;
  border:2px solid var(--espresso); border-radius:6px;
  display:grid; place-items:center; background:#fff;
  transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Input bleibt fokussierbar, visuell versteckt */
.consent input{
  position:absolute; opacity:0; width:22px; height:22px; margin:0;
}

/* Hover: dezente Betonung wie bei Addons */
.consent:hover .check{ border-color:var(--terracotta) }

/* Focus: klare sichtbare Markierung */
.consent input:focus-visible + .check{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--terracotta) 25%, transparent);
  outline:2px solid var(--amber); outline-offset:2px;
}

/* Checked: Terracotta-Hintergrund + Haken */
.consent input:checked + .check{
  background:var(--terracotta); border-color:var(--terracotta);
}
.consent input:checked + .check::after{
  content:""; width:6px; height:12px;
  border:2px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg);
}

/* Rahmen des gesamten Feldes betonen, wenn aktiv/checked */
.consent:has(input:checked){
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(193,68,14,.12), var(--shadow);
}

/* Linkfarbe dezent, bleibt konsistent */
.consent .text{ font-size:.95rem; line-height:1.35; color:var(--slate) }
.consent .text a{
  color:var(--terracotta); text-decoration:underline; text-underline-offset:2px;
}
.consent .text a:hover{ text-decoration:none }

#thankyou-overlay .overlay-content h2{
  color:var(--terracotta);
  margin-bottom:.5rem;
}
#thankyou-overlay .overlay-content p{
  font-size:1.05rem;
}

/* ==============================
   FOOTER
============================== */
footer{ background-color:#0F2435; color:#c9d6e2; text-align:center; padding:2rem 1rem }
footer nav a{ color:var(--white); text-decoration:none; opacity:.9; margin:0 .25rem }
footer nav a:hover,
footer nav a:focus{ text-decoration:underline; opacity:1 }

/* ==============================
   Overlays
============================== */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  display:none; justify-content:center; align-items:center; z-index:9999;
}
.overlay.show{ display:flex }
.overlay-content{
  background:var(--white); color:var(--black); max-width:600px; width:90%; padding:2rem;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.4); position:relative; overflow-y:auto; max-height:80vh;
}
.overlay-close{
  position:absolute; top:.5rem; right:.75rem; background:none; border:none; font-size:2rem; line-height:1;
  color:var(--terracotta); cursor:pointer;
}
.overlay a{ color:var(--terracotta) }

/* Responsive*/
@media (max-width:960px){
  .grid{ grid-template-columns:1fr 1fr }
  .contact{ grid-template-columns:1fr }
  .usps .row{ grid-template-columns:1fr 1fr }
}
@media (max-width:600px){
  .grid{ grid-template-columns:1fr }
  .usps .row{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* Desktop: Hero + USP ~100vh */
@media (min-width:1024px){
  header{ min-height:60vh; }  /* Hero größer, aber nicht übertreiben */

  .hero{
    padding-top:clamp(130px, 14vh, 220px);
    padding-bottom:clamp(90px, 10vh, 170px);
  }

  /* USPs: KEINE vh-Höhe mehr erzwingen */
  .usps{
    min-height: unset;
    padding: 40px 0;          /* kompakter */
    display:block;            /* nicht als "Full-height"-Block */
  }
}


/* Karten-Finetuning */
.card .body h3{ margin:4px 0 2px }
.card .body .meta{ margin:0 0 6px }
.priceblock{ margin:4px 0 8px }
.priceblock .notes{ margin-top:4px }
.priceblock .notes li{ margin:2px 0 }
.btn.booking{ padding:9px 14px; line-height:1.1; font-size:.95rem }

/* Fehler-Overlay Button */
.btn.back-to-form {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
  margin-top: 1rem;
  font-size: .95rem;
}

.btn.back-to-form:hover,
.btn.back-to-form:focus {
  background: #a8370b; /* etwas dunkler */
  border-color: #a8370b;
  transform: translateY(-2px);
}

.contact-head {
  text-align: center;
  margin-bottom: 1rem;
}

/* ==============================
   SLUSH ICE – Variante B
   Überlappende Produkt-Inszenierung
============================== */

.slush-section{
  padding:90px 0;
  background: linear-gradient(
    180deg,
    rgba(193,68,14,0.06),
    rgba(193,68,14,0)
  );
  position:relative;
  padding-bottom:55px;
}

.slush-card{
  position:relative;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:35px 50px 40px 50px;
  overflow:visible;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:40px;

  /* Pop-Verlauf */
  background: linear-gradient(
  135deg,
  #ff7043 0%,
  #ff8f3a 50%,
  #ffc94a 100%
);
}

.slush-card h2{
  color:#ffffff;
  text-shadow:0 3px 10px rgba(0,0,0,.15);
}

.slush-card p,
.slush-card li{
  color:#fff;
}

/* Badge */
.slush-badge{
  display:inline-block;
  background:var(--terracotta);
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  margin-bottom:12px;
}

/* Text */
.slush-lead{
  font-size:18px;
  max-width:520px;
}

.slush-points{
  list-style:none;
  padding:0;
  margin:20px 0;
}

.slush-points li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
}

.slush-points li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#ffffff;
  font-weight:bold;
  font-size:18px;
  text-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* Auswahlfelder */
.slush-pick{
  margin-top:25px;
}

.slush-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:15px;
}

.slush-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.slush-field select{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--mist);
  font:inherit;
}

/* Button */
.slush-add{
  margin-top:8px;
}

/* Bildbereich */
.slush-media{
  position:relative;
}

/* Das ist der Effekt */
.slush-img{
  width:100%;
  max-width:480px;

  /* Überlappung */
  position:absolute;
  right:-40px;
  top:50%;
  transform:translateY(-50%);

  /* Tiefe */
  filter: drop-shadow(0 40px 45px rgba(0,0,0,.25));
}

/* Responsive */
@media (max-width:1100px){
  .slush-card{
    padding:44px 70px 54px 40px; /* etwas kompakter */
    gap:28px;
  }
  .slush-img{
    max-width:440px;
    right:-28px;
  }
}

@media (max-width:1000px){
  .slush-card{
    grid-template-columns:1fr;
    text-align:center;

    /* kein Platz rechts nötig, weil Bild nicht mehr überlappt */
    padding:40px 30px 50px 30px;
  }

  .slush-img{
    position:relative;
    right:0;
    top:0;
    transform:none;
    margin:22px auto 0;
    max-width:520px;
  }

  .slush-row{ 
	grid-template-columns:1fr; 
  }

  .slush-points{
    text-align:left;
    display:inline-block;
    margin:20px auto;
  }

  .slush-card{
    display:flex;
    flex-direction:column;
    text-align:center;
  }

  .slush-media{
    order:-1;   /* Bild ganz nach oben */
    margin-bottom:20px;
  }

  .slush-img{
    max-width:380px;
    margin:0 auto;
  }
  
  .slush-sticker{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%) rotate(-8deg);
    font-size:14px;
    padding:12px 16px;
  }
}

/* ==============================
   SLUSH PREIS – PIMP VERSION
============================== */

.slush-priceblock{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.35);
}

.slush-price-label{
  font-weight:600;
  color:#fff;
}

.slush-price-label small{
  display:block;
  font-weight:400;
  font-size:.9rem;
  opacity:.9;
}

.slush-price-value{
  font-size:38px;              /* deutlich größer */
  font-weight:900;
  color:#ffffff;               /* kein Terracotta */
  letter-spacing:.5px;
  line-height:1;
  text-shadow:0 8px 20px rgba(0,0,0,.25);
  background:rgba(255,255,255,.15);
  padding:8px 18px;
  border-radius:10px;
}



/* ==============================
   SLUSH STICKER – Kontrast & Pep
============================== */

.slush-sticker{
  position:absolute;
  left:-30px;
  top:15%;
  z-index:5;

  background:var(--bio-green);   /* KLARE Fläche */
  color:#fff;

  padding:14px 18px;
  border-radius:14px;

  font-weight:700;
  text-align:center;
  line-height:1.1;

  transform:rotate(-12deg);

  box-shadow:
    0 18px 35px rgba(0,0,0,.25),
    0 0 0 4px #fff;
}

.slush-sticker span{
  display:block;
  font-size:13px;
  font-weight:600;
  opacity:.95;
}

.slush-sticker strong{
  display:block;
  font-size:19px;
  margin-top:4px;
  letter-spacing:.5px;
}

/* ==============================
   PREISRECHNER (Design-Block)
============================== */

.pricecalc{
  padding:70px 0;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(193,68,14,.10), transparent 60%),
    radial-gradient(800px 400px at 80% 30%, rgba(31,59,87,.10), transparent 60%);
}

.pricecalc-card{
  background:#fff;
  border:1px solid var(--mist);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:26px 26px 20px;
}

.pricecalc-head{
  text-align:center;
  margin-bottom:18px;
}
.pricecalc-head h2{
  margin-bottom:6px;
}
.pricecalc-head .meta{
  max-width:720px;
  margin:0 auto;
}

/* Container */
.pricecalc-line{
  display:flex;
  align-items:center;     /* vertikal mittig */
  justify-content:space-between;
  gap:24px;
}

/* Dropdown */
.calc-select{
  flex:0 1 320px;
  max-width:320px;

  height:44px;
  padding:0 14px;         /* WICHTIG: kein vertikales Padding */

  border:1px solid var(--mist);
  border-radius:10px;
  font:inherit;
  font-size:16px;
  line-height:44px;       /* exakt gleiche Höhe wie Element */
  background:#fff;
  color:var(--slate);
}

/* Preis */
.pricecalc-line > b{
  font-size:30px;
  font-weight:800;
  color:var(--terracotta);

  line-height:44px;       /* gleiche Baseline wie Select */
  height:44px;

  display:flex;
  align-items:center;     /* absolut mittig */
  white-space:nowrap;
}

/* Preisvorschau: Zubehör-Zeilen (5 Reihen) */
.calc-addon-line{
  align-items:center;           /* nicht mehr "oben", sondern auf einer Linie */
}

.calc-unit{
  min-width:52px;               /* links: Preis klein */
  font-size:.9rem;
  color:#6b7785;
  font-weight:600;
}

.calc-label{
  flex:1;
  color:var(--slate);
}

.calc-val{
  min-width:64px;
  text-align:right;
  font-weight:800;
  color:var(--slate);
  white-space:nowrap;
}

/* Zwischensumme Zubehör wie Zeltpreis (dominant) */
#calc_addons_sum{
  font-size:30px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

#calc_extras_sum{
  font-size:30px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

#calc_secure_sum{
  font-size:30px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

#calc_slush_price{
  font-size:30px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

/* Preisvorschau: Zubehör editierbar */
.calc-addon-edit{
  display:grid;
  grid-template-columns: 80px 1fr 90px; /* Input | Text | Summe */
  align-items:center;                   /* alles vertikal mittig */
  gap:16px;
}

.calc-qty{
  width:70px;
  height:42px;
  padding:0 10px;
  border:1px solid var(--mist);
  border-radius:10px;
  font:inherit;
  display:flex;
  align-items:center;
}

.calc-check{
  width:18px;
  height:18px;
  accent-color: var(--terracotta);
}

.calc-label{
  display:flex;
  align-items:center;
  font-size:1rem;
}

.calc-row-sum{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-weight:700;
  font-size:.95rem;
  color:#546372;
  white-space:nowrap;
}

/* Summe Zubehör bleibt "wie Zeltpreis" (dominant) */
#calc_addons_sum{
  font-size:30px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

.pricecalc-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.pricecalc-box{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, #fff, rgba(245,247,249,.55));
}

.pricecalc-box-title{
  font-weight:800;
  color:var(--steel);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.pricecalc-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pricecalc-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  line-height:1.25;
}

.calc-muted{
  color:#6b7785;
}

.pricecalc-subline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.10);
  color:#44515f;
  font-weight:700;
}

.pricecalc-hint{
  margin:10px 0 0;
  font-size:.9rem;
  color:#6b7785;
}

.pricecalc-total{
  margin-top:18px;
  padding:16px 16px;
  border-radius:12px;
  border:1px solid rgba(193,68,14,.18);
  background:linear-gradient(90deg, rgba(193,68,14,.08), rgba(31,59,87,.06));
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.pricecalc-total-label{
  font-weight:900;
  letter-spacing:.2px;
  color:var(--slate);
}
.pricecalc-total-note{
  font-size:.95rem;
  color:#6b7785;
  margin-top:2px;
}

.pricecalc-total-value{
  font-size:44px;
  font-weight:900;
  color:var(--terracotta);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}

.pricecalc-cta{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

@media (max-width:900px){
  .pricecalc-grid{ grid-template-columns:1fr; }
  .pricecalc-total{ align-items:flex-start; }
  .pricecalc-total-value{ font-size:38px; }
}

/* --- OVERRIDE: Preisvorschau Zubehör sauber mittig ausrichten --- */
.pricecalc-line.calc-addon-edit{
  display:grid !important;
  grid-template-columns: 80px 1fr 90px;
  align-items:center !important;
  gap:16px;
}

/* Inputs / Checkboxen zentrieren */
.pricecalc-line.calc-addon-edit .calc-qty{
  width:70px;
  height:42px;
  padding:0 10px;
  border:1px solid var(--mist);
  border-radius:10px;
  font:inherit;
}

.pricecalc-line.calc-addon-edit .calc-check{
  width:18px;
  height:18px;
  justify-self:start;
  align-self:center !important;
}

/* Label & rechte Summe exakt mittig */
.pricecalc-line.calc-addon-edit .calc-label{
  align-self:center !important;
}

.pricecalc-line.calc-addon-edit .calc-row-sum{
  align-self:center !important;
  justify-self:end;
  text-align:right;
  font-weight:700;
  font-size:.95rem;
  color:#546372;
  white-space:nowrap;
}

/* Preisrechner: Boxen sollen NICHT auf gleiche Höhe gezogen werden */
.pricecalc-grid,
.pricecalc-list{
  align-items: start;   /* statt stretch */
}

.pricecalc-box{
  align-self: start;    /* jede Box nimmt nur ihre eigene Höhe */
  height: auto;
  min-height: 0;
}

/* Preisrechner: echte 2-Spalten-Logik (kein Zeilen-Zwang) */
.pricecalc-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  align-items:start;
}

.pricecalc-col{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}

/* Mobile: einspaltig */
@media (max-width:960px){
  .pricecalc-columns{
    grid-template-columns:1fr;
  }
}
/* Preisrechner: Controls sollen die Spaltenbreite wirklich nutzen */
.pricecalc .pricecalc-line .calc-select{
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
}

/* Preisrechner: jede Box soll die komplette Spaltenbreite nutzen */
.pricecalc-columns .pricecalc-box{
  width: 100%;
}

/* Preisrechner: Snacks & Extras (wie Zubehör-Zeilen) */
.calc-extra-edit{
  display:grid;
  grid-template-columns: 24px 1fr 90px; /* Checkbox | Text | Summe */
  align-items:center;
  gap:16px;
}

/* ==========================================
   Preisrechner: Slush Ice Box (Highlight)
========================================== */
.pricecalc-box-slush{
  border: none;
  background: linear-gradient(135deg, #ff7043 0%, #ff8f3a 50%, #ffc94a 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.pricecalc-box-slush .pricecalc-box-title{
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}

.slush-mini-badge{
  display:inline-block;
  background: var(--terracotta);
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
}

.pricecalc-box-slush .calc-label,
.pricecalc-box-slush .pricecalc-hint,
.pricecalc-box-slush label{
  color:#fff;
}

.pricecalc-box-slush .calc-row-sum{
  color:#fff;
  font-weight:800;
}

.slush-calc-picks{
  margin-top:10px;
  display:grid;
  gap:10px;
}

.slush-calc-row{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap:12px;
  align-items:center;
}

.pricecalc-box-slush select{
  background:#fff;
}

/* Preisrechner: Hintergrund an "Direkter Kontakt" angleichen */
.pricecalc{
  background: var(--porcelain) !important; /* statt radial gradients */
}

/* Reserve Platz für Card-Bilder (verhindert Layout-Shift beim Nachladen) */
.card img{
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#lieferpauschalen{
  padding-bottom:32px;
}

.seo-text{
  padding-top:32px;
}