/* ============================================================
   pages.css — Shared Styles für alle Unterseiten
   Heidi Schimmel Hypnose
   ============================================================ */

/* ══════════════════════════════
   PAGE HERO
══════════════════════════════ */
.page-hero {
  padding-top:   var(--nav-h);
  padding-bottom: var(--space-2xl);
  border-bottom: 2px solid var(--color-orange);
  position:      relative;
  overflow:      hidden;
}

.page-hero__inner {
  padding-top: var(--space-2xl);
  max-width:   700px;
}

.page-hero__label {
  margin-bottom: var(--space-md);
}

.page-hero__headline {
  font-family:    var(--font-head);
  font-size:      clamp(2.5rem, 5vw, 4.5rem);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-sm);
}

.page-hero__sub {
  font-family:    var(--font-head);
  font-size:      var(--text-sm);
  font-weight:    300;
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Deko-Linie rechts */
.page-hero__geo {
  position:     absolute;
  right:        var(--space-lg);
  top:          50%;
  transform:    translateY(-50%);
  width:        28vw;
  height:       28vw;
  max-width:    380px;
  max-height:   380px;
  border:       1px solid var(--color-accent-light);
  border-radius: 50%;
  pointer-events: none;
  opacity:      0.5;
}

/* ══════════════════════════════
   PAGE CONTENT
══════════════════════════════ */
.page-section {
  padding:       var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-line);
}

.page-section:last-of-type {
  border-bottom: none;
}

.page-section__label {
  margin-bottom: var(--space-md);
}

.page-section__headline {
  font-family:    var(--font-head);
  font-size:      var(--text-2xl);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-md);
}

.page-section__body {
  color:       var(--color-text-muted);
  font-style:  italic;
  line-height: 1.9;
  max-width:   680px;
}

/* ══════════════════════════════
   GRID — 2 cols / 3 cols
══════════════════════════════ */
.page-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-2xl);
  align-items: center;
}

.page-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ══════════════════════════════
   CARD — Qualifikation / Format
══════════════════════════════ */
.page-card {
  padding:       var(--space-xl) var(--space-lg);
  border-right:  1px solid var(--color-line);
  position:      relative;
  overflow:      hidden;
}

.page-card:last-child {
  border-right: none;
}

.page-card::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--color-accent-pale);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform 0.35s var(--ease);
  z-index:          0;
}

.page-card:hover::before {
  transform: scaleY(1);
}

.page-card > * {
  position: relative;
  z-index:  1;
}

.page-card__nr {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-lg);
  display:        block;
}

.page-card__title {
  font-family:    var(--font-head);
  font-size:      var(--text-lg);
  font-weight:    700;
  line-height:    1.2;
  margin-bottom:  var(--space-sm);
  letter-spacing: -0.01em;
}

.page-card__body {
  color:       var(--color-text-muted);
  font-size:   var(--text-sm);
  line-height: 1.85;
}

/* ══════════════════════════════
   CTA BLOCK (shared)
══════════════════════════════ */
.page-cta {
  background: var(--color-bg-dark);
  padding:    var(--space-2xl) 0;
  border-top: 3px solid var(--color-orange);
}

.page-cta__inner {
  display:     grid;
  grid-template-columns: 1fr auto;
  gap:         var(--space-2xl);
  align-items: center;
}

.page-cta__headline {
  font-family:   var(--font-head);
  font-size:     var(--text-2xl);
  font-weight:   700;
  color:         var(--color-text-inv);
  line-height:   1.15;
  margin-bottom: var(--space-sm);
}

.page-cta__body {
  color:       #777;
  font-style:  italic;
  line-height: 1.85;
  max-width:   500px;
}

/* ══════════════════════════════
   ACCORDION (FAQ / Hypnose)
══════════════════════════════ */
.accordion {
  border-top: 1px solid var(--color-line);
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__trigger {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-md) 0;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  gap:             var(--space-md);
  transition:      color var(--duration) var(--ease);
}

.accordion__trigger:hover {
  color: var(--color-accent);
}

.accordion__trigger-text {
  font-family:    var(--font-head);
  font-size:      var(--text-md);
  font-weight:    600;
  letter-spacing: -0.01em;
  line-height:    1.3;
}

