.bh-praxis {
  /* lokale Hilfsvariablen, nur in diesem Scope */
  --bhp-ink: var(--primary, #35415a);
  --bhp-accent: var(--secondary, #d9ae79);

  font-size: var(--text-m, 1.8rem);
  line-height: 1.6;
  color: var(--primary, #35415a);
}
.bh-praxis *,
.bh-praxis *::before,
.bh-praxis *::after { box-sizing: border-box; }

/* Tag-Resets bewusst in :where(), damit ihre Spezifitaet 0,1,0
   bleibt und Klassen-Regeln darunter noch gewinnen koennen. */
/* overflow-wrap/hyphens sind hier nicht Kosmetik: Ohne sie sprengt
   ein langes Kompositum wie "Gesundheitsressourcen" auf schmalen
   Schirmen die Grid-Spur (Grid-Items haben min-width: auto) und die
   ganze Seite scrollt horizontal. Am 14.08.2026 auf 375px gemessen:
   8px Ueberlauf, verursacht von genau dieser H2. */
.bh-praxis :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--bhp-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.bh-praxis :where(p) { margin: 0; }
.bh-praxis :where(figure) { margin: 0; }
.bh-praxis :where(blockquote) { margin: 0; }
.bh-praxis :where(img) { display: block; max-width: 100%; height: auto; }
/* Links erben die Textfarbe, damit sie auch auf der dunklen Section
   lesbar bleiben. Buttons sind ausgenommen: sonst gewinnt diese Regel
   gegen ACSS (beide 0,1,0, dieses Stylesheet laedt spaeter) und der
   Buttontext bekaeme die Hintergrundfarbe. Live verifiziert 31.07. */
.bh-praxis :where(a:not([class*="btn--"])) { color: inherit; }

/* ---------- Layout ---------- */
.bh-praxis__container {
  width: var(--content-width-safe, min(128rem, calc(100% - 6rem)));
  max-width: var(--content-width, 128rem);
  margin-inline: auto;
}
.bh-praxis__container--narrow { max-width: 90rem; }

/* Grid-Spuren duerfen nicht vom Inhalt aufgedrueckt werden.
   Der Default min-width: auto laesst breite Kinder die Spur
   sprengen, was auf Mobil horizontales Scrollen erzeugt. */
.bh-praxis__hero-grid > *,
.bh-praxis__split > *,
.bh-praxis__cards > *,
.bh-praxis__cta > * { min-width: 0; }

.bh-praxis__section {
  padding-block: var(--section-space-m, 12rem);
  scroll-margin-top: 3rem;
}
.bh-praxis__section--sand { background-color: var(--secondary-light, #eedbc3); }
.bh-praxis__section--soft { background-color: var(--primary-ultra-light, #eff1f6); }
.bh-praxis__section--dark {
  background-color: var(--primary, #35415a);
  --bhp-ink: var(--white, #fff);
  color: var(--primary-ultra-light, #eff1f6);
}

/* ---------- Wiederkehrende Bausteine ---------- */
.bh-praxis__eyebrow {
  font-family: "Cinzel-lokal", "Cinzel", Georgia, serif;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bhp-ink);
  opacity: 0.75;
  margin-bottom: 1.2rem;
}
.bh-praxis__divider {
  width: 4.8rem;
  height: 2px;
  background-color: var(--bhp-accent);
  border: 0;
  margin: 2rem 0 2.4rem;
}
.bh-praxis__divider--center { margin-inline: auto; }

.bh-praxis__lead {
  font-size: var(--text-l, 2.4rem);
  line-height: 1.5;
}
.bh-praxis__note {
  font-size: 1.5rem;
  opacity: 0.75;
  margin-top: 2rem;
}
.bh-praxis__prose > * + * { margin-top: 1.6rem; }
.bh-praxis__prose a { text-decoration: underline; text-underline-offset: 0.3rem; }

.bh-praxis__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 3rem;
}
/* ACSS-Buttons sind display:inline, dadurch wuerde das vertikale
   Padding die Nachbarzeilen ueberlappen. Nur das Layout wird hier
   korrigiert, Farben und Groessen bleiben bei ACSS. */
.bh-praxis .btn--primary,
.bh-praxis .btn--secondary,
.bh-praxis .btn--outline,
.bh-praxis .btn--white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.bh-praxis__head {
  text-align: center;
  max-width: 68rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl, 6.75rem);
}

/* ---------- Hero ---------- */
.bh-praxis__hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--grid-gap, 3rem);
  align-items: center;
}
/* 3/2 entspricht dem Seitenverhaeltnis der Datei (1536x1026),
   dadurch kein Beschnitt. Bei 4/3 muesste rund ein Viertel der
   Breite weg und das Motiv wirkt zerschnitten. */
.bh-praxis__hero-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius, 1rem);
}

/* ---------- Text-Bild-Sektionen ---------- */
.bh-praxis__split {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: var(--space-xl, 6.75rem);
  align-items: start;
}
/* Gespiegelte Variante: Bild links, Text rechts. Die Spuren werden
   mitgedreht, sonst landet das Bild in der breiten Spalte und der
   Text in der schmalen. Im Einsatz bei "Die Praxis", damit die
   Sektion nicht genauso aufgebaut ist wie der Hero direkt darueber. */
.bh-praxis__split--reverse { grid-template-columns: 0.7fr 1fr; }
.bh-praxis__split--reverse .bh-praxis__split-text { order: 2; }
.bh-praxis__split--reverse .bh-praxis__split-figure { order: 1; }

.bh-praxis__split-figure { position: sticky; top: 4rem; }
.bh-praxis__split-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius, 1rem);
}
.bh-praxis__split-figure figcaption {
  font-size: 1.5rem;
  opacity: 0.7;
  margin-top: 1.2rem;
}
/* Das Portrait ist hochformatig (900x1350). Ohne eigene Regel wuerde
   es die 4/3-Flaeche der uebrigen Bilder erben und auf zwei Drittel
   beschnitten. Hier steht es unbeschnitten im Originalverhaeltnis. */
.bh-praxis__split-figure--portrait img {
  aspect-ratio: auto;
  object-fit: fill;
}

/* ---------- Zitat ---------- */
.bh-praxis__quote {
  margin-top: 3rem;
  /* Padding vollstaendig gesetzt, falls ACSS am blockquote-Tag
     eigene Werte mitbringt. */
  padding: 0 0 0 2.4rem;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--bhp-accent);
}
.bh-praxis__quote p + p { margin-top: 1.6rem; }
.bh-praxis__quote p { font-style: italic; }
.bh-praxis__quote-author {
  margin-top: 2rem;
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* ---------- Karten ---------- */
/* Feste Spaltenzahl statt auto-fill: Bei fuenf Karten ergaebe
   auto-fill auf breiten Schirmen vier Spalten, die fuenfte Karte
   stuende allein in der zweiten Reihe. Mit drei Spalten wird es
   3 + 2. */
.bh-praxis__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap, 3rem);
}
.bh-praxis__card {
  background-color: var(--white, #fff);
  border-radius: var(--radius, 1rem);
  padding: var(--space-m, 3rem);
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--bhp-accent);
}
.bh-praxis__card h3 {
  font-size: 2.2rem;
  line-height: 1.3;
  margin-bottom: 1.4rem;
}
.bh-praxis__card p { font-size: 1.7rem; }

