/* =========================
   /assets/css/magazin.css
   NUR Magazin-spezifische Module & Seiten-Overrides
   (keine Fonts, keine Tokens, kein Body/Container/Footer/Header-Basics)
   ========================= */


/* -----------------------------------------
   Utilities, die im Magazin-HTML benutzt werden
   (falls du sie global noch nicht hast)
   ----------------------------------------- */
.center{ text-align: center; }
.center-block{ margin-left:auto; margin-right:auto; text-align:center; }

/* Default: Head-Block links (nur direkte Kinder, nicht Hero-Overlays) */
.section--first > .eyebrow,
.section--first > h1,
.section--first > .lede{
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}


/* Ausnahme: Shop-the-Energy INDEX bleibt centered */
.page--shop-the-energy-index .section--first .eyebrow,
.page--shop-the-energy-index .section--first h1,
.page--shop-the-energy-index .section--first .lede{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page--shop-the-energy-index .section--first .lede{
  max-width: 70ch;
}
/* Shop-the-Energy Unterseiten: Hero soll direkt nach dem Header starten */
.page--shop-the-energy:not(.page--shop-the-energy-index) .section--first{
  padding-top: 0;
}
.page--shop-the-energy:not(.page--shop-the-energy-index) .articleHero,
.page--shop-the-energy:not(.page--shop-the-energy-index) .hero{
  margin-top: 0;
}

/* -----------------------------------------
   Breadcrumb (Magazin/Artikel) + Eyebrow
   -> folgt immer dem H1 Alignment
   Default: links
   Ausnahme: Shop-the-Energy INDEX mittig
   ----------------------------------------- */

/* Base Styling */
.breadcrumb{
  padding-bottom: 10px;
  font-size: 0.9rem;
  color: rgba(111,100,90,0.85);
  display: block;
  text-align: inherit; /* folgt dem Eltern-Text-Align */
}
.breadcrumb a{ text-decoration: none; }
.breadcrumb a:hover{ text-decoration: underline; }

/* Default: Breadcrumb + Eyebrow links (wie H1) */
.section--first > .breadcrumb,
.section--first > .eyebrow{
  text-align: left;
}

/* Ausnahme: Shop-the-Energy INDEX mittig */
.page--shop-the-energy-index .section--first .breadcrumb{
  text-align: center;
}
.page--shop-the-energy-index .section--first .eyebrow{
  text-align: center;
}

/* Optional: wenn du Breadcrumb im Index wirklich als Flex willst (rein kosmetisch) */
.page--shop-the-energy-index .section--first .breadcrumb{
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* -----------------------------------------
   Magazin-Startseite HERO (Cover)
   ----------------------------------------- */
.hero{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ivory);

  --hero-right: clamp(16px, 4vw, 72px);
  --hero-top: clamp(14px, 3.5vw, 44px);
}

.hero__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
  z-index: 1;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  padding: clamp(16px, 3vw, 32px);
  z-index: 2;
}

.heroCover__top{
  position: absolute;
  top: var(--hero-top);
  right: var(--hero-right);
  text-align: right;
  max-width: 85ch;
}

.heroCover__right{
  position: absolute;
  top: 52%;
  right: var(--hero-right);
  transform: translateY(-50%);
  text-align: right;
  max-width: 52ch;
}

.heroCover__title,
.heroCover__subtitle{
  font-family: var(--font-serif);
}

.heroCover__script{
  margin: 0 0 10px 0;
  font-size: clamp(16px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--taupe-dark);
  font-family: var(--font-script);
  font-weight: 400;
}

.heroCover__pillars{
  margin: 0;
  font-size: clamp(16px, 1.8vw, 24px);
  color: var(--taupe-dark);
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Lesbarkeit */
.heroCover__title,
.heroCover__subtitle,
.heroCover__script,
.heroCover__pillars{
  text-shadow: 0 1px 12px rgba(249,245,239,0.55);
}
/* =========================================================
   MAGAZIN STARTSEITE – HERO OVERLAY TUNING
   Ziel: größer, besser lesbar, dunkler wie andere Overlays
   ========================================================= */
.page--magazin-home .hero{
  /* optional fein: rechts etwas mehr Luft */
  --hero-right: clamp(18px, 4vw, 88px);
  --hero-top: clamp(16px, 3.5vw, 56px);
}

/* Scrim nur für diese Seite (Lesbarkeit auf der rechten Seite) */
.page--magazin-home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;                 /* über Bild, unter Text */
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(249,245,239,0.00) 40%,
    rgba(249,245,239,0.42) 70%,
    rgba(249,245,239,0.68) 100%
  );
}

