/* FBB – Layout-Korrekturen für den statischen onepage-Export (Handy und Tablet).
   Desktop (ab 1200 px) bleibt optisch unverändert (Pixelvergleich bei 1200 und 1440 px).

   1) Mehrspaltige Raster (onepage „grid-list“, z. B. die Kennzahlen auf der Startseite:
      „100 % ehrenamtliches Engagement“, „11 Jahre …“, „6 gewählte Stadträte“, …)
      Das onepage-Raster hat feste Spaltenbreiten (100 % / 4) ohne Mobil-Umbruch. Auf dem
      Handy wurden die Spalten dadurch ca. 60 px schmal, die 32-px-Schrift brach mitten im
      Wort und auch die gelben Zahlen-Kästen („100 / %“) brachen um. */

.con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:not(:only-child) {
  /* Bezugsgröße für die Schriftgröße (cqi = 1 % der Spaltenbreite) */
  container-type: inline-size;
}

/* Kennzahlen: Schrift wächst mit der Spaltenbreite, höchstens die bisherigen 32 px.
   13cqi: „ehrenamtliches“ (längstes Wort, ca. 7 × Schriftgröße breit) passt immer in eine Zeile.
   Desktop: Spalte ≈ 289 px → 37 px → bleibt bei 32 px (unverändert). */
.con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:not(:only-child) .con-kit-component-header .con-kit-quark-paragraph {
  /* !important: onepage setzt unter 768 px eine fließende Größe mit !important */
  font-size: min(calc(var(--font-kit-size) * 1px), 13cqi) !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
/* Zahl mit Einheit im gelben Kasten nie umbrechen („100 %“, „11 Jahre“).
   Steht die Beschriftung im selben Absatz direkt dahinter („100 % ehrenamtliches …“), wäre das
   Leerzeichen am Kastenende durch nowrap als Umbruchstelle gesperrt; ein unsichtbares
   Null-Breite-Leerzeichen hinter dem Kasten gibt sie zurück. Bewusst nur per CSS: Änderungen am
   Markup würden die React-Hydrierung des onepage-Exports aus dem Tritt bringen. */
.con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:not(:only-child) .con-kit-component-header .con-kit-quark-highlight {
  white-space: nowrap;
}
.con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:not(:only-child) .con-kit-component-header .con-kit-quark-color:has(> .con-kit-quark-highlight)::after {
  content: "\200B";
}

@media (max-width: 767.98px) {
  /* Handy: 2 × 2 statt 4 nebeneinander */
  .con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item {
    width: calc(50% - var(--one-kit-component-grid-list-horizontal-space, 32px) / 2);
  }
  /* Ein einzelnes Element (z. B. Button „Zurück zur Startseite“, „Jetzt Mitglied werden“)
     bekommt die volle Breite statt einer 60-px-Spalte */
  .con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:only-child {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Tablet: ein einzelner Button in einer Viertel-Spalte bräche zweizeilig um */
  .con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item:only-child {
    min-width: min(100%, 300px);
  }
}
@media (max-width: 359.98px) {
  /* Sehr schmale Geräte: eine Spalte */
  .con-kit-component-grid-list:not(.con-kit-component-grid-list--columns-1) > .con-kit-component-grid-list-item {
    width: 100%;
  }
}

/* 2) Genau 768 px (iPad hochkant): onepage wendet hier gleichzeitig die Handy-Regel (Spalten ohne
      Innenabstand) und die Tablet-Regel (Raster mit −16/−24 px Außenrand) an. Dadurch klebte
      der Inhalt, z. B. die Kennzahlen, am Bildschirmrand. Nur für exakt diese Breite. */
@media (min-width: 768px) and (max-width: 768px) {
  .con-kit-row .con-kit-layout[data-kit-grid-type=columns] {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* 3) Kein seitliches Scrollen auf Handy/Tablet: Einige onepage-Vollbreiten-Elemente (Bild mit
      −25 px Rand, Laufband-Galerien) ragen zwischen 768 und 991 px über den Rand hinaus.
      „clip“ statt „hidden“: erzeugt keinen Scroll-Container, position: sticky bleibt intakt. */
@media (max-width: 1199.98px) {
  html, body {
    overflow-x: clip;
  }
}