@charset "UTF-8";
/* ============================================
   1) BASIS-VARIABLEN
   ============================================ */
/* Für Sublines & Text */
/* NEU: Sehr dunkles, warmes Braun-Schwarz für H1 */
/* Buttons */
/* Sections Backgrounds */
/* ============================================
   2) SCHRIFTARTEN (LOKAL)
   ============================================ */
/* 2.1) Poiret One (Headlines - Optional/Fallback) */
@font-face {
  font-family: 'Poiret One';
  src: url("../fonts/PoiretOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }
/* 2.2) Quicksand (Variable Font - Headlines) */
@font-face {
  font-family: 'Quicksand';
  src: url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap; }
/* 2.3) Geist (Body Text) */
/* Thin (100) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap; }
/* Ultra Light / Extra Light (200) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap; }
/* Light (300) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }
/* Regular (400) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }
/* Medium (500) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
/* Semi Bold (600) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }
/* Bold (700) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }
/* Extra Bold (800) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap; }
/* Black (900) */
@font-face {
  font-family: 'Geist';
  src: url("../fonts/Geist-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }
/* ============================================
   3) GLOBAL STYLES
   ============================================ */
html,
body {
  height: 100%; }

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: #111111;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* Inheritance Reset */
p, a, li, ul, ol, span, div, input, button, textarea, select {
  font-family: inherit; }

/* Typografie Basis */
p {
  font-size: 1.25rem;
  /* Standardgröße etwas normalisiert */
  line-height: 1.8rem;
  font-weight: 300;
  /* Light / Geist 300 */ }

/* Überschriften-Logik mit Breakpoints */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: 'Quicksand', cursive;
  font-weight: 400;
  /* Standard, kann lokal überschrieben werden */
  line-height: 1.2;
  margin-bottom: 1rem; }

/* H1: Mobil kompakt -> Desktop groß */
h1 {
  font-size: 2.2rem; }
  @media (min-width: 768px) {
    h1 {
      font-size: 2.8rem; } }
  @media (min-width: 992px) {
    h1 {
      font-size: 3.5rem;
      /* Desktop Größe */ } }

/* H2: Mobil kompakt -> Desktop groß */
h2 {
  font-size: 1.8rem; }
  @media (min-width: 768px) {
    h2 {
      font-size: 2.2rem; } }
  @media (min-width: 992px) {
    h2 {
      font-size: 2.5rem; } }

/* H3: Mobil kompakt -> Desktop groß */
h3 {
  font-size: 1.4rem; }
  @media (min-width: 768px) {
    h3 {
      font-size: 1.6rem; } }
  @media (min-width: 992px) {
    h3 {
      font-size: 1.8rem; } }

/* H3: Mobil kompakt -> Desktop groß */
h5 {
  font-size: 1.25rem;
  font-weight: 500; }
  @media (min-width: 768px) {
    h5 {
      font-size: 1.4rem; } }
  @media (min-width: 992px) {
    h5 {
      font-size: 1.6rem; } }

/* Accessibility */
:focus-visible {
  outline: 2px dashed #ffbf47;
  outline-offset: 3px; }

/* ============================================
   4) LINK STYLING (GLOBAL)
   ============================================ */
/* Gilt für Fließtext, FAQ & Kontakt (außer Buttons & Icons) */
.section-copy a:not(.btn),
.accordion-body a:not(.btn),
.section-themen a:not(.btn),
.section-contact a:not(.btn):not(.social-icon-link) {
  color: #111111;
  text-decoration: none !important;
  font-weight: 500;
  /* Das "Fette" reicht zur Erkennung */
  position: relative;
  display: inline-block;
  line-height: 1.2;
  transition: color 0.2s ease;
  /* HIER GEÄNDERT: Keine dauerhafte Linie mehr */
  border-bottom: none;
  padding-bottom: 0;
  /* 2. Animierte Linie (Nur beim Hover sichtbar) */ }
  .section-copy a:not(.btn)::after,
  .accordion-body a:not(.btn)::after,
  .section-themen a:not(.btn)::after,
  .section-contact a:not(.btn):not(.social-icon-link)::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    /* Sitzt direkt unter dem Text */
    left: 0;
    background-color: #111111;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out; }
  .section-copy a:not(.btn):hover,
  .accordion-body a:not(.btn):hover,
  .section-themen a:not(.btn):hover,
  .section-contact a:not(.btn):not(.social-icon-link):hover {
    color: #000000;
    text-decoration: none !important; }
    .section-copy a:not(.btn):hover::after,
    .accordion-body a:not(.btn):hover::after,
    .section-themen a:not(.btn):hover::after,
    .section-contact a:not(.btn):not(.social-icon-link):hover::after {
      transform: scaleX(1);
      transform-origin: bottom left; }

/* ============================================
   5) HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background-color: #caa78a;
  color: #ffffff;
  /* Standard Weiß (bleibt für Mobile Overlay wichtig) */
  overflow: hidden; }
  .hero .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0; }
  .hero .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    display: block; }
  .hero .container {
    position: relative;
    z-index: 2; }