.accordion__icon {
  flex-shrink:    0;
  width:          24px;
  height:         24px;
  border:         1px solid var(--color-line);
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background var(--duration), border-color var(--duration), transform 0.3s;
  font-size:      1.1rem;
  line-height:    1;
  color:          var(--color-text-muted);
}

.accordion__item.open .accordion__icon {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        var(--color-text-inv);
  transform:    rotate(45deg);
}

.accordion__body {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height 0.4s var(--ease-out);
}

.accordion__body-inner {
  padding:     0 0 var(--space-lg) 0;
  color:       var(--color-text-muted);
  font-style:  italic;
  line-height: 1.85;
  max-width:   680px;
}

/* Accordion Kategorie-Label */
.accordion__cat {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
  padding:        var(--space-lg) 0 var(--space-sm);
  display:        block;
}

/* ══════════════════════════════
   NEWS LIST
══════════════════════════════ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     0;
}

.news-card {
  padding:       var(--space-xl) var(--space-lg);
  border-right:  1px solid var(--color-line);
  display:       flex;
  flex-direction: column;
  position:      relative;
  overflow:      hidden;
  cursor:        pointer;
}

.news-card:last-child {
  border-right: none;
}

.news-card::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--color-accent-pale);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform 0.35s var(--ease);
  z-index:          0;
}

.news-card:hover::before {
  transform: scaleY(1);
}

.news-card > * {
  position: relative;
  z-index:  1;
}

.news-card__date {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-md);
}

.news-card__title {
  font-family:    var(--font-head);
  font-size:      var(--text-xl);
  font-weight:    700;
  line-height:    1.2;
  margin-bottom:  var(--space-sm);
  letter-spacing: -0.01em;
}

.news-card__excerpt {
  color:         var(--color-text-muted);
  font-size:     var(--text-sm);
  line-height:   1.85;
  flex:          1;
  margin-bottom: var(--space-lg);
  font-style:    italic;
}

.news-card__link {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-accent);
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  transition:     gap var(--duration);
}

.news-card:hover .news-card__link {
  gap: 1rem;
}

.news-card__link::after {
  content: "→";
}

/* Single article */
.article {
  max-width: 720px;
  margin:    0 auto;
  padding:   var(--space-2xl) 0;
}

.article__date {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  margin-bottom:  var(--space-md);
}

.article__headline {
  font-family:    var(--font-head);
  font-size:      clamp(2rem, 4vw, 3.5rem);
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-lg);
}

.article__body {
  line-height: 1.9;
  color:       var(--color-text-muted);
  font-style:  italic;
}

.article__body p + p {
  margin-top: var(--space-md);
}

.article__back {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-accent);
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  margin-bottom:  var(--space-lg);
  padding-top:    var(--space-lg);
  border-top:     1px solid var(--color-line);
  width:          100%;
  transition:     gap var(--duration);
}

.article__back:hover {
  gap: 1rem;
}

/* ══════════════════════════════
   LEGAL PAGES
══════════════════════════════ */
.legal-content {
  max-width:   760px;
  margin:      0 auto;
  padding:     var(--space-2xl) 0;
}

.legal-content h2 {
  font-family:    var(--font-head);
  font-size:      var(--text-lg);
  font-weight:    700;
  letter-spacing: -0.01em;
  margin-top:     var(--space-xl);
  margin-bottom:  var(--space-sm);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color:       var(--color-text-muted);
  line-height: 1.85;
  font-style:  italic;
  margin-bottom: var(--space-sm);
}

.legal-content strong {
  color:       var(--color-text);
  font-style:  normal;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .page-grid--2  { grid-template-columns: 1fr; }
  .page-cta__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 768px) {
  .page-grid--3 { grid-template-columns: 1fr; }
  .page-card    { border-right: none; border-bottom: 1px solid var(--color-line); }
  .page-card:last-child { border-bottom: none; }
  .news-grid    { grid-template-columns: 1fr; }
  .news-card    { border-right: none; border-bottom: 1px solid var(--color-line); }
  .news-card:last-child { border-bottom: none; }
  .page-hero__geo { display: none; }
}

