/* Scroll-to-top Button */
.btn-scroll-top {
  bottom: 20px !important;
  right: 20px !important;
  opacity: 0.45 !important;
  transform: scale(0.65) !important;
  transform-origin: center center !important;
  transition: opacity 0.3s ease !important;
}

.btn-scroll-top:hover {
  opacity: 0.9 !important;
}

@media (min-width: 992px) and (max-width: 1399px) {
  .card-title-compact {
    font-size: 1.15rem;
  }
}

/* Navbar: trim nav-link horizontal padding from 16px to 10px per side at the
   xl breakpoint (where the full horizontal nav shows) so all seven nav items
   fit on one row without wrapping down to ~1200px, incl. the longer French
   labels. Scoped selector matches the theme's own specificity so it wins. */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

/* Between 1200px and 1400px the container is fluid (95% of the viewport), so
   the available room for the nav grows steadily with the window while the flat
   0.625rem above would leave a widening gap of empty space next to the items.
   Step the nav-link padding up in stages so that growing room is used for more
   even spacing instead of dead whitespace, then settle at 1.25rem once the
   container caps at its 1328px max-width (from 1400px up). Each step's padding
   was picked as the widest value that still keeps a single row for the tightest
   French labels at the low edge of its range, with a safety margin no tighter
   than the long-standing 0.625rem/1200px baseline (measured FR clearances:
   1200px 25px · 1250px 45px · 1300px 36px · 1350px 56px · 1400px 73px; DE and
   EN have more room). Rules are ordered by ascending breakpoint so the highest
   matching one wins the cascade. */
