/* W4: Komponenten Slider/App-Preview (Agent W4-4) */

/* ============================================================================
   febana Redesign R2b — Komponenten
   Agent W4-4 · Kundenanmerkungen 419ad266 (Tech-Slider) und 23e54500
   (Warum-febana-Textblöcke).

   Laedt nach tokens.css / base.css / buttons.css / header-footer.css /
   media.css. Alles hier Definierte konsumiert ausschliesslich die Tokens aus
   tokens.css — keine Verlaeufe, keine Hexwerte im Layout, Radius bleibt 0.

   Inhalt
     1. Technologie-Slider (Splide)  — Paragraph 586, Startseite
        1.1 Sektion und Kopfzeile
        1.2 Splide-Grundgeruest (Teilmenge von splide-core.css)
        1.3 Fallback ohne JS: horizontal scrollbare Reihe
        1.4 Karte
        1.5 Pfeile
     2. „Warum febana?" — ruhige Textbloecke (Paragraphs 585 und 1839)
     3. prefers-reduced-motion
   ============================================================================ */


/* ============================================================================
   1. TECHNOLOGIE-SLIDER
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1.1 Sektion und Kopfzeile

   Der Paragraph laeuft mit field_full_width = 1, die Sektion spannt also die
   volle Breite von <main>. --feb-slider-inset ist der einzige seitliche
   Einzug und wird von Kopfzeile UND Splide-Track benutzt: dadurch beginnt die
   erste Karte exakt unter dem H2, und die letzte sichtbare Karte laeuft in den
   rechten Einzug hinein (Peek auf die naechste Karte).

   Der Wert wird zusaetzlich von js/redesign-components.js als
   Splide-Option `padding` gesetzt — Splide schreibt padding-left/right immer
   inline auf den Track und wuerde reines CSS sonst mit "0px" ueberschreiben.
   ---------------------------------------------------------------------------- */

.feb-tech-section--slider {
  --feb-slider-inset: var(--feb-gutter);
  --feb-slider-card-w: 22.5rem;   /* 360 px */
  --feb-slider-gap: var(--feb-space-4);

  padding-block: var(--feb-section-y);
  background-color: var(--feb-surface);
  color: var(--feb-text);
}

.feb-tech-slider {
  position: relative;
}

.feb-tech-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--feb-space-6);
  padding-inline: var(--feb-slider-inset);
  margin-bottom: var(--feb-space-7);
}

.feb-tech-header {
  max-width: var(--feb-measure);
}

.feb-tech-section--slider .feb-tech-title {
  margin: 0 0 var(--feb-space-4);
  color: var(--feb-text);
}

.feb-tech-section--slider .feb-tech-intro {
  margin: 0;
  max-width: var(--feb-measure);
}

/* Unter 900 px wandern die Pfeile unter den Text: nebeneinander wird die
   Ueberschrift sonst auf zwei bis drei Zeilen gequetscht. */
@media (max-width: 900px) {
  .feb-tech-slider__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--feb-space-5);
    margin-bottom: var(--feb-space-6);
  }
}


/* ----------------------------------------------------------------------------
   1.2 Splide-Grundgeruest

   Bewusst KEIN <link> auf /libraries/splide/dist/css/splide-core.min.css:
   dort steht `.splide { visibility: hidden }` bis zur Initialisierung. Bleibt
   das JS aus (Library nicht geladen, Fehler, alter Browser), waere die ganze
   Sektion unsichtbar. Statt dessen steht hier die Teilmenge, die Splide 4.1.4
   tatsaechlich braucht — ohne die visibility-Falle und auf .feb-tech-slider
   begrenzt, damit andere Splide-Instanzen (Slider-Paragraph 15) unberuehrt
   bleiben.
   ---------------------------------------------------------------------------- */

.feb-tech-slider .splide__track {
  position: relative;
  z-index: 0;
  padding-inline: var(--feb-slider-inset);
}