/* ---------- FAQ ---------- */
.bh-praxis__faq {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.bh-praxis__faq-item {
  background-color: var(--white, #fff);
  border-radius: var(--radius-s, 0.6666666667rem);
}
.bh-praxis__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2rem var(--space-m, 3rem);
  cursor: pointer;
  list-style: none;
  font-family: "Cinzel-lokal", "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--bhp-ink);
}
.bh-praxis__faq-item summary::-webkit-details-marker { display: none; }
.bh-praxis__faq-item summary::after {
  content: "+";
  font-size: 2.6rem;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--bhp-accent);
  transition: transform 0.2s ease;
}
.bh-praxis__faq-item[open] summary::after { transform: rotate(45deg); }
.bh-praxis__faq-body {
  padding: 0 var(--space-m, 3rem) 2.4rem;
}
.bh-praxis__faq-body a { text-decoration: underline; text-underline-offset: 0.3rem; }

/* ---------- Kontakt ---------- */
.bh-praxis__cta {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl, 6.75rem);
  align-items: start;
}
.bh-praxis__cta-link {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  font-size: 1.7rem;
}
.bh-praxis__contact {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(255, 255, 255, 0.25);
  padding-left: var(--space-m, 3rem);
}
.bh-praxis__contact-label {
  font-family: "Cinzel-lokal", "Cinzel", Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 1rem;
}
.bh-praxis__contact-label--spaced { margin-top: 2.8rem; }
.bh-praxis__contact-line { font-size: 1.7rem; line-height: 1.7; }
.bh-praxis__contact-line a { text-decoration: underline; text-underline-offset: 0.3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .bh-praxis__hero-grid,
  .bh-praxis__split,
  .bh-praxis__split--reverse,
  .bh-praxis__cta {
    grid-template-columns: 1fr;
    gap: var(--space-l, 4.5rem);
  }
  .bh-praxis__split--reverse .bh-praxis__split-text { order: 1; }
  .bh-praxis__split--reverse .bh-praxis__split-figure { order: 2; }
  .bh-praxis__split-figure { position: static; }

  /* Zwischenstufe fuer die Karten: drei Spalten waeren hier zu eng,
     eine einzige zu breit. Bei zwei Spalten bliebe die fuenfte Karte
     allein stehen, deshalb fuellt sie die letzte Reihe. */
  .bh-praxis__cards { grid-template-columns: repeat(2, 1fr); }
  .bh-praxis__cards > *:last-child { grid-column: 1 / -1; }
  .bh-praxis__contact {
    border-left: 0;
    padding-left: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.25);
    padding-top: var(--space-m, 3rem);
  }
}

@media (max-width: 768px) {
  .bh-praxis__cards { grid-template-columns: 1fr; }
  .bh-praxis__head { margin-bottom: var(--space-l, 4.5rem); }
  .bh-praxis__split-figure img { aspect-ratio: 3 / 2; }
  /* Das Portrait behaelt auch hier sein Hochformat. */
  .bh-praxis__split-figure--portrait img { aspect-ratio: auto; }
}

@media (max-width: 560px) {
  .bh-praxis__actions { flex-direction: column; align-items: stretch; }
  .bh-praxis__actions > * { width: 100%; }
  .bh-praxis__faq-item summary { padding: 1.8rem 2rem; font-size: 1.8rem; }
  .bh-praxis__faq-body { padding: 0 2rem 2rem; }
  .bh-praxis__card { padding: 2.4rem; }
  .bh-praxis__quote { padding: 0 0 0 1.8rem; }
}
/* ============================================================
   CSS-STYLESHEET ENDE
   ============================================================ */
</style>