@media (min-width: 1250px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
@media (min-width: 1300px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1350px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* =====================================================================
   Conversion-Paket (Index DE/EN/FR) — zentralisiert aus den drei
   Inline-<style>-Bloecken. Wirkt nur auf den Index-Seiten, da die
   Klassen/IDs (.cta-island, .sec-gap-*, #cta-whatsapp-dark, #training,
   #kontakt/#contact) ausschliesslich dort vorkommen.
   ===================================================================== */

/* Einheitliches Section-Spacing (Mobile-Basis <768px): Abstand jeweils
   per margin-top am unteren Block; facing Section-Paddings sind im HTML
   via *-md-Varianten auf Mobile neutralisiert. */
@media (max-width: 767.98px) {
  .sec-gap-standard   { margin-top: 6rem !important; }  /* 96px  – gleicher Hintergrund */
  .sec-gap-transition { margin-top: 9rem !important; }  /* 144px – Farbwechsel */
  .sec-gap-heading    { margin-top: 2rem !important; }  /* 32px  – Heading->Content innerhalb eines Blocks */
  /* Kontakt-Section (DE #kontakt / EN+FR #contact) traegt Inline-padding 80px -> auf Mobile neutralisieren */
  #kontakt, #contact { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (min-width: 768px) {
  /* Training-Section: Desktop-Wert der bisherigen Inline-margin bewahren (ID schlaegt my-xxl-5) */
  #training { margin-top: 5rem !important; }
}
/* Startseite: CTA-Block ohne Kasten (gemeinsame .cta-block-Logik, Basis-Margin wie Ueber mich: 72px mobil / 96px ab 768px).
   Der Rest-Abstand der Vorgaenger-Section (Absatz-Margin, Row-Padding/-Margin, Section-Padding/-Margin) entfaellt, damit
   der Abstand allein aus .cta-block kommt. :has(), weil die Section ein Geschwister vor .cta-island ist.
   Unten: 96px bis zur naechsten Section ("Leistungen"), Standardabstand des Projekts (.sec-gap-standard). */
section:has(+ .cta-island) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
section:has(+ .cta-island) .row { padding-bottom: 0 !important; margin-bottom: 0 !important; }
section:has(+ .cta-island) .row > :last-child p:last-child { margin-bottom: 0; }
.cta-island > .cta-block { margin-bottom: 0; }
.cta-island { margin-top: 0; margin-bottom: 0; }

/* Startseite: Uebergang About (Leitsatz) -> Foto der Folgesection: 64px mobil / 80px (768-991px) / 96px (ab 992px) bis zum Foto.
   Der Abstand kommt allein aus dem padding-top der Folgesection (kollabiert nicht mit dem row-Margin); About-Padding/-Margin
   und die Margins der Folgesection (sec-gap-standard, my-*) entfallen nur an diesem Uebergang. Innen-Versatz bis zum Foto:
   8px mobil (row py-2), 32px ab 768px (row my-md-3 + py-sm-3) -> Padding 56 / 48 / 64px. */
.about-gap { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.about-gap + section { margin-top: 0 !important; padding-top: 56px !important; }
@media (min-width: 768px) {
  .about-gap + section { padding-top: 48px !important; }
}
@media (min-width: 992px) {
  .about-gap + section { padding-top: 64px !important; }
}

/* Startseite: CTA-Block gestaerkt (cta-block--primary). Ueberschrift in H2-Groesse der Startseite (Klasse .h1), Gewicht 600.
   Abstand oben und unten je 96px mobil / 112px (768-991px) / 128px (ab 992px); Ueberschrift -> Buttons 1.5rem / 2rem ab 768px. */
.cta-island > .cta-block--primary { margin-top: 96px; margin-bottom: 96px; }
.cta-block--primary h2 { margin-bottom: 1.5rem; font-weight: 600; }
@media (min-width: 768px) {
  .cta-island > .cta-block--primary { margin-top: 112px; margin-bottom: 112px; }
  .cta-block--primary h2 { margin-bottom: 2rem; }
}
@media (min-width: 992px) {
  .cta-island > .cta-block--primary { margin-top: 128px; margin-bottom: 128px; }
}

/* Leistungsuebersicht-Box (Leistungsdetailseiten DE/EN/FR) */
.leistungsuebersicht-card {
  clear: both;
  margin: 64px 0 0;
  padding: 22px 22px 10px;
  background: #eaf4f0;
  border-radius: 16px;
}
.leistungsuebersicht-label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a6b50;
}
.leistungsuebersicht-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.leistungsuebersicht-list li {
  position: relative;
  padding: 0 0 14px 22px;
  font-size: 17px;
  line-height: 1.5;
}
.leistungsuebersicht-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27A078;
}
.leistungsuebersicht-text { color: #121519; }
@media (min-width: 768px) {
  .leistungsuebersicht-card { margin-top: 80px; padding: 28px 32px 14px; }  /* unten 14px + li-padding 14px = 28px */
}

/* Abstand letztes Inhaltselement -> Ueberschrift "Haeufige Fragen".
   Ab 992px: 80px (Leistungsseiten), 112px (Standorte). Unter 992px (auch 768-991px) jeweils 16px weniger,
   gesteuert ueber --faq-trim. Mobil (<768px) bleibt zusaetzlich die bisherige Staffelung 64px statt 80px.
   .faq-section: Leistungsseiten; Inhaltsabschnitt davor hat kein Padding unten, die Box kein margin-bottom,
   der Abstand kommt allein aus padding-top (kollabiert nicht).
   --after-pb2: Workshop-Seiten, dort kommen 8px Callout-margin-bottom + 8px Section-Padding (pb-2) des
   Vorgaengers dazu -> 16px weniger padding-top.
   --trim: Standorte, Section behaelt py-5 (48px) und der Wrapper 3rem; hier wird nur die Reduktion unter 992px abgezogen. */
:root { --faq-trim: 16px; }
@media (min-width: 992px) {
  :root { --faq-trim: 0px; }
}
.faq-section { padding-top: calc(64px - var(--faq-trim)) !important; }
.faq-section--after-pb2 { padding-top: calc(48px - var(--faq-trim)) !important; }
.faq-section--trim { padding-top: calc(3rem - var(--faq-trim)) !important; }
@media (min-width: 768px) {
  .faq-section { padding-top: calc(80px - var(--faq-trim)) !important; }
  .faq-section--after-pb2 { padding-top: calc(64px - var(--faq-trim)) !important; }
}

/* Workshop-Seiten: Abschnittsuebergaenge "Walk & Talk im Team" -> "So laeuft ein Workshop ab" und Ablauf -> "Fuer wen ..."
   je 48px mobil / 64px (768-991px) / 80px (ab 992px), allein ueber padding-top (--faq-trim wie bei .faq-section). Trailing-Margins der letzten Elemente stehen auf mb-0
   (kein Margin-Collapsing, kein Doppelabstand). */
.section-gap { padding-top: calc(64px - var(--faq-trim)) !important; }
@media (min-width: 768px) {
  .section-gap { padding-top: calc(80px - var(--faq-trim)) !important; }
}

/* Seniorensport: Abstand vor dem Callout "Fuer deine Familie". Ab 601px kollabiert der 40px-Margin mit dem p-Margin (= 40px).
   <=600px ist .about-block ein Flex-Container, dort addiert sich der p-Margin (18px) -> Margin um 18px kuerzen = 40px. */
@media (max-width: 600px) {
  .callout-family { margin-top: calc(2.5rem - 1.125rem) !important; }
}

/* FAQ-Hauptseite: Einleitung -> erste FAQ-Karte ohne Trennlinie, 32px mobil / 40px Desktop
   (16px kollabiertes p-Margin der Einleitung + Padding hier). */
.faq-list-section { padding-top: 16px !important; }
@media (min-width: 768px) {
  .faq-list-section { padding-top: 24px !important; }
}

/* CTA-Block am Seitenende ohne Hintergrundflaeche. Abstand oben 72px mobil / 96px Desktop, unten 56px / 72px.
   Basis: kein Padding der Section davor, 48px Section-Padding (pb-5) darunter -> margin unten 8px / 24px.
   --after-section: Section davor hat 48px Padding unten (Leistungsseiten, FAQ-Section) -> margin oben 24px / 48px.
   --end: kein Section-Padding darunter (Ueber mich) -> margin unten 56px / 72px. */
.cta-block { margin: 72px 0 8px; text-align: center; }
.cta-block--after-section { margin-top: 24px; }
.cta-block--end { margin-bottom: 56px; }
@media (min-width: 768px) {
  .cta-block { margin: 96px 0 24px; }
  .cta-block--after-section { margin-top: 48px; }
  .cta-block--end { margin-bottom: 72px; }
}
/* Crosslink-Block (service-links-grid): Standorte, Ueber mich, FAQ (je DE/EN/FR), 7 Links.
   Mobil (<768px): zwei gleich breite Spalten, 2/2/2/1, der siebte Link ueber beide Spalten zentriert.
   Ab 768px: zentriertes Flex-Wrap, max-width 47rem -> 4/3. 768-991px: Spaltenabstand 1.25rem (Container nur ~696px),
   ab 992px: 2rem. */
.service-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
  text-align: center;
}
.service-links-grid > :last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .service-links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.25rem;
    max-width: 47rem;
    margin-inline: auto;
  }
}
@media (min-width: 992px) {
  .service-links-grid { column-gap: 2rem; }
}
/* Position am Seitenende: Abstand zur CTA davor 48px mobil / 64px Desktop; unten 8px / 24px (48px Section-Padding pb-5
   folgt -> 56px / 72px). margin-block statt margin, damit margin-inline: auto erhalten bleibt.
   --flush: Ueber mich, kein Section-Padding darunter -> margin unten 56px / 72px. */
