/* =========================================================
   Lokale user.css für yoga-welten.de
   Wird vom Plugin NACH common.css geladen.
   Hier nur Domainfarben, Logoabmessungen und echte Ausnahmen pflegen.
   ========================================================= */

/* =========================================================
   YOGA-WELTEN.DE – DOMAIN-FARBEN
   Nur diesen Block pro Website anpassen
   Domain: yoga-welten.de
   ========================================================= */

:root {
  /* Markenfarben */
  --site-primary: #760e0f;
  --site-primary-dark: #5c0a0b;
  --site-accent: #945620;

  --site-secondary: #809023;
  --site-secondary-dark: #66751d;
  --site-secondary-soft: #f1f3e6;

  --site-brown: #945620;
  --site-red: #760e0f;

  /* Komponentenfarben */
  --site-media-bar: #760e0f;
  --site-video-cta: var(--site-accent);
  --site-video-accent: var(--site-accent);
  --site-reading-progress: var(--site-secondary);

  /* Header */
  --site-header-bg: #ffffff;
  --site-header-text: #000000;
  --site-header-link: #760e0f;
  --site-header-link-hover: #945620;
  --site-header-icon: #760e0f;

  --site-header-border:
    color-mix(
      in srgb,
      var(--site-primary) 14%,
      transparent
    );

  /* Mobiles Menü */
  --site-mobile-menu-bg: #ffffff;
  --site-mobile-menu-text: #000000;
  --site-mobile-menu-link: #760e0f;
  --site-mobile-menu-link-hover: #945620;

  /* Footer */
  --site-footer-bg: #34451f;
  --site-footer-text: #ffffff;
  --site-footer-muted: #e5eadb;
  --site-footer-link: #ffffff;
  --site-footer-link-hover: #f0cf9c;
  --site-footer-border: rgba(255, 255, 255, 0.16);

  /* Allgemeine Flächen */
  --site-bg: #ffffff;
  --site-soft: #f7f5f0;
  --site-soft-primary: #f8f3ee;
  --site-soft-accent: #fbf6ed;
  --site-card-bg: #ffffff;

  /* Allgemeiner Text */
  --site-text: #000000;
  --site-muted: #62675d;

  /* Amazon-Button */
  --site-amazon-cta: var(--site-accent);
  --site-amazon-cta-text: #ffffff;

  /* Audio-Player */
  --site-audio-accent: var(--site-primary);

  /* Produktangebote */
  --site-product-accent: var(--site-primary);
  --site-product-cta: var(--site-accent);
  --site-product-cta-text: #ffffff;

  /* Umfragen */
  --site-poll-accent: var(--site-primary);
  --site-poll-cta: var(--site-accent);
  --site-poll-success: var(--site-secondary-dark);
  --site-poll-error: var(--site-red);
  --site-poll-surface: var(--site-soft);
}


/* =========================================================
   YOGA-WELTEN.DE – DOMAIN-LOGO
   Horizontales Logo, damit der Header flach bleibt.
   ========================================================= */

:root {
  --site-header-logo-width: 230px;
  --site-header-logo-width-compact: 190px;

  --site-header-nav-offset: 300px;
  --site-header-nav-offset-compact: 255px;

  --site-header-logo-width-mobile: 190px;
  --site-header-logo-width-mobile-compact: 158px;
}


/* =========================================================
   YOGA-WELTEN.DE – EXTERNE STARTSEITEN-ICONS

   JCE/Joomla entfernt in diesem Modul Inline-SVG-Inhalte.
   Deshalb werden die Icons als externe SVG-Bilder eingebunden.
   ========================================================= */

.site-home-topic__icon img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.site-home-download__icon img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.site-home-about__fact-icon {
  display: block;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}


/* =========================================================
   YOGA-WELTEN.DE – BARRIEREFREIER FARBKONTRAST

   Das Marken-Oliv #809023 bleibt für größere Flächen,
   Linien und dekorative Elemente bestehen.

   Für kleine Texte sowie Weiß auf Grün wird das dunklere
   Oliv #66751d verwendet, damit WCAG-Kontraste eingehalten
   werden.
   ========================================================= */

/* Kategorie-Badges in Artikelkarten */
.site-home-portal .site-article-card__category {
  background-color: var(--site-secondary-dark) !important;
  color: #ffffff !important;
}

