/* =========================================
 * Beyond Steps – SubPages V5
 * Organisationsentwicklung (V2-Style Balken)
 * =======================================*/


/* -----------------------------------------------------------------
   -----                                                       -----
   -----                Variablen für Sub-Seiten               -----
   -----                                                       -----
   ----------------------------------------------------------------- */

:root {
  /* Gemeinsame max. Breite für Intro, Grid & Content */
  --bs-sub-layout-max-width: 1400px;

  /* Höhe & Padding des Hero-Balkens */
  --bs-sub-hero-height: 177px;        /* Gesamthöhe des Balkens */
  --bs-sub-hero-padding-x: 2.4rem;    /* Innenabstand links/rechts im Balken */

  /* Logo im Balken */
  --bs-sub-hero-logo-width: 77px;     /* Breite des Logos im Balken */

  /* Titel im Balken (z. B. "Organisationsentwicklung") */
  --bs-sub-hero-title-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
  --bs-sub-hero-title-font-family: "Bebas Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-sub-hero-title-letter-spacing: 0.08em;
  --bs-sub-hero-title-font-weight: 400;
  --bs-sub-hero-title-text-transform: uppercase; /* z.B. uppercase, none */

  /* Untertitel im Balken (z. B. "Für Unternehmen") */
  --bs-sub-hero-subtitle-size: 0.95rem;
  --bs-sub-hero-subtitle-font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-sub-hero-subtitle-letter-spacing: 0.16em;
  --bs-sub-hero-subtitle-font-weight: 400;
  --bs-sub-hero-subtitle-text-transform: uppercase;
  --bs-sub-hero-subtitle-opacity: 0.9;

  /* Hero-Hintergrund – Bild & Basis-Gradient (allgemein) */
  --bs-sub-hero-bg-image: url("../assets/img/backgrounds/bg-universe-07.png");
  --bs-sub-hero-bg-size: cover;
  --bs-sub-hero-bg-position: center 25%;
  --bs-sub-hero-bg-gradient-top: rgba(3, 5, 16, 0.3);
  --bs-sub-hero-bg-gradient-bottom: rgba(3, 5, 16, 0.85);

  /* Spezielle Farbnuance für OE (kühleres Blau) */
  --bs-sub-hero-org-gradient-top: rgba(40, 110, 160, 0.45);
  --bs-sub-hero-org-gradient-bottom: rgba(3, 5, 16, 0.9);

  /* Content-Bereich (Hintergrundfarbe = #0C1D27 als RGB + Alpha) */
  --bs-sub-content-bg-rgb: 12, 29, 39;  /* #0C1D27 → 12,29,39 */
  --bs-sub-content-bg-alpha: 1;         /* 0–1, z.B. 0.96 für leicht transparent */

  /* Content-Layout */
  --bs-sub-content-max-width: var(--bs-sub-layout-max-width); /* gleiche Breite wie Grid */
  --bs-sub-content-padding-y: 3.5rem;   /* Abstand oben/unten im Content */
  --bs-sub-section-gap: 3rem;           /* Abstand zwischen Sektionen */

  /* Intro-Block */
  --bs-sub-intro-max-width: var(--bs-sub-layout-max-width);  /* gleiche Breite wie Grid */
  --bs-sub-intro-padding-top: 3.5rem;    /* Abstand vom Hero-Balken nach unten */
  --bs-sub-intro-padding-bottom: 3.2rem; /* Abstand zum folgenden Content */
  --bs-sub-intro-gap: 0.0rem;            /* Abstand zwischen Textzeilen/Elementen */

  --bs-sub-intro-title-size: 1.6rem;     /* Schriftgröße H2 im Intro */
  --bs-sub-intro-text-size: 0.98rem;     /* Fließtextgröße im Intro */
  --bs-sub-intro-text-line-height: 1.6;  /* Zeilenhöhe im Intro-Text */

  /* Intro-CTA (optional) */
  --bs-sub-intro-cta-font-size: 0.9rem;
  --bs-sub-intro-cta-padding-y: 0.55rem;
  --bs-sub-intro-cta-padding-x: 1.4rem;
  --bs-sub-intro-cta-radius: 999px;
  --bs-sub-intro-cta-bg: rgba(255, 255, 255, 0.0);
  --bs-sub-intro-cta-border: rgba(255, 255, 255, 0.4);
  --bs-sub-intro-cta-hover-bg: rgba(255, 255, 255, 0.08);

  /* Root-Variablen für Card-Design */
  --bs-card-bg: rgba(255, 255, 255, 0.03);  /* Grundfarbe */
  --bs-card-bg-hover: rgba(255, 255, 255, 0.06); /* Hover */
  --bs-card-border: rgba(255, 255, 255, 0.12);   /* Rahmen */
  --bs-card-border-hover: rgba(255, 255, 255, 0.22);

  --bs-card-radius: 18px;
  --bs-card-padding: 1.6rem;

  --bs-card-img-height: 300px;                /* Höhe des Card-Bildes (steuerbar) */
  --bs-card-img-radius: var(--bs-card-radius);/* Bildrundung = Card-Rundung oben */

  --bs-card-title-size: 1.25rem;
  --bs-card-title-letterspacing: 0.08em;

  --bs-card-text-size: 0.95rem;
  --bs-card-text-opacity: 0.9;

  --bs-card-transition: 0.25s ease;
  --bs-card-scale-hover: 1.02;

  /* Grid-Abstand & Breite */
  --bs-card-grid-gap: 2rem;
  --bs-card-grid-max-width: var(--bs-sub-layout-max-width);


  /* Horizontal Cards (Bild links/rechts, Text daneben) */
  --bs-hcard-max-width: var(--bs-sub-content-max-width);
  --bs-hcard-bg: rgba(255, 255, 255, 0.03);
  --bs-hcard-bg-hover: rgba(255, 255, 255, 0.06);
  --bs-hcard-border: rgba(255, 255, 255, 0.12);
  --bs-hcard-border-hover: rgba(255, 255, 255, 0.22);
  --bs-hcard-radius: 18px;
  --bs-hcard-padding: 1.8rem;
  --bs-hcard-gap: 1.8rem;          /* Abstand zwischen Bild & Text */
  --bs-hcard-list-gap: 2.4rem;     /* Abstand zwischen mehreren hCards */
  --bs-hcard-media-basis: 34%;     /* Breite des Bildblocks am Desktop */
  --bs-hcard-media-min-height: 180px;

  --bs-hcard-title-size: 1.3rem;
  --bs-hcard-title-letterspacing: 0.08em;

  /* Horizontale Cards (Titel + Text) */
  --bs-hcard-title-font: "Bebas Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-hcard-title-weight: 600;
  --bs-hcard-title-size: clamp(1.2rem, 1.0rem + 0.4vw, 1.5rem);
  --bs-hcard-title-letterspacing: 0.03em;
  --bs-hcard-title-line-height: 1.5;
  --bs-hcard-title-transform: none;

  --bs-hcard-text-size: 0.98rem;
  --bs-hcard-text-line-height: 1.7;

  --bs-hcard-divider-height: 1px;
  --bs-hcard-divider-margin: 0.6rem 0 0.9rem;
  --bs-hcard-divider-color: rgba(255, 255, 255, 0.16); /* links */
  --bs-hcard-divider-fade: rgba(255, 255, 255, 0);     /* rechts */

  --bs-hcard-transition: 0.25s ease;
  --bs-hcard-scale-hover: 1.01;

  /* Footer-Abstand auf Sub-Seiten, damit nichts vom fixen Footer überlappt */
  --bs-sub-footer-safe-space: 5.5rem;  /* an Startseiten-Footer-Höhe angepasst */
}


