/* ===================== */
/*  MOBILE: BASISREGELN  */
/* ===================== */
@media (max-width: 600px) {
  body, p, li {
    font-size: 1rem;
    line-height: 1.7;
  }
  h1, .hero-main-title {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
  h2, .section-title {
    font-size: 1.2rem;
    line-height: 1.2;
  }
  h3, h4 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  .container, .content-text, .about-content {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  section, .section, .content-grid {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .hero-content, .about-content, .content-text {
    margin-bottom: 1.2rem;
  }
  .service-card, .price-card, .info-box, .about-value-item {
    margin-bottom: 1.2rem;
    padding: 1.1rem 0.8rem;
  }

  /* Bilder kleiner & runder */
  img, .hero-img, .contact-img, .section-img {
    max-width: 90vw;
    height: auto;
    border-radius: 22px !important;
    box-shadow: none !important;
    margin: 0.7rem auto 1.2rem auto;
    display: block;
  }
  .header-portrait, .about-content img, .about-value-item img {
    width: 100px !important;
    height: auto !important;
    border-radius: 22px !important;
  }

  /* Buttons Standard: Blau auf weißem Hintergrund */
  .btn-primary, .btn-more, .btn-large {
    background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%);
    color: #fff;
    font-weight: 500;
    border: none;
    box-shadow: none;
    font-size: 1rem;
    padding: 0.7em 1.2em;
    border-radius: 22px;
    letter-spacing: 0.01em;
    transition: background 0.2s;
  }
  .btn-primary:hover, .btn-more:hover {
    background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%);
    color: #fff;
  }

  /* Buttons auf blauem Hintergrund (z.B. Seelengespräch-Box) werden beige/weiß */
  .service-card.featured .btn-primary,
  .price-card.featured .btn-primary,
  .info-box.blue-accent .btn-primary,
  .service-card.featured .btn-more,
  .price-card.featured .btn-more {
    background: #f9f8f6;
    color: #3a5a6b;
    border: 1px solid #e3e7ea;
  }
  .service-card.featured .btn-primary:hover,
  .price-card.featured .btn-primary:hover,
  .info-box.blue-accent .btn-primary:hover,
  .service-card.featured .btn-more:hover,
  .price-card.featured .btn-more:hover {
    background: #fff;
    color: #3a5a6b;
  }

  /* Buttons auf beigem Hintergrund (z.B. grüne Info-Box) werden blau */
  .info-box.green-accent .btn-primary,
  .info-box.green-accent .btn-more {
    background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%);
    color: #fff;
    border: none;
  }
  .info-box.green-accent .btn-primary:hover,
  .info-box.green-accent .btn-more:hover {
    background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%);
    color: #fff;
  }

  /* Buttons in Hero-Bereich (Service-Preview) auf weißem Hintergrund: blau */
  .services-preview .btn-more {
    background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%);
    color: #fff;
    border: none;
  }
  .services-preview .btn-more:hover {
    background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%);
    color: #fff;
  }

  /* Cards & Boxen lockerer, sanftere Farben (jetzt beige und blau, kein rosa) */
  .service-card, .price-card, .info-box, .about-value-item {
    background: #f9f8f6;
    border-radius: 22px;
    box-shadow: none;
    border: 1px solid #e3e7ea;
  }
  .service-card.featured, .price-card.featured {
    background: #eaf3fa;
    border: 1px solid #c7d8e6;
  }
  .info-box.blue-accent {
    background: #eaf3fa;
    border: 1px solid #c7d8e6;
  }
  .info-box.green-accent {
    background: #f9f8f6;
    border: 1px solid #e3e7ea;
  }

  /* Badge (Beliebt, Warteliste, etc.) weiter nach oben, nicht mehr Überschrift überdecken */
  .popular-badge, .waitlist-badge {
    position: absolute;
    top: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0.95rem;
    padding: 0.3em 1em;
    border-radius: 16px;
    background: #eaf3fa;
    color: #3a5a6b;
    box-shadow: none;
    border: 1px solid #c7d8e6;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .price-card, .service-card {
    position: relative;
  }
  /* Abstand unter Badge zur Überschrift */
  .price-card .popular-badge, .price-card .waitlist-badge {
    margin-bottom: 0.7em;
  }

  /* Listenpunkte zarter */
  .feature-list li {
    font-size: 0.98rem;
    padding: 0.3em 0;
  }

  /* Footer & Navbar luftiger */
  .footer, .navbar {
    padding: 0.7rem 0.5rem;
    font-size: 0.95rem;
    background: #f9f8f6;
    color: #3a5a6b;
    box-shadow: none;
  }
  .footer-brand, .footer-social {
    margin-bottom: 0.7rem;
  }
  .footer {
    background: #deccae !important;
  }
  .footer-social {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.2rem !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Sonstiges */
  .title-decoration, .title-decoration.blue, .title-decoration.beige {
    height: 2px;
    border-radius: 2px;
    background: #f3e6ef;
    margin: 0.5rem auto 1rem auto;
  }
  .side-quote, .hero-quote {
    font-size: 1rem;
    background: #eaf3fa;
    border-radius: 18px;
    padding: 0.8rem 1rem;
    margin: 1.2rem 0;
    color: #3a5a6b;
    box-shadow: none;
  }
  .important-note {
    background: #f9f8f6 !important;
    border: 1.5px solid #e3e7ea !important;
    color: #444 !important;
  }

  /* Seelengespräch-Box im Hero-Bereich: Titel blau, Hintergrund leicht beige */
  .service-card.featured {
    background: #fcfaf7;
    border: 3px solid #8ba8ab;
    box-shadow: none;
  }
  .service-card.featured .service-title,
  .service-card.featured .hero-soul-title {
    color: #3a5a6b !important;
  }
  .service-card.featured .btn-primary,
  .service-card.featured .btn-more {
    background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%);
    color: #fff;
    border: none;
  }
  .service-card.featured .btn-primary:hover,
  .service-card.featured .btn-more:hover {
    background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%);
    color: #fff;
  }

  /* Hero-Bild: Kreis größer, weniger Abstand, mehr vom Körper sichtbar */
  .hero-portrait, .hero-img {
    max-width: 180px !important;
    max-height: 180px !important;
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    margin: 0.2rem auto 0.5rem auto !important;
    display: block;
    box-shadow: none !important;
  }

  /* Abstand oberhalb des Hero-Bildes zum Text darüber weiter verringern */
  .hero-flex {
    gap: 0.5rem !important;
  }
  .hero-portrait, .hero-img {
    margin-top: 0.1rem !important;
  }

  /* Seelengespräch-Produktbox im Hero-Bereich exakt wie die anderen Boxen */
  .service-card.featured {
    background: #f9f8f6;
    border: 1px solid #e3e7ea;
    box-shadow: none;
  }
  .service-card.featured .service-title,
  .service-card.featured .hero-soul-title {
    color: #3a5a6b !important;
  }
  .service-card.featured .hero-soul-desc {
    color: #5d6d74 !important;
  }
  .service-card.featured .btn-primary,
  .service-card.featured .btn-more {
    background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%);
    color: #fff;
    border: none;
  }
  .service-card.featured .btn-primary:hover,
  .service-card.featured .btn-more:hover {
    background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%);
    color: #fff;
  }

  /* Überschrift (service-title) in allen Produktboxen größer */
  .service-card .service-title {
    color: var(--accent-color) !important;
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    text-transform: uppercase;
  }
  /* Unterüberschriften in allen Produktboxen wieder kleiner */
  .service-card .hero-animal-title,
  .service-card .hero-soulkey-title,
  .service-card .hero-soul-title {
    color: var(--text-color) !important;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  /* Seelengespräch-Box im Hero-Bereich: blaue Umrandung in Akzentfarbe */
  .service-card.featured {
    border: 2.5px solid var(--accent-color);
  }

  /* Hero-Textblock unter den Produktboxen: leichter, kleiner, zentriert */
  .hero-text-block {
    font-size: 0.97rem;
    line-height: 1.7;
    max-width: 95vw;
    margin: 1.2rem auto 1.2rem auto;
    padding: 0.5rem 0.2rem;
    text-align: center;
    background: none;
    border-radius: 0;
    color: #5a6a6a;
    font-weight: 400;
  }
  .hero-text-block p {
    margin-bottom: 0.9rem;
    font-size: 0.97rem;
    line-height: 1.7;
    text-align: center;
  }

  /* Letzter Absatz im hero-text-block noch kleiner und schwarz */
  .hero-text-block p.hero-statement-modern {
    font-size: 0.78rem;
    line-height: 1.7;
    color: #222;
    margin-bottom: 0.7rem;
  }

  /* Zeilenumbruch nach dem Komma in 'Heute helfe ich anderen Seelen,' nur mobil */
  .hero-text-block p.hero-statement-modern {
    position: relative;
  }
  .hero-text-block p.hero-statement-modern::after {
    content: '';
    display: block;
  }
  .hero-text-block p.hero-statement-modern {
    /* Zeilenumbruch nach dem Komma */
  }
  .hero-text-block p.hero-statement-modern {
    /* Workaround: Ersetze das Komma durch Komma+Zeilenumbruch per CSS */
  }
  .hero-text-block p.hero-statement-modern {
    /* Mit JS oder HTML wäre es robuster, aber per CSS geht es so: */
  }
  .hero-text-block p.hero-statement-modern {
    /* Mit ::after und content können wir keinen Zeilenumbruch nach einem bestimmten Zeichen einfügen, sondern nur am Ende. */
  }
  /* Alternative: Mit word-break und max-width kann man einen Umbruch anregen, aber nicht exakt nach dem Komma erzwingen. */

  /* Zeilenumbruch nach dem Komma in .hero-statement-modern anregen (CSS-Variante) */
  .hero-text-block p.hero-statement-modern {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.01em;
    word-break: break-word;
    text-align: center;
  }

  /* Striche unter den Überschriften (title-decoration) in Seelengespräch und Tiergespräch: Farbverlauf blau-beige */
  #seelengespraech .title-decoration,
  #seelengespraech .title-decoration.blue,
  #tiergespraech .title-decoration,
  #tiergespraech .title-decoration.beige {
    background: linear-gradient(90deg, #8ba8ab 0%, #deccae 100%) !important;
    height: 3px;
    border-radius: 2px;
    margin: 0.5rem auto 1.2rem auto;
  }

  /* Trennstrich unter 'Jetzt buchen' Button in Seelengespräch und Tiergespräch ausblenden */
  #seelengespraech .title-decoration,
  #seelengespraech .title-decoration.blue,
  #tiergespraech .title-decoration,
  #tiergespraech .title-decoration.beige {
    display: none !important;
  }
  /* Abstand nach dem Button verringern */
  #seelengespraech .btn-primary,
  #tiergespraech .btn-primary {
    margin-bottom: 0.7rem !important;
  }
  #seelengespraech .content-text,
  #tiergespraech .content-text {
    margin-top: 0 !important;
  }

  /* Zeilenumbruch nach dem Gedankenstrich in der Unterüberschrift vom Tiergespräch */
  #tiergespraech .dancing-script-blue.larger {
    display: inline;
    position: relative;
  }
  #tiergespraech .dancing-script-blue.larger::after {
    content: '';
    display: block;
    height: 0;
  }
  #tiergespraech .dancing-script-blue.larger {
    /* Workaround: Mit CSS kann man keinen Umbruch exakt nach dem Gedankenstrich erzwingen, aber mit schmaler max-width und word-break kann man es anregen. */
    max-width: 220px;
    word-break: break-word;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Bilder in Seelengespräch und Tiergespräch noch größer und weiter rausgezoomt */
  #seelengespraech .header-portrait img,
  #tiergespraech .header-portrait img {
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    margin: 0 auto 1rem auto !important;
    display: block;
    box-shadow: none !important;
  }
  #seelengespraech .header-portrait img {
    border: 5px solid #deccae !important;
  }
  #tiergespraech .header-portrait img {
    border: 3px solid #e3e7ea;
  }
  #seelengespraech .header-portrait,
  #tiergespraech .header-portrait {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 1rem auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Seelengespräch Bild: blaue Umrandung, mehr Abstand nach oben, weniger nach unten */
  #seelengespraech .header-portrait img {
    border: 5px solid #8ba8ab !important;
    margin-top: 2.2rem !important;
    margin-bottom: 0.5rem !important;
  }
  #seelengespraech .header-portrait {
    margin-bottom: 0.3rem !important;
  }

  /* Tiergespräch Bild: noch weiter rauszoomen, weniger Abstand nach unten */
  #tiergespraech .header-portrait img {
    object-position: center 10% !important;
    margin-bottom: 0.5rem !important;
  }
  #tiergespraech .header-portrait {
    margin-bottom: 0.3rem !important;
  }

  #tiergespraech .header-portrait img {
    width: 190px !important;
    height: 190px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    margin: 0 auto 0.5rem auto !important;
    display: block;
    box-shadow: none !important;
    border: 5px solid #8ba8ab !important;
  }
  #tiergespraech .header-portrait {
    width: 190px !important;
    height: 190px !important;
    margin: 0 auto 0.3rem auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #tiergespraech .header-portrait img {
    object-fit: contain !important;
    background: #fff;
  }

  #tiergespraech .header-portrait img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    margin: 0 auto 0.5rem auto !important;
    display: block;
    box-shadow: none !important;
    border: 5px solid #8ba8ab !important;
    background: none;
  }
  #tiergespraech .header-portrait {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 0.3rem auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info-boxes {
    margin-top: 5rem !important;
  }
} 