.site-home-portal .site-article-card__category:hover,
.site-home-portal .site-article-card__category:focus-visible {
  background-color: var(--site-primary) !important;
  color: #ffffff !important;
}


/* Grüner Button im Wochen-/Yoga-Impuls */
.site-home-button--wine {
  background-color: var(--site-secondary-dark);
  color: #ffffff;
}

.site-home-button--wine:hover,
.site-home-button--wine:focus-visible {
  background-color: var(--site-primary);
  color: #ffffff;
}


/* Grüne Download-Karte:
   kleine grüne Texte benötigen höheren Kontrast */
.site-home-download--green .site-home-download__kicker,
.site-home-download--green .site-home-download__link {
  color: var(--site-secondary-dark);
}


/* Link-Fokus auch bei Tastaturbedienung klar sichtbar */
.site-article-card__category:focus-visible,
.site-home-button--wine:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--site-primary) 28%,
      transparent
    );
  outline-offset: 2px;
}


/* =========================================================
   RESPONSIVE ANPASSUNGEN
   ========================================================= */

@media (max-width: 767.98px) {
  .site-home-topic__icon img {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Kleine olivfarbene Eyebrow-Texte: WCAG-konformes dunkleres Oliv. */
.site-home-section__eyebrow {
  color: var(--site-secondary-dark);
}


/* =========================================================
   STARTSEITE – OBERER BEREICH
   Hero, Impuls und aktuelle Beiträge
   ========================================================= */

.site-home-portal {
  overflow: visible;
  background: #fffdf9;
  box-shadow:
    0 0 0 1px rgb(86 62 37 / 4%),
    0 1.2rem 3rem rgb(75 55 37 / 8%);
}

@supports selector(body:has(.site-home-portal)) {
  body:has(.site-home-portal) {
    background:
      radial-gradient(circle at 8% 18%, rgb(128 144 35 / 6%), transparent 22rem),
      radial-gradient(circle at 92% 46%, rgb(148 86 32 / 5%), transparent 26rem),
      #f6f1e8;
  }
}

/* ---------- Hero desktop ---------- */
.site-home-portal .site-home-hero {
  position: relative;
  display: block !important;
  max-width: 1180px;
  min-height: 515px;
  overflow: visible;
  border-radius: 0 !important;
  background:
    url("/images/site-home/decor/hero-art-transparent.webp")
      right -.15rem top -.1rem / auto 108% no-repeat,
    #fffdf9 !important;
}

.site-home-portal .site-home-hero::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 9.2rem;
  width: 6rem;
  height: 10rem;
  background: url("/images/site-home/decor/branch.svg") center / contain no-repeat;
  opacity: .72;
  pointer-events: none;
}

.site-home-portal .site-home-hero::after {
  content: "";
  position: absolute;
  left: -1.55rem;
  bottom: -4.1rem;
  width: 7.7rem;
  height: 7.7rem;
  background: url("/images/site-home/decor/mandala.svg") center / contain no-repeat;
  opacity: .67;
  pointer-events: none;
}

.site-home-portal .site-home-hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(46%, 33rem);
  min-height: 515px;
  flex-direction: column;
  padding: 2.65rem 0 3.4rem 2.75rem;
  background: transparent !important;
}

/* Pinselstrich unter der H1. */
.site-home-portal .site-home-hero__copy::before {
  content: "";
  display: block;
  order: 2;
  width: 9.2rem;
  height: .8rem;
  margin: .55rem 0 .35rem;
  background:
    linear-gradient(173deg, transparent 44%, rgb(185 147 86 / 85%) 46% 54%, transparent 56%)
    center / 100% 100% no-repeat;
  opacity: .76;
}

.site-home-portal .site-home-hero__copy::after {
  content: none;
  display: none;
}

.site-home-portal .site-home-hero__copy > .site-home-section__eyebrow { order: 0; }
.site-home-portal .site-home-hero__copy > h1 { order: 1; }
.site-home-portal .site-home-hero__copy > .site-home-hero__lead { order: 3; }
.site-home-portal .site-home-hero__copy > .site-home-hero__actions { order: 4; }
.site-home-portal .site-home-hero__copy > .site-home-hero__trust { order: 5; }

