/* =========================================================
   ELEMENT DETAIL — Editorial Center Pack
   Ziel: Section-Heads & Lede mittig, Inhalte bleiben lesbar
   ========================================================= */

.page--element .elementHeroHead,
.page--element .elementSectionHead{
  text-align: center;
  max-width: var(--text);
  margin-left: auto;
  margin-right: auto;
}

.page--element .elementHeroHead .lede,
.page--element .elementSectionHead .lede{
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow soll wie H2 wirken (globaler Wunsch) */
.page--element .elementHeroHead .eyebrow,
.page--element .elementSectionHead .eyebrow{
  color: var(--taupe-dark);
}

/* Hero-CTAs: immer mittig */
.page--element .elementHeroCtas{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Split: Block bleibt mittig, Inhalte darin links (Lesbarkeit) */
.page--element .elementIntroSplit{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

.page--element .elementIntroSplit > div,
.page--element .elementSideCard{
  text-align: left;
}

@media (max-width: 980px){
  .page--element .elementIntroSplit{ grid-template-columns: 1fr; }
}

/* Cards/Grids wirken oft „links-lastig“, wenn die Breite zu groß ist → leicht zentrieren */
.page--element .elementCards3,
.page--element .elementTrio,
.page--element .elementFineGrid,
.page--element .shopBuckets,
.page--element .zodiacCards3{
  margin-left: auto;
  margin-right: auto;
}

/* Optional: ol/ul als zentrierter Block, aber links ausgerichteter Text */
.page--element .elementSteps,
.page--element .elementSteps ol,
.page--element .elementSteps ul{
  max-width: var(--text);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.sectionMedia16x9{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ivory);
  border-radius: 0;
}
.sectionMedia16x9 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================================================
   FAQ – schöner, ruhiger, Bild + Accordion als Einheit
   (wiederverwendbar)
   ========================================================= */

.faqMediaGrid{
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.faqMedia{
  margin: 0;
  justify-self: center;           /* Bild wirklich mittig in seiner Spalte */
  width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgb(var(--ed-ivory, 249,245,239));
  overflow: hidden;
}

.faqMedia img{
  display: block;
  width: 100%;
  height: auto;
}

/* rechte Spalte als ruhige Card */
.faqCard{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  padding: clamp(14px, 2vw, 18px);
}

/* Accordion-Optik: einzelne „Cards“ */
.faqCard .faq details{
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(249,245,239,0.85);
  margin: 10px 0;
}

.faqCard .faq summary{
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
  position: relative;
}

.faqCard .faq summary::-webkit-details-marker{ display:none; }

.faqCard .faq summary::after{
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  opacity: .75;
  font-size: 1.2rem;
  transition: transform .2s ease;
}

.faqCard .faq details[open] summary::after{
  transform: translateY(-50%) rotate(-90deg);
}

.faqCard .faq details p{
  margin: 0;
  padding: 0 16px 14px;
  color: rgba(48,41,35,0.92);
}

/* Mobile: untereinander, Bild bleibt zentriert */
@media (max-width: 980px){
  .faqMediaGrid{
    grid-template-columns: 1fr;
  }
}
.faqMedia{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Zodiac / Sternzeichen-Feinschliff – Gradient Cards
   ========================================================= */

.card--grad{
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Gradient außen */
.card--grad-feuer{  background: var(--grad-feuer); }
.card--grad-erde{   background: var(--grad-erde); }
.card--grad-luft{   background: var(--grad-luft); }
.card--grad-wasser{ background: var(--grad-wasser); }

/* innen „Ivory-Inlay“, damit Text super lesbar bleibt */
.card--grad .card__body{
  background: rgba(249,245,239,0.74);
  border: 1px solid rgba(0,0,0,0.06);
  margin: clamp(12px, 1.8vw, 16px); /* zeigt den Gradient-Rahmen */
  padding: clamp(16px, 2vw, 20px);
}

/* =========================
   /assets/css/elemente.css
   NUR Elemente-Hub spezifisch
   ========================= */

/* -----------------------------------------
   Eyebrow: gleiche Farbe wie H2 (falls global noch nicht aktiv)
   ----------------------------------------- */
.page--elemente-hub .eyebrow{
  color: var(--taupe-dark, rgba(111,100,90,0.95));
}

/* -----------------------------------------
   HERO
   - kein Breadcrumb
   - Bild volle Breite der Main-Mitte
   - keine Rundungen / keine Shadow
   ----------------------------------------- */
.page--elemente-hub .hubSectionHead--center{
  text-align: center;
}

.page--elemente-hub .hubH1{
  margin: 0;
}

.page--elemente-hub .hubH2{
  margin: 0;
}

.page--elemente-hub .hubLede{
  max-width: 70ch;
  margin: 10px auto 0;
}

.page--elemente-hub .hubHeroMedia{
  margin: 18px 0 0;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgb(var(--ed-ivory, 249,245,239));
  aspect-ratio: 16 / 9;
}

.page--elemente-hub .hubHeroImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--elemente-hub .hubHeroCtas{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* -----------------------------------------
   So geht’s
   ----------------------------------------- */
.page--elemente-hub .hubSteps{
  max-width: 76ch;
  margin: 18px auto 0;
  padding-left: 1.2rem;
}

.page--elemente-hub .hubHowNote{
  max-width: 72ch;
  margin: 14px auto 0;
  text-align: center;
  color: rgba(111,100,90,0.90);
}
/* Hero: picture muss 16:9 Fläche füllen */
.page--elemente-hub .hubHeroMedia > picture{
  display:block;
  width:100%;
  height:100%;
}
.page--elemente-hub .hubHeroMedia > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* sectionMedia16x9 (FAQ Teaser) */
.sectionMedia16x9 > picture{
  display:block;
  width:100%;
  height:100%;
}
.sectionMedia16x9 > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   SPLIT PANEL STACK (50/50) – wiederverwendbares Modul
   - Außen: Section background (z.B. Salbei)
   - Innen: Frame padding + gap zeigt "Rand"
   - Items: 1fr/1fr, alternierend per nth-child(even)
   - Mobile: untereinander (Bild oben)
   ========================================================= */

.page--elemente-hub .splitPanelStack--sage{
  background: rgb(var(--ed-sage, 196,209,192));
  border-radius: 0;
  padding: 24px 0 30px;
  margin-bottom: clamp(26px, 3.2vw, 44px); /* ✅ Abstand danach: Body (ivory) scheint durch */
}

/* Frame erzeugt den "Salbei-Rand" */
.page--elemente-hub .splitPanelStack__frame{
  --gutter: clamp(14px, 2.2vw, 22px);
  margin-top: 18px;

  display: grid;
  gap: var(--gutter);
  padding: var(--gutter);

  /* Kein eigener Background nötig: Section ist Salbei */
}

/* Item = 50/50 Split */
.page--elemente-hub .splitPanelStack__item{
  background: rgb(var(--ed-ivory, 249,245,239));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  align-items: stretch;

  min-height: clamp(240px, 22vw, 320px);
}

/* Alternierung: jede zweite Zeile spiegeln */
.page--elemente-hub .splitPanelStack__item:nth-child(even){
  grid-template-areas: "content media";
}

/* Media links/rechts, immer vollflächig */
.page--elemente-hub .splitPanelStack__media{
  grid-area: media;
  margin: 0;
  width: 100%;
  height: 100%;
}

.page--elemente-hub .splitPanelStack__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content: vertikal mittig */
.page--elemente-hub .splitPanelStack__content{
  grid-area: content;
  padding: clamp(16px, 2.2vw, 24px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.page--elemente-hub .splitPanelStack__kicker{
  margin: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .84rem;
  opacity: .85;
}

.page--elemente-hub .splitPanelStack__text{
  margin: 0;
  max-width: 62ch;
}

.page--elemente-hub .splitPanelStack__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Mobile: untereinander (Bild oben, Text unten) */
@media (max-width: 900px){
  .page--elemente-hub .splitPanelStack__item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
    min-height: unset;
  }

  .page--elemente-hub .splitPanelStack__media{
    aspect-ratio: 16 / 9;
  }

  .page--elemente-hub .splitPanelStack__media img{
    height: auto; /* sorgt dafür, dass aspect-ratio sauber greift */
  }
}

/* -----------------------------------------
   Feinschliff – Element-Gradient Cards
   ----------------------------------------- */
.page--elemente-hub .hubFineGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.page--elemente-hub .hubFineCard{
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 16px;
}

.page--elemente-hub .hubFineCard--feuer{ background: var(--grad-feuer); }
.page--elemente-hub .hubFineCard--erde { background: var(--grad-erde); }
.page--elemente-hub .hubFineCard--luft { background: var(--grad-luft); }
.page--elemente-hub .hubFineCard--wasser{ background: var(--grad-wasser); }

@media (max-width: 1100px){
  .page--elemente-hub .hubFineGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .page--elemente-hub .hubFineGrid{ grid-template-columns: 1fr; }
}

/* -----------------------------------------
   Quick Wins – Sand Hintergrund + größere Bilder
   ----------------------------------------- */
.page--elemente-hub .hubWins--sand{
  background: rgba(var(--ed-sand, 234,221,200), 0.85);
  border-radius: 0;
  padding-top: 24px;
  padding-bottom: 26px;
}

.page--elemente-hub .hubWinsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}

.page--elemente-hub .hubWinCard{
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(249,245,239,0.55);
}

.page--elemente-hub .hubWinCard img{
  display:block;
  width:100%;
  height:auto;
}

.page--elemente-hub .hubWinBody{
  padding: 14px 14px 16px;
}

/* =========================================================
   HUB FIX: Quick Wins – CTA immer unten, gleiche Card-Höhen
   ========================================================= */
.page--elemente-hub .hubWinCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page--elemente-hub .hubWinBody{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.page--elemente-hub .hubWinBody .btn{
  margin-top: auto;
}

.page--elemente-hub .hubCenterCta{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

@media (max-width: 980px){
  .page--elemente-hub .hubWinsGrid{ grid-template-columns: 1fr; }
}
/* =========================================================
   HUB FIX: FAQ im GlobalShell nicht zweispaltig quetschen
   ========================================================= */
.page--elemente-hub .faqMediaGrid{
  grid-template-columns: 1fr;
}

.page--elemente-hub .faqMedia{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   HUB: Buttons in Element-Gradient (Element-Kacheln + Zodiac)
   ========================================================= */

/* 1) Kontext setzt --btn-grad */
.page--elemente-hub .splitPanelStack__item--feuer  { --btn-grad: var(--grad-feuer); }
.page--elemente-hub .splitPanelStack__item--erde   { --btn-grad: var(--grad-erde); }
.page--elemente-hub .splitPanelStack__item--luft   { --btn-grad: var(--grad-luft); }
.page--elemente-hub .splitPanelStack__item--wasser { --btn-grad: var(--grad-wasser); }

/* Zodiac-Karten (Sternzeichen-Feinschliff) */
.page--elemente-hub .card--grad-feuer  { --btn-grad: var(--grad-feuer); }
.page--elemente-hub .card--grad-erde   { --btn-grad: var(--grad-erde); }
.page--elemente-hub .card--grad-luft   { --btn-grad: var(--grad-luft); }
.page--elemente-hub .card--grad-wasser { --btn-grad: var(--grad-wasser); }

/* 2) Buttons nutzen --btn-grad wenn vorhanden, sonst Salbei */
.page--elemente-hub .btn--sageLite{
  background: var(--btn-grad, rgba(var(--ed-sage, 196,209,192), 0.55));
  border: 1px solid rgba(0,0,0,0.10);
  color: rgba(48,41,35,0.92);
}
.page--elemente-hub .btn--sageLite:hover{
  background: var(--btn-grad, rgba(var(--ed-sage, 196,209,192), 0.75));
  filter: brightness(0.98);
}