/* ==========================================================================
   Seifglück — override.css
   Pastellige Marken-Schicht über Bulma. Full-Bleed, volle Breite, weiche Formen.
   Palette: Milch #fbf7f4 · Minze #a7d3c1 · Puderrosa #e7b8b0 ·
            Lavendel #bcb1dd · warmer Text #4a4038
   ========================================================================== */

:root{
  --milch:#fbf7f4;
  --milch-tief:#f4ece5;
  --minze:#a7d3c1;
  --minze-tief:#6fae97;
  --rosa:#e7b8b0;
  --rosa-tief:#c98a80;
  --lavendel:#bcb1dd;
  --lavendel-tief:#8c7cc0;
  --text:#4a4038;
  --text-weich:#7a6f64;
  --weiss:#ffffff;
  --schatten:0 18px 40px -20px rgba(74,64,56,.28);
  --schatten-klein:0 10px 26px -16px rgba(74,64,56,.3);
  --radius:22px;
  --radius-gross:30px;

  /* volle Breite: großzügige Außenränder, kein schmaler Kasten */
  --rand: clamp(1.15rem, 4.5vw, 5rem);
  --max: 1680px;        /* sehr breit – wirkt auf üblichen Screens „randlos“ */
  --max-text: 54rem;    /* Lesebreite für Fließtext */
}

/* ---- Grundtypo ------------------------------------------------------------ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--milch); }
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--text);
  background:var(--milch);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.title,.subtitle,.navbar-item.brand-name{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--text);
  letter-spacing:-.01em;
}
.title{ font-weight:700; }
strong{ color:var(--text); }
a{ color:var(--minze-tief); transition:color .18s ease; }
a:hover{ color:var(--rosa-tief); }

/* ---- Volle Breite: Container aufmachen ----------------------------------- */
/* Bulma-Container nicht mehr als schmaler Kasten – volle Breite mit Rand. */
.container{
  width:100% !important;
  max-width:var(--max) !important;
  margin-inline:auto;
  padding-inline:var(--rand);
}
.section{ padding:clamp(3rem,6.5vw,6rem) 0; }
.section > .container{ padding-inline:var(--rand); }

/* Lesebreite-Helfer für lange Texte */
.measure{ max-width:var(--max-text); }
.measure-center{ max-width:var(--max-text); margin-inline:auto; }