.site-home-portal .site-home-hero h1 {
  max-width: 9.8ch;
  margin: 0;
  font-size: clamp(2.45rem, 3.15vw, 3.45rem) !important;
  line-height: .99 !important;
  letter-spacing: -.022em;
}

.site-home-portal .site-home-hero__lead {
  max-width: 29rem;
  margin-top: .95rem;
  color: #463f38;
  font-size: .92rem;
  line-height: 1.62;
}

.site-home-portal .site-home-hero__actions {
  display: flex;
  gap: .78rem;
  margin-top: 1rem;
}

.site-home-portal .site-home-hero__actions .site-home-button {
  min-height: 2.68rem;
  padding-inline: .95rem;
  border-radius: .42rem;
}

.site-home-portal .site-home-hero__actions .site-home-button--primary {
  color: #fff;
  background: var(--site-primary);
  border-color: var(--site-primary);
}

.site-home-portal .site-home-hero__actions .site-home-button--secondary {
  color: var(--site-secondary-dark);
  background: rgb(255 253 248 / 94%);
  border-color: rgb(102 117 29 / 38%);
}

.site-home-portal .site-home-hero__trust {
  margin-top: .82rem;
  color: #6f6a62;
  font-size: .74rem;
}

/* Der alte HTML-Bildblock darf nach der Moduländerung nicht mehr vorhanden sein.
   Falls er noch kurz im Cache auftaucht, bleibt er unsichtbar. */
.site-home-portal .site-home-hero__visual,
.site-home-portal .site-home-hero__image {
  display: none !important;
}

/* ---------- Impuls ---------- */
.site-home-portal .site-home-impulse {
  position: relative;
  width: calc(100% - 7rem);
  max-width: 1040px;
  grid-template-columns: 170px 1fr 1fr 1.42fr;
  margin-top: -1.15rem;
  overflow: visible;
  border-color: rgb(93 70 45 / 9%);
  border-radius: .9rem;
  background: rgb(255 254 251 / 98%);
  box-shadow: 0 .75rem 1.65rem rgb(75 55 37 / 8%);
}

.site-home-portal .site-home-impulse__titlebox {
  min-height: 118px;
  padding: .95rem 1.05rem 2.2rem;
  border-radius: .9rem 0 0 .9rem;
}

.site-home-portal .site-home-impulse__titlebox h2 {
  font-size: 1.34rem !important;
  line-height: 1.05 !important;
}

.site-home-portal .site-home-impulse__item {
  min-height: 118px;
  padding: .9rem .95rem;
}

.site-home-portal .site-home-impulse__item p {
  margin-top: .38rem;
  font-size: .78rem;
  line-height: 1.42;
}

.site-home-portal .site-home-impulse__label {
  color: var(--site-secondary-dark);
  font-size: .83rem;
}

.site-home-portal .site-home-impulse__item--exercise {
  position: relative;
  display: block !important;
  padding-bottom: 3.15rem;
}

.site-home-portal .site-home-impulse__item--exercise > div { width: 100%; }