.service-card.featured .hero-soul-title {
  color: #8ba8ab !important;
} 

.service-card.featured .service-title {
  color: #8ba8ab !important;
}
.service-card.featured .hero-soul-title {
  color: #444 !important;
} 

.hero-quote {
  font-size: 0.72rem !important;
  padding: 0.4rem 0.3rem !important;
} 

.hero-quote::before,
.hero-quote::after {
  display: none !important;
} 

.info-box.blue-accent, .info-box.green-accent {
  padding: 0.7rem 0.5rem !important;
  border-radius: 14px !important;
  font-size: 0.92rem !important;
  box-shadow: none !important;
  background: #f9f8f6 !important;
  border: 1px solid #e3e7ea !important;
}
.info-box.blue-accent h4, .info-box.green-accent h4 {
  font-size: 1.02rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  color: #3a5a6b !important;
}
.info-box .feature-list li {
  font-size: 0.92rem !important;
  padding: 0.22em 0 !important;
  border-bottom: none !important;
  background: none !important;
} 

.price-card {
  background: rgba(139, 168, 171, 0.10) !important;
  border-radius: 22px !important;
  border: 1.5px solid #e3e7ea !important;
  box-shadow: none !important;
  padding: 1.1rem 0.8rem !important;
  font-size: 0.97rem !important;
  margin-bottom: 1.3rem !important;
  transition: box-shadow 0.2s, border 0.2s;
}
.price-card.featured {
  background: rgba(139, 168, 171, 0.13) !important;
  border: 2.5px solid #8ba8ab !important;
}
.price-card h4 {
  font-size: 1.08rem !important;
  margin-bottom: 0.7rem !important;
  color: #3a5a6b !important;
  font-weight: 700 !important;
}
.price {
  font-size: 1.18rem !important;
  color: #8ba8ab !important;
  margin-bottom: 0.7rem !important;
  font-weight: 700 !important;
}
.price-card p {
  font-size: 0.88rem !important;
  color: #444 !important;
  margin-bottom: 1.1rem !important;
  text-align: center !important;
}
.price-card .btn-primary {
  background: linear-gradient(90deg, #8ba8ab 0%, #b7cfd1 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  padding: 0.7em 1.2em !important;
  border-radius: 22px !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s !important;
}
.price-card .btn-primary:hover {
  background: linear-gradient(90deg, #b7cfd1 0%, #8ba8ab 100%) !important;
  color: #fff !important;
}
.price-card .popular-badge {
  background: #8ba8ab !important;
  color: #fff !important;
  border: none !important;
} 

.price-card:first-child p br:first-of-type {
  display: none;
} 

.soulkey-list-box {
  background: #f9f8f6 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  border: 1px solid #e3e7ea !important;
  padding: 1.2rem 1rem !important;
  margin: 1.2rem 0 !important;
  max-width: 100% !important;
  font-size: 0.95rem !important;
}
.soulkey-list-box ul.feature-list li {
  font-size: 0.95rem !important;
  padding: 0.22em 0 !important;
  border-bottom: none !important;
  background: none !important;
  text-align: left !important;
  line-height: 1.5 !important;
} 

/* Emoji-Deko nur für mobile Preis-Boxen */
.price-card.seelengespraech-mobile h4::before, .price-card.soulkey-mobile h4::before {
  content: '🌸 ';
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 0.18em;
}
.price-card.tiergespraech-mobile h4::before {
  content: '🦋 ';
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 0.18em;
}

/* Funkel-Emoji für Schnupperfrage-Boxen */
.pricing-options .price-card.seelengespraech-mobile:first-child h4::before,
.pricing-options .price-card.tiergespraech-mobile:first-child h4::before {
  content: '✨ ';
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 0.18em;
}

/* Keine Emoji-Deko mehr im Badge */
.price-card.seelengespraech-mobile .popular-badge::before,
.price-card.soulkey-mobile .popular-badge::before,
.price-card.tiergespraech-mobile .popular-badge::before {
  content: '';
} 

.price-card.seelengespraech-mobile .popular-badge,
.price-card.tiergespraech-mobile .popular-badge {
  top: -2.1em !important;
} 

#soulkey .title-decoration,
#soulkey .title-decoration.blue {
  display: none !important;
} 

#soulkey .section-title {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.1rem !important;
  color: #222 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
} 

