/* ==========================================================================
   corelay - Sektion 5.4: Warum corelay (Startseite)
   --------------------------------------------------------------------------
   Zweispaltiger dunkler Block auf --ink-900: links Eyebrow ohne Versalien,
   zweizeilige H2, Absatz und Primaerbutton, rechts ein 2x2-Raster aus vier
   dunklen Karten mit Icon-Kachel.

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Flaeche
   (.bg-dark), Punktraster (.dot-grid), Radialschein (.glow), Raster
   (.grid-2), Karte (.card-dark), Icon-Kachel (.icon-tile--dark) und Button
   kommen vollstaendig aus dem Design-System - diese Datei ergaenzt nur die
   Feinheiten der Sektion. Alle Selektoren stehen unter dem Praefix .warum,
   damit nichts kollidiert.

   Inhalt
     1. Sektionsgeruest und Hintergrund
     2. Zweispaltiges Raster
     3. Textspalte (Eyebrow, Headline, Absatz)
     4. Buttonzeile
     5. Kartenraster
     6. Karte - innerer Aufbau
     7. Icon-Kachel
     8. Staffelung des Einblendens
     9. Breakpoint 1200px
    10. Breakpoint 1024px
    11. Breakpoint 900px - einspaltig
    12. Breakpoint 700px
    13. Breakpoint 560px
    14. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest und Hintergrund
   --------------------------------------------------------------------------
   Flaeche und Sektionsabstand stehen im Markup (.bg-dark .section). Das
   Punktraster liegt im ::before von .dot-grid, der blaue Radialschein im
   ::after von .glow - beide Klassen sitzen deshalb gefahrlos am selben
   Element. Der Schein wird hier nach links unten geschoben, wie in der
   Spezifikation beschrieben; ueberstehende Teile schneidet das overflow der
   Effektklassen sauber ab.
   -------------------------------------------------------------------------- */

.warum {
  position: relative;
  scroll-margin-top: var(--header-h);
  /* Position und Groesse des blauen Verlaufs von links unten */
  --glow-x: 4%;
  --glow-y: 78%;
  --glow-size: 780px;
}


/* --------------------------------------------------------------------------
   2. Zweispaltiges Raster
   --------------------------------------------------------------------------
   Spaltenverhaeltnis 1fr / 1.15fr und Luecke 56px laut Spezifikation, beide
   Spalten vertikal zentriert. Der Inhalt liegt per z-index ueber Punktraster
   und Schein.
   -------------------------------------------------------------------------- */

.warum-inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 56px;
}


/* --------------------------------------------------------------------------
   3. Textspalte
   --------------------------------------------------------------------------
   Die Groessen liefern .eyebrow--plain (15px/600, ohne Versalien), .h2 und
   .lead aus css/base.css. Hier stehen nur Farbe, Breite und Abstaende.
   Der harte Umbruch der zweiten Headline-Zeile steckt in .ln und loest sich
   unter 640px von selbst auf, die blaue Faerbung liefert .accent.
   -------------------------------------------------------------------------- */

.warum-text {
  max-width: 520px;
}

.warum-eyebrow {
  color: var(--blue-400);
  margin-bottom: 14px;
}

.warum-title {
  color: var(--t-on-dark);
  margin-bottom: var(--sp-5);
}

.warum-lead {
  max-width: 460px;
  margin-bottom: var(--sp-8);
  color: var(--t-on-dark-soft);
}


/* --------------------------------------------------------------------------
   4. Buttonzeile
   -------------------------------------------------------------------------- */

.warum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}


/* --------------------------------------------------------------------------
   5. Kartenraster
   --------------------------------------------------------------------------
   Zwei Spalten und der Umbruch auf eine Spalte kommen aus .grid-2; die
   Spezifikation verlangt hier eine engere Luecke von 16px statt der 22px
   des Standardrasters.
   -------------------------------------------------------------------------- */

