/* ===========================================================================
   feature.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt. Wird NACH components.css geladen.

   Feature-Sektion (.feat): Die Standardformate-Karte verlinkt seit 22.07.2026
   die drei Standardprodukte direkt (gleiches Muster wie die Produktlinks im
   Karussell: nahtlose Klickflaechen, Pfeil wandert beim Hover, KEIN
   Unterstreichen). Der fruehere Sammel-Button "Standardprodukte ansehen"
   zeigte auf ein einzelnes Produkt und entfiel.
   =========================================================================== */

/* Trust-Leiste: Der Kreis mit dem Doppelpfeil ist entfallen (Benker, KW 32:
   "Pfeil keine Funktion? Funktion ergaenzen oder Pfeil entfernen"). Ohne das
   Icon beginnt der Text sonst bündig an der Kartenkante — deshalb hier ein
   eigener Innenabstand links, damit die Leiste weiter Luft hat. */
.feat__trust-left {
  padding-left: var(--space-6, 32px);
}

/* Optionaler Link-Zustand: greift nur, wenn in feature.php ein href gesetzt
   wird. Bleibt hier stehen, damit die Variante ohne Neubau zurueckkann. */
.feat__trust-left--link {
  text-decoration: none;
  cursor: pointer;
}
.feat__trust-left--link:focus-visible {
  outline: 2px solid var(--color-neutral-100);
  outline-offset: 4px;
}

.feat__links {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.feat__links li + li {
  border-top: 1px solid rgba(8, 8, 8, 0.1);
}

.feat__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-body-m, 16px);
  line-height: var(--lh-body-m, 1.4);
  letter-spacing: var(--tracking-tight);
  /* Abstand liegt IM Link: Klickflaechen stossen nahtlos aneinander,
     der Zeiger bleibt beim senkrechten Abfahren konstant. */
  padding-block: calc(var(--space-2) * 1.5);
}

.feat__link svg {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.85;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.feat__link:hover,
.feat__link:focus-visible {
  color: var(--color-accent);
}

.feat__link:hover svg,
.feat__link:focus-visible svg {
  transform: translate(2px, -2px);
  opacity: 1;
}

.feat__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .feat__link svg {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Trust-Leiste (.feat__trust): dezentes Formenbau-Motiv im Hintergrund
   (22.07.2026). Das Foto (CNC-Fraeser am Aluminium-Werkzeug, Mediathek
   feature-formenbau-fraeser) liegt als untere Ebene; darueber ein Blauverlauf,
   links deckend (Markenblau wie bisher), nach rechts auslaufend, sodass das
   Motiv nur leicht durchscheint. Es belegt bildlich "alles aus einer Hand":
   das eigene Werkzeug entsteht auf der eigenen Maschine. Text (linksbuendig,
   auf dem deckenden Teil) und Logo-Wasserzeichen bleiben unangetastet.
   Bildausschnitt ueber background-position (zweiter Wert = Hoehe; kleiner =
   weiter oben Richtung Fraeser).
   --------------------------------------------------------------------------- */
.feat__trust {
  background-image:
    linear-gradient(
      90deg,
      var(--color-primary-800) 0%,
      var(--color-primary-800) 42%,
      rgba(6, 63, 112, 0.72) 62%,
      rgba(6, 63, 112, 0.32) 100%
    ),
    url("https://staging.benker.studiomoco.de/wp-content/uploads/2026/07/Feature-–-Formenbau-CNC-Fraeser-am-Aluminium-Werkzeug-2048x1365.webp");
  /* Bild nur in der rechten Haelfte (60 % Breite) statt ueber die volle Leiste:
     so ist mehr vom Motiv im sichtbaren Bereich und der Fraeser liegt im
     aufgehellten Teil. Die deckende Zone des Verlaufs (bis 42 %) verbirgt die
     linke Bildkante (Bildbeginn bei 40 %). Zweiter Positionswert = Hoehe des
     Ausschnitts. */
  background-size: auto, 60% auto;
  background-position: left center, right 46%;
  background-repeat: no-repeat, no-repeat;
}