/* -----------------------------------------------------------------
   -----                                                       -----
   -----             Grundlayout für Sub-Seiten                -----
   -----                                                       -----
   ----------------------------------------------------------------- */

.bs-sub-body {
  /* ruhiger dunkler Hintergrund, steuerbar per RGB+Alpha */
  background-color: rgba(var(--bs-sub-content-bg-rgb), var(--bs-sub-content-bg-alpha));
}

.bs-sub-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Platz nach unten, damit nichts unter den fixen Footer rutscht */
  padding-bottom: var(--bs-sub-footer-safe-space);
}


/* -----------------------------------------------------------------
   -----                                                       -----
   -----           Typografische Rollen – Subpages             -----
   -----                                                       -----
   ----------------------------------------------------------------- */
/* Haupttitel im Content (z. B. Impressum, Datenschutz) */
.bs-heading-main {
  margin: 0 0 1rem;
}

.bs-heading-section {
  margin: 1.6rem 0 1rem;
}

.bs-heading-main + p,
.bs-heading-section + p {
  margin-top: 0;
}



/* -----------------------------------------------------------------
   -----                                                       -----
   -----                    Hero-Balken oben                   -----
   -----                                                       -----
   ----------------------------------------------------------------- */

.bs-sub-hero {
  height: var(--bs-sub-hero-height);
  width: 100%;
  padding: 0 var(--bs-sub-hero-padding-x);

  /* Balken von ganz links bis rechts, oben angelegt */
  background-image:
    linear-gradient(
      to bottom,
      var(--bs-sub-hero-bg-gradient-top),
      var(--bs-sub-hero-bg-gradient-bottom)
    ),
    var(--bs-sub-hero-bg-image);
  background-size: var(--bs-sub-hero-bg-size);
  background-position: var(--bs-sub-hero-bg-position);
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
}