/* Textlayer muss über dem Scrim liegen */
.page--magazin-home .hero__overlay{ z-index:3; }

/* H1 deutlich größer */
.page--magazin-home .heroCover__title{
  font-size: clamp(40px, 5.6vw, 65px);
  line-height: 1.02;
  font-weight: 500;
}

/* H2 ebenfalls größer */
.page--magazin-home .heroCover__subtitle{
  font-family: "Montserrat";
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.12;
  font-weight: 400;
  margin-top: 8px;
}

/* Signatur etwas größer (aber nicht übertrieben) */
.page--magazin-home .heroCover__script{
  font-size: clamp(18px, 2.6vw, 34px);
  margin: 0 0 12px 0;
}

/* „Interior Design trifft Astrologie“ minimal kleiner + dunkler/ruhiger */
.page--magazin-home .heroCover__pillars{
  font-size: clamp(14px, 1.9vw, 22px);
  font-weight: 500;
  opacity: 0.95;
}

/* Optional: Overlay-Blöcke leicht stabilisieren (gegen „Verrutschen“) */
.page--magazin-home .heroCover__top{ max-width: 90ch; }
.page--magazin-home .heroCover__right{ max-width: 58ch; }

/* Mobile: bleibt mittig, aber lesbar */
@media (max-width: 980px){
  .page--magazin-home .hero::after{
    background: linear-gradient(
      180deg,
      rgba(249,245,239,0.10) 0%,
      rgba(249,245,239,0.55) 55%,
      rgba(249,245,239,0.78) 100%
    );
  }
}
.hero picture{
  position: absolute;
  inset: 0;
  z-index: 1; /* wie das Bild */
}

.hero__media{
  display: block; /* verhindert Inline-Gaps/Glitches */
}

/* =========================
   MINI LINKS (Weiterlesen / Next Steps) – volle Containerbreite
   HTML: .mini-links > .mini-link > .mini-link__meta
   ========================= */
.mini-links{
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.mini-link{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;

  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(234,221,200,0.12);
}

.mini-link__meta{
  color: rgba(111,100,90,0.85);
  font-size: 14px;
  white-space: nowrap;
  align-self: flex-start;
}

/* Mobile: Meta darf umbrechen, sonst wird’s gequetscht */
@media (max-width: 640px){
  .mini-link{
    flex-direction: column;
    align-items: flex-start;
  }
  .mini-link__meta{
    white-space: normal;
  }
}

/* Optional: Wenn du an EINZELNEN Stellen wieder „Textspaltenbreite“ willst:
   <div class="mini-links mini-links--narrow">… */
.mini-links--narrow{
  max-width: var(--text);
  margin-left: auto;
  margin-right: auto;
}
.page--shop-the-energy:not(.page--shop-the-energy-index) .mini-links{
  margin-top: 12px;
}

/* -----------------------------------------
   Artikel / Prose
   ----------------------------------------- */
.article{ padding-bottom: 18px; }

/* Artikel-Hero 16:9 mit Scrim nur unten */
.articleHero{
  margin: 0 0 18px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  aspect-ratio: 16 / 9;
  background: var(--ivory);
}

.articleHero__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  z-index: 0;
}

.articleHero::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(
    to top,
    rgba(249,245,239,0.78) 0%,
    rgba(249,245,239,0.45) 55%,
    rgba(249,245,239,0.00) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.articleHero__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(10px, 2.2vw, 18px);
  z-index: 2;
}