#soulkey .section-img.center {
  display: block;
  margin: 1.5rem auto 1.2rem auto !important;
  width: 220px !important;
  height: 220px !important;
  max-width: 95vw !important;
  max-height: 220px !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* =============================== */
/*  MOBILE: SEELENGESPRÄCH & TIERGESPRÄCH  */
/* =============================== */
@media (max-width: 600px) {
  /* --- Abschnitt: Seelengespräch & Tiergespräch (gemeinsam) --- */
  #seelengespraech .section-title,
  #tiergespraech .section-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.1rem !important;
    color: #222 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
  }
  #seelengespraech .dancing-script-blue.larger,
  #tiergespraech .dancing-script-blue.larger {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  #seelengespraech .content-text h3,
  #seelengespraech .centered-title,
  #seelengespraech h3.centered-title,
  #tiergespraech .content-text h3,
  #tiergespraech .centered-title,
  #tiergespraech h3.centered-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 1.2rem auto 1.2rem auto !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  #seelengespraech .content-text p,
  #tiergespraech .content-text p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
    margin-bottom: 1.2rem !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    font-family: inherit;
  }
  #seelengespraech .feature-list li,
  #tiergespraech .feature-list li {
    font-size: 0.98rem !important;
    padding: 0.3em 0 !important;
    line-height: 1.7 !important;
    border-bottom: none !important;
    background: none !important;
    text-align: left !important;
  }
  #seelengespraech .info-box h4,
  #tiergespraech .info-box h4 {
    font-size: 1.02rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: #3a5a6b !important;
    text-align: center !important;
    font-family: var(--font-heading) !important;
  }
  #seelengespraech .header-portrait img,
  #tiergespraech .header-portrait img {
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    margin: 0 auto 1rem auto !important;
    display: block;
    box-shadow: none !important;
    border: 5px solid #8ba8ab !important;
    background: none;
  }
  #seelengespraech .header-portrait,
  #tiergespraech .header-portrait {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 1rem auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* ... weitere gemeinsame Formatierungen ... */
}