/* leichte Farbnuance für OE (kühleres Blau):
   überschreibt nur die beiden Gradient-Farben via CSS-Variablen */
.bs-sub-hero--org {
  --bs-sub-hero-bg-gradient-top: var(--bs-sub-hero-org-gradient-top);
  --bs-sub-hero-bg-gradient-bottom: var(--bs-sub-hero-org-gradient-bottom);
}

/* Coaching-Variante: mehr Orange, Fokus auf rechte Bildhälfte */
.bs-sub-hero--coach {
  background-image:
    linear-gradient(
      to bottom,
      rgba(220, 120, 40, 0.55),  /* warmes, orangiges Licht */
      rgba(3, 5, 16, 0.9)
    ),
    url("../assets/img/backgrounds/bg-universe-07.png");

  /* etwas weiter nach rechts schieben, damit mehr Orange sichtbar ist */
  background-position: 55% 30%;
}

/* Coaching-Variante: mehr Orange, Fokus auf rechte Bildhälfte */
.bs-sub-hero--aboutme {
  background-image:
    linear-gradient(
      to bottom,
      rgba(220, 120, 40, 0.15),  /* warmes, orangiges Licht */
      rgba(3, 5, 16, 0.9)
    ),
    url("../assets/img/backgrounds/bg-universe-07.png");

  /* etwas weiter nach rechts schieben, damit mehr Orange sichtbar ist */
  background-position: 50% 55%;
}


.bs-sub-hero__inner {
  width: 100%;
}

/* Flex-Bar: Logo links – Titel mittig – Über mich rechts */

.bs-sub-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}


/* Logo links */

.bs-sub-hero__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bs-sub-hero__logo-img {
  width: var(--bs-sub-hero-logo-width);
  height: auto;
  display: block;
}


/* Titel mittig */

.bs-sub-hero__title-block {
  flex: 1 1 auto;
  text-align: center;
}