/* ══════════════════════════════
   SECTION VARIANTEN
   Für Abwechslung auf Unterseiten.
   Nutzung: <section class="page-section page-section--dark">
            <section class="page-section page-section--accent">
            <section class="page-section page-section--mid">
══════════════════════════════ */

/* Dunkel: fast schwarz, helle Schrift */
.page-section--dark {
  background:    var(--color-bg-dark);
  border-bottom: 1px solid var(--color-line-dark);
}

.page-section--dark .page-section__headline,
.page-section--dark .page-card__title {
  color: var(--color-text-inv);
}

.page-section--dark .page-section__body,
.page-section--dark .page-card__body {
  color: #888;
}

.page-section--dark .section-label,
.page-section--dark .page-card__nr {
  color: var(--color-accent-light);
}

.page-section--dark .page-card {
  border-right-color: var(--color-line-dark);
}

.page-section--dark .page-card::before {
  background: #2a2a2a;
}

/* Akzent: Bordeaux, helle Schrift */
.page-section--accent {
  background:    var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}

.page-section--accent .page-section__headline,
.page-section--accent .page-card__title {
  color: var(--color-text-inv);
}

.page-section--accent .page-section__body,
.page-section--accent .page-card__body {
  color: rgba(255,255,255,0.75);
}

.page-section--accent .section-label,
.page-section--accent .page-card__nr {
  color: var(--color-accent-light);
}

.page-section--accent .page-card {
  border-right-color: rgba(255,255,255,0.2);
}

.page-section--accent .page-card::before {
  background: rgba(0,0,0,0.1);
}

.page-section--accent .accordion__trigger-text {
  color: var(--color-text-inv);
}

.page-section--accent .accordion__icon {
  border-color: rgba(255,255,255,0.4);
  color: var(--color-text-inv);
}

.page-section--accent .accordion__body-inner {
  color: rgba(255,255,255,0.8);
}

/* Mittel: leicht getöntes Leinen */
.page-section--mid {
  background:    var(--color-accent-pale);
  border-bottom: 1px solid var(--color-line);
}

/* Page-hero Varianten */
.page-hero--dark {
  background: var(--color-bg-dark);
}

.page-hero--dark .page-hero__headline {
  color: var(--color-text-inv);
}

.page-hero--dark .page-hero__sub {
  color: #666;
}

.page-hero--dark .section-label {
  color: var(--color-accent-light);
}

.page-hero--dark .page-hero__geo {
  border-color: var(--color-accent);
  opacity: 0.3;
}

.page-hero--accent {
  background: var(--color-accent);
}

.page-hero--accent .page-hero__headline {
  color: var(--color-text-inv);
}

.page-hero--accent .page-hero__sub {
  color: rgba(255,255,255,0.7);
}

.page-hero--accent .section-label {
  color: rgba(255,255,255,0.6);
  letter-spacing: var(--tracking-widest);
}

.page-hero--accent .page-hero__geo {
  border-color: rgba(255,255,255,0.2);
}

/* ══════════════════════════════
   KONTRAST-FIXES DARK SECTIONS
   Bordeaux auf schwarz = unlesbar.
   Auf hellen Ton wechseln.
══════════════════════════════ */

.page-section--dark .section-label {
  color: var(--color-accent-light);
}

.page-section--dark .accordion__trigger-text {
  color: var(--color-text-inv);
}

.page-section--dark .accordion__trigger:hover .accordion__trigger-text {
  color: var(--color-accent-light);
}

.page-section--dark .accordion__icon {
  border-color: var(--color-line-dark);
  color:        var(--color-text-inv);
}

.page-section--dark .accordion__item.open .accordion__icon {
  background:   var(--color-accent-light);
  border-color: var(--color-accent-light);
  color:        var(--color-bg-dark);
}

.page-section--dark .accordion__body-inner {
  color: #999;
}

.page-section--dark .accordion {
  border-top-color: var(--color-line-dark);
}

.page-section--dark .accordion__item {
  border-bottom-color: var(--color-line-dark);
}

.page-section--dark .nr {
  color: var(--color-accent-light);
}

/* ══════════════════════════════
   CARD MIT BILD
══════════════════════════════ */
.page-card--img {
  padding-top: 0;
}