/* ===================== */
/*  MOBILE: WEITERE ABSCHNITTE  */
/* ===================== */
/* ... hier können weitere Abschnitte wie SoulKey, About, Kontakt, Footer folgen ... */

/* ===================== */
/*  MOBILE: SONDERREGELN  */
/* ===================== */
/* ... hier können spezielle mobile-only Regeln, Buttons, etc. folgen ... */ 

/* Bild im Seelengespräch weiter nach unten verschieben */
#seelengespraech .header-portrait {
  margin-top: 3.5rem !important;
  margin-bottom: 0.3rem !important;
}
#seelengespraech .header-portrait img {
  margin-top: 0 !important;
  /* margin-bottom bleibt wie gehabt */
}

/* Unterüberschriften in Seelengespräch & Tiergespräch größer */
#seelengespraech .content-text h3,
#tiergespraech .content-text h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 3.2rem auto 1.2rem auto !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Beide Abschnitte optisch angleichen (z.B. gleiche Abstände für header-portrait) */
#tiergespraech .header-portrait {
  margin-top: 3.5rem !important;
  margin-bottom: 0.3rem !important;
}
#tiergespraech .header-portrait img {
  margin-top: 0 !important;
} 

/* Bilder in Seelengespräch & Tiergespräch deutlich weiter nach unten zentrieren */
#seelengespraech .header-portrait,
#tiergespraech .header-portrait {
  margin-top: 8rem !important;
  margin-bottom: 0.3rem !important;
} 