.bs-sub-hero__title {
  margin: 0;
  font-family: var(--bs-sub-hero-title-font-family);
  font-size: var(--bs-sub-hero-title-size);
  letter-spacing: var(--bs-sub-hero-title-letter-spacing);
  font-weight: var(--bs-sub-hero-title-font-weight);
  text-transform: var(--bs-sub-hero-title-text-transform);
}

.bs-sub-hero__subtitle {
  margin: 0.2rem 0 0;
  font-family: var(--bs-sub-hero-subtitle-font-family);
  font-size: var(--bs-sub-hero-subtitle-size);
  letter-spacing: var(--bs-sub-hero-subtitle-letter-spacing);
  font-weight: var(--bs-sub-hero-subtitle-font-weight);
  text-transform: var(--bs-sub-hero-subtitle-text-transform);
  opacity: var(--bs-sub-hero-subtitle-opacity);
}


/* Über mich rechts */

.bs-sub-hero__about {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.0);
  background: rgba(3, 5, 16, 0.0);
  backdrop-filter: blur(10px);
  color: #ffffff;
  white-space: nowrap;
}

.bs-sub-hero__about:hover,
.bs-sub-hero__about:focus-visible {
  background: rgba(3, 5, 16, 0.55);
  text-decoration: none;
}



/* -----------------------------------------------------------------
   -----                                                       -----
   -----                    Intro-Block oben                   -----
   -----                                                       -----
   ----------------------------------------------------------------- */

.bs-sub-intro {
  width: 100%;
  max-width: var(--bs-sub-intro-max-width);
  margin: 0 auto;
  padding: var(--bs-sub-intro-padding-top) var(--bs-sub-hero-padding-x)
           var(--bs-sub-intro-padding-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--bs-sub-intro-gap);
}

.bs-sub-intro__title {
  margin: 0;
  font-family: "Bebas Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: var(--bs-sub-intro-title-size);
  letter-spacing: 0.08em;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25; /* neu: dichter, wirkt edler */
}

.bs-sub-intro__text {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--bs-sub-intro-text-size);
  line-height: var(--bs-sub-intro-text-line-height);
  opacity: 0.96;
}

.bs-sub-intro__cta {
  margin-top: 0.8rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: var(--bs-sub-intro-cta-font-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;

  padding: var(--bs-sub-intro-cta-padding-y) var(--bs-sub-intro-cta-padding-x);
  border-radius: var(--bs-sub-intro-cta-radius);
  border: 1px solid var(--bs-sub-intro-cta-border);
  background: var(--bs-sub-intro-cta-bg);
  color: #ffffff;
}

.bs-sub-intro__cta:hover,
.bs-sub-intro__cta:focus-visible {
  background: var(--bs-sub-intro-cta-hover-bg);
  text-decoration: none;
}


/* -----------------------------------------------------------------
   -----                                                       -----
   -----                Content-Bereich darunter               -----
   -----                                                       -----
   ----------------------------------------------------------------- */

.bs-sub-content {
  width: 100%;
  max-width: var(--bs-sub-content-max-width);
  margin: 0 auto;
  padding: var(--bs-sub-content-padding-y) var(--bs-sub-hero-padding-x) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--bs-sub-section-gap);
}

/* Einzelne Sektion */

.bs-sub-section__title {
  margin: 0 0 0.75rem;
  font-family: "Bebas Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  text-transform: uppercase;
}

.bs-sub-section__text {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.98rem;
  line-height: 1.8;
  opacity: 0.96;
}

/* Listen innerhalb der Content-Sektionen (3. Ebene / Detailpunkte) */
.bs-sub-section__list {
  margin: 0.6rem 0 0;
  padding-left: 1.3rem;
  list-style-type: disc;

  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;
  opacity: 0.96;
}

.bs-sub-section__list li + li {
  margin-top: 0.25rem;
}




/* -----------------------------------------------------------------
   -----                                                       -----
   -----                      Cards Design                     -----
   -----                                                       -----
   ----------------------------------------------------------------- */