/* 5.1) Hero Navigation */
.hero-nav {
  padding-top: 1.5rem;
  padding-bottom: 0;
  /* Desktop Links */
  /* Mobile Toggler */
  /* Mobile Offcanvas */ }
  .hero-nav .navbar-brand {
    color: #ffffff;
    font-weight: 600; }
  .hero-nav .navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 500;
    padding-inline: 0.75rem;
    transition: all 0.2s ease;
    border-radius: 999px; }
    .hero-nav .navbar-nav .nav-link.active {
      color: #ffffff; }
    .hero-nav .navbar-nav .nav-link:hover, .hero-nav .navbar-nav .nav-link:focus {
      text-decoration: none;
      background-color: #333333;
      color: #cccccc; }
  .hero-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 0.75rem; }
    .hero-nav .navbar-toggler:focus {
      box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.5); }
  .hero-nav .offcanvas {
    background-color: rgba(0, 0, 0, 0.95); }
  .hero-nav .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .hero-nav .offcanvas .nav-link {
    color: #ffffff;
    font-size: 1.05rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-radius: 0.5rem; }
    .hero-nav .offcanvas .nav-link:hover, .hero-nav .offcanvas .nav-link:focus {
      text-decoration: none;
      background-color: #333333;
      color: #cccccc; }

/* Desktop Navigation (Pill-Style) - Hier Farbe anpassen falls nötig */
@media (min-width: 992px) {
  .hero-nav .navbar-brand {
    /* Falls Logo auf hellem Hintergrund auch dunkel sein soll: */
    /* color: $ink; */ }
  .hero-nav .nav-black {
    background-color: #000;
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
    align-items: center; }
  .hero-nav .nav-black .nav-link {
    padding: 0.4rem 1.2rem;
    color: #ffffff;
    font-weight: 500; }
    .hero-nav .nav-black .nav-link:hover, .hero-nav .nav-black .nav-link:focus {
      text-decoration: none;
      background-color: #333333;
      color: #cccccc; } }
/* 5.2) Hero Text Content */
.hero-copy {
  padding-block: 4rem; }
  .hero-copy h1 {
    font-weight: 300;
    margin-bottom: 0.5rem; }
  .hero-copy .sub {
    font-size: 1.25rem;
    margin-bottom: 1.75rem;
    font-weight: 400; }
  .hero-copy p {
    margin-bottom: 1rem;
    font-size: 1.25rem; }
  .hero-copy .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; }

/* Desktop-Spezifisch: Farben für hellen Hintergrund */
@media (min-width: 992px) {
  .hero-copy {
    /* Standard-Textfarbe (Fließtext) auf Anthrazit */
    color: #333333; }
    .hero-copy h1 {
      /* Headline: Dunkelbraun bis Schwarz */
      color: #1d1815; }
    .hero-copy .sub {
      /* Subline: Anthrazit */
      color: #333333;
      opacity: 1;
      /* Volle Deckkraft für Lesbarkeit */
      font-weight: 500;
      /* Etwas kräftiger für Lesbarkeit */ }
    .hero-copy p {
      color: #333333; }

  /* Ghost-Buttons auf hellem Grund anpassen */
  .hero-btn-ghost {
    border-color: #333333;
    color: #333333; }
    .hero-btn-ghost:hover {
      background-color: rgba(0, 0, 0, 0.05);
      color: #000;
      border-color: #000; } }
/* ============================================
   6) BUTTON STYLES
   ============================================ */
.hero-btn-primary {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
  padding-inline: 1.6rem;
  border-radius: 999px;
  font-weight: 500; }
  .hero-btn-primary:hover, .hero-btn-primary:focus {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff; }

.hero-btn-ghost {
  background-color: transparent;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.8);
  color: #111111;
  padding-inline: 1.6rem;
  font-weight: 500; }
  .hero-btn-ghost:hover, .hero-btn-ghost:focus {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff; }

.hero-btn-ghost-black {
  background-color: transparent;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.8);
  color: #111111;
  padding-inline: 1.6rem;
  font-weight: 500; }
  .hero-btn-ghost-black:hover, .hero-btn-ghost-black:focus {
    background-color: rgba(17, 17, 17, 0.12);
    border-color: #111111;
    color: #111111; }

/* ============================================
   7) CONTENT SECTIONS (ALLGEMEIN)
   ============================================ */
.section {
  padding-block: 4rem; }
  @media (min-width: 992px) {
    .section {
      padding-block: 5rem; } }
  .section .section-copy {
    max-width: 36rem; }

/* 7.1) Retreats / Seminare + Über mich (gleicher Style) */
/* Wir fassen die Selektoren zusammen */
.section-seminare,
.section-ueber-mich {
  /* Hintergrundfarben */
  /* Karten-Styling (Gilt für beide) */
  /* Bild-Container Styling */ }
  .section-seminare.section-seminare,
  .section-ueber-mich.section-seminare {
    background-color: #e6dfeb; }
  .section-seminare.section-ueber-mich,
  .section-ueber-mich.section-ueber-mich {
    background-color: #eaf6fa; }
  .section-seminare .seminar-card,
  .section-seminare .ueber-mich-card,
  .section-ueber-mich .seminar-card,
  .section-ueber-mich .ueber-mich-card {
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); }
  .section-seminare .seminar-media,
  .section-seminare .ueber-mich-media,
  .section-ueber-mich .seminar-media,
  .section-ueber-mich .ueber-mich-media {
    position: relative;
    border-radius: 1.75rem;
    /* Sicherstellen, dass auch das Media-Div rund ist */
    overflow: hidden; }
    .section-seminare .seminar-media img,
    .section-seminare .ueber-mich-media img,
    .section-ueber-mich .seminar-media img,
    .section-ueber-mich .ueber-mich-media img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover; }
  .section-seminare .seminar-caption,
  .section-ueber-mich .seminar-caption {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 0.9rem 1.2rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 0.9rem; }

/* 7.2) Beratung + So arbeite ich (gleicher Style) */
.section-beratung,
.section-so-arbeite-ich {
  /* Hintergrundfarben */
  /* Media Container Styling */ }
  .section-beratung.section-beratung,
  .section-so-arbeite-ich.section-beratung {
    background-color: #f4f7fb; }
  .section-beratung.section-so-arbeite-ich,
  .section-so-arbeite-ich.section-so-arbeite-ich {
    background-color: #f4f2f0; }
  .section-beratung .beratung-media,
  .section-beratung .so-arbeite-ich-media,
  .section-so-arbeite-ich .beratung-media,
  .section-so-arbeite-ich .so-arbeite-ich-media {
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }
    .section-beratung .beratung-media img,
    .section-beratung .so-arbeite-ich-media img,
    .section-so-arbeite-ich .beratung-media img,
    .section-so-arbeite-ich .so-arbeite-ich-media img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover; }

/* ============================================
   7.3: PSYCHOLOGISCHE BERATUNG
   ============================================ */
/* Spezifische Hintergrundfarbe */
.section-bg-cool {
  background-color: #f4f7fb; }

.hero-psyberatung {
  background-color: #e9f8fb; }

/* Karten für die Themenschwerpunkte */
.topic-card {
  height: 100%;
  border: none;
  background: transparent; }
  .topic-card .topic-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    /* Format für Bilder */
    background-color: #f0f0f0;
    /* Platzhalter-Grau */
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem; }
    .topic-card .topic-image-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block; }
  .topic-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-family: 'Quicksand', sans-serif;
    color: #1d1815;
    min-height: 3rem; }
  .topic-card p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333333; }

/* Desktop-Anpassungen für Sections */
@media (min-width: 992px) {
  /* Bild Links Layout (Seminare & Über mich) */
  .section-seminare .col-lg-6,
  .section-ueber-mich .col-lg-6 {
    display: flex;
    justify-content: flex-start; }
  .section-seminare .seminar-card,
  .section-seminare .ueber-mich-card,
  .section-ueber-mich .seminar-card,
  .section-ueber-mich .ueber-mich-card {
    max-width: 620px;
    margin-left: 1.5rem; }
  .section-seminare .seminar-media img,
  .section-seminare .ueber-mich-media img,
  .section-ueber-mich .seminar-media img,
  .section-ueber-mich .ueber-mich-media img {
    max-height: 620px;
    object-fit: cover; }

  .section-faq .col-lg-5 {
    display: flex;
    justify-content: flex-start; }

  /* Bild Rechts Layout (Beratung & So arbeite ich) */
  .section-beratung .col-lg-6.order-lg-1,
  .section-so-arbeite-ich .col-lg-6.order-lg-1 {
    /* Rechte Spalte */
    display: flex;
    justify-content: flex-end; }
  .section-beratung .beratung-media,
  .section-beratung .so-arbeite-ich-media,
  .section-so-arbeite-ich .beratung-media,
  .section-so-arbeite-ich .so-arbeite-ich-media {
    max-width: 620px;
    margin-right: 1.5rem; }
  .section-beratung .beratung-media img,
  .section-beratung .so-arbeite-ich-media img,
  .section-so-arbeite-ich .beratung-media img,
  .section-so-arbeite-ich .so-arbeite-ich-media img {
    max-height: 620px;
    object-fit: cover; } }
/* Modifier Klassen für Hintergründe (optional, falls inline genutzt) */
.section-bg-blue {
  background-color: #eaf6fa !important; }

.section-bg-greige {
  background-color: #f4f2f0 !important; }

.berat-li li {
  font-size: 1.25rem;
  line-height: 2rem; }

/* ============================================
   NEUE SEKTION: WERTE / DAFÜR STEHE ICH
   ============================================ */
.section-werte {
  /* Heller, warmer Lila-Ton für den Hintergrund (wie im ersten Bild) */
  background-color: #e6dfeb;
  /* Falls dieser Ton noch nicht definiert ist, können Sie den Hex-Code #e6dfeb verwenden.
     Wenn Sie einen anderen Ton wünschen, tragen Sie hier einfach den entsprechenden Hex-Code ein. */ }
  .section-werte .value-card {
    text-align: center;
    padding: 1.5rem 1rem;
    transition: transform 0.3s ease;
    /* Optional: Leichte Interaktion beim Drüberfahren */ }
    .section-werte .value-card:hover {
      transform: translateY(-5px); }
  .section-werte .icon-wrapper {
    /* Flexbox, damit das Icon auch bei unterschiedlichen Höhen immer mittig sitzt */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-bottom: 1rem; }
  .section-werte .value-icon {
    width: 70px;
    height: 70px;
    /* Wir entfernen die allgemeine Farbe, da wir die Pfade einzeln färben */
    /* color: ... nicht mehr nötig */
    /* --- 1. Der äußere Sternen-Kranz --- */
    /* --- 2. Der innere runde Punkt --- */ }
    .section-werte .value-icon path:nth-child(1) {
      fill: #cdc3d6;
      /* Dein gewünschter hellster Flieder-Ton */
      opacity: 1;
      /* WICHTIG: Macht die Farbe deckend (überschreibt die 0.4 aus dem SVG) */ }
    .section-werte .value-icon path:nth-child(2) {
      fill: #582c5f;
      /* Das dunkle Violett (passend zum Kontrast) */
      opacity: 1; }
  .section-werte h4 {
    /* Gleiche Schriftart wie die großen Überschriften */
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    color: #111111; }
  .section-werte p.small {
    font-size: 1.05rem;
    /* Lesbar bleiben */
    line-height: 1.5; }

/* ============================================
   8) FAQ SECTION
   ============================================ */
.section-faq {
  background-color: #fcf6f2;
  color: #111111; }
  .section-faq .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
    .section-faq .accordion-item:last-child {
      border-bottom: none; }
  .section-faq .accordion-button {
    background-color: transparent;
    color: #111111;
    font-weight: 500;
    font-size: 1.05rem;
    padding-left: 0;
    padding-right: 0;
    padding-block: 1.25rem;
    box-shadow: none;
    /* Zustand: Zu */
    /* Zustand: Offen */ }
    .section-faq .accordion-button::after {
      margin-left: 1rem;
      background-size: 1rem;
      width: 1rem;
      height: 1rem;
      transition: transform 0.2s ease; }
    .section-faq .accordion-button.collapsed::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M8 1v14M1 8h14'/%3e%3c/svg%3e");
      transform: rotate(0deg); }
    .section-faq .accordion-button:not(.collapsed) {
      color: #111111;
      background-color: transparent;
      box-shadow: none; }
      .section-faq .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M1 8h14'/%3e%3c/svg%3e");
        transform: rotate(180deg); }
  .section-faq .accordion-body {
    padding-left: 0;
    padding-right: 2rem;
    padding-top: 0;
    padding-bottom: 1.5rem;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem; }

/* ============================================
   9) KONTAKT & FOOTER
   ============================================ */
.section-contact {
  background-color: #f8fbf5;
  border-top: 1px solid rgba(0, 0, 0, 0.05); }
  .section-contact h2, .section-contact h3 {
    margin-bottom: 0.5rem; }
  .section-contact a {
    text-decoration: none; }
    .section-contact a:hover, .section-contact a:focus {
      text-decoration: underline; }

/* 9.1) Social Icons */
.social-icon-link {
  display: inline-block;
  color: #111111;
  transition: transform 0.2s ease, color 0.2s ease;
  line-height: 0; }
  .social-icon-link svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor; }
  .social-icon-link:hover {
    color: #555555;
    transform: translateY(-2px); }

/* ============================================
   10) RESPONSIVE HELPER (MOBILE)
   ============================================ */
@media (max-width: 767.98px) {
  /* Hero Mobile Optimierung */
  .hero {
    /* WICHTIG: dvh statt vh benutzen!
       Das ignoriert die Browser-Leisten und passt perfekt in den Screen. */
    height: 100dvh;
    min-height: 100dvh;
    /* Damit überschreiben wir auch die Bootstrap-Klasse .min-vh-100 im HTML,
       die sonst dazwischenfunkt */
    /* Verlauf wieder aktivieren */ }
    .hero .min-vh-100 {
      min-height: 100dvh !important; }
    .hero .hero-img {
      object-position: center top;
      /* Optional: Falls das Bild verzerrt wirkt */
      height: 100%; }
    .hero::before {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 60%); }

  .hero-copy {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    /* Etwas weniger Abstand zum Rand */
    width: calc(100% - 2rem);
    /* Breiter machen (weniger Rand) */
    max-width: 34rem;
    margin: 0;
    /* Padding und Größen reduziert! */
    padding: 1.5rem 1.25rem;
    background-color: rgba(23, 18, 13, 0.83);
    border-radius: 1.25rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    /* Textfarbe bleibt WEISS auf Mobil (wegen dunkler Box) */
    color: #ffffff;
    /* Buttons kleiner auf Mobil */ }
    .hero-copy h1 {
      font-size: 1.75rem;
      /* Viel kleiner für Mobile */
      margin-bottom: 0.25rem;
      font-weight: 400;
      /* Auf Mobil etwas fetter damit es lesbar bleibt */ }
    .hero-copy .sub {
      font-size: 1rem;
      margin-bottom: 1rem;
      opacity: 0.9; }
    .hero-copy p {
      font-size: 0.95rem;
      /* Fließtext kleiner */
      line-height: 1.4;
      margin-bottom: 0.75rem;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      /* Optional: Text nach 4 Zeilen abschneiden falls zu lang */
      -webkit-box-orient: vertical;
      overflow: hidden; }
    .hero-copy .btn {
      padding-inline: 1.2rem;
      font-size: 0.9rem;
      background-color: white;
      color: black; }

  .hero-actions {
    justify-content: flex-start;
    padding-top: 0.5rem; } }
/* Content Sections Mobile */
.section-seminare .section-copy,
.section-beratung .section-copy {
  margin-top: 0.5rem; }

.section-contact {
  text-align: left; }
  .section-contact .btn {
    margin-bottom: 1rem; }
  .section-contact .row:last-child {
    text-align: center; }
    @media (min-width: 576px) {
      .section-contact .row:last-child {
        text-align: left; } }

/* Extra Large Screens */
@media (min-width: 1200px) {
  .hero-copy {
    max-width: 38rem; } }
/* ============================================
   11) SUBPAGES (RETREATS)
   ============================================ */
.hero-retreats {
  /* --- DESKTOP STANDARD (>= 992px) --- */
  background-color: #e6dfeb;
  /* Beige Hintergrund */
  color: #111111;
  /* Dunkler Text */
  /* Textfarben dunkel (Desktop) */
  /* --- MOBILE STYLES (< 992px) --- */
  /* Hier aktivieren wir den "Index-Look" (Weißer Text auf dunkler Box unten) */ }
  .hero-retreats .hero-copy h1 {
    color: #1d1815; }
  .hero-retreats .hero-copy .sub, .hero-retreats .hero-copy p {
    color: #333333; }
  @media (max-width: 991.98px) {
    .hero-retreats {
      /* Hintergrundbild übernimmt die Farbe, daher transparent */
      background-color: transparent;
      /* Textbox auf den optimierten Index-Standard zwingen */
      /* Burger Menu Icon auf WEISS (wie Index) */ }
      .hero-retreats .hero-copy {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
        /* Etwas weniger Abstand zum Rand */
        width: calc(100% - 2rem);
        /* Breiter machen (weniger Rand) */
        max-width: 34rem;
        margin: 0;
        /* Padding und Größen reduziert! */
        padding: 1.5rem 1.25rem;
        background-color: rgba(23, 18, 13, 0.83);
        /* Dunkle Box */
        border-radius: 1.25rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        /* WICHTIG: Farben auf WEISS zwingen für die dunkle Box */
        color: #ffffff !important;
        /* Buttons kleiner */ }
        .hero-retreats .hero-copy h1 {
          color: #ffffff !important;
          font-size: 1.75rem;
          /* Viel kleiner für Mobile */
          margin-bottom: 0.25rem;
          font-weight: 400; }
        .hero-retreats .hero-copy .sub {
          color: #ffffff !important;
          font-size: 1rem;
          margin-bottom: 1rem;
          opacity: 0.9; }
        .hero-retreats .hero-copy p {
          color: #ffffff !important;
          font-size: 0.95rem;
          line-height: 1.4;
          margin-bottom: 0.75rem;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          /* Text abschneiden wenn zu lang */
          -webkit-box-orient: vertical;
          overflow: hidden; }
        .hero-retreats .hero-copy .btn {
          padding-inline: 1.2rem;
          font-size: 0.9rem; }
      .hero-retreats .hero-nav .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5); }
        .hero-retreats .hero-nav .navbar-toggler .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } }

/* ============================================
   12) RETREAT CARDS SECTION
   ============================================ */
.section-termine {
  background-color: #f4f7fb; }
  .section-termine .row.g-4 {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem; }
  .section-termine .retreat-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    max-width: 380px;
    margin-inline: auto;
    /* BILDANPASSUNG */
    /* TEXTBEREICH */ }
    .section-termine .retreat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); }
    .section-termine .retreat-card .card-image {
      width: 100%;
      /* HIER GEÄNDERT:
         9/16 war zu hoch.
         3/4 ist klassisches Foto-Hochformat.
         Alternativ: 4/5 (noch kompakter).
      */
      aspect-ratio: 3 / 4;
      position: relative;
      background-color: #f0f0f0; }
      .section-termine .retreat-card .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; }
    .section-termine .retreat-card .card-body {
      padding: 2rem 1.5rem;
      /* Padding seitlich leicht reduziert für mehr Platz */
      text-align: center; }
      .section-termine .retreat-card .card-body h3 {
        font-weight: 600;
        color: #111111;
        margin-bottom: 0.5rem; }
      .section-termine .retreat-card .card-body .hotel-name {
        font-weight: 400;
        letter-spacing: 0.02em;
        font-size: 0.95rem; }
      .section-termine .retreat-card .card-body .hotel-stars {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-bottom: 1.5rem; }
        .section-termine .retreat-card .card-body .hotel-stars svg {
          width: 14px;
          height: 14px;
          fill: #e6dfeb; }
      .section-termine .retreat-card .card-body .card-divider {
        margin: 1.5rem auto;
        width: 40px;
        border-top: 2px solid rgba(0, 0, 0, 0.1);
        opacity: 1; }
      .section-termine .retreat-card .card-body .retreat-details {
        margin-bottom: 2rem; }
        .section-termine .retreat-card .card-body .retreat-details li {
          margin-bottom: 0.5rem;
          color: #555;
          font-size: 0.95rem; }
        .section-termine .retreat-card .card-body .retreat-details strong {
          color: #111111;
          font-weight: 500; }
      .section-termine .retreat-card .card-body .btn {
        padding-block: 0.8rem;
        font-size: 1rem; }

/* ============================================
   13) SIMPLE PAGES (IMPRESSUM / DATENSCHUTZ)
   ============================================ */
.hero-simple {
  /* Farben & Gradient */
  background: linear-gradient(135deg, #dfd5d4 0%, #d2c3c2 50%, #bba99f 100%);
  /* Höhe & Layout */
  min-height: auto;
  height: auto;
  /* WICHTIG: Padding oben auf 0.
     Der Abstand kommt allein durch das Padding der .hero-nav (1.5rem),
     welches wir hier NICHT resetten. So springt die Navi nicht. */
  padding-top: 0;
  padding-bottom: 2rem;
  /* Reset für Mobile-Fix */
  /* --- Navigation Anpassung --- */ }
  @media (max-width: 767.98px) {
    .hero-simple {
      height: auto !important;
      padding-top: 0 !important;
      padding-bottom: 1.5rem; } }
  .hero-simple .hero-nav {
    /* Titel "Impressum" (Links neben der Navi) */
    /* BURGER MENU (Mobil): Muss dunkel sein auf dem hellen Gradient */
    /* LINKS (Desktop vs. Mobile Logik) */
    /* Mobil: Links dunkel (da auf hellem Gradient) */
    /* Desktop: Hier stellen wir das Original-Design wieder her! */ }
    .hero-simple .hero-nav .navbar-brand {
      color: #1d1815;
      font-family: 'Poiret One', cursive;
      font-size: 1.6rem;
      font-weight: 600;
      margin-right: auto;
      /* Optischer Ausgleich zur Navi-Höhe */
      transform: translateY(2px); }
    .hero-simple .hero-nav .navbar-toggler {
      border-color: rgba(0, 0, 0, 0.3);
      margin-left: 1rem; }
      .hero-simple .hero-nav .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
    .hero-simple .hero-nav .nav-link {
      color: #111111 !important; }
    @media (min-width: 992px) {
      .hero-simple .hero-nav .nav-black {
        /* Wir lassen den Background schwarz (Original) */
        /* Wir zwingen die Links zurück auf Weiß */ }
        .hero-simple .hero-nav .nav-black .nav-link {
          color: #ffffff !important; }
          .hero-simple .hero-nav .nav-black .nav-link:hover {
            background-color: #333;
            /* Dunkles Grau bei Hover */
            color: #ccc !important; } }

.section-legal {
  background-color: #f4f7fb;
  min-height: 60vh;
  padding-top: 3rem; }
  .section-legal h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600; }
  .section-legal p, .section-legal li {
    font-size: 1rem;
    color: #333; }

/* ============================================
   14) KONTAKT PAGE & UTILITIES
   ============================================ */
/* Utility Klasse für den FAQ-Hintergrund (kann auf Sections angewendet werden) */
.section-bg-faq {
  background-color: #e7e4e2;
  color: #111111; }

/* Spezifisches Styling für den Kontakt-Hero */
.hero-kontakt {
  /* --- DESKTOP STANDARD (>= 992px) --- */
  /* Nutzt die Variable $section-bg-faq (#fcf6f2) */
  background-color: #fcf6f2;
  color: #111111;
  /* Textfarben dunkel (Desktop) */
  /* --- MOBILE STYLES (< 992px) --- */
  /* Gleiche Logik wie bei Retreats: Transparenter BG, damit Bild sichtbar ist,
     und dunkle Box für Text */ }
  .hero-kontakt .hero-copy h1 {
    color: #1d1815; }
  .hero-kontakt .hero-copy .sub, .hero-kontakt .hero-copy p {
    color: #333333; }
  @media (max-width: 991.98px) {
    .hero-kontakt {
      background-color: transparent; }
      .hero-kontakt .hero-copy {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
        width: calc(100% - 2rem);
        max-width: 34rem;
        margin: 0;
        padding: 1.5rem 1.25rem;
        background-color: rgba(23, 18, 13, 0.83);
        /* Dunkle Box */
        border-radius: 1.25rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        /* Text auf Weiß zwingen für Kontrast zur dunklen Box */
        color: #ffffff !important;
        /* Buttons anpassen */ }
        .hero-kontakt .hero-copy h1 {
          color: #ffffff !important;
          font-size: 1.75rem;
          margin-bottom: 0.25rem;
          font-weight: 400; }
        .hero-kontakt .hero-copy .sub {
          color: #ffffff !important;
          font-size: 1rem;
          margin-bottom: 1rem;
          opacity: 0.9; }
        .hero-kontakt .hero-copy p {
          color: #ffffff !important;
          font-size: 0.95rem;
          line-height: 1.4;
          margin-bottom: 0.75rem;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden; }
        .hero-kontakt .hero-copy .btn {
          padding-inline: 1.2rem;
          font-size: 0.9rem; } }

/*# sourceMappingURL=main.css.map */