.site-home-portal .site-home-impulse__item--exercise .site-home-button {
  position: absolute;
  right: .9rem;
  bottom: .85rem;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

.site-home-portal .site-home-impulse::after {
  content: "";
  position: absolute;
  right: -1.45rem;
  bottom: -1.7rem;
  width: 4.8rem;
  height: 5.8rem;
  background: url("/images/site-home/decor/branch.svg") center / contain no-repeat;
  opacity: .72;
  transform: rotate(17deg) scaleX(-1);
  pointer-events: none;
}

/* ---------- Aktuell ---------- */
.site-home-portal .site-home-articles-featured {
  position: relative;
  padding-top: 2.85rem;
}

.site-home-portal .site-home-articles-featured::before {
  content: "";
  position: absolute;
  top: .65rem;
  left: 50%;
  width: 10.7rem;
  height: 1.5rem;
  background: url("/images/site-home/decor/lotus-divider.svg") center / contain no-repeat;
  opacity: .88;
  transform: translateX(-50%);
  pointer-events: none;
}

.site-home-portal .site-home-articles-featured .site-article-include__items {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .82rem !important;
}

.site-home-portal .site-home-articles-featured .site-article-card,
.site-home-portal .site-home-articles-featured .site-article-card:not(:first-child) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.site-home-portal .site-home-articles-featured .site-article-card:first-child {
  flex: 1.72 1 0 !important;
  min-width: 0 !important;
}

/* ---------- Responsive oberer Bereich ---------- */
@media (max-width: 1120px) {
  .site-home-portal .site-home-hero {
    background-position: right -3rem top;
    background-size: auto 104%;
  }

  .site-home-portal .site-home-hero__copy {
    width: 48%;
    padding-left: 2rem;
  }

  .site-home-portal .site-home-hero h1 {
    font-size: clamp(2.25rem, 3vw, 3.1rem) !important;
  }

  /*
     Lesbarkeit wie beim Bergpanorama unten:
     Der helle Hof liegt nur direkt unter dem Fließtext und lässt
     das Hero-Bild außerhalb des Textblocks sichtbar.
  */
  .site-home-portal .site-home-hero__lead {
    position: relative;
    z-index: 4;
    isolation: isolate;
  }

  .site-home-portal .site-home-hero__lead::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -.38rem -.52rem;
    border-radius: .8rem;
    background:
      radial-gradient(
        ellipse at 42% 50%,
        rgb(255 253 249 / 98%) 0%,
        rgb(255 253 249 / 94%) 54%,
        rgb(255 253 249 / 72%) 74%,
        rgb(255 253 249 / 26%) 88%,
        rgb(255 253 249 / 0%) 100%
      );
    pointer-events: none;
  }

  .site-home-portal .site-home-impulse { width: calc(100% - 2rem); }

  .site-home-portal .site-home-articles-featured .site-article-include__items {
    flex-wrap: wrap !important;
  }

  .site-home-portal .site-home-articles-featured .site-article-card:first-child {
    flex: 1 1 100% !important;
  }

  .site-home-portal .site-home-articles-featured .site-article-card:not(:first-child) {
    flex: 1 1 calc(50% - .42rem) !important;
    min-width: 250px !important;
  }
}

/* Mobil: Text und Bild werden bewusst getrennt. Das verhindert den
   bisherigen dunklen Foto-Untergrund direkt hinter Fließtext und Buttons. */
