/* ==========================================================================
   corelay - Sektion 5.3: Leistungen (Startseite)
   --------------------------------------------------------------------------
   Zentrierter Sektionskopf auf --paper-50 und darunter vier weisse Karten im
   4er-Raster. Jede Karte: Icon-Kachel 46x46, Titel, Text 14px und unten links
   der runde Pfeil-Button zur passenden Stelle auf leistungen.html.

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Flaeche,
   Sektionsabstand, Sektionskopf, Raster, Karte, Icon-Kachel und Button kommen
   vollstaendig aus dem Design-System - diese Datei ergaenzt ausschliesslich
   die Feinheiten der Sektion. Alle Selektoren stehen unter dem Praefix
   .leistungen, damit nichts kollidiert.

   Inhalt
     1. Sektionsgeruest
     2. Sektionskopf
     3. Kartenraster
     4. Karte - innerer Aufbau
     5. Icon-Kachel
     6. Runder Pfeil-Button
     7. Staffelung des Einblendens
     8. Breakpoint 1200px
     9. Breakpoint 1024px - zwei Spalten
    10. Breakpoint 900px
    11. Breakpoint 700px
    12. Breakpoint 560px - eine Spalte
    13. Breakpoint 380px
    14. Fuenf Karten im Viererraster
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest
   --------------------------------------------------------------------------
   Flaeche (.bg-paper-50) und vertikaler Abstand (.section) stehen im Markup.
   Hier bleibt nur der Anker-Abstand, damit der Sprung auf #leistungen nicht
   unter dem klebenden Header endet.
   -------------------------------------------------------------------------- */

.leistungen {
  position: relative;
  scroll-margin-top: var(--header-h);
}


/* --------------------------------------------------------------------------
   2. Sektionskopf
   --------------------------------------------------------------------------
   Eyebrow (--blue-500), zweizeilige H2 in --t-on-light und Unterzeile in
   --t-on-light-soft kommen aus .section-head in css/layout.css. Der harte
   Umbruch der H2 steckt in .ln und loest sich unter 640px von selbst auf.
   -------------------------------------------------------------------------- */

.leistungen-head .lead {
  max-width: 640px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   3. Kartenraster
   --------------------------------------------------------------------------
   Spalten und Umbrueche (1024px zweispaltig, 640px einspaltig) liefert
   .grid-4 aus css/layout.css, die Luecke von 22px ebenfalls.
   -------------------------------------------------------------------------- */

.leistungen-grid {
  align-items: stretch;
}


/* --------------------------------------------------------------------------
   4. Karte - innerer Aufbau
   --------------------------------------------------------------------------
   .card ist bereits eine Flex-Spalte. Die Karte fuellt die Rasterzelle voll
   aus, damit die runden Buttons aller vier Karten auf einer Linie sitzen.
   -------------------------------------------------------------------------- */

.leistungen-card {
  height: 100%;
}

/* Mindestabstand zwischen Text und rundem Button */
.leistungen-card p {
  margin-bottom: 22px;
}


/* --------------------------------------------------------------------------
   5. Icon-Kachel
   -------------------------------------------------------------------------- */

.leistungen-tile {
  margin-bottom: 18px;
}


/* --------------------------------------------------------------------------
   6. Runder Pfeil-Button
   --------------------------------------------------------------------------
   margin-top: auto schiebt den Button an den unteren Rand der Karte; die
   Groesse (38px), die Farben und der Hover stehen in css/base.css. Beim Hover
   ueber die gesamte Karte faerbt sich der Button mit ein.
   -------------------------------------------------------------------------- */

.leistungen-link {
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}

@media (hover: hover) {

  .leistungen-card:hover .leistungen-link {
    background-color: var(--blue-500);
  }
}


/* --------------------------------------------------------------------------
   7. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   -------------------------------------------------------------------------- */

.leistungen-head { --reveal-delay: 0ms; }
.leistungen-card:nth-child(1) { --reveal-delay: 60ms; }
.leistungen-card:nth-child(2) { --reveal-delay: 140ms; }
.leistungen-card:nth-child(3) { --reveal-delay: 220ms; }
.leistungen-card:nth-child(4) { --reveal-delay: 300ms; }


/* --------------------------------------------------------------------------
   8. Breakpoint 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .leistungen-card {
    padding: 24px;
  }

  .leistungen-tile {
    margin-bottom: 16px;
  }
}


/* --------------------------------------------------------------------------
   9. Breakpoint 1024px - zwei Spalten
   --------------------------------------------------------------------------
   Bei zwei Spalten laufen die Karten paarweise ein, sonst wirkt die letzte
   Karte spuerbar zu spaet.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .leistungen-card {
    padding: 26px;
  }

  .leistungen-card p {
    margin-bottom: 20px;
  }

  .leistungen-card:nth-child(1),
  .leistungen-card:nth-child(2) { --reveal-delay: 60ms; }

  .leistungen-card:nth-child(3),
  .leistungen-card:nth-child(4) { --reveal-delay: 160ms; }
}


/* --------------------------------------------------------------------------
   10. Breakpoint 900px
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .leistungen-grid {
    gap: 18px;
  }

  .leistungen-card {
    padding: 24px;
  }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 700px
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .leistungen-card {
    padding: 22px;
  }

  .leistungen-tile {
    margin-bottom: 14px;
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 560px - eine Spalte
   --------------------------------------------------------------------------
   Einspaltig kommt jede Karte einzeln in den Sichtbereich - eine Staffelung
   waere hier nur eine Verzoegerung, deshalb faellt sie weg.
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .leistungen-card p {
    margin-bottom: 18px;
  }

  .leistungen-card:nth-child(1),
  .leistungen-card:nth-child(2),
  .leistungen-card:nth-child(3),
  .leistungen-card:nth-child(4) { --reveal-delay: 0ms; }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 380px
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .leistungen-card {
    padding: 18px;
  }

  .leistungen-tile {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }

  .leistungen-tile .ico {
    width: 20px;
    height: 20px;
  }
}


/* --------------------------------------------------------------------------
   14. Fuenf Karten im Viererraster
   --------------------------------------------------------------------------
   Seit der fuenften Leistung (KI-Automatisierung) geht das Viererraster nicht
   mehr glatt auf: Die letzte Karte stuende allein am linken Rand.

   Loesung ab 1024px: sechs Spalten, jede Karte ueber zwei. Das ergibt drei
   Karten in der ersten Reihe; die vierte startet in Spalte 2, wodurch das
   verbleibende Paar mittig unter der Dreierreihe sitzt.

   Zwischen 640px und 1024px greift das Zweierraster aus css/layout.css - dort
   nimmt die fuenfte Karte die volle Breite ein, statt eine halbe Reihe leer
   zu lassen. Darunter ist ohnehin alles einspaltig.

   Die Regeln haengen an :has() und loesen sich von selbst auf, sobald eine
   sechste Leistung dazukommt - dann passt das Viererraster wieder.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  .leistungen-grid:has(> .leistungen-card:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .leistungen-grid:has(> .leistungen-card:nth-child(5):last-child) > .leistungen-card {
    grid-column: span 2;
  }

  .leistungen-grid:has(> .leistungen-card:nth-child(5):last-child) > .leistungen-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {

  .leistungen-grid:has(> .leistungen-card:nth-child(5):last-child) > .leistungen-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}