/* ===========================================================================
   anwendungen.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   Anwendungen-Abschnitt der Produktseiten (.esdanw): ruhiger Glasstil.

   AUSGANGSLAGE (Content-Review 22.07.2026): Der Abschnitt hatte zu viel
   Gewicht. Drei Ursachen, alle messbar:
     - Mindesthoehe 656px auf dem Desktop, also fast ein voller Bildschirm fuer
       eine Aufzaehlung von sechs Anwendungsbereichen.
     - Karten zu 90 % deckendes Weiss mit 2px starker weisser Umrandung: der
       maximal moegliche Kontrast gegen das dunkelblaue Bild.
     - Kartenueberschriften auf 24px, derselben Groesse wie eine
       Abschnittsueberschrift. Sechs davon lesen sich wie sechs gleichrangige
       Hauptaussagen, obwohl es eine Liste ist.

   LOESUNG: Die Karten werden durchscheinend, das Bild bleibt sichtbar, die
   Schrift wird kleiner. Der Abschnitt ist eine Aufzaehlung, kein Kapitel — er
   soll beim Scrollen mitlaufen und nicht anhalten.

   Kontrast: Weisse Schrift auf dem abgedunkelten Bild plus leicht aufgehellter
   Kachel bleibt deutlich ueber dem AA-Grenzwert; der Scrim in components.css
   sorgt weiterhin fuer den dunklen Grund.

   ABWEICHUNG VOM FIGMA: bewusst und abgestimmt (Entscheidung Atilla). Im Figma
   ist der Abschnitt noch mit deckenden weissen Karten hinterlegt.
   =========================================================================== */

.esdanw__card {
  /* Durchscheinend statt deckend: Die Karten schweben auf dem Bild, statt es
     zuzudecken. */
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: var(--space-4) var(--space-5);
  gap: var(--space-1);
}

.esdanw__card-title {
  /* 18px statt 24px: eine Listenzeile, keine Abschnittsueberschrift. */
  font-size: var(--fs-heading-3xs);
  line-height: var(--lh-heading-3xs);
  color: var(--color-neutral-100);
}

.esdanw__card-sub {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  /* Leicht zurueckgenommen, damit die Unterzeile der Ueberschrift folgt und
     nicht mit ihr konkurriert. */
  color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 1024px) {
  .esdanw {
    /* 656px waren fast ein voller Bildschirm. */
    min-height: 420px;
    padding-block: var(--space-8);
  }

  .esdanw__grid {
    gap: var(--space-4);
  }
}