@media (max-width: 860px) {
  .site-home-portal .site-home-hero {
    min-height: 0;
    background: #fffdf9 !important;
  }

  .site-home-portal .site-home-hero::before,
  .site-home-portal .site-home-hero::after { display: none; }

  .site-home-portal .site-home-hero__copy {
    width: 100%;
    min-height: 0;
    padding: 1.8rem 1.25rem 1.6rem;
    background: #fffdf9 !important;
  }

  .site-home-portal .site-home-hero__copy > .site-home-hero__lead { order: 4; }
  .site-home-portal .site-home-hero__copy > .site-home-hero__actions { order: 5; }
  .site-home-portal .site-home-hero__copy > .site-home-hero__trust { order: 6; }

  /* Das gleiche Hero-Bild wird mobil als eigener visueller Block zwischen
     H1/Pinselstrich und Fließtext gezeigt – ohne zweite Bilddatei. */
  .site-home-portal .site-home-hero__copy::after {
    content: "";
    display: block;
    order: 3;
    width: calc(100% + 2.5rem);
    height: min(78vw, 500px);
    margin: .45rem -1.25rem .65rem;
    background:
      url("/images/site-home/decor/hero-art-transparent.webp")
      center / contain no-repeat;
  }

  .site-home-portal .site-home-hero__lead {
    max-width: none;
    margin-top: .45rem;
    font-size: .95rem;
    line-height: 1.55;
  }

  .site-home-portal .site-home-hero__lead::before {
    inset: -.28rem -.38rem;
    border-radius: .68rem;
    background:
      radial-gradient(
        ellipse at 40% 50%,
        rgb(255 253 249 / 98%) 0%,
        rgb(255 253 249 / 94%) 58%,
        rgb(255 253 249 / 63%) 78%,
        rgb(255 253 249 / 0%) 100%
      );
  }

  .site-home-portal .site-home-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .site-home-portal .site-home-hero__actions .site-home-button {
    width: 100%;
    justify-content: center;
  }

  .site-home-portal .site-home-hero__trust {
    margin-top: .7rem;
    color: #68645e;
  }

  .site-home-portal .site-home-impulse {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .site-home-portal .site-home-hero__copy { padding: 1.45rem 1rem 1.35rem; }

  .site-home-portal .site-home-hero h1 {
    max-width: 10.5ch;
    font-size: 2.08rem !important;
  }

  .site-home-portal .site-home-hero__copy::after {
    width: calc(100% + 2rem);
    height: min(82vw, 410px);
    margin-inline: -1rem;
  }

  .site-home-portal .site-home-hero__lead::before {
    inset: -.22rem -.3rem;
  }

  .site-home-portal .site-home-impulse { grid-template-columns: 1fr; }

  .site-home-portal .site-home-impulse__item--exercise { padding-bottom: .95rem; }

  .site-home-portal .site-home-impulse__item--exercise .site-home-button {
    position: static;
    margin-top: .8rem !important;
  }

  .site-home-portal .site-home-articles-featured .site-article-include__items {
    display: block !important;
  }
}


/* =========================================================
   STARTSEITE – MITTLERER BEREICH
   Themenwelten und Newsletter
   ========================================================= */

section.site-home-topics[aria-labelledby="site-home-topics-title"] {
  position: relative;
  width: calc(100% - 4rem);
  max-width: var(--home-wide-width);
  margin-inline: auto;
  padding-top: 2.35rem;
  overflow: visible;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-section__header {
  margin-bottom: .85rem;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-section__eyebrow {
  display: none !important;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] #site-home-topics-title {
  margin: 0 !important;
  color: var(--site-primary) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2.95rem;
  right: -5.3rem;
  width: 11.2rem;
  height: 11.2rem;
  background: url("/images/site-home/decor/mandala-topics.svg") center / contain no-repeat;
  opacity: .82;
  pointer-events: none;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topics__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic {
  display: grid;
  grid-template-rows: 2.65rem auto 1fr;
  align-content: start;
  justify-items: center;
  min-width: 0;
  min-height: 132px;
  padding: .25rem .75rem .6rem;
  color: var(--home-ink);
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid #e8dfd3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  text-decoration: none;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic:first-child {
  border-left: 0 !important;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic:hover {
  transform: translateY(-1px);
  background: transparent !important;
  box-shadow: none !important;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic__icon {
  display: grid;
  width: 100%;
  height: 2.55rem;
  place-items: center;
  padding: 0;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic__icon img {
  width: 2.3rem !important;
  height: 2.3rem !important;
  object-fit: contain;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic h3 {
  min-height: 2.15em;
  margin: .16rem 0 0 !important;
  color: var(--site-primary) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic p {
  max-width: 15ch;
  margin: .38rem auto 0;
  color: #665f57;
  font-size: .67rem !important;
  line-height: 1.31 !important;
}

/* ---------- Newsletter ---------- */
#site-home-newsletter.site-home-newsletter {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 345px;
  align-items: center;
  gap: 1.1rem;
  width: calc(100% - 4rem);
  max-width: var(--home-wide-width);
  min-height: 176px;
  margin: 1.65rem auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  padding: .8rem 1.1rem;
  color: #fff;
  background:
    radial-gradient(circle at 6% 34%, rgb(221 179 75 / 12%) 0, transparent 8.5rem),
    linear-gradient(102deg, #5d355d 0%, #702e51 44%, #85213b 100%);
  box-shadow: 0 .7rem 1.7rem rgb(76 43 45 / 13%);
}

#site-home-newsletter.site-home-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 3% 19%, rgb(222 180 72 / 78%) 0 1px, transparent 1.15px),
    radial-gradient(circle at 4.8% 25%, rgb(222 180 72 / 55%) 0 1px, transparent 1.15px),
    radial-gradient(circle at 7% 16%, rgb(222 180 72 / 38%) 0 .8px, transparent .95px),
    radial-gradient(circle at 9.5% 32%, rgb(222 180 72 / 32%) 0 .9px, transparent 1.05px),
    radial-gradient(circle at 69% 76%, rgb(222 180 72 / 20%) 0 .9px, transparent 1.05px);
  pointer-events: none;
}

#site-home-newsletter.site-home-newsletter::after {
  content: "";
  position: absolute;
  right: -2.55rem;
  top: .55rem;
  width: 10.3rem;
  height: 13.3rem;
  background: url("/images/site-home/decor/branch.svg") center / contain no-repeat;
  opacity: .68;
  transform: rotate(-3deg) scaleX(-1);
  z-index: 1;
  pointer-events: none;
}

#site-home-newsletter .site-home-newsletter__art {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 160px;
  place-items: center;
  align-self: stretch;
  padding-left: .25rem;
}

#site-home-newsletter .site-home-newsletter__art::before {
  content: "";
  position: absolute;
  inset: .3rem;
  background:
    radial-gradient(circle at 23% 24%, rgb(222 180 72 / 55%) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 31% 12%, rgb(222 180 72 / 38%) 0 1px, transparent 1.1px),
    radial-gradient(circle at 43% 20%, rgb(222 180 72 / 32%) 0 .9px, transparent 1px);
  pointer-events: none;
}

#site-home-newsletter .site-home-newsletter__image,
#site-home-newsletter .site-home-newsletter__art > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  max-width: 172px !important;
  height: auto !important;
  margin: auto;
  border: 0 !important;
  border-radius: .45rem !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 .22rem .4rem rgb(0 0 0 / 10%)) !important;
  object-fit: contain;
}

#site-home-newsletter .site-home-newsletter__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#site-home-newsletter .site-home-newsletter__eyebrow {
  margin: 0 0 .16rem;
  color: #edda8a;
  font-size: .61rem !important;
  font-weight: 850;
  letter-spacing: .095em;
  text-transform: uppercase;
}

#site-home-newsletter h2 {
  margin: 0 !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -.015em !important;
}