.articleHero__kicker{ color: #302923; text-shadow:none; }
.articleHero__title{
  color: #302923;
  text-shadow: 0 1px 1px rgba(0,0,0,0.04);
  margin: 0 0 6px 0;
}
.articleHero__deck{
  color: #302923;
  text-shadow: 0 1px 1px rgba(0,0,0,0.03);
  margin: 0;
}
.page--magazin-home .heroCover__title,
.page--magazin-home .heroCover__subtitle,
.page--magazin-home .heroCover__script,
.page--magazin-home .heroCover__pillars{
  color: #64584b;             
}

/* Prose spacing */
.prose h2{ margin-top: 34px; margin-bottom: 12px; }
.prose h3{ margin-top: 22px; margin-bottom: 10px; }
.prose p{ margin: 0 0 14px; }
.prose ul, .prose ol{ margin: 0 0 18px; padding-left: 1.2rem; }
.prose li{ margin: 0.25rem 0; }

/* Meta row (optional) */
.articleMeta{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
}
.articleMeta__kicker{ letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; opacity:.8; }
.articleMeta__reading{ font-size:.9rem; opacity:.75; }


/* -----------------------------------------
   Breakout + CardsGrid (Pillar-Artikel)
   -> nur Layout, keine globale .card-Neudefinition
   ----------------------------------------- */
.cardsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.cardsGrid--principles{
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.breakout{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 4vw, 44px);
  padding-right: clamp(16px, 4vw, 44px);
  box-sizing: border-box;
}

.breakout .cardsGrid--principles{
  max-width: 1200px;
  margin-left:auto;
  margin-right:auto;
}

/* Elemente-Übersicht 2x2 */
.cardsGrid--elements{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* -----------------------------------------
   Element-Panels (großflächig, nicht Card)
   -> Gradients sind hier sinnvoll Magazin-spezifisch
   ----------------------------------------- */
:root{
  --ed-ivory: 249,245,239;
  --ed-sand: 234,221,200;
  --ed-sage: 196,209,192;
  --ed-taupe: 183,169,154;
  --ed-lightgray: 236,236,232;
  --ed-terracotta: 201,122,92;
}

.elementSection{
  padding: 22px 20px;
  margin: 26px 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid rgba(0,0,0,0.06);
  outline-offset: -1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.elementSection h2{ margin-top: 0; }

.elementSection .callout{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
}

.elementSection--feuer{
  background: linear-gradient(135deg,
    rgba(var(--ed-sand), 0.34),
    rgba(var(--ed-terracotta), 0.12)
  );
}
.elementSection--wasser{
  background: linear-gradient(135deg,
    rgba(var(--ed-ivory), 0.58),
    rgba(var(--ed-taupe), 0.14),
    rgba(var(--ed-sage), 0.10)
  );
}
.elementSection--erde{
  background: linear-gradient(135deg,
    rgba(var(--ed-sand), 0.30),
    rgba(var(--ed-sage), 0.14)
  );
}
.elementSection--luft{
  background: linear-gradient(135deg,
    rgba(var(--ed-ivory), 0.62),
    rgba(var(--ed-lightgray), 0.20)
  );
}


/* -----------------------------------------
   Kompassmomente
   ----------------------------------------- */
.kmGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 1000px){
  .kmGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .kmGrid{ grid-template-columns: 1fr; }
}


/* -----------------------------------------
   Mini-Edits / Mood
   ----------------------------------------- */
.moodGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 800px){
  .moodGrid{ grid-template-columns: 1fr; }
}

.affiliateNote{
  margin: 14px 0 0;
  font-size: .95rem;
  opacity: .85;
}


/* -----------------------------------------
   Sternzeichen: Grids + Hub-Styles
   ----------------------------------------- */
.zodiacGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 800px){
  .zodiacGrid{ grid-template-columns: 1fr; }
}

.zodiacHubGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 1000px){
  .zodiacHubGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .zodiacHubGrid{ grid-template-columns: 1fr; }
}

/* Sternzeichen-Hub spezielle Zentrierung (nur diese Seite) */
.page--zodiac-hub .article__content{ text-align:center; }
.page--zodiac-hub .prose h2,
.page--zodiac-hub .prose h3{ text-align:center; }

.page--zodiac-hub .article__content ul,
.page--zodiac-hub .article__content ol{
  display: inline-block;
  text-align: left;
  margin: 10px auto 18px;
}

/* Sternzeichen-Row-Liste (Editorial) */
.zodiacRows{
  margin-top: 14px;
  border-top: 1px solid rgba(183,169,154,0.18);
}

.zodiacRow{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  text-decoration: none;
  border-bottom: 1px solid rgba(183,169,154,0.18);
}

.zodiacRow:hover{ background: rgba(234,221,200,0.18); }

.zodiacRow__kicker{
  display:block;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  opacity: .7;
  margin-bottom: 4px;
}

.zodiacRow__title{
  display:block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.zodiacRow__text{
  display:block;
  opacity: .88;
  max-width: 72ch;
}

.zodiacRow__arrow{
  align-self:center;
  opacity: .65;
  font-size: 1.15rem;
}

/* Hub: Rows als centered Blocks + CTA */
.page--zodiac-hub .zodiacRows{
  margin: 18px auto 0;
  max-width: 980px;
}
.page--zodiac-hub .zodiacRow{
  display:block;
  text-align:center;
  padding: 18px 18px;
  background: rgba(255,255,255,0.22);
}
.page--zodiac-hub .zodiacRow:hover{ background: rgba(234,221,200,0.22); }

.page--zodiac-hub .zodiacRow__text{
  margin: 0 auto;
  max-width: 70ch;
}

.page--zodiac-hub .zodiacRow__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  outline: 1px solid rgba(0,0,0,0.03);
  outline-offset: -1px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: .95;
}
.page--zodiac-hub .zodiacRow:hover .zodiacRow__cta{ opacity: 1; }