/* Grid-Container */
.bs-card-grid {
  width: 100%;
  max-width: var(--bs-card-grid-max-width);
  margin: 0 auto;
  padding: 0 var(--bs-sub-hero-padding-x);      /* gleiche Innenbreite wie Intro/Content */
  display: grid;
  gap: var(--bs-card-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card-Grundstruktur */
.bs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border);
  border-radius: var(--bs-card-radius);
  padding: 0; /* wichtig: kein Padding mehr – Bild kann volle Breite nutzen */
  transition: var(--bs-card-transition);
  backdrop-filter: blur(3px);
  overflow: hidden; /* runde Ecken greifen für Bild & Body */
}

.bs-card:hover {
  background: var(--bs-card-bg-hover);
  border-color: var(--bs-card-border-hover);
  transform: scale(var(--bs-card-scale-hover));
}

/* Bild oben – wirklich volle Card-Breite */
.bs-card__img {
  display: block;
  width: 100%;
  height: var(--bs-card-img-height);
  object-fit: cover;
  margin: 0;
  border-radius: var(--bs-card-img-radius) var(--bs-card-img-radius) 0 0;
}

/* Body mit Inhalt (Text) */
.bs-card__body {
  padding: var(--bs-card-padding);
  display: flex;
  flex-direction: column;
}

/* Titel */
.bs-card__title {
  margin: 0 0 0.6rem;
  font-size: var(--bs-card-title-size);
  letter-spacing: var(--bs-card-title-letterspacing);
  font-family: "Bebas Neue", system-ui;
  text-transform: uppercase;
}

/* Text */
.bs-card__text {
  margin: 0;
  font-family: "Manrope", system-ui;
  font-size: var(--bs-card-text-size);
  opacity: var(--bs-card-text-opacity);
  line-height: 1.6;
}


/* -----------------------------------------------------------------
   -----                                                       -----
   -----         Horizontale Cards (Bild links/rechts)         -----
   -----                                                       -----
   ----------------------------------------------------------------- */

/* Liste mehrerer horizontaler Cards untereinander */
.bs-hcard-list {
  width: 100%;
  max-width: var(--bs-hcard-max-width);
  margin: 0 auto;
  padding: 0 var(--bs-sub-hero-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--bs-hcard-list-gap);
}

/* Die Card selbst – kann <article> oder <a> sein */
.bs-hcard {
  display: flex;
  align-items: stretch;
  text-decoration: none;

  background: var(--bs-hcard-bg);
  border: 1px solid var(--bs-hcard-border);
  border-radius: var(--bs-hcard-radius);
  overflow: hidden;
  backdrop-filter: blur(3px);

  transition: var(--bs-hcard-transition);
}

.bs-hcard:hover {
  background: var(--bs-hcard-bg-hover);
  border-color: var(--bs-hcard-border-hover);
  transform: scale(var(--bs-hcard-scale-hover));
}

/* Flag: Bild rechts, Text links */
.bs-hcard--reverse {
  flex-direction: row-reverse;
}

/* Bildbereich */
.bs-hcard__media {
  flex: 0 0 var(--bs-hcard-media-basis);
  min-height: var(--bs-hcard-media-min-height);
  position: relative;
}