.feb-tech-slider .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  backface-visibility: hidden;
}

.feb-tech-slider .splide__slide {
  position: relative;
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  list-style-type: none;
  backface-visibility: hidden;
}

.feb-tech-slider .splide__track--draggable {
  -webkit-touch-callout: none;
  user-select: none;
}

/* Erst nach der Initialisierung uebernimmt Splide das Scrollen. */
.feb-tech-slider.is-initialized .splide__track {
  overflow: hidden;
  scroll-snap-type: none;
}


/* ----------------------------------------------------------------------------
   1.3 Fallback ohne JS

   Vor `mount()` (und dauerhaft, falls Splide nie laedt) ist der Track eine
   horizontal scrollbare Reihe mit Scroll-Snap. Splide setzt Breite und
   margin-right der Slides nach der Initialisierung inline und ueberschreibt
   diese Werte damit automatisch.
   ---------------------------------------------------------------------------- */

.feb-tech-slider:not(.is-initialized) .splide__track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--feb-slider-inset);
}

.feb-tech-slider:not(.is-initialized) .splide__list {
  gap: var(--feb-slider-gap);
}

.feb-tech-slider:not(.is-initialized) .splide__slide {
  width: var(--feb-slider-card-w);
  scroll-snap-align: start;
}

/* Ohne Initialisierung sind die Pfeile funktionslos. */
.feb-tech-slider:not(.is-initialized) .splide__arrows {
  display: none;
}


/* ----------------------------------------------------------------------------
   1.4 Karte

   Geometrie und Typografie kommen aus den Tokens. Kein Verlauf, kein Schatten,
   kein Lift — der Zustand haengt an der Rahmenfarbe. Der Pfeil-Link
   (.feb-tech-link) wird komplett von buttons.css getragen (Rang 3, Chevron aus
   dem <span>); hier steht nur das, was buttons.css nicht kennt.
   ---------------------------------------------------------------------------- */

.feb-tech-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 13.75rem;   /* 220 px — haelt die Reihe ruhig */
  padding: var(--feb-space-5);
  background-color: var(--feb-surface);
  border: var(--feb-hairline-width) solid var(--feb-border);
  border-radius: var(--feb-radius);
  color: var(--feb-text);
  text-decoration: none;
  transition: border-color var(--feb-dur-base) var(--feb-ease);
}

.feb-tech-card:is(:hover, :focus-visible) {
  border-color: var(--feb-border-ink);
}

.feb-tech-card:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

.feb-tech-card__title {
  margin: 0 0 var(--feb-space-3);
  font-size: var(--feb-fs-h4);
  font-weight: var(--feb-fw-semibold);
  line-height: var(--feb-lh-snug);
  letter-spacing: var(--feb-ls-h4);
  color: var(--feb-text);
  text-wrap: balance;
}

.feb-tech-card__text {
  margin: 0 0 var(--feb-space-5);
  font-size: var(--feb-fs-sm);
  line-height: var(--feb-lh-body);
  letter-spacing: var(--feb-ls-sm);
  color: var(--feb-text-secondary);
}

/* Pfeil-Link an den Kartenfuss. Zwei Klassen, damit die Regel ueber der
   (0,1,1)-Basisregel aus buttons.css liegt. */
.feb-tech-card .feb-tech-link {
  margin-top: auto;
}


/* ----------------------------------------------------------------------------
   1.5 Pfeile

   Splide setzt aria-label, aria-controls und den disabled-Zustand selbst; die
   Beschriftungen kommen aus der i18n-Option in js/redesign-components.js.
   ---------------------------------------------------------------------------- */

.feb-tech-slider__arrows {
  display: flex;
  flex: 0 0 auto;
  gap: var(--feb-space-2);
}