#seelengespraech .header-portrait,
#tiergespraech .header-portrait {
  margin-top: 2.2rem !important;
  margin-bottom: 0.3rem !important;
} 

#seelengespraech .important-note,
#tiergespraech .important-note {
  background: #f7f3ec !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

#seelengespraech .important-note h4,
#tiergespraech .important-note h4 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #3a5a6b !important;
  text-align: center !important;
  font-family: var(--font-heading) !important;
  margin-bottom: 1rem !important;
  margin-top: 2rem !important;
} 

#seelengespraech .important-note p,
#tiergespraech .important-note p {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
} 

#seelengespraech .important-note p,
#tiergespraech .important-note p {
  font-weight: 400;
}

#seelengespraech .important-note p:contains('Ich gebe keine Diagnosen'),
#tiergespraech .important-note p:contains('Ich gebe keine Diagnosen'),
#seelengespraech .important-note p:contains('Ich gebe keine Diagnosen oder Heilversprechen'),
#tiergespraech .important-note p:contains('Ich gebe keine Diagnosen oder Heilversprechen') {
  font-weight: 700 !important;
  color: #3a5a6b !important;
} 

#tiergespraech .important-note {
  background: #fff !important;
}

@media (max-width: 600px) {
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .mobile-only {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 601px) {
  .desktop-only {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .mobile-only {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
} 

#soulkey .soulkey-mobile-img {
  display: block !important;
  margin: 1.2rem auto 1.2rem auto !important;
  width: 120px !important;
  height: 120px !important;
  max-width: 90vw !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 5px solid #deccae !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
} 

#seelengespraech .soultext-bg {
  background: #f7f3ec;
  border-radius: 18px;
  padding: 1.1rem 1rem;
  margin: 1.2rem 0 1.5rem 0;
} 

#tiergespraech .soultext-bg {
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1rem;
  margin: 1.2rem 0 1.5rem 0;
} 