/* ---- Full-Bleed Farb-Bänder (randlos über die ganze Breite) -------------- */
.band{ position:relative; }
.band--creme{ background:var(--milch-tief); }
.band--minze{ background:linear-gradient(165deg,#c3e2d5,#a7d3c1); }
.band--rosa{ background:linear-gradient(165deg,#f1d2cc,#e7b8b0); }
.band--lavendel{ background:linear-gradient(165deg,#cfc6e8,#bcb1dd); }
.band--dunkel{ background:#33433c; color:#eef4f0; }
.band--dunkel h2,.band--dunkel .title{ color:#fff; }

/* ---- Navbar -------------------------------------------------------------- */
.navbar{
  background:rgba(251,247,244,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 8px 24px -22px rgba(74,64,56,.5);
}
.navbar > .container{ max-width:var(--max) !important; }
.navbar-item, .navbar-link{ color:var(--text); font-weight:600; }
.navbar-item.brand-name{
  font-size:1.42rem; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:.5rem;
}
.navbar-item.brand-name img{ width:34px; height:34px; }
.navbar-menu a.navbar-item:hover,
.navbar-menu a.navbar-item.is-active{
  background:rgba(167,211,193,.22); color:var(--minze-tief); border-radius:14px;
}
@media(max-width:1023px){
  .navbar-menu{ box-shadow:var(--schatten-klein); border-radius:0 0 20px 20px; padding:.5rem .75rem 1rem; }
}

/* ---- Buttons ------------------------------------------------------------- */
.button{
  border-radius:999px; font-family:'Quicksand',sans-serif; font-weight:700;
  border:none; transition:transform .15s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover{ transform:translateY(-2px); }
.button.is-primary{ background:var(--minze-tief); color:#fff; box-shadow:var(--schatten-klein); }
.button.is-primary:hover{ background:#5d9a83; color:#fff; }
.button.is-rosa{ background:var(--rosa); color:#5a322b; box-shadow:var(--schatten-klein); }
.button.is-rosa:hover{ background:var(--rosa-tief); color:#fff; }
.button.is-ghost-soft{ background:#fff; color:var(--text); box-shadow:var(--schatten-klein); }
.button.is-ghost-soft:hover{ background:var(--milch); color:var(--minze-tief); }

/* ---- Bubble (für Unterseiten weiterhin nutzbar) -------------------------- */
.bubble{ border-radius:var(--radius-gross); }
.bg-milch{ background:var(--milch); }
.bg-minze{ background:linear-gradient(160deg,#bfe0d2,#a7d3c1); }
.bg-rosa{ background:linear-gradient(160deg,#f0cdc7,#e7b8b0); }
.bg-lavendel{ background:linear-gradient(160deg,#cdc4e6,#bcb1dd); }
.bg-creme{ background:var(--milch-tief); }

.soft-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--schatten);
  padding:1.9rem 1.7rem; height:100%;
}

/* ---- Hero (Full-Bleed Split) -------------------------------------------- */
.hero-seif{
  background:
    radial-gradient(60% 80% at 88% 12%, rgba(188,177,221,.40), transparent 60%),
    radial-gradient(55% 70% at 8% 90%, rgba(231,184,176,.40), transparent 60%),
    var(--milch);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(5.5rem,7vw,7rem) 0 clamp(2.5rem,4vw,4rem) var(--rand);
}
.hero-text{ padding-block:1rem; }
.hero-seif .eyebrow{ margin-bottom:.6rem; }
.hero-seif .title{ font-size:clamp(2.2rem,5.2vw,3.7rem); line-height:1.1; margin-bottom:1.1rem; }
.hero-seif .lead{
  font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--text-weich); max-width:34rem; line-height:1.6;
}
.hero-media{
  position:relative; height:clamp(360px,46vw,640px);
  border-radius:var(--radius-gross) 0 0 var(--radius-gross);
  overflow:hidden; box-shadow:var(--schatten);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:860px){
  .hero-grid{ grid-template-columns:1fr; padding:6rem var(--rand) 2.5rem; gap:1.8rem; }
  .hero-media{ height:clamp(260px,62vw,420px); border-radius:var(--radius-gross); }
}

/* allgemeines Foto in Split-Sektionen */
.media-foto{
  border-radius:var(--radius-gross); box-shadow:var(--schatten);
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}

/* ---- Zahlen-Leiste (neuer Block) ---------------------------------------- */
.fakten{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem); text-align:center;
}
.fakt .zahl{
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--minze-tief); line-height:1;
}
.fakt .wort{ color:var(--text-weich); font-size:.95rem; margin-top:.4rem; }
.band--minze .fakt .zahl{ color:#2f5a4a; }
.band--minze .fakt .wort{ color:#2f5a4a; opacity:.85; }
@media(max-width:680px){ .fakten{ grid-template-columns:repeat(2,1fr); row-gap:1.8rem; } }

/* ---- Produktkarten ------------------------------------------------------ */
.karten-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,2vw,1.8rem);
}
@media(max-width:1023px){ .karten-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .karten-grid{ grid-template-columns:1fr; } }
.karten-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .karten-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .karten-grid.cols-3{ grid-template-columns:1fr; } }

.seif-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--schatten); height:100%; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.seif-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -22px rgba(74,64,56,.36); }
.seif-card .ph{ aspect-ratio:4/3; width:100%; overflow:hidden; background:var(--milch-tief); }
.seif-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.seif-card:hover .ph img{ transform:scale(1.05); }
.seif-card .body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.seif-card h3{ font-size:1.22rem; margin-bottom:.3rem; }
.seif-card .preis{
  font-family:'Quicksand',sans-serif; font-weight:700; color:var(--minze-tief);
  font-size:1.18rem; margin-top:auto;
}

/* Eigenschafts-Badges */
.badge{
  display:inline-flex; align-items:center; gap:.34rem;
  background:var(--milch); color:var(--text-weich);
  border-radius:999px; padding:.26rem .7rem; font-size:.78rem; font-weight:700;
  margin:.18rem .18rem 0 0;
}
.badge.is-vegan{ background:rgba(167,211,193,.35); color:#3f7a64; }
.badge.is-palm{ background:rgba(188,177,221,.35); color:#5e4f8c; }
.badge.is-sensitiv{ background:rgba(231,184,176,.4); color:#9c5247; }

/* ---- Duft-Finder Tags --------------------------------------------------- */
.duft-tag{
  display:inline-block; background:#fff; color:var(--text); font-weight:700;
  border-radius:999px; padding:.6rem 1.1rem; margin:.3rem; box-shadow:var(--schatten-klein);
  transition:transform .15s ease, background .18s ease;
}
.duft-tag:hover{ transform:translateY(-2px); background:var(--minze); color:#2f6552; }

/* ---- Prozess-Schritte (neuer Block) ------------------------------------- */
.schritte{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem);
  counter-reset:schritt;
}
@media(max-width:900px){ .schritte{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .schritte{ grid-template-columns:1fr; } }
.schritt{
  background:#fff; border-radius:var(--radius); box-shadow:var(--schatten-klein);
  padding:1.6rem 1.5rem; position:relative;
}
.schritt::before{
  counter-increment:schritt; content:counter(schritt);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--minze); color:#2f5a4a; font-family:'Quicksand',sans-serif;
  font-weight:700; font-size:1.1rem; margin-bottom:.8rem;
}
.schritt h3{ font-size:1.1rem; margin-bottom:.35rem; }
.schritt p{ color:var(--text-weich); font-size:.96rem; }

/* ---- Split-Sektion (Bild + Text nebeneinander) -------------------------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(1.6rem,4vw,4rem);
}
.split.umkehr{ direction:rtl; }
.split.umkehr > *{ direction:ltr; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ---- Geschenkset-Karte -------------------------------------------------- */
.geschenk-card{
  background:linear-gradient(150deg,#cfc6e8,#bcb1dd);
  border-radius:var(--radius-gross); box-shadow:var(--schatten);
  padding:clamp(1.8rem,3vw,2.6rem); color:#3a3052;
  display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:center;
}
@media(max-width:760px){ .geschenk-card{ grid-template-columns:1fr; text-align:left; } }
.geschenk-card .preis{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:1.9rem; }

/* ---- Markt-Band (neuer Block, Bild-Hintergrund) ------------------------- */
.markt-band{
  position:relative; border-radius:0; overflow:hidden;
  min-height:clamp(320px,40vw,460px); display:flex; align-items:center;
}
.markt-band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.markt-band .veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(51,67,60,.82) 0%, rgba(51,67,60,.55) 55%, rgba(51,67,60,.2) 100%);
}
.markt-band .inhalt{ position:relative; color:#fff; max-width:38rem; padding:clamp(2rem,5vw,4rem) var(--rand); }
.markt-band .inhalt h2{ color:#fff; }
.markt-band .inhalt p{ color:#eef4f0; }

/* ---- Zitate / Reviews --------------------------------------------------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2vw,1.8rem); }
@media(max-width:900px){ .review-grid{ grid-template-columns:1fr; } }
.review{
  background:#fff; border-radius:var(--radius); box-shadow:var(--schatten);
  padding:1.7rem 1.6rem; height:100%;
}
.review .stars{ color:#e0a83d; letter-spacing:.1em; }
.review .who{ font-weight:700; font-family:'Quicksand',sans-serif; }
.review .meta{ color:var(--text-weich); font-size:.85rem; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq details{
  background:#fff; border-radius:var(--radius); box-shadow:var(--schatten-klein);
  padding:1.1rem 1.4rem; margin-bottom:.9rem;
}
.faq summary{
  font-family:'Quicksand',sans-serif; font-weight:700; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:1.4rem; color:var(--minze-tief); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:.8rem; color:var(--text-weich); }

/* ---- Formular ----------------------------------------------------------- */
.input,.textarea,.select select{
  border-radius:16px; border:1.5px solid #ecdfd6; background:#fff; color:var(--text);
  box-shadow:none; font-family:'Nunito',sans-serif;
}
.input:focus,.textarea:focus,.select select:focus{
  border-color:var(--minze); box-shadow:0 0 0 3px rgba(167,211,193,.3);
}
.label{ color:var(--text); font-family:'Quicksand',sans-serif; }

/* ---- Footer ------------------------------------------------------------- */
.footer{
  background:#f0e6dd; color:var(--text); border-radius:34px 34px 0 0;
  margin-top:2rem; padding:clamp(2.6rem,4vw,3.4rem) 0 2.4rem;
}
.footer > .container{ padding-inline:var(--rand); }
.footer a{ color:var(--minze-tief); }
.footer a:hover{ color:var(--rosa-tief); }
.footer h4{ font-family:'Quicksand',sans-serif; font-weight:700; margin-bottom:.7rem; }
.footer .small{ color:var(--text-weich); font-size:.86rem; }

/* ---- Hilfsklassen ------------------------------------------------------- */
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700;
  color:var(--minze-tief);
}
.band--minze .eyebrow{ color:#2f6552; }
.band--lavendel .eyebrow{ color:#5e4f8c; }
.lead-text{ color:var(--text-weich); font-size:1.08rem; }
.content-page{ max-width:var(--max-text); margin:0 auto; }
.content-page h2{ margin-top:2.2rem; }
.content-page h3{ margin-top:1.6rem; }
.divider-dots{ text-align:center; color:var(--rosa); letter-spacing:.5em; margin:1.5rem 0; }
.sektion-kopf{ max-width:46rem; margin:0 auto clamp(2rem,3.5vw,3rem); }
img{ max-width:100%; height:auto; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--minze-tief); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 12px 0; z-index:1000;
}
.skip-link:focus{ left:0; }

/* sanftes Einblenden beim Scrollen — nur wenn JS aktiv ist (sonst alles sichtbar) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .js .reveal.sichtbar{ opacity:1; transform:none; }
}