/* CTA Gradients */
.page--zodiac-hub .zodiacRow--feuer .zodiacRow__cta{
  background: linear-gradient(135deg, rgba(var(--ed-sand), 0.40), rgba(var(--ed-terracotta), 0.14));
}
.page--zodiac-hub .zodiacRow--luft .zodiacRow__cta{
  background: linear-gradient(135deg, rgba(var(--ed-ivory), 0.55), rgba(var(--ed-lightgray), 0.18));
}
.page--zodiac-hub .zodiacRow--erde .zodiacRow__cta{
  background: linear-gradient(135deg, rgba(var(--ed-sand), 0.38), rgba(var(--ed-sage), 0.16));
}
.page--zodiac-hub .zodiacRow--wasser .zodiacRow__cta{
  background: linear-gradient(135deg, rgba(var(--ed-ivory), 0.52), rgba(var(--ed-taupe), 0.14), rgba(var(--ed-sage), 0.10));
}

/* -----------------------------------------
   Responsive: Magazin-Startseite – Cover-Hero
   (Mobile: rechts im Bild, kein Overlap)
   ----------------------------------------- */

/* OPTIONAL: Wenn du auf Tablet (bis 980px) NICHT mehr zentrieren willst,
   dann lass diesen Block weg. Wenn du zentriert willst, behalte ihn.
   (Du wolltest rechts auch auf Mobile; Tablet ist Geschmackssache.) */
/*
@media (max-width: 980px){
  .page--magazin-home .heroCover__top{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    max-width: 70ch;
  }
  .page--magazin-home .heroCover__right{
    top: auto;
    bottom: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    max-width: 62ch;
  }
}
*/
/* -----------------------------------------
   /magazin/ Startseite – Mobile Fix (rechts, IM Bild, kein Verschwinden)
   ----------------------------------------- */
@media (max-width: 640px){

  .page--magazin-home .hero{
    min-height: 560px;
  }

  /* Overlay bleibt sicher über Bild + Scrim */
  .page--magazin-home .hero__overlay{
    z-index: 3;
  }

  /* Titelblock: oben rechts, aber innerhalb der Overlay-Fläche */
  .page--magazin-home .heroCover__top{
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;     /* wichtig: nicht auto */
    right: 18px !important;    /* wichtig: begrenzt die Box im Bild */
    transform: none !important;
    text-align: right;
    max-width: none;
    z-index: 4;
  }

  /* Signatur/Pillars: unten rechts, aber innerhalb der Overlay-Fläche */
  .page--magazin-home .heroCover__right{
    position: absolute !important;
    bottom: 18px !important;
    top: auto !important;
    left: 18px !important;
    right: 18px !important;
    transform: none !important;
    text-align: right;
    max-width: none;
    z-index: 4;
  }

  /* Typo kleiner, damit nichts überlappt */
  .page--magazin-home .heroCover__title{
    font-size: clamp(26px, 9.8vw, 36px) !important;
    line-height: 1.04;
  }
  .page--magazin-home .heroCover__subtitle{
    font-size: clamp(15px, 5.2vw, 18px) !important;
    line-height: 1.15;
  }
  .page--magazin-home .heroCover__script{
    font-size: clamp(15px, 5.4vw, 20px) !important;
    line-height: 1.12;
  }
  .page--magazin-home .heroCover__pillars{
    font-size: clamp(13px, 4.6vw, 16px) !important;
  }
}

/* Extra klein (iPhone SE etc.) */
@media (max-width: 360px){
  .page--magazin-home .hero{ min-height: 620px; }
}



/* -----------------------------------------
   Responsive: CardsGrid (wie gehabt)
   ----------------------------------------- */
@media (max-width: 640px){
  .cardsGrid--principles{ grid-template-columns: 1fr; gap: 12px; }
  .cardsGrid--elements{ grid-template-columns: 1fr; }
}


/* =========================
   FIX: Magazin-Hero nicht unter fixed Header
   (magazin.css wird nur im Magazin geladen)
   ========================= */
main#main{
  padding-top: var(--header-h, 92px);
}

/* Optional (nur UX): Sprunglinks/Anker landen nicht unter dem Header */
html{
  scroll-padding-top: var(--header-h, 92px);
}