#tiergespraech.section {
  background: #f7f3ec !important;
} 

#seelengespraech .info-box.blue-accent,
#seelengespraech .info-box.green-accent,
#tiergespraech .info-box.blue-accent,
#tiergespraech .info-box.green-accent {
  padding: 0.7rem 0.7rem !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.7rem !important;
}
#seelengespraech .info-box h4,
#tiergespraech .info-box h4 {
  font-size: 1.05rem !important;
  margin-bottom: 0.5rem !important;
}
#seelengespraech .feature-list li,
#tiergespraech .feature-list li {
  font-size: 0.92rem !important;
  padding: 0.22em 0 !important;
} 

#tiergespraech .price-card.tiergespraech-mobile {
  background: #fff !important;
} 

#seelengespraech .price-card {
  background: #f7f3ec !important;
} 

#seelengespraech .price-card .price,
#tiergespraech .price-card .price,
#soulkey .price-card .price {
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  text-align: center !important;
  margin-bottom: 0.5rem !important;
} 

#soulkey .soulkey-list-box,
#soulkey .soulkey-list-box ul,
#soulkey .soulkey-list-box li {
  padding: 0 !important;
  margin: 0 !important;
}
#soulkey .soulkey-list-box {
  padding: 0.7rem 0.7rem !important;
  border-radius: 16px;
  margin-bottom: 0.7rem !important;
  background: #fff !important;
}
#soulkey .soulkey-list-box ul.feature-list {
  margin-bottom: 0 !important;
}
#soulkey .soulkey-list-box li {
  font-size: 0.92rem !important;
  padding: 0.22em 0 !important;
}
#soulkey .soulkey-list-box h4 {
  font-size: 1.05rem !important;
  margin-bottom: 0.5rem !important;
} 

