.navbar-brand img {
  height: 2.3rem !important;
  max-height: 2.3rem!important;
  width: auto !important;
}

/* Always show the navbar bottom separator (Hinode adds it only on scroll via .nav-active) */
.navbar.navbar-fixed-top {
  border-bottom: 1px solid var(--bs-secondary-bg);
}

/* Home: center icons only for "Open Source Principles" cards */
/* Nur Flexbox – kein left/transform auf dem SVG, sonst verschiebt es sich (oft nach rechts). */
.open-source-cards .card-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
.open-source-cards .card-icon svg,
.open-source-cards .card-icon i {
  display: block !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  flex-shrink: 0;
}

/* Optional: Titel ebenfalls mittig unter dem Icon */
.open-source-cards .card-title {
  text-align: center !important;
}

/* Reduce oversized page title on small screens */
@media (max-width: 575.98px) {
  :root {
    /* Scale down base text size on phones */
    --bs-body-font-size: 0.8rem;
  }

  /* Per-page option: hide header title on phones (e.g. when hero already shows a title) */
  .page-title.hide-title-mobile,
  .hide-title-mobile {
    display: none !important;
  }

  /* Hinode: hideTitleOnMobile schaltet beim Hero-Block den Wrapper
     `.hide-hero-title-mobile` um. Dieser Wrapper enthält aber auch `heading.content`.
     Daher nur die eigentliche Überschrift (z.B. `.display-4`) ausblenden. */
  .hide-hero-title-mobile .display-4 {
    display: none !important;
  }

  .page-title.display-4 {
    font-size: 2rem;
    line-height: 1.15;
    margin-top: 1.5rem !important;
  }

  /* Hinode uses Bootstrap's .lead frequently; scale it down on phones */
  .lead {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* SpheroidPy content: responsive Bilder auf Mobile
     Desktop bleibt unverändert, da diese Regeln nur im Mobile-Media-Query aktiv sind. */

  /* Figuren aus overview.md (toggleVideo) mit float/Pixelbreite */
  figure[onclick*="toggleVideo"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 20px 0 !important;
  }
  figure[onclick*="toggleVideo"] img,
  figure[onclick*="toggleVideo"] video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Bilder in spheroidpy-Seiten, die auf Desktop rechts gefloatet sind */
  img[src*="/img/spheroidpy/"][align="right"],
  img[src*="/img/spheroidpy/"][align="left"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Container-Divs aus spheroidpy, die per inline style float:right setzen */
  div[style*="float: right"] > img[src*="/img/spheroidpy/"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}