#site-home-newsletter .site-home-newsletter__subline {
  max-width: 31rem;
  margin: .35rem 0 0;
  color: rgb(255 243 231 / 91%);
  font-size: .7rem !important;
  font-weight: 650;
  line-height: 1.38;
}

#site-home-newsletter .site-home-newsletter__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

#site-home-newsletter .site-home-newsletter__benefits li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .38rem;
  color: #f4ead2;
  font-size: .61rem !important;
  font-weight: 700;
  line-height: 1.15;
}

#site-home-newsletter .site-home-newsletter__benefits li::before {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 1.45rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

#site-home-newsletter .site-home-newsletter__benefits li:nth-child(1)::before {
  background-image: url("/images/site-home/decor/benefit-philosophie.svg");
}
#site-home-newsletter .site-home-newsletter__benefits li:nth-child(2)::before {
  background-image: url("/images/site-home/decor/benefit-quellen.svg");
}
#site-home-newsletter .site-home-newsletter__benefits li:nth-child(3)::before {
  background-image: url("/images/site-home/decor/benefit-praxis.svg");
}

#site-home-newsletter .site-home-newsletter__formbox,
#site-home-newsletter .site-home-newsletter__note,
#site-home-newsletter .site-home-newsletter__form {
  position: relative;
  z-index: 2;
}

#site-home-newsletter .site-home-newsletter__formbox {
  min-width: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#site-home-newsletter .site-home-newsletter__form {
  display: grid;
  gap: .42rem;
}

#site-home-newsletter .site-home-newsletter__form input[type="email"],
#site-home-newsletter .site-home-newsletter__form button { min-height: 2.42rem !important; }

#site-home-newsletter .site-home-newsletter__form input[type="email"] {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: .35rem;
  padding: .56rem .72rem;
  background: #fff;
  color: #1d2024;
  font-size: .7rem;
  box-shadow: none;
}

#site-home-newsletter .site-home-newsletter__form button {
  width: 100%;
  border: 0;
  border-radius: .35rem;
  padding: .55rem .72rem;
  background: #ae681e;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%);
}

#site-home-newsletter .site-home-newsletter__form button:hover,
#site-home-newsletter .site-home-newsletter__form button:focus-visible { background: #9b5d1b; }

#site-home-newsletter .site-home-newsletter__note {
  margin: .38rem 0 0;
  color: rgb(255 236 219 / 83%);
  font-size: .56rem !important;
  line-height: 1.24;
  text-align: center;
}

#site-home-newsletter .site-home-newsletter__note a { color: #fff; }

@media (max-width: 1120px) {
  section.site-home-topics[aria-labelledby="site-home-topics-title"]::after {
    right: -3.2rem;
    width: 9.6rem;
    height: 9.6rem;
  }

  #site-home-newsletter.site-home-newsletter {
    grid-template-columns: 160px minmax(0, 1fr) 300px;
  }

  #site-home-newsletter .site-home-newsletter__image,
  #site-home-newsletter .site-home-newsletter__art > img { max-width: 145px !important; }

  #site-home-newsletter.site-home-newsletter::after {
    right: -1.8rem;
    width: 8.8rem;
    height: 11.5rem;
  }
}