/* magazin.css — FIX: nicht doppelt offsetten */
body.page main#main{
  padding-top: 0;
}

/* Optional: nur falls du irgendwo Seiten ohne body.page hast */
body:not(.page) main#main{
  padding-top: var(--header-h, 92px);
}


/* -----------------------------------------
   Artikel-Hero: Typografie skaliert sauber (Desktop/Tablet)
   ----------------------------------------- */
.articleHero__title{
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 1.06;
}

.articleHero__deck{
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.25;
  max-width: 70ch;
}

/* Overlay bleibt links */
.articleHero__overlay{
  text-align: left;
}

/* Mobile: wirklich kleiner (direkt auf Klassen, damit es sicher greift) */
@media (max-width: 640px){
  .articleHero__title{
    font-size: clamp(22px, 8.8vw, 30px) !important;
    line-height: 1.06;
  }
  .articleHero__deck{
    font-size: clamp(13px, 4.4vw, 15px) !important;
    line-height: 1.25;
  }
  .articleHero__kicker{
    font-size: 0.78rem !important;
  }
}
/* =========================================================
   STARTSEITE (/magazin/) — Mobile: Cover-Overlay bleibt IM Bild (rechts)
   ========================================================= */
@media (max-width: 640px){

  /* Falls irgendwas horizontal „zieht“ */
  .page--magazin-home .hero{
    overflow: hidden;
    min-height: 560px;
  }

  /* Overlay als Grid: oben rechts + unten rechts, ohne Offscreen-Risiko */
  .page--magazin-home .hero__overlay--cover{
    position: absolute;
    inset: 0;
    padding: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: end;       /* rechts */
    align-items: start;
    z-index: 3;
  }

  /* Beide Blöcke NICHT mehr per left/50%/transform schieben */
  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    position: static !important;
    transform: none !important;
    text-align: right;
    width: min(86vw, 26ch);   /* wichtig: begrenzt Breite, verhindert Offscreen */
    max-width: 26ch;
  }

  /* Der rechte Block soll unten sitzen */
  .page--magazin-home .heroCover__right{
    align-self: end;
  }

  /* Typo kleiner + garantiert umbruchfähig */
  .page--magazin-home .heroCover__title{
    font-size: clamp(26px, 9.8vw, 36px) !important;
    line-height: 1.04;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .page--magazin-home .heroCover__subtitle{
    font-size: clamp(15px, 5.2vw, 18px) !important;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .page--magazin-home .heroCover__script{
    font-size: clamp(15px, 5.4vw, 20px) !important;
    line-height: 1.12;
    white-space: normal;
  }
  .page--magazin-home .heroCover__pillars{
    font-size: clamp(13px, 4.6vw, 16px) !important;
    white-space: normal;
  }
}

/* Extra klein (SE etc.) */
@media (max-width: 360px){
  .page--magazin-home .hero{ min-height: 620px; }
  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    width: min(86vw, 22ch);
    max-width: 22ch;
  }
}
/* =========================================================
   STARTSEITE (/magazin/) — Mobile: Text immer sichtbar (Layer + Layout fix)
   ========================================================= */
@media (max-width: 640px){

  /* eigener Stacking-Context, damit z-index sauber funktioniert */
  .page--magazin-home .hero{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 560px;
  }

  /* Bild ganz unten */
  .page--magazin-home .hero picture{ z-index: 1; }
  .page--magazin-home .hero__media{ z-index: 1; }

  /* Scrim darüber, aber UNTER Text */
  .page--magazin-home .hero::after{
    z-index: 2 !important;
  }

  /* Textlayer MUSS über Scrim liegen (das ist der Kernfix) */
  .page--magazin-home .hero__overlay{
    z-index: 3 !important;
    position: absolute;
    inset: 0;
  }

  /* Cover-Layout auf Mobile: rechts, im Bild, ohne Offscreen */
  .page--magazin-home .hero__overlay--cover{
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: end;
    padding: 18px;
  }

  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    position: static !important;
    transform: none !important;
    text-align: right;
    width: min(88vw, 28ch);
    max-width: 28ch;
  }

  .page--magazin-home .heroCover__right{
    align-self: end;
  }

  /* Typo kleiner, damit nichts kollidiert */
  .page--magazin-home .heroCover__title{
    font-size: clamp(26px, 9.8vw, 36px) !important;
    line-height: 1.04;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .page--magazin-home .heroCover__subtitle{
    font-size: clamp(15px, 5.2vw, 18px) !important;
    line-height: 1.15;
  }
  .page--magazin-home .heroCover__script{
    font-size: clamp(15px, 5.4vw, 20px) !important;
    line-height: 1.12;
  }
  .page--magazin-home .heroCover__pillars{
    font-size: clamp(13px, 4.6vw, 16px) !important;
  }
}