.warum-grid {
  gap: 16px;
  align-items: stretch;
}


/* --------------------------------------------------------------------------
   6. Karte - innerer Aufbau
   --------------------------------------------------------------------------
   .card-dark bringt Flaeche (--ink-850), Rahmen, Radius, Padding 22px,
   Titel (weiss, 15px/700), Text (13px, --t-on-dark-mute) und den Hover auf
   --ink-800 bereits mit. Die Karte fuellt ihre Rasterzelle voll aus, damit
   nebeneinanderliegende Karten gleich hoch sind.
   -------------------------------------------------------------------------- */

.warum-card {
  height: 100%;
}


/* --------------------------------------------------------------------------
   7. Icon-Kachel
   --------------------------------------------------------------------------
   42x42 mit rgba(47,128,255,.14) und Icon in --blue-400 - alles aus
   .icon-tile--dark. Hier bleibt nur der Abstand zum Titel.
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   8. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   Der Text laeuft von oben nach unten ein, die Karten folgen paarweise
   versetzt in Leserichtung.
   -------------------------------------------------------------------------- */

.warum-eyebrow { --reveal-delay: 0ms; }
.warum-title { --reveal-delay: 60ms; }
.warum-lead { --reveal-delay: 120ms; }
.warum-actions { --reveal-delay: 180ms; }

.warum-card:nth-child(1) { --reveal-delay: 120ms; }
.warum-card:nth-child(2) { --reveal-delay: 200ms; }
.warum-card:nth-child(3) { --reveal-delay: 280ms; }
.warum-card:nth-child(4) { --reveal-delay: 360ms; }


/* --------------------------------------------------------------------------
   9. Breakpoint 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .warum-inner {
    grid-template-columns: 1fr 1.12fr;
    gap: 44px;
  }

  .warum-text {
    max-width: 480px;
  }
}


/* --------------------------------------------------------------------------
   10. Breakpoint 1024px
   --------------------------------------------------------------------------
   Die Spalten ruecken naeher zusammen, die Karten werden etwas kompakter,
   damit die laengeren Titel weiterhin zweizeilig Platz finden.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .warum-inner {
    grid-template-columns: 1fr 1.05fr;
    gap: 36px;
  }

  .warum-card {
    padding: 20px;
  }

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


/* --------------------------------------------------------------------------
   11. Breakpoint 900px - einspaltig
   --------------------------------------------------------------------------
   Text oben, Karten darunter. Der blaue Schein wandert weiter nach unten,
   damit er unter dem Kartenblock aufleuchtet und den Text nicht aufhellt.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .warum {
    --glow-x: 8%;
    --glow-y: 88%;
    --glow-size: 640px;
  }

  .warum-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .warum-text {
    max-width: 620px;
  }

  .warum-lead {
    max-width: 560px;
    margin-bottom: var(--sp-7);
  }

  /* Einspaltig laufen Text und Karten als zwei Bloecke ein */
  .warum-card:nth-child(1),
  .warum-card:nth-child(2) { --reveal-delay: 60ms; }

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


/* --------------------------------------------------------------------------
   12. Breakpoint 700px
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .warum-inner {
    gap: 32px;
  }

  .warum-grid {
    gap: 14px;
  }

  .warum-card {
    padding: 22px;
  }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 560px
   --------------------------------------------------------------------------
   Unter 768px stehen die Karten ohnehin einspaltig (.grid-2) - jede kommt
   einzeln in den Sichtbereich, eine Staffelung waere hier nur noch
   Wartezeit. Der Button nimmt die volle Breite ein.
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .warum-actions .btn {
    width: 100%;
  }

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


/* --------------------------------------------------------------------------
   14. Breakpoint 380px
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .warum-inner {
    gap: 28px;
  }

  .warum-card {
    padding: 18px;
  }

  .warum-tile {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
  }

  .warum-tile .ico {
    width: 18px;
    height: 18px;
  }
}