.service-links-grid--end { margin-block: 48px 8px; }
.service-links-grid--flush { margin-bottom: 56px; }
@media (min-width: 768px) {
  .service-links-grid--end { margin-block: 64px 24px; }
  .service-links-grid--flush { margin-bottom: 72px; }
}
/* Crosslink-Fliesstext als Empfehlung ("Meine Empfehlung" / "My recommendation" / "Ma recommandation"):
   Leistungsseiten und Blog. Label nach Vorlage .leistungsuebersicht-label, Icon (Lucide "lightbulb", Strich 1.75) immer #27A078.
   Spezifitaet .crosslink-note .crosslink-note__label (0,2,0) schlaegt .blog-body p (0,1,1). */
.crosslink-note { margin-top: 2rem; }
/* Nach der Leistungsuebersicht-Box: 40px mobil / 48px ab 768px. Ohne Box (Vitalitaet, Walk & Talk) bleibt es bei 2rem zum Text. */
.leistungsuebersicht-card + .crosslink-note { margin-top: 2.5rem; }
@media (min-width: 768px) {
  .leistungsuebersicht-card + .crosslink-note { margin-top: 3rem; }
}
/* Note -> "Haeufige Fragen": 16px mehr als ohne Note (96px ab 992px, 80px 768-991px, 64px darunter), ueber --faq-trim.
   :has(), weil die Note im vorherigen <section> steht und kein Geschwister der FAQ-Section ist. */
section:has(.crosslink-note) + .faq-section { padding-top: calc(80px - var(--faq-trim)) !important; }
@media (min-width: 768px) {
  section:has(.crosslink-note) + .faq-section { padding-top: calc(96px - var(--faq-trim)) !important; }
}
.crosslink-note .crosslink-note__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a6b50;
}
/* Icon-Chip: 2rem abgerundetes Quadrat, Radius .625rem (1.125rem Icon + 2 x .4375rem Padding), Hellmodus #eaf4f0, Dark rgba(39,160,120,.14) */
.crosslink-note .crosslink-note__label { gap: .625rem; }
.crosslink-note__label svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 1.125rem;
  height: 1.125rem;
  padding: .4375rem;
  border-radius: .625rem;
  background: #eaf4f0;
  color: #27A078;
}
[data-bs-theme="dark"] .crosslink-note .crosslink-note__label { color: #27A078; }
[data-bs-theme="dark"] .crosslink-note__label svg { background: rgba(39, 160, 120, .14); }
/* Blog: vorher <hr> (24 + 1 + 16 = 41px) + <p><em>; jetzt 2.5rem (40px), letzter Absatz ohne margin-bottom wie bisher (.blog-body > p:last-child) */
.blog-body .crosslink-note { margin-top: 2.5rem; }
.blog-body .crosslink-note > p:last-child { margin-bottom: 0; }
/* Blog: Icon ohne Chip (hoehere Spezifitaet setzt das generische Chip-Styling zurueck) */
.blog-body .crosslink-note .crosslink-note__label { gap: .5rem; }
.blog-body .crosslink-note__label svg,
[data-bs-theme="dark"] .blog-body .crosslink-note__label svg { box-sizing: border-box; padding: 0; border-radius: 0; background: none; }
[data-bs-theme="dark"] .leistungsuebersicht-card { background: rgba(39, 160, 120, .12); }
[data-bs-theme="dark"] .leistungsuebersicht-label { color: #27A078; }
[data-bs-theme="dark"] .leistungsuebersicht-text { color: var(--ar-emphasis-color); }