.bs-hcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Textbereich */
.bs-hcard__body {
  flex: 1 1 auto;
  padding: var(--bs-hcard-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

/* Überschrift */
.bs-hcard__title {
  margin: 0 0 0.35rem;
  font-family: var(--bs-hcard-title-font);
  font-weight: var(--bs-hcard-title-weight);
  font-size: var(--bs-hcard-title-size);
  letter-spacing: var(--bs-hcard-title-letterspacing);
  line-height: var(--bs-hcard-title-line-height);
  text-transform: var(--bs-hcard-title-transform);
}

/* Gradient-Strich zwischen Titel und Text */
.bs-hcard__divider {
  width: 100%;
  height: var(--bs-hcard-divider-height);
  margin: var(--bs-hcard-divider-margin);
  background: linear-gradient(
    to right,
    var(--bs-hcard-divider-color),
    var(--bs-hcard-divider-fade)
  );
}

/* Text */
.bs-hcard__text {
  margin: 0;
  font-family: "Manrope", system-ui;
  font-size: var(--bs-hcard-text-size);
  line-height: var(--bs-hcard-text-line-height);
  opacity: 0.96;
}


/* -----------------------------------------------------------------
   -----                                                       -----
   -----         Coaching – ruhiger Flow (ohne Boxen)          -----
   -----                                                       -----
   ----------------------------------------------------------------- */

:root {
  /* Lesebreite & Rhythmus */
  --bs-coach-text-max-width: 680px;
  --bs-coach-flow-gap: 3.2rem;

  /* Typo */
  --bs-coach-title-size: 1.05rem;
  --bs-coach-title-letter: 0.18em;

  --bs-coach-text-size: 1.02rem;
  --bs-coach-text-line: 1.9;

  /* Farbe/Glanz (subtil, warm) */
  --bs-coach-soft: rgba(255, 255, 255, 0.86);
  --bs-coach-dim: rgba(255, 255, 255, 0.72);
  --bs-coach-accent: rgba(220, 120, 40, 0.55); /* warm, passend zum Hero */

  /* Typo – Intro separat (damit nur der Introtext reagiert) */
  --bs-coach-intro-text-size: 1.09rem;
  --bs-coach-intro-text-line: 1.9;

}

/* Intro fürs Coaching: schmaler, mehr Atem */
.bs-coach-intro {
  max-width: var(--bs-coach-text-max-width);
}

.bs-coach-intro .bs-sub-intro__title {
  /* leiser, weniger „Headline“, mehr Einladung */
  letter-spacing: 0.12em;
  opacity: 0.95;
}

.bs-coach-intro .bs-sub-intro__text {
  font-size: var(--bs-coach-intro-text-size);
  line-height: var(--bs-coach-intro-text-line);
  max-width: var(--bs-coach-text-max-width);
  opacity: 0.92;
}

.bs-coach-cta {
  /* CTA soll nicht schreien -> eher „gefunden werden“ */
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

.bs-coach-cta:hover,
.bs-coach-cta:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

/* Flow-Section: gleiche Container-Mechanik, aber schmale Lesebreite */
.bs-coach-flow {
  gap: var(--bs-coach-flow-gap);
}

.bs-coach-block {
  max-width: var(--bs-coach-text-max-width);
}

.bs-coach-block__title {
  margin: 0 0 0.9rem;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--bs-coach-title-size);
  letter-spacing: var(--bs-coach-title-letter);
  text-transform: uppercase;
  opacity: 0.9;
}

.bs-coach-block__text p {
  margin: 0;
  font-family: "Manrope", system-ui;
  font-size: var(--bs-coach-text-size);
  line-height: var(--bs-coach-text-line);
  color: var(--bs-coach-soft);
  opacity: 0.92;
}

.bs-coach-block__text p + p {
  margin-top: 1.05rem; /* Atem zwischen Absätzen */
}

/* Link-CTA am Ende: textlich, warm, subtil */
.bs-coach-link {
  display: inline-flex;
  margin-top: 1.2rem;
  text-decoration: none;
  font-family: "Manrope", system-ui;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0.95;
}

.bs-coach-link:hover,
.bs-coach-link:focus-visible {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 0 22px rgba(220, 120, 40, 0.22);
}

/* Mobile: etwas weniger Lesebreite + größere Luft */
@media (max-width: 650px) {
  :root {
    --bs-coach-text-max-width: 92vw;
    --bs-coach-flow-gap: 2.6rem;
  }

  .bs-coach-block__text p + p {
    margin-top: 0.9rem;
  }
}

/* =========================================
   Coaching – Feinschliff: Kicker, Center, Titel + Linie
   ========================================= */

/* 2) Blöcke zentrieren, Text bleibt links */
.bs-coach-intro,
.bs-coach-block {
  margin-inline: auto;
}

.bs-coach-block__text,
.bs-coach-intro .bs-sub-intro__text {
  text-align: left;
}

/* 3) Header größer + edler */
:root {
  --bs-coach-title-size: 1.22rem; /* vorher ~1.05 */
  --bs-coach-title-letter: 0.14em;
  --bs-coach-title-weight: 600;

  /* 4) Linienfarbe: warm, edel, nicht zu bunt */
  --bs-coach-line-a: rgba(220, 120, 40, 0.55);
  --bs-coach-line-b: rgba(220, 120, 40, 0.10);
  --bs-coach-line-c: rgba(220, 120, 40, 0.00);
}

.bs-coach-block__title {
  font-size: var(--bs-coach-title-size);
  letter-spacing: var(--bs-coach-title-letter);
  font-weight: var(--bs-coach-title-weight);
  position: relative;
  padding-bottom: 0.9rem; /* Platz für die Linie */
}

/* 4) Feine Gradient-Linie unter dem Titel */
.bs-coach-block__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  height: 1px;
  width: min(380px, 72%);
  background: linear-gradient(
    90deg,
    var(--bs-coach-line-a) 0%,
    var(--bs-coach-line-b) 55%,
    var(--bs-coach-line-c) 100%
  );
  opacity: 0.9;
}

/* 1) Kicker im Hero: ganz leise, aber präsent */
.bs-coach-kicker {
  margin: 0 0 0.65rem;
  font-family: "Manrope", system-ui;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}




/* -----------------------------------------------------------------
   -----                                                       -----
   -----                  Responsive Verhalten                 -----
   -----                                                       -----
   ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .bs-hcard {
    flex-direction: column;
  }

  .bs-hcard--reverse {
    flex-direction: column; /* auf Mobile egal, Bild immer oben */
  }

  .bs-hcard__media {
    flex-basis: auto;
    min-height: 180px;
  }
}




