a {
  text-decoration: underline;
}

.homeContainer {
  background: var(--color-cream);
}

/* ── Hero ─────────────────────────────────────────────────────── */

.mundaHero {
  background: var(--color-cream);
  padding: var(--space-lg) max(var(--container-padding), calc((100% - var(--container-max)) / 2));
}

.mundaHeroRow {
  display: flex;
  align-items: space-between;
  gap: var(--space-lg);
}

.mundaLogoHero {
  margin-bottom: var(--space-lg);
}

/* Below the nav's own mobile breakpoint, the "MP" mark moves into the
   nav bar (see _navigation.css .mundaLogoMobile) instead of the hero.
   Must match _navigation.css's 1300px breakpoint exactly, or both marks
   render at once in the gap between the two values (e.g. iPad widths). */
@media (max-width: 1300px) {
  .mundaLogoHero {
    display: none;
  }
}

.mundaHeroText {
  flex: 1 1 50%;
  min-width: 0;
}

.mundaHeroText h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: var(--color-maroon-light);
  margin-bottom: var(--space-md);
}

.mundaHeroIntro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-maroon);
  margin-bottom: var(--space-md);
  max-width: 46ch;
}

.mundaHeroAuthor {
  margin-bottom: var(--space-md);
}

.mundaHeroName {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-maroon-light);
}

.mundaHeroTitle {
  font-size: 13px;
  color: var(--color-maroon-light);
}

.mundaHeroImage {
  flex: 1 1 50%;
  min-width: 0;
}

.mundaHeroImage img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.mundaBtn {
  display: inline-block;
  border: 1px solid var(--color-maroon-light);
  border-radius: 999px;
  padding: 12px 28px;
  color: var(--color-maroon-light);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.mundaBtn:hover {
  background: var(--color-maroon-light);
  color: #fff;
}

/* ── Stats strip ──────────────────────────────────────────────── */

.mundaStats {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-sm) max(var(--container-padding));
  border-top: 1px solid rgb(74, 30, 30);
  border-bottom: 1px solid rgb(74, 30, 30);
  margin: 0 var(--space-sm);
}

.mundaStat {
  flex: 1 1 25%;
  min-width: 180px;
  text-align: center;
  padding: var(--space-sm);
}

.mundaStatValue {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-maroon);
}

.mundaStatLabel {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-maroon);
  margin-top: 4px;
}

/* ── Content modules ──────────────────────────────────────────── */

.homeModules {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--container-padding);
}

.homeModules > .module {
  margin-bottom: var(--space-md);
}

.module_headline h1,
.module_headline h2,
.module_headline h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-maroon);
  line-height: 1.25;
  font-size: 36px;
}

.module_headline h3 {
  font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-maroon);
    line-height: 1.25;
    font-size: 24px;
}

.module_sectiontitle.bigHeaderSize {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 38px);
  color: var(--color-maroon-light);
  text-align: center;
}

.module_sectiontitle.subheaderSize {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-maroon-light);
  margin-bottom: 6px;
  position: relative;
}

.module_text {
  color: var(--color-maroon);
  line-height: 1.7;
  font-size: 1rem;
  margin-top: var(--space-sm) ;
}

.module_text.align-center {
  text-align: center;
}

.module_text p {
  margin-bottom: 1em;
}

/* Two-column layout, built from a column_start/column_end pair per side.
   Floats rather than inline-block: inline-block siblings are sensitive to
   the whitespace Blade leaves between included partials, which was just
   enough extra width to push the second column onto its own line. Floats
   don't have that problem. col_start_type_0 always opens a fresh row
   (clear: both); everything that ISN'T part of a float group (see the
   clearfix rule further down) drops below once both columns are done. */
.module_column_start {
  float: left;
  width: 47%;
  overflow: hidden; /* contain internally-floated children (e.g. the image pair below) */
}

.module_column_start.col_start_type_0 {
  clear: both;
  margin-right: 3%;
}

/* The base 47% width above matches the left column's own content width, but
   the left column's extra 3% margin-right (the gutter) isn't part of that
   47% — so left (47+3) + right (47) only summed to 97%, stranding 3% of
   empty space past the right column's right edge. Widen the right column to
   close that gap so it reaches the same right edge as the left column does.
   Scoped to the two-column (760px+) breakpoint: unscoped, this class combo's
   higher specificity would beat the mobile stacking rule's plain
   `.module_column_start` selector below and lock the right column at 50%
   width on small screens instead of letting it stack full-width. */
@media (min-width: 761px) {
  .module_column_start.col_start_type_1 {
    width: 50%;
  }
}

.module_column_start .module {
  margin-bottom: var(--space-sm);
}