/* Extra klein */
@media (max-width: 360px){
  .page--magazin-home .hero{ min-height: 620px; }
  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    width: min(88vw, 22ch);
    max-width: 22ch;
  }
}
/* =========================================================
   MAGAZIN STARTSEITE (/magazin/) — Cover-Hero stabil <1024px
   (rechtsbündig, Text bleibt IM Bild)
   ========================================================= */
@media (max-width: 1023px){

  /* Hero bleibt der Bezugspunkt */
  .page--magazin-home .hero{
    position: relative;
    overflow: hidden;
  }

  /* Bild: Fokus etwas mehr Richtung rechter Wand (optional, hilft optisch) */
  .page--magazin-home .hero__media{
    object-position: 88% 50%;
  }

  /* Overlay muss sicher über Scrim liegen */
  .page--magazin-home .hero__overlay{
    z-index: 3;
  }

  /* Ab hier: KEIN absolute positioning mehr für die Blöcke -> kein Wegdriften */
  .page--magazin-home .hero__overlay--cover{
    position: absolute;
    inset: 0;
    padding: clamp(14px, 3vw, 22px);

    display: grid;
    grid-template-rows: auto 1fr auto; /* oben / spacer / unten */
    justify-items: end;               /* rechtsbündig */
    align-items: start;

    transform: none !important;
    left: 0 !important;
    right: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    position: static !important;
    transform: none !important;

    text-align: right;
    width: min(92vw, 30ch);   /* kann nicht aus dem Bild rutschen */
    max-width: 30ch;
  }

  .page--magazin-home .heroCover__right{
    align-self: end;          /* nach unten */
  }

  /* Typo skaliert wirklich runter */
  .page--magazin-home .heroCover__title{
    font-size: clamp(26px, 5.8vw, 44px) !important;
    line-height: 1.03;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .page--magazin-home .heroCover__subtitle{
    font-size: clamp(15px, 2.8vw, 20px) !important;
    line-height: 1.15;
  }
  .page--magazin-home .heroCover__script{
    font-size: clamp(15px, 2.9vw, 20px) !important;
    line-height: 1.12;
  }
  .page--magazin-home .heroCover__pillars{
    font-size: clamp(13px, 2.5vw, 18px) !important;
  }
}

/* Extra klein: noch etwas mehr „Platz“, sonst überlappt es wegen 16:9-Höhe */
@media (max-width: 420px){
  .page--magazin-home .hero{
    min-height: 430px; /* ja: macht Hero höher als 16:9 — ist nötig für 2 Textblöcke */
  }
  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    width: min(92vw, 26ch);
    max-width: 26ch;
  }
  .page--magazin-home .heroCover__title{
    font-size: clamp(24px, 9.5vw, 34px) !important;
  }
}
/* =========================
   HARD FIX: Hero darf NICHT aus dem Container ausbrechen
   (falls .section global 100vw/Breakout macht)
   ========================= */
.page--magazin-home header.section.section--first.container{
  width: 100% !important;
  max-width: var(--container, var(--max, 1200px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 44px) !important;
  padding-right: clamp(16px, 4vw, 44px) !important;
  box-sizing: border-box !important;
}

.page--magazin-home header.section.section--first.container .hero{
  width: 100% !important;
  max-width: 100% !important;
}
.page--magazin-home .container.section{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.page--magazin-home .container.section{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* =========================================================
   /magazin/ Startseite: Cover-Hero nutzt articleHero-Basis
   Bild wie Artikel, Overlay wie Startseite
   ========================================================= */

/* articleHero hat schon aspect-ratio/overflow/border — wir nutzen das */
.page--magazin-home .articleHero--cover{
  position: relative;
  margin: 0; /* damit es innerhalb section sauber sitzt */
}

/* Scrim: statt Artikel-"unten"-Scrim ein rechtsseitiger Scrim wie vorher */
.page--magazin-home .articleHero--cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;               /* über Bild, unter Text */
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(249,245,239,0.00) 40%,
    rgba(249,245,239,0.42) 70%,
    rgba(249,245,239,0.68) 100%
  );
}

/* Text-Overlay über dem Scrim */
.page--magazin-home .articleHero--cover .hero__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  padding: clamp(16px, 3vw, 32px);
}