.feb-tech-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--feb-control-h);
  height: var(--feb-control-h);
  padding: 0;
  background-color: transparent;
  border: var(--feb-hairline-width) solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  color: var(--feb-text);
  cursor: pointer;
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              border-color     var(--feb-dur-base) var(--feb-ease),
              color            var(--feb-dur-base) var(--feb-ease);
}

.feb-tech-slider__arrow svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.feb-tech-slider__arrow:is(:hover, :focus-visible):not(:disabled) {
  background-color: var(--feb-ink);
  border-color: var(--feb-ink);
  color: var(--feb-white);
}

.feb-tech-slider__arrow:active:not(:disabled) {
  background-color: var(--feb-grey-800);
  border-color: var(--feb-grey-800);
  color: var(--feb-white);
}

.feb-tech-slider__arrow:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

.feb-tech-slider__arrow:disabled {
  border-color: var(--feb-border);
  color: var(--feb-text-disabled);
  cursor: default;
}


/* ============================================================================
   2. „WARUM FEBANA?" — ruhige Textbloecke
   Kundenanmerkung 23e54500: keine Feature-Kaesten mehr, kein stark verdecktes
   Hintergrundbild. Uebrig bleiben zwei Textbloecke auf einer ruhigen
   Tokenflaeche.

   Die Sektion behaelt .feb-app-preview: buttons.css fuehrt diese Klasse in
   seiner Dunkel-Liste und dreht damit die Tokens fuer .link-arrow im Inneren
   automatisch auf die inverse Leiter. Flaeche und Textfarbe kommen ueber
   .feb-section--ink aus tokens.css/base.css.
   ============================================================================ */

.feb-app-preview--plain {
  /* base.css gibt .feb-section--ink das lose Raster (80–160 px). Hier reicht
     das Standardmass, die Sektion traegt nur noch Text. */
  padding-block: var(--feb-section-y);
  background-image: none;
}

.feb-app-preview--plain .feb-app-preview__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--feb-space-7);
}

@media (min-width: 768px) {
  .feb-app-preview--plain .feb-app-preview__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--feb-space-7), 4vw, var(--feb-space-9));
  }
}

.feb-app-preview--plain .feb-app-preview__meta {
  margin: 0 0 var(--feb-space-4);
  font-size: var(--feb-fs-xs);
  font-weight: var(--feb-fw-medium);
  letter-spacing: 0.01em;
  color: var(--feb-text-muted);
}

.feb-app-preview--plain .feb-eyebrow {
  margin-bottom: var(--feb-space-3);
}

.feb-app-preview--plain h2 {
  margin: 0 0 var(--feb-space-5);
  color: var(--feb-text);
}

.feb-app-preview--plain .feb-app-preview__lead {
  margin: 0;
}

.feb-app-preview--plain .feb-app-preview__body > p {
  margin: 0 0 var(--feb-space-5);
  font-size: var(--feb-fs-body);
  line-height: var(--feb-lh-body);
  color: var(--feb-text-secondary);
  max-width: var(--feb-measure);
}

.feb-app-preview--plain .feb-app-preview__body > p:last-child {
  margin-bottom: 0;
}

.feb-app-preview--plain .feb-app-preview__body strong {
  display: block;
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text);
}

/* Drei Klassen, damit die Regel ueber der (0,3,0)-Absatzregel oben liegt -
   deren `margin`-Kurzform wuerde ein margin-top sonst wieder auf 0 setzen. */
.feb-app-preview--plain .feb-app-preview__body > .feb-app-preview__cta {
  margin-top: var(--feb-space-6);
  margin-bottom: 0;
}


/* ============================================================================
   3. PREFERS-REDUCED-MOTION
   Splide bekommt ueber die Option `reducedMotion` speed 0; hier fallen die
   CSS-Uebergaenge weg. Draggen bleibt in beiden Faellen moeglich.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .feb-tech-card,
  .feb-tech-slider__arrow {
    transition: none;
  }

  .feb-tech-slider:not(.is-initialized) .splide__track {
    scroll-behavior: auto;
  }
}