@media (max-width: 860px) {
  section.site-home-topics[aria-labelledby="site-home-topics-title"]::after { display: none; }

  section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topics__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: .8rem;
  }

  section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic:nth-child(4) {
    border-left: 0 !important;
  }

  #site-home-newsletter.site-home-newsletter {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .9rem 1rem;
  }

  #site-home-newsletter .site-home-newsletter__art { min-height: 110px; }
  #site-home-newsletter .site-home-newsletter__benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  #site-home-newsletter.site-home-newsletter::after {
    top: auto;
    bottom: -1.1rem;
    right: -1rem;
    width: 6.4rem;
    height: 8.4rem;
  }
}

@media (max-width: 620px) {
  section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic {
    border-left: 0 !important;
    border-top: 1px solid #e8dfd3 !important;
  }

  section.site-home-topics[aria-labelledby="site-home-topics-title"] .site-home-topic:nth-child(-n+2) {
    border-top: 0 !important;
  }

  #site-home-newsletter .site-home-newsletter__benefits { grid-template-columns: 1fr; }
}


/* =========================================================
   STARTSEITE – UNTERER BEREICH
   Weitere Beiträge und Über Yoga-Welten
   ========================================================= */

.site-home-secondary-links {
  box-sizing: border-box;
  width: calc(100% - 4rem) !important;
  max-width: var(--home-wide-width);
  margin: 1.55rem auto 1.35rem !important;
  padding: .7rem 1rem .8rem !important;
  background: #fff !important;
  border-top: 1px solid #e8dfd3 !important;
  border-bottom: 1px solid #e8dfd3 !important;
}

.site-home-secondary-links__title {
  margin: 0 0 .62rem !important;
  padding: 0 !important;
  color: var(--site-primary) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
}

.site-home-secondary-links :is(ul, .mod-list, .latestnews, .mod-articleslatest) { width: 100%; }
.site-home-secondary-links li { padding: .25rem .9rem !important; }
.site-home-secondary-links li:first-child { padding-left: 0 !important; }
.site-home-secondary-links a { font-size: .72rem !important; line-height: 1.32 !important; }

.site-home-about {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 128px minmax(270px, 1.55fr) repeat(3, minmax(145px, .78fr));
  align-items: center;
  gap: 1.15rem;
  width: calc(100% - 6rem) !important;
  max-width: var(--home-wide-width) !important;
  min-height: 158px;
  margin: 0 auto 1.05rem !important;
  padding: 1rem 1.35rem 1.05rem !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: .15rem;
  background:
    url("/images/site-home/decor/about-panorama.webp") center bottom / 100% 100% no-repeat,
    #f8f7f0 !important;
  box-shadow: inset 0 0 0 1px rgb(128 144 35 / 4%);
}

.site-home-about::before,
.site-home-about::after { content: none !important; display: none !important; }

.site-home-about__portrait {
  position: relative;
  z-index: 2;
  width: 108px !important;
  height: 108px !important;
  padding: .6rem;
  background: rgb(255 255 255 / 83%);
  border-radius: 50%;
  object-fit: contain !important;
  box-shadow:
    0 .45rem 1.05rem rgb(76 59 38 / 8%),
    0 0 0 8px rgb(255 255 255 / 26%);
}

.site-home-about__copy,
.site-home-about__fact {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.site-home-about .site-home-section__eyebrow {
  margin-bottom: .18rem;
  color: var(--site-secondary-dark);
  font-size: .58rem !important;
  letter-spacing: .1em;
}

.site-home-about h2 { font-size: 1.34rem !important; line-height: 1.02 !important; }

.site-home-about__copy p:not(.site-home-section__eyebrow) {
  max-width: 32rem;
  margin-top: .38rem;
  color: #50544d !important;
  font-size: .65rem !important;
  line-height: 1.36 !important;
}

.site-home-about .site-home-textlink {
  margin-top: .4rem;
  color: var(--site-primary);
  font-size: .62rem !important;
}

.site-home-about__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.38rem -.55rem;
  border-radius: .8rem;
  background:
    radial-gradient(
      ellipse at 42% 48%,
      rgb(250 249 244 / 96%) 0%,
      rgb(250 249 244 / 90%) 56%,
      rgb(250 249 244 / 55%) 77%,
      rgb(250 249 244 / 0%) 100%
    );
  pointer-events: none;
}

