/*
 * Paravital – Horoskope
 * Eigene Bereichs-CSS. Änderungen hier dürfen keine anderen Seiten beeinflussen.
 * v1.221: Horoskop-Hauptseite / Hero responsive, Originalmotiv vollständig sichtbar.
 */

/* Hauptseite: bestehende Aufmachung behalten, Bild aber nicht mehr beschneiden. */
.v154-horoscope-overview .v154-horoscope-hero {
  grid-template-columns: minmax(0, .90fr) minmax(460px, 1.10fr) !important;
  min-height: 390px !important;
  overflow: hidden !important;
}

.v154-horoscope-overview .v154-horoscope-hero-copy {
  align-self: center !important;
}

.v154-horoscope-overview .v154-horoscope-hero-visual {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 390px !important;
  margin: 0 !important;
  padding: clamp(14px, 1.7vw, 28px) !important;
  overflow: hidden !important;
  background: #23162c !important;
}

.v154-horoscope-overview .v154-horoscope-hero-visual::after {
  pointer-events: none !important;
  background: linear-gradient(90deg, #23162c 0%, rgba(35,22,44,.18) 20%, rgba(35,22,44,0) 52%) !important;
}

.v154-horoscope-overview .v154-horoscope-hero-visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 430px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
}

/* Tablet: Text und Bild untereinander. Das Bild behält immer sein Original-Seitenverhältnis. */
@media (max-width: 1100px) {
  .v154-horoscope-overview .v154-horoscope-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-visual {
    min-height: 0 !important;
    padding: 0 22px 24px !important;
    background: #23162c !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-visual::after {
    background: linear-gradient(180deg, #23162c 0%, rgba(35,22,44,.08) 18%, rgba(35,22,44,0) 42%) !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-visual img {
    width: min(100%, 920px) !important;
    max-height: none !important;
  }
}

/* Handy: keine feste Bildhöhe, kein cover, kein seitliches Verschieben. */
@media (max-width: 760px) {
  .v154-horoscope-overview {
    width: min(100% - 20px, 1500px) !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-copy {
    padding: 28px 20px 24px !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero h1 {
    font-size: clamp(34px, 10vw, 42px) !important;
    overflow-wrap: anywhere !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-visual {
    padding: 0 14px 16px !important;
  }

  .v154-horoscope-overview .v154-horoscope-hero-visual img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 14px !important;
  }

  .v154-horoscope-overview .horoscope-trust {
    gap: 7px !important;
  }

  .v154-horoscope-overview .horoscope-trust span {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* v1.222 – vollständiges Geburtsdatum auf allen westlichen Horoskop-Detailseiten.
 * Drei getrennte Felder vermeiden mobile Date-Picker, die das Geburtsjahr verstecken.
 * Nur innerhalb der Horoskop-Seite; keine globalen Form-Regeln. */
.v154-horoscope-detail .pv-horoscope-birthdate {
  grid-column: 1 / -1;
}

.v154-horoscope-detail .pv-birthdate-fields {
  display: grid;
  grid-template-columns: minmax(86px,.8fr) minmax(100px,1fr) minmax(112px,1.05fr);
  gap: 10px;
  margin-top: 8px;
}

.v154-horoscope-detail .pv-birthdate-fields > label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.v154-horoscope-detail .pv-birthdate-fields > label > small {
  margin: 0;
  font-weight: 700;
  color: #6f5f69;
}

.v154-horoscope-detail .pv-birthdate-fields select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .v154-horoscope-detail .pv-birthdate-fields {
    grid-template-columns: minmax(72px,.8fr) minmax(88px,.95fr) minmax(100px,1.1fr);
    gap: 8px;
  }

  .v154-horoscope-detail .pv-birthdate-fields select {
    padding-left: 10px;
    padding-right: 8px;
    font-size: 15px;
  }
}

.v154-horoscope-detail .pv-horoscope-birthdate > span {
  display: block;
  font-weight: 700;
  color: #5e4c62;
}

.v154-horoscope-detail .pv-horoscope-birthdate > small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #7a6d72;
}

/* v1.223 – westliche Horoskop-Detailseiten mobil stabilisieren.
 * Gilt für Tages-, Wochen-, Monats-, Jahres- und Geburtstagshoroskop.
 * Keine Inhalts- oder Berechnungsänderung; nur responsive Lesbarkeit innerhalb dieses Bereichs. */
.v154-horoscope-detail,
.v154-horoscope-detail * {
  box-sizing: border-box;
}

.v154-horoscope-detail {
  overflow-x: clip;
}

.v154-horoscope-detail .v154-detail-hero,
.v154-horoscope-detail .v154-horoscope-form-shell,
.v154-horoscope-detail .v154-horoscope-form,
.v154-horoscope-detail .v154-how-personal,
.v154-horoscope-detail .v154-horoscope-result,
.v154-horoscope-detail .v156-result-graphic,
.v154-horoscope-detail .v154-horoscope-timing,
.v154-horoscope-detail .v154-life,
.v154-horoscope-detail .v154-guidance,
.v154-horoscope-detail .v154-highlights,
.v154-horoscope-detail .v154-facts {
  min-width: 0 !important;
  max-width: 100% !important;
}

.v154-horoscope-detail h1,
.v154-horoscope-detail h2,
.v154-horoscope-detail h3,
.v154-horoscope-detail p,
.v154-horoscope-detail span,
.v154-horoscope-detail strong,
.v154-horoscope-detail small,
.v154-horoscope-detail label,
.v154-horoscope-detail summary {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 900px) {
  .v154-horoscope-detail .v154-horoscope-form-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .v154-horoscope-detail .v154-horoscope-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v154-horoscope-detail .v154-how-personal {
    width: 100% !important;
  }

  .v154-horoscope-detail .v156-compass-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .v154-horoscope-detail .v154-highlight-list article {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .v154-horoscope-detail {
    width: calc(100% - 16px) !important;
    padding-top: 18px !important;
    padding-bottom: 38px !important;
  }

  .v154-horoscope-detail .horoscope-breadcrumb {
    margin: 0 4px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .v154-horoscope-detail .v156-detail-hero {
    min-height: 340px !important;
    border-radius: 20px !important;
    background-position: center center !important;
  }

  .v154-horoscope-detail .v156-detail-hero::before {
    background: linear-gradient(180deg,
      rgba(35,20,44,.58) 0%,
      rgba(39,22,48,.72) 38%,
      rgba(34,20,43,.96) 100%) !important;
  }

  .v154-horoscope-detail .v156-detail-hero .v154-detail-copy {
    width: 100% !important;
    min-height: 340px !important;
    padding: 24px 20px !important;
    justify-content: flex-end !important;
  }

  .v154-horoscope-detail .v156-detail-hero .v154-detail-copy h1 {
    max-width: 100% !important;
    margin: 4px 0 10px !important;
    font-size: clamp(31px, 9.4vw, 40px) !important;
    line-height: 1.04 !important;
  }

  .v154-horoscope-detail .v156-detail-hero .v154-detail-copy > p:last-of-type {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .v154-horoscope-detail .horoscope-price-badge {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .v154-horoscope-detail .v154-horoscope-form-shell {
    gap: 12px !important;
    margin-bottom: 24px !important;
  }

  .v154-horoscope-detail .v154-horoscope-form {
    gap: 14px !important;
    padding: 17px !important;
    border-radius: 18px !important;
  }

  .v154-horoscope-detail .v154-horoscope-form .horoscope-personal-note {
    padding: 15px !important;
  }

  .v154-horoscope-detail .v154-horoscope-form input,
  .v154-horoscope-detail .v154-horoscope-form select,
  .v154-horoscope-detail .v154-horoscope-form textarea,
  .v154-horoscope-detail .v154-horoscope-form button {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v154-horoscope-detail .v154-localtime-note {
    gap: 10px !important;
    padding: 12px 10px !important;
  }

  .v154-horoscope-detail .horoscope-submit {
    width: 100% !important;
    justify-content: center !important;
  }

  .v154-horoscope-detail .v154-how-personal {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  .v154-horoscope-detail .v154-how-personal li,
  .v154-horoscope-detail .v154-how-personal li:first-child {
    padding: 11px 0 !important;
  }

  .v154-horoscope-detail .v154-result-head {
    min-height: 0 !important;
    border-radius: 20px !important;
    background-position: center !important;
  }

  .v154-horoscope-detail .v154-result-head::after {
    background: linear-gradient(180deg,
      rgba(46,29,55,.70) 0%,
      rgba(55,35,66,.90) 45%,
      rgba(46,29,55,.98) 100%) !important;
  }

  .v154-horoscope-detail .v154-result-head-inner {
    min-height: 0 !important;
    padding: 28px 18px !important;
  }

  .v154-horoscope-detail .v154-result-head h2 {
    font-size: clamp(29px, 8.6vw, 39px) !important;
    line-height: 1.08 !important;
  }

  .v154-horoscope-detail .horoscope-result-meta {
    gap: 6px !important;
  }

  .v154-horoscope-detail .horoscope-result-meta span {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .v154-horoscope-detail .v154-opening {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .v154-horoscope-detail .v156-result-graphic {
    margin: 22px 0 28px !important;
    padding: 22px 14px !important;
    border-radius: 20px !important;
  }

  .v154-horoscope-detail .v156-compass-wheel {
    width: min(210px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .v154-horoscope-detail .v156-graphic-moon,
  .v154-horoscope-detail .v156-graphic-phases li,
  .v154-horoscope-detail .v156-graphic-areas > div {
    min-width: 0 !important;
  }

  .v154-horoscope-detail .v156-graphic-phases,
  .v154-horoscope-detail .v156-graphic-areas {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v154-horoscope-detail .v154-horoscope-timing {
    margin-top: 24px !important;
    padding: 21px 14px !important;
  }

  .v154-horoscope-detail .v154-timeline {
    margin-top: 18px !important;
  }

  .v154-horoscope-detail .v154-timeline li {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding-bottom: 22px !important;
  }

  .v154-horoscope-detail .v154-timeline::before {
    left: 14px !important;
  }

  .v154-horoscope-detail .v154-timeline-dot {
    width: 30px !important;
    height: 30px !important;
  }

  .v154-horoscope-detail .v154-timeline-copy h3,
  .v154-horoscope-detail .v154-life-list h3 {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  .v154-horoscope-detail .v154-timeline-copy p,
  .v154-horoscope-detail .v154-life-list p {
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .v154-horoscope-detail .v154-timeline-copy .horoscope-timing-help {
    padding: 9px 10px !important;
  }

  .v154-horoscope-detail .v154-life {
    margin-top: 28px !important;
    padding: 0 !important;
  }

  .v154-horoscope-detail .v154-life-list article,
  .v154-horoscope-detail .v154-life-list article.is-focus {
    padding: 20px 12px 21px 22px !important;
  }

  .v154-horoscope-detail .v154-life-list article::before {
    left: 3px !important;
  }

  .v154-horoscope-detail .v154-life-list article.is-focus::before {
    left: 8px !important;
  }

  .v154-horoscope-detail .v154-life-heading {
    flex-wrap: wrap !important;
  }

  .v154-horoscope-detail .v154-guidance {
    gap: 11px !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .v154-horoscope-detail .v154-guidance > span {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .v154-horoscope-detail .v154-guidance strong {
    font-size: 18px !important;
  }

  .v154-horoscope-detail .v154-highlights {
    margin-top: 30px !important;
    padding: 22px 12px !important;
  }

  .v154-horoscope-detail .v154-highlight-list article {
    gap: 6px !important;
    padding: 14px 0 !important;
  }

  .v154-horoscope-detail .v154-highlight-list h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .v154-horoscope-detail .v154-facts {
    border-radius: 16px !important;
  }

  .v154-horoscope-detail .v154-facts summary {
    padding: 15px 13px !important;
    line-height: 1.45 !important;
  }

  .v154-horoscope-detail .horoscope-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .v154-horoscope-detail .horoscope-position-grid article {
    min-width: 0 !important;
    padding: 10px !important;
  }

  .v154-horoscope-detail .horoscope-event-list {
    margin: 0 12px 16px !important;
  }

  .v154-horoscope-detail .horoscope-event-list li {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 9px 0 !important;
  }

  .v154-horoscope-detail .horoscope-birth-fact {
    margin: 16px 12px !important;
    padding: 13px !important;
  }

  .v154-horoscope-detail .horoscope-data-source {
    margin: 15px 12px 18px !important;
  }

  .v154-horoscope-detail .horoscope-disclaimer {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* Sehr schmale Geräte und starke Browser-Vergrößerung: nichts darf horizontal quetschen. */
@media (max-width: 430px) {
  .v154-horoscope-detail {
    width: calc(100% - 12px) !important;
  }

  .v154-horoscope-detail .v156-detail-hero {
    min-height: 320px !important;
  }

  .v154-horoscope-detail .v156-detail-hero .v154-detail-copy {
    min-height: 320px !important;
    padding: 20px 16px !important;
  }

  .v154-horoscope-detail .v156-detail-hero .v154-detail-copy h1 {
    font-size: clamp(28px, 9.8vw, 35px) !important;
  }

  .v154-horoscope-detail .v154-horoscope-form {
    padding: 14px !important;
  }

  .v154-horoscope-detail .pv-birthdate-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .v154-horoscope-detail .pv-birthdate-fields > label:last-child {
    grid-column: 1 / -1 !important;
  }

  .v154-horoscope-detail .horoscope-position-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v154-horoscope-detail .v154-guidance {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }
}