/* =========================================================================
   Startseite closinghub.de: Integrations-Katalog kompakt (03.10.2026).
   Laedt NACH seite-anbindungen.css und uebernimmt von dort Wolke, Chips,
   Karten und Pillen unveraendert. Hier stehen nur die Abweichungen der
   Startseite: Wolke zwischen Kopfzeile und Chips, Chips zentriert ohne
   Suchfeld, acht Karten in zwei Reihen, Link darunter. Rasterlinien laufen
   durch, deshalb kein weisser Boden unter der Wolke und keine Flaeche hinter
   der Filterzeile. Abstand oben und unten kommt von .sektion (60px).
   ========================================================================= */

/* Kopfzeile: der Abstand nach unten kommt von der Wolke. */
.katalog-start .kopfzeile { margin-bottom: 0; }

/* Wolke: etwas flacher als auf der Unterseite, ohne weissen Boden. */
.katalog-start .wolke { height: 300px; margin: clamp(8px, 2vw, 20px) 0 4px; }
.katalog-start .wolke::after { display: none; }

/* Chips mittig, ohne Suchfeld und ohne Flaeche. */
.katalog-start .int-filter { justify-content: center; padding: 0 0 18px; background: transparent; }

/* Zwei Reihen a vier Karten, Hoehe je Reihe gleich (align-items: stretch
   kommt aus seite-anbindungen.css). */
.katalog-start .kat-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Link unter den Karten. */
.kat-start-mehr { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Schmale Fenster und Handy ---------------------------------- */
@media (max-width: 1100px) {
  .katalog-start .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .katalog-start .wolke { height: 270px; }
}
@media (max-width: 620px) {
  .katalog-start .wolke { height: 230px; margin-top: 16px; }
  .katalog-start .int-filter { padding-bottom: 12px; }
  .katalog-start .kat-raster { grid-template-columns: 1fr; }
  .kat-start-mehr { margin-top: 24px; }
}