/* -----------------------------------------------------------------
   -----                                                       -----
   -----        Footer-Verhalten auf Sub-Seiten (nicht fix)    -----
   -----                                                       -----
   ----------------------------------------------------------------- */

/* Auf Sub-Seiten soll der Footer NICHT fixed am Viewport kleben,
   sondern normal unterhalb des Inhalts stehen. */
.bs-sub-body .bs-v5-footer {
  position: static;   /* löst bottom:0 / fixed aus styles.css auf */
  inset: auto;
  width: 100%;
  margin-top: 3rem;   /* etwas Luft zum letzten Inhalt */
}



/* -----------------------------------------------------------------
   -----                                                       -----
   -----                   Responsive Tweaks                   -----
   -----                                                       -----
   ----------------------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --bs-sub-hero-height: 230px;
    --bs-sub-hero-logo-width: 120px;
  }

  .bs-sub-hero__bar {
    gap: 1rem;
  }

  .bs-sub-content {
    padding-bottom: 5.8rem; /* Platz über Footer (fixed) */
  }
}

@media (max-width: 650px) {
  .bs-sub-hero {
    height: auto;
    padding-top: 1.6rem;
    padding-bottom: 1.8rem;
  }

  .bs-sub-hero__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bs-sub-hero__title-block {
    order: 2;
  }

  .bs-sub-hero__logo {
    order: 1;
  }

  .bs-sub-hero__about {
    order: 3;
    margin-top: 0.8rem;
  }

  .bs-sub-intro {
    padding: 2.4rem 1.4rem 2.6rem;
  }

  .bs-sub-content {
    padding: 2.8rem 1.4rem 5.8rem;
  }

  .bs-card-grid {
    padding: 0 1.4rem;
  }
}