.page-card__img-wrap {
  width:         100%;
  aspect-ratio:  4/3;
  overflow:      hidden;
  margin-bottom: var(--space-lg);
}

.page-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s var(--ease);
}

.page-card--img:hover .page-card__img {
  transform: scale(1.04);
}

/* ══════════════════════════════
   SECTION MIT BILD (Frauensalon)
══════════════════════════════ */
.page-section__img-wrap {
  width:    100%;
  overflow: hidden;
}

.page-section__img {
  width:      100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display:    block;
}


/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer {
  background:   var(--color-bg-dark);
  border-top:   1px solid var(--color-line-dark);
  padding:      var(--space-xl) 0 var(--space-lg);
}

.footer__inner {
  display:     grid;
  grid-template-columns: 1fr auto;
  gap:         var(--space-xl);
  align-items: start;
  margin-bottom:  var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom:  1px solid var(--color-line-dark);
}

.footer__brand {
  font-family:    var(--font-head);
  font-size:      var(--text-lg);
  font-weight:    700;
  color:          var(--color-text-inv);
  letter-spacing: var(--tracking-wide);
  margin-bottom:  0.4rem;
}

.footer__tagline {
  font-size:  var(--text-sm);
  color:      #555;
  font-style: italic;
}

.footer__nav {
  display:   flex;
  gap:       var(--space-md);
  flex-wrap: wrap;
}

.footer__nav a {
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          #555;
  transition:     color var(--duration) var(--ease);
}

.footer__nav a:hover {
  color: var(--color-text-inv);
}

.footer__nav a.accent {
  color: var(--color-accent);
}

.footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-xs);
  color:     var(--color-text-dark);
}

.footer__legal {
  display: flex;
  gap:     var(--space-md);
}

.footer__legal a {
  font-size:  var(--text-xs);
  color:      var(--color-text-dark);
  transition: color var(--duration) var(--ease);
}

.footer__legal a:hover {
  color: var(--color-text-inv);
}
/* ══════════════════════════════
   PRICING CARDS
══════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.pricing-card {
  padding:        var(--space-xl) var(--space-lg);
  border-right:   1px solid var(--color-line);
  border-bottom:  1px solid var(--color-line);
  display:        flex;
  flex-direction: column;
  position:       relative;
}

.pricing-card:last-child {
  border-right: none;
}

.pricing-card--featured {
  background: var(--color-accent);
}

.pricing-card__nr {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-md);
  display:        block;
}

.pricing-card--featured .pricing-card__nr {
  color: rgba(255,255,255,.5);
}

.pricing-card__badge {
  position:       absolute;
  top:            var(--space-md);
  right:          var(--space-md);
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background:     var(--color-orange);
  color:          var(--color-text-inv);
  padding:        .2rem .6rem;
}

.pricing-card__title {
  font-family:    var(--font-head);
  font-size:      var(--text-xl);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  .25rem;
}

.pricing-card--featured .pricing-card__title {
  color: var(--color-text-inv);
}

.pricing-card__sub {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-lg);
}

.pricing-card--featured .pricing-card__sub {
  color: rgba(255,255,255,.6);
}

.pricing-card__preis {
  font-family:    var(--font-head);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    700;
  letter-spacing: var(--tracking-tight);
  line-height:    1;
  color:          var(--color-accent);
  margin-bottom:  var(--space-lg);
}

.pricing-card--featured .pricing-card__preis {
  color: var(--color-text-inv);
}

.pricing-card__details {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  font-style:    italic;
  line-height:   1.8;
  flex:          1;
  margin-bottom: var(--space-lg);
}

.pricing-card--featured .pricing-card__details {
  color: rgba(255,255,255,.75);
}

.pricing-card .btn--ghost {
  border-color: var(--color-text);
  color:        var(--color-text);
}

.pricing-card--featured .btn--ghost {
  border-color: var(--color-text-inv);
  color:        var(--color-text-inv);
}

.pricing-card--featured .btn--ghost:hover {
  background: var(--color-text-inv);
  color:      var(--color-accent);
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { border-right: none; }
  .pricing-card:last-child { border-bottom: none; }
}