/* Mobile: Overlay stabil IM Bild (rechtsbündig, kein Wegdriften) */
@media (max-width: 1023px){
  .page--magazin-home .articleHero--cover .hero__overlay--cover{
    display:grid;
    grid-template-rows: auto 1fr auto;
    justify-items:end;
    align-items:start;
    padding: 18px;
  }

  .page--magazin-home .heroCover__top,
  .page--magazin-home .heroCover__right{
    position: static !important;
    transform: none !important;
    text-align: right;
    width: min(92vw, 30ch);
    max-width: 30ch;
  }

  .page--magazin-home .heroCover__right{ align-self: end; }
}

/* Typo-Farben (wie du es schon gesetzt hast) */
.page--magazin-home .heroCover__title,
.page--magazin-home .heroCover__subtitle,
.page--magazin-home .heroCover__script,
.page--magazin-home .heroCover__pillars{
  color: #64584b;
}
/* =========================================================
   MAGAZIN HOME — Cover-Hero FINAL
   Bild: articleHero-Basis
   Text: Startseiten-Overlay rechts (Desktop) + Grid (Mobile)
   ========================================================= */

.page--magazin-home .articleHero--cover{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Variablen, die vorher an .hero hingen */
  --hero-right: clamp(18px, 4vw, 88px);
  --hero-top: clamp(16px, 3.5vw, 56px);
}

/* Ersetzt den articleHero-Standard-Scrim (unten) durch Cover-Scrim (rechts) */
.page--magazin-home .articleHero--cover::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  height:auto;               /* killt das alte height:28% vom articleHero */
  z-index:1;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(249,245,239,0.00) 40%,
    rgba(249,245,239,0.42) 70%,
    rgba(249,245,239,0.68) 100%
  );
}

/* Overlay immer ÜBER dem Scrim */
.page--magazin-home .articleHero--cover .hero__overlay--cover{
  position:absolute;
  inset:0;
  z-index:2;
  padding: clamp(16px, 3vw, 32px);
}

/* DESKTOP: wieder rechtsbündig wie vorher (absolute Blöcke) */
.page--magazin-home .articleHero--cover .heroCover__top{
  position:absolute;
  top: var(--hero-top, 24px);
  right: var(--hero-right, 32px);
  left: auto;
  text-align: right;
  max-width: 90ch;
}

.page--magazin-home .articleHero--cover .heroCover__right{
  position:absolute;
  top: 52%;
  right: var(--hero-right, 32px);
  left: auto;
  transform: translateY(-50%);
  text-align: right;
  max-width: 58ch;
}

/* Schatten/Glow wieder kontrolliert */
.page--magazin-home .articleHero--cover .heroCover__title,
.page--magazin-home .articleHero--cover .heroCover__subtitle,
.page--magazin-home .articleHero--cover .heroCover__script,
.page--magazin-home .articleHero--cover .heroCover__pillars{
  text-shadow: 0 1px 12px rgba(249,245,239,0.55);
}

/* MOBILE/TABLET: Grid-Version (wie bei dir, aber sauber scoped) */
@media (max-width: 1023px){
  .page--magazin-home .articleHero--cover .hero__overlay--cover{
    display:grid;
    grid-template-rows: auto 1fr auto;
    justify-items: end;
    padding: 18px;
  }

  .page--magazin-home .articleHero--cover .heroCover__top,
  .page--magazin-home .articleHero--cover .heroCover__right{
    position: static !important;
    transform: none !important;
    text-align: right;
    width: min(92vw, 30ch);
    max-width: 30ch;
  }

  .page--magazin-home .articleHero--cover .heroCover__right{
    align-self: end;
  }
}
/* ===== Trends Hub: Rhythmus & Luft ===== */
.trendHub { 
  /* optional: Lesbarkeit minimal höher */
  font-size: clamp(16px, 0.25vw + 15px, 18px);
}

.trendHub .prose{
  max-width: 72ch;            /* macht sofort “magaziniger” */
  margin-inline: auto;
}

.trendHub .flow > * + *{
  margin-top: var(--flow-space, 1rem);
}

/* Überschriften: mehr Luft davor & danach */
.trendHub .flow > h1{
  margin-block: clamp(22px, 4vw, 44px) clamp(14px, 2.5vw, 26px);
}

.trendHub .flow > h2{
  margin-top: clamp(44px, 6vw, 72px);
  margin-bottom: clamp(14px, 2.2vw, 24px);
}

/* Fließtext */
.trendHub p{ line-height: 1.7; }