#soulkey .soultext-bg {
  background: #f7f3ec !important;
  border-radius: 18px;
  padding: 1.1rem 1rem;
  margin: 1.2rem 0 1.5rem 0;
} 

#soulkey .price-card.soulkey-mobile {
  background: #f7f3ec !important;
}
#soulkey .soulkey-list-box {
  background: #f7f3ec !important;
} 

#soulkey .price-card.soulkey-mobile .waitlist-badge {
  position: absolute !important;
  top: -2.1em !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  font-size: 0.95rem !important;
  padding: 0.3em 1em !important;
  border-radius: 16px !important;
  background: #eaf3fa !important;
  color: #3a5a6b !important;
  box-shadow: none !important;
  border: 1px solid #c7d8e6 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0.7em !important;
}
#soulkey .price-card.soulkey-mobile {
  position: relative;
} 

#seelengespraech .hero-quote {
  background: #f7f3ec !important;
  border-radius: 18px;
  padding: 0.8rem 1rem;
  margin: 1.2rem 0;
  color: #3a5a6b;
} 

#seelengespraech .soultext-bg p,
#tiergespraech .soultext-bg p {
  font-size: 0.95rem !important;
} 

#seelengespraech .price-card h4,
#tiergespraech .price-card h4 {
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.7rem !important;
}
#seelengespraech .price-card p,
#tiergespraech .price-card p {
  font-size: 0.95rem !important;
} 

@media (max-width: 600px) {
  #soulkey .section-header {
    margin-top: 3.5rem !important;
  }
  #soulkey .section-title {
    margin-bottom: 2.2rem !important;
  }
} 

/* Rosa Striche entfernen und durch Verlauf ersetzen */
#about .title-decoration,
#contact .title-decoration {
  background: linear-gradient(90deg, #deccae 0%, #eaf3fa 100%) !important;
  height: 2px !important;
  border-radius: 2px !important;
  margin: 0.5rem auto 1rem auto !important;
  display: block !important;
}