.site-home-about__fact {
  min-height: 65px;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: .5rem;
  padding-left: .8rem;
  border-left: 1px solid rgb(128 144 35 / 14%);
  overflow: visible;
}

.site-home-about__fact-icon,
.site-home-about__fact img,
.site-home-about__fact svg {
  position: relative;
  z-index: 2;
  width: 25px !important;
  height: 25px !important;
  object-fit: contain;
  overflow: visible;
}

.site-home-about__fact strong {
  color: var(--site-primary) !important;
  font-size: .66rem !important;
}

.site-home-about__fact span {
  margin-top: .18rem;
  color: #50544d !important;
  font-size: .56rem !important;
  line-height: 1.34 !important;
}

.site-home-about__fact > div {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  overflow: visible;
}

.site-home-about__fact > div::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -.28rem;
  right: -.42rem;
  bottom: -.32rem;
  left: -.42rem;
  border-radius: .65rem;
  background:
    radial-gradient(
      ellipse at 45% 50%,
      rgb(250 249 244 / 94%) 0%,
      rgb(250 249 244 / 88%) 55%,
      rgb(250 249 244 / 55%) 76%,
      rgb(250 249 244 / 0%) 100%
    );
  pointer-events: none;
}

/* Beim Praxis-Block liegt das Herz mit im Lesbarkeitsfeld. */
.site-home-about__fact:last-child { gap: .55rem; }
.site-home-about__fact:last-child > div::before {
  left: -2.2rem;
  right: -.42rem;
  top: -.28rem;
  bottom: -.32rem;
  border-radius: .72rem;
  background:
    radial-gradient(
      ellipse at 42% 50%,
      rgb(250 249 244 / 96%) 0%,
      rgb(250 249 244 / 91%) 54%,
      rgb(250 249 244 / 61%) 76%,
      rgb(250 249 244 / 0%) 100%
    );
}

.site-home-about__fact:last-child .site-home-about__fact-icon,
.site-home-about__fact:last-child > img {
  width: 27px !important;
  height: 27px !important;
  margin-left: 1px;
}

@media (max-width: 1080px) {
  .site-home-about {
    width: calc(100% - 2rem) !important;
    grid-template-columns: 105px minmax(230px, 1.4fr) repeat(3, minmax(120px, .7fr));
    gap: .8rem;
    padding-inline: 1rem !important;
    background-size: cover;
    background-position: center bottom;
  }

  .site-home-about__portrait { width: 92px !important; height: 92px !important; }
}

@media (max-width: 820px) {
  .site-home-secondary-links {
    width: calc(100% - 2rem) !important;
    padding-inline: .75rem !important;
  }

  .site-home-about {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: .75rem 1rem;
    min-height: 0;
    padding: 1rem !important;
  }

  .site-home-about__portrait { width: 78px !important; height: 78px !important; }

  .site-home-about__fact {
    grid-column: 1 / -1;
    min-height: auto;
    border-top: 1px solid rgb(128 144 35 / 14%);
    border-left: 0;
    padding: .7rem 0 0;
  }

  .site-home-about__fact > div::before,
  .site-home-about__fact:last-child > div::before {
    top: -.22rem;
    right: -.32rem;
    bottom: -.25rem;
    left: -.32rem;
    border-radius: .55rem;
    background:
      linear-gradient(90deg, rgb(250 249 244 / 92%), rgb(250 249 244 / 72%));
  }

  .site-home-about__copy::before { inset: -.28rem -.4rem; }
}

@media (max-width: 620px) {
  .site-home-secondary-links { width: calc(100% - 1rem) !important; }
  .site-home-secondary-links :is(ul, .mod-list, .latestnews, .mod-articleslatest) {
    grid-template-columns: 1fr !important;
  }
  .site-home-secondary-links li,
  .site-home-secondary-links li:first-child {
    padding: .45rem 0 !important;
    border-left: 0 !important;
  }
  .site-home-about { width: calc(100% - 1rem) !important; }
}