.module_column_start .module_image img {
  width: 100%;
  height: auto;
  display: block;
}

/* A column holding two (or more) images side by side — e.g. the Über-mich
   portrait pair — instead of the default single full-width stack. */
.module_column_start:has(.module_image + .module_image) .module_image {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.module_column_start:has(.module_image + .module_image) .module_image:last-child {
  margin-right: 0;
}

@media (max-width: 760px) {
  .module_column_start {
    float: none;
    clear: both;
    display: block;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: var(--space-md);
  }
}

/* Spezialgebiete cards — consecutive card modules are wrapped in .cardRow
   (see home.blade.php / detail.blade.php); align-items: stretch there makes
   every card match the tallest one, and cardTop/cardBottom's own column
   flex + space-between (below) lets the gap between them absorb the
   difference. */
.cardRow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: var(--space-md);
}

.module_card {
  display: flex;
  flex-direction: column;
  width: 33.3%;
  text-align: left;
  padding: var(--space-md) var(--space-md);
    border-right: 1px solid var(--color-maroon);
    justify-content: space-between;
}

.cardBottom {
  margin-top: auto;
}

.module_card:last-child {
  border-right: none;
}

.cardImage {
  margin-bottom: var(--space-sm);
}

.cardImage img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.cardNumber {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-maroon-light);
  margin-bottom: 8px;
}

.cardTitle {
  font-family: var(--font-body);
  font-size: 21px;
  color: var(--color-maroon);
  margin-bottom: 8px;
}

.cardText {
  font-size: 1rem;
  color: var(--color-maroon);
  line-height: 1.6;
  margin-bottom: 12px;
}

.cardLink {
  font-size: 13px;
  color: var(--color-maroon);

  font-weight: 600;
}

.cardLink:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .module_card {
    width: 100%;
    margin: 0 0 var(--space-md);
  }
}

.module_gallery {
  margin-bottom: var(--space-md);
}

.galleryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.galleryGridItem {
  margin: 0;
  position: relative;
}

.galleryGridItem img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.module_gallery--scale .galleryGridItem img {
  aspect-ratio: auto;
  object-fit: contain;
}

.galleryGridCredits {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-maroon);
  opacity: 0.7;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .galleryGrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-xs);
  }
}

/* Clearfix: anything that is NOT itself a floated column/card drops below
   any still-open float group. Also self-clears the module containers so
   background/height isn't collapsed by unclosed floats. */
.module_headline,
.module_sectiontitle,
.module_text,
.module_quote,
.module_gallery {
  clear: both;
}

.module_headline {
  margin-bottom: var(--space-sm);
}

.homeModules::after,
#modContainer::after {
  content: '';
  display: table;
  clear: both;
}

/* Pull-quote / closing CTA */
.module_quote {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.module_quote .quoteText {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 28px);
  color: var(--color-maroon-light);
  line-height: 1.4;
  max-width: 40ch;
  margin: 0 auto 16px;
}

.module_quote .author {
  font-size: 13px;
  color: var(--color-maroon-light);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.module_quote .quoteCta {
  display: inline-block;
  border: 1px solid var(--color-maroon-light);
  border-radius: 999px;
  padding: 12px 28px;
  color: var(--color-maroon-light);
  text-decoration: none;
  font-size: 14px;
}

.module_quote .quoteCta:hover {
  background: var(--color-maroon-light);
  color: #fff;
}

/* "Bordered" quote style — same layout, maroon text/accent framed by a
   1px maroon rule above and below. Chosen per-block via the Style field. */
.module_quote.quote_style_bordered {
  border-top: 1px solid var(--color-maroon);
  border-bottom: 1px solid var(--color-maroon);
  width: 100%;
}

.module_quote.quote_style_bordered .quoteText {
  color: var(--color-maroon);
}

.module_quote.quote_style_bordered .author {
  color: var(--color-maroon);
}

.module_quote.quote_style_bordered .quoteCta {
  border-color: var(--color-maroon);
  color: var(--color-maroon);
}

.module_quote.quote_style_bordered .quoteCta:hover {
  background: var(--color-maroon);
  color: var(--color-white);
}

@media (max-width: 760px) {
  .mundaHeroRow {
    flex-direction: column;
  }

  /* Image above text on mobile, even though text comes first in the
     markup (it stays first for reading/DOM order, e.g. screen readers). */
  .mundaHeroImage {
    order: -1;
  }

  .mundaStats {
    flex-direction: column;
  }

  .mundaStat {
    flex: 1 1 100%;
  }

    .module_card {
      border-right: none;
      border-bottom: 1px solid var(--color-maroon);
    }
}