#about .section-title,
#werte .about-values-title,
#contact .section-title {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  margin-bottom: 1.1rem !important;
}

#about .title-decoration,
#contact .title-decoration,
#werte .title-decoration {
  background: linear-gradient(90deg, #deccae 0%, #eaf3fa 100%) !important;
  height: 2px !important;
  border-radius: 2px !important;
  margin: 0.5rem auto 1rem auto !important;
  display: block !important;
}

/* Schriftgrößen erhöhen */
#about .section-title {
  font-size: 2.1rem !important;
}
#contact .section-title {
  font-size: 2.1rem !important;
} 

@media (max-width: 600px) {
  #about .section-title,
  #contact .section-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #222 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    margin-bottom: 1.1rem !important;
  }
} 

@media (max-width: 600px) {
  #werte .about-value-item {
    padding: 0.7rem 0.5rem !important;
    margin-bottom: 0 !important;
    border-radius: 16px !important;
  }
  #werte .about-values-grid {
    gap: 0 !important;
    margin-bottom: 0 !important;
  }
} 

@media (max-width: 600px) {
  #contact .section-subtitle {
    font-size: 0.97rem !important;
    line-height: 1.5 !important;
  }
} 

.price-card.soulkey-mobile h4 {
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.7rem !important;
  text-align: center !important;
} 

#contact .container {
  margin-top: 2.5rem !important;
} 

#contact .title-decoration {
  margin-bottom: 2.2rem !important;
} 

#contact .section-title {
  margin-bottom: 2.2rem !important;
} 

#soulkey .price-card.soulkey-mobile .waitlist-badge {
  background: #eaf3fa !important;
  color: #3a5a6b !important;
  border: 1px solid #c7d8e6 !important;
} 

#soulkey .info-box.blue-accent,
#soulkey .info-box.green-accent {
  background: #fff !important;
  border: 1.5px solid #8ba8ab !important;
  color: #3a5a6b !important;
} 

/* About-Abschnitt: Desktop/Mobile Umschaltung */
.about-content-desktop { display: flex; }
.about-content-mobile { display: none; }

@media (max-width: 900px) {
  .about-content-desktop { display: none !important; }
  .about-content-mobile { display: flex !important; }
} 

.only-mobile { display: none; }
@media (max-width: 900px) {
  .only-mobile { display: flex !important; }
} 

.hero-script-intro {
  font-size: 0.76rem !important;
} 

#soulkey .soultext-bg p {
  font-size: 0.92rem !important;
} 

#about .section-header {
  padding-top: 2.5rem;
} 

@media (max-width: 900px) {
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0 1rem;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
  }
  .brand-icon {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    height: 40px;
  }
  .brand-text {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 1.1rem;
  }
  .language-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    margin: 0;
  }
  .hamburger {
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: 0.5rem;
  }
} 

@media (max-width: 600px) {
  .soul-statement {
    font-size: 0.7rem;
    padding: 1.2rem 0.7rem;
    margin: 1.2rem 0.5rem;
    max-width: 98vw;
  }
  .mobile-kachel-intro {
    display: block !important;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    margin: 1rem 1.5rem 0.5rem 1.5rem;
    color: #111;
  }
  .services-preview > .mobile-kachel-intro {
    display: none !important;
  }
  .hero-secondary-title {
    margin-bottom: 0rem !important;
  }
  .soul-statement.hero-soul-statement {
    margin-top: 0rem !important;
  }
  .hero-portrait {
    width: 180px !important;
    height: 180px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -1.5rem auto 0.3rem auto !important;
    /* Bild deutlich weiter nach oben verschoben */
  }
  .hero-img {
    width: 180px !important;
    height: 180px !important;
    object-fit: cover;
    border-radius: 22px !important;
    box-shadow: 0 4px 18px rgba(139,168,171,0.13);
    display: block;
    margin: 0 auto;
  }
  .hero-flex {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}