/* =========================================================
   ELEMENT DETAIL – Symmetrische Module (reusable)
   ========================================================= */

/* ---------------------------------------------------------
   Head / Typography Bridge
   --------------------------------------------------------- */
.page--element .hubSectionHead--center{ text-align: center; }
.page--element .hubSectionHead{
  text-align: center;
  max-width: var(--text);
  margin-left: auto;
  margin-right: auto;
}
.page--element .hubLede{ max-width: 72ch; margin-left:auto; margin-right:auto; }
.page--element .hubSectionHead .lede,
.page--element .hubSectionHead .hubLede{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}
.page--element .eyebrow{ color: var(--taupe-dark); }

/* ---------------------------------------------------------
   HERO Media + CTAs + Bands
   --------------------------------------------------------- */
.page--element .elementHeroMedia,
.page--element .sectionMedia16x9{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.page--element .elementHeroMedia{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(249,245,239,0.78);
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.page--element .elementHeroMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--element .elementHeroCtas{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.page--element .elementHeroCtas .btn{ min-width: 220px; }

/* Section-Bands */
.page--element .band--sage{
  background: rgba(var(--ed-sage,196,209,192), 0.60);
  border-radius: 0;
}
.page--element .band--sand{
  background: rgba(var(--ed-sand,234,221,200), 0.55);
  border-radius: 0;
}

/* ---------------------------------------------------------
   HERO Bullets + Steps (Fallback)
   --------------------------------------------------------- */
.page--element .elementHeroBullets{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.page--element .elementHeroBullet{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 12px 14px;
}
@media (max-width: 900px){
  .page--element .elementHeroBullets{ grid-template-columns: 1fr; }
}

/* HERO Steps (wenn du elementSteps nutzt) */
.page--element .elementSteps{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 12px;
}
.page--element .elementSteps > li{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 12px 14px;
}

/* ---------------------------------------------------------
   Quick Wins – 1/2/3 Step Tiles
   --------------------------------------------------------- */
.page--element .elementStepTiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.page--element .elementStepTile{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 16px;
  position: relative;
  text-align: left;
}
.page--element .elementStepNum{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(48,41,35,0.88);
}
@media (max-width: 980px){
  .page--element .elementStepTiles{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Wirkung – 3 Leitideen + 2 Notes
   --------------------------------------------------------- */
.page--element .elementImpactGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.page--element .elementImpactCard{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 16px;
}
.page--element .elementImpactSplit{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .page--element .elementImpactGrid{ grid-template-columns: 1fr; }
  .page--element .elementImpactSplit{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Raum-DNA – optionaler Hero + Mosaic Tiles
   --------------------------------------------------------- */
.page--element .elementDnaHero{
  margin: 18px auto 0;
  max-width: var(--max);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgb(var(--ed-ivory, 249,245,239));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.page--element .elementDnaHero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mosaic (dein neues System) */
.page--element .elementMoodMosaic{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.page--element .elementMoodTile{
  background: rgb(var(--ed-ivory, 249,245,239));
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
.page--element .elementMoodTile img{
  width: 100%;
  height: auto;
  display: block;
}
.page--element .elementMoodText{
  padding: 12px 14px 14px;
}
@media (max-width: 1100px){
  .page--element .elementMoodMosaic{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .page--element .elementMoodMosaic{ grid-template-columns: 1fr; }
}

/* Legacy DNA Tiles (falls noch in älteren Seiten genutzt) */
.page--element .dnaTiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
}
.page--element .dnaTile{
  background: rgba(249,245,239,0.75);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 14px 14px 16px;
  text-align: left;
}
.page--element .dnaTile h3{ margin: 0 0 8px; }
.page--element .dnaTile p{ margin: 0; opacity: .92; }
@media (max-width: 980px){
  .page--element .dnaTiles{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Wohlfühlhebel – neues Lever-Modul (leverGrid)
   --------------------------------------------------------- */
.page--element .leverGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
}
.page--element .leverCard{
  background: rgba(249,245,239,0.70);
  border: 1px solid rgba(0,0,0,0.06);
}
.page--element .leverCard__media{
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
.page--element .leverCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.page--element .leverCard__body{
  padding: 14px 14px 16px;
  text-align: left;
}
@media (max-width: 980px){
  .page--element .leverGrid{ grid-template-columns: 1fr; }
}

/* Legacy Lever (falls noch genutzt) */
.page--element .elementLeverGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.page--element .elementLeverCard{
  background: rgba(249,245,239,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
.page--element .elementLeverMedia{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.page--element .elementLeverMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--element .elementLeverBody{ padding: 12px 14px 14px; }
@media (max-width: 980px){
  .page--element .elementLeverGrid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   BALANCE – Cards mit Gradient-Rahmen (2x2 Desktop)
   --------------------------------------------------------- */
.page--element .elementFineGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px){
  .page--element .elementFineGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.page--element .elementFineCard{
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--element-grad);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 22px; /* zeigt den Gradient-Rand */
}
.page--element .elementFineCard::before{
  content: "";
  position: absolute;
  inset: 12px;
  background: rgba(249,245,239,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  z-index: 0;
}
.page--element .elementFineCard > *{
  position: relative;
  z-index: 1;
}
.page--element .elementFineCard .hubH3{ margin: 0 0 8px; }
.page--element .elementFineCard .hubText{ margin: 0; }

/* ---------------------------------------------------------
   Shop the Energy – Makeover (3 Cards Desktop)
   --------------------------------------------------------- */
.page--element .shopBuckets{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: var(--max);
  margin: 18px auto 0;
  align-items: stretch;
}
@media (min-width: 1024px){
  .page--element .shopBuckets{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.page--element .shopBucket{
  position: relative;
  overflow: hidden;
  background: var(--element-grad);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 22px; /* zeigt den Gradient-Rand */
  display: flex;
  flex-direction: column;
}
.page--element .shopBucket::before{
  content: "";
  position: absolute;
  inset: 12px;
  background: rgba(249,245,239,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  z-index: 0;
}
.page--element .shopBucket > *{
  position: relative;
  z-index: 1;
}
.page--element .shopBucket--center{ text-align: center; }
.page--element .shopBucket .btn{
  margin-top: auto;     /* Button unten */
  align-self: center;
}

/* ---------------------------------------------------------
   ZODIAC CARDS — stabil & symmetrisch (Element-Detail)
   --------------------------------------------------------- */
.page--element .zodiacCards3--element{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 20px);
  margin-top: 18px;

  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}
@media (max-width: 980px){
  .page--element .zodiacCards3--element{ grid-template-columns: 1fr; }
}

/* Gradient außen sicher sichtbar */
.page--element .zodiacCards3--element .card--grad{
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

/* optional helper class */
.page--element .card--grad-feuer{ background: var(--grad-feuer); }

/* Ivory-Inlay */
.page--element .zodiacCard__body{
  background: rgba(249,245,239,0.74);
  border: 1px solid rgba(0,0,0,0.06);
  margin: clamp(12px, 1.8vw, 16px);
  padding: clamp(16px, 2vw, 20px);

  display: flex;
  flex-direction: column;
  height: calc(100% - (2 * clamp(12px, 1.8vw, 16px)));
}
.page--element .zodiacCard__actions{
  margin-top: auto;
  padding-top: 14px;
}
.page--element .card__kicker{
  margin: 0 0 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .84rem;
  opacity: .85;
}
.page--element .zodiacCtaRow{
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* ---------------------------------------------------------
   FAQ – Grid/Look
   --------------------------------------------------------- */
.page--element .faqMediaGrid{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.page--element .faqCard{
  background: rgba(249,245,239,0.55);
}

/* optional split layout (falls genutzt) */
.page--element .faqSplit{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.page--element .faqSplit__media{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgb(var(--ed-ivory, 249,245,239));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.page--element .faqSplit__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--element .faqSplit__body{ min-width: 0; }
@media (max-width: 980px){
  .page--element .faqSplit{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Final CTA – falls genutzt (legacy)
   --------------------------------------------------------- */
.page--element .finalCtas{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 760px;
  margin: 18px auto 0;
}
.page--element .finalCtas .btn{
  width: 100%;
  justify-content: center;
}
/* ---------------------------------------------------------
   Wirkung – Notes: Element-Gradient statt globalem Sand-Note
   --------------------------------------------------------- */
.page--element .elementImpactSplit .note{
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--element-grad);
  padding: 22px; /* zeigt den Gradient-Rand */
}

/* ruhiges Ivory-Inlay für Lesbarkeit */
.page--element .elementImpactSplit .note::before{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--r) - 10px);
  background: rgba(249,245,239,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  z-index: 0;
}

.page--element .elementImpactSplit .note > *{
  position: relative;
  z-index: 1;
}