/* Callout-Box: Abstand erhöhen (Class bitte an eure Box anpassen) */
.trendHub .callout,
.trendHub .noteBox,
.trendHub .hubCallout{
  margin-block: clamp(22px, 3vw, 40px);
  padding: clamp(16px, 2.5vw, 26px);
}

/* Kartenblock: Abstand zum H2 + Grid-Luft (Class fürs Grid anpassen) */
.trendHub .styleWorlds{
  margin-top: clamp(44px, 6vw, 78px);
}
.trendHub .styleWorldsGrid,
.trendHub .cardGrid,
.trendHub .hubCards{
  margin-top: clamp(18px, 3vw, 34px);
  gap: clamp(14px, 2.5vw, 22px);
}
/* Hero-Overlay Titel wie Headline (Playfair) */
.articleHero__overlay .articleHero__title{
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0.15em 0 0.2em;
  font-size: clamp(28px, 4.2vw, 52px);
}

/* Optional: Deck auch etwas “magaziniger” */
.articleHero__overlay .articleHero__deck{
  max-width: 36ch;
  line-height: 1.35;
}
/* Lesespalte für lange Artikeltexte */
.trendDetail .prose { max-width: 72ch; margin-inline: auto; }
.trendDetail .flow > * + * { margin-top: var(--flow-space, 1rem); }
/* ===== Trends (Hub + Detail): Rhythmus & Luft ===== */

/* gemeinsame Basis: Hub + Detail */
.trendHub,
.trendDetail{
  font-size: clamp(16px, 0.25vw + 15px, 18px);
}

/* Lesespalte */
.trendHub .prose,
.trendDetail .prose{
  max-width: 100ch;
  margin-inline: auto;
}

/* Flow-Rhythmus */
.trendHub .flow > * + *,
.trendDetail .flow > * + *{
  margin-top: var(--flow-space, 1rem);
}

/* Headline-Spacings */
.trendHub .flow > h1,
.trendDetail .flow > h1{
  margin-block: clamp(22px, 4vw, 44px) clamp(14px, 2.5vw, 26px);
}

/* H2: Hub + Detail */
.trendHub .flow > h2,
.trendDetail .flow > h2{
  margin-top: clamp(44px, 6vw, 72px);
  margin-bottom: clamp(14px, 2.2vw, 24px);
}

/* H3: nur Detail braucht meist mehr Struktur */
.trendDetail .flow > h3{
  margin-top: clamp(26px, 4vw, 44px);
  margin-bottom: clamp(10px, 1.8vw, 18px);
}

/* Fließtext */
.trendHub p,
.trendDetail p{
  line-height: 1.7;
}

/* Lede: etwas mehr „magazin“ */
.trendDetail .lede,
.trendHub .lede{
  font-size: 1.06em;
  line-height: 1.75;
}

/* Listen: mehr Luft (wichtig bei deinen neuen langen Ledes) */
.trendDetail ul,
.trendDetail ol{
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  padding-left: 1.2rem;
}
.trendDetail li + li{
  margin-top: 0.35rem;
}

/* Callouts/Notes: Raum */
.trendHub .callout,
.trendHub .noteBox,
.trendHub .hubCallout,
.trendDetail .callout,
.trendDetail .noteBox,
.trendDetail .hubCallout{
  margin-block: clamp(22px, 3vw, 40px);
  padding: clamp(16px, 2.5vw, 26px);
}

/* Kartenblock: bleibt Hub-spezifisch */
.trendHub .styleWorlds{
  margin-top: clamp(44px, 6vw, 78px);
}
.trendHub .styleWorldsGrid,
.trendHub .cardGrid,
.trendHub .hubCards{
  margin-top: clamp(18px, 3vw, 34px);
  gap: clamp(14px, 2.5vw, 22px);
}

/* Hero-Overlay Titel wie Headline (Playfair) */
.articleHero__overlay .articleHero__title{
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0.15em 0 0.2em;
  font-size: clamp(28px, 4.2vw, 52px);
}

/* Deck auch etwas „magaziniger“ */
.articleHero__overlay .articleHero__deck{
  max-width: 36ch;
  line-height: 1.35;
}

/* Optional: Mikrozeilen etwas „aufgeräumter“ */
.trendHub .micro,
.trendDetail .micro{
  opacity: 0.88;
}
.articlePager { margin-top: clamp(18px, 3vw, 34px); }
.articlePager .hubHeroCtas { margin-top: 10px; }

/* Pager: Eyebrow zentrieren (nur in der Weiterlesen-Navi) */
.articlePager .eyebrow{
  text-align: center;
}