/* =====================================================================
   Card-Fan Carousel (V3) — "Ihre Vorteile" als aufgefächerte Karten
   Eigenständige, framework-freie Umsetzung (Referenz: Card-Fan-Component).
   Nur additiv geladen NACH styles.css. Prefix: .saig-fan / .saa-benefits-fan
   ===================================================================== */

/* ---- Sektion (dunkler Signature-Moment) ---- */
.saa-benefits-fan-section {
  position: relative;
  overflow: hidden;                 /* verhindert horizontalen Overflow der Fächer-Karten */
  background: #05080d;
  isolation: isolate;
}
.saa-benefits-fan-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 32%, rgba(217, 30, 24, 0.16), transparent 70%),
    radial-gradient(90% 90% at 50% 120%, rgba(10, 24, 38, 0.9), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.saa-benefits-fan-section > * { position: relative; z-index: 1; }

/* Überschrift muss auf dunklem Grund hell sein (Basis-Stylesheet zwingt sonst Graphite) */
html body .saa-benefits-fan-section .home-benefits-section__heading h2 { color: #ffffff !important; }
html body .saa-benefits-fan-section .home-benefits-section__heading .text-swiss-red { color: #ff4b45 !important; }
.saa-benefits-fan-section .home-benefits-section__heading { text-align: center; }

/* ---- Fan-Container ---- */
.saig-fan { --fan-card-w: clamp(232px, 27vw, 300px); }

.saig-fan__stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 44vh, 470px);
  margin-inline: auto;
  perspective: 1400px;
}

/* ---- Einzelkarte ---- */
.saig-fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--fan-card-w);
  aspect-ratio: 3 / 4;
  max-height: 100%;
  transform-origin: bottom center;
  transform: translateX(-50%);
  will-change: transform, opacity;
  transition:
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(158deg, #12263c 0%, #0a1826 55%, #081321 100%);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Inhalt vertikal zentriert (Index-Zahl entfernt) */
  gap: 16px;
  cursor: pointer;
  overflow: hidden;
}
.saig-fan-card::after {   /* dezenter oberer Glanz */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}
.saig-fan-card__icon {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(217, 30, 24, 0.12);
  border: 1px solid rgba(217, 30, 24, 0.28);
}
.saig-fan-card__icon .material-symbols-outlined {
  font-size: 32px;
  color: #ff4b45 !important;
  -webkit-text-fill-color: #ff4b45 !important;
}
.saig-fan-card__title {
  font: 500 clamp(20px, 1.5vw, 24px)/1.2 'Inter', sans-serif;
  color: #ffffff;
  margin: 0;
}
.saig-fan-card__text {
  font: 400 15px/1.55 'Inter', sans-serif;
  color: #aab4c0;
  margin: 0;
}

/* ---- Fächer-Positionen (per data-pos vom JS gesetzt) ---- */
.saig-fan-card[data-pos="0"] {
  transform: translateX(-50%) rotate(0deg) scale(1);
  z-index: 10; opacity: 1;
  border-color: rgba(217, 30, 24, 0.55);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(217, 30, 24, 0.35);
}
.saig-fan-card[data-pos="-1"] {
  transform: translateX(calc(-50% - 64%)) translateY(20px) rotate(-8deg) scale(0.87);
  z-index: 8; opacity: 1;
}
.saig-fan-card[data-pos="1"] {
  transform: translateX(calc(-50% + 64%)) translateY(20px) rotate(8deg) scale(0.87);
  z-index: 8; opacity: 1;
}
.saig-fan-card[data-pos="-2"] {
  transform: translateX(calc(-50% - 120%)) translateY(52px) rotate(-15deg) scale(0.73);
  z-index: 4; opacity: 0.55;
}
.saig-fan-card[data-pos="2"] {
  transform: translateX(calc(-50% + 120%)) translateY(52px) rotate(15deg) scale(0.73);
  z-index: 4; opacity: 0.55;
}
/* ausgeblendete Karten (|pos| >= 3) */
.saig-fan-card[data-pos="-3"],
.saig-fan-card[data-pos="3"] {
  transform: translateX(calc(-50% - 150%)) scale(0.6); opacity: 0; z-index: 1; pointer-events: none;
}
.saig-fan-card[data-pos="3"] { transform: translateX(calc(-50% + 150%)) scale(0.6); }

/* Text der Seiten-Karten leicht zurücknehmen, Fokus auf Zentrum */
.saig-fan-card:not([data-pos="0"]) .saig-fan-card__text { opacity: 0.85; }

/* ---- Navigation ----
   Bewusst klein + transparent gehalten (Nutzerwunsch: ~50% kleiner, dezent).
   Die globale Button-Normalisierung in styles.css (body main :where(button…))
   füllt Buttons sonst solide weiss (var(--saa-surface) !important) — daher hier
   background/color/Grösse mit !important zurücksetzen (.saig-fan__arrow = 0,1,0
   schlägt den 0,0,2-Selektor, card-fan.css lädt zudem später). */
.saig-fan__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(16px, 2.5vh, 28px);
  opacity: 0.65;                         /* Leiste erscheint transparent/dezent */
  transition: opacity 0.25s ease;
}
.saig-fan__nav:hover,
.saig-fan__nav:focus-within { opacity: 1; }
.saig-fan__arrow {
  width: 20px !important; height: 20px !important;      /* 40 -> 20 (50%) */
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: transparent !important;                   /* nicht mehr solide weiss */
  color: rgba(239, 241, 243, 0.7) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease, color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 2026-08-04 (Block 7c): Das Tippziel der Pfeile wird per ::after auf 44px
   gebracht, ohne den 20px-Kreis optisch zu veraendern. */
.saig-fan__arrow { position: relative; }
.saig-fan__arrow::after { content: ""; position: absolute; inset: -12px; }
.saig-fan__arrow:hover { border-color: #d91e18 !important; color: #ff4b45 !important; background: rgba(217, 30, 24, 0.08) !important; }
.saig-fan__arrow:active { transform: scale(0.94); }
.saig-fan__arrow:focus-visible { outline: 2px solid #ff4b45; outline-offset: 3px; }
.saig-fan__arrow svg { width: 8px !important; height: 8px !important; }   /* 16 -> 8 (50%) */

.saig-fan__dots { display: flex; align-items: center; gap: 2px; }
.saig-fan__dot {
  /* 3×3-Punkt sichtbar (6 -> 3, 50%), ~15px Touch-Ziel (content-box + padding) */
  /* 2026-08-04 (Block 7c): Polster 6 -> 10px. Der sichtbare Punkt bleibt 3px,
     das Tippziel waechst von 15 auf 23px. Das Polster liegt INNERHALB der
     Elementbox (content-box), die Ziele ueberlappen sich also nicht. */
  width: 3px !important; height: 3px !important; padding: 10px !important;
  min-width: 0 !important; min-height: 0 !important;
  box-sizing: content-box !important;
  background-clip: content-box !important;
  border: none !important; border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;   /* transparenter als zuvor */
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.saig-fan__dot:hover { background-color: rgba(255, 255, 255, 0.5) !important; }
.saig-fan__dot[aria-current="true"] { background-color: rgba(217, 30, 24, 0.85) !important; transform: scale(1.4); }
.saig-fan__dot:focus-visible { outline: 2px solid #ff4b45; outline-offset: 3px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .saig-fan-card[data-pos="-2"],
  .saig-fan-card[data-pos="2"] { opacity: 0; pointer-events: none; }
  .saig-fan-card[data-pos="-1"] { transform: translateX(calc(-50% - 52%)) translateY(18px) rotate(-7deg) scale(0.84); }
  .saig-fan-card[data-pos="1"]  { transform: translateX(calc(-50% + 52%)) translateY(18px) rotate(7deg) scale(0.84); }
}
/* ---- Mobile (Handy): sauberer Ein-Karten-Slider statt Fächer ----
   Wunsch: auf dem Handy pro Ansicht nur EINE Karte voll lesbar zeigen.
   Nachbarkarten werden nicht mehr gefächert/angeschnitten, sondern seitlich
   ausgeblendet -> Wechsel liest sich als horizontales "Slaiden". Bedienung
   (Pfeile, Punkte, Wischen, Autoplay) kommt unverändert aus card-fan.js. */
@media (max-width: 600px) {
  .saig-fan { --fan-card-w: min(86vw, 340px); }
  /* Karten fassen sich mobil auf ihren Inhalt zusammen (kein 3:4-Fixmass mehr),
     damit der grosse Leerraum ueber Icon/Text verschwindet. Die aktive Karte
     laeuft im Fluss (position:relative) und gibt der Buehne ihre Hoehe; die
     Nachbarn bleiben absolut und fuellen dieselbe Hoehe. Ergebnis: Abstand
     ueber dem Icon = nur noch das Innen-Padding statt ~116px Leerraum. */
  /* Nachbarkarten werden per translateX aus dem Bild geschoben und auf
     opacity:0 gesetzt, bleiben aber layoutwirksam breit -> echter Überlauf
     (Teil B4, 08.09.: 738px in 362px gemessen, home-benefits-section erbte
     das). overflow-x:clip statt hidden: kein Scroll-Container, erlaubt
     abweichendes overflow-y und lässt die vertikalen Schatten stehen. */
  .saig-fan__stage { height: auto; min-height: 0; overflow-x: clip; overflow-y: visible; }

  .saig-fan-card {
    aspect-ratio: auto;
    max-height: none;
    padding: 22px 12px;
    cursor: default;                 /* nur aktive Karte sichtbar -> kein Klick-Wechsel nötig */
  }
  .saig-fan-card[data-pos="0"] { position: relative; height: auto; }
  .saig-fan-card:not([data-pos="0"]) { height: 100%; }

  /* aktive Karte: mittig, aufrecht, volle Deckkraft */
  .saig-fan-card[data-pos="0"] {
    transform: translateX(-50%) rotate(0deg) scale(1);
    opacity: 1;
    z-index: 10;
  }
  /* alle Nachbarn: nach links bzw. rechts aus dem Bild geschoben und ausgeblendet */
  .saig-fan-card[data-pos="-1"],
  .saig-fan-card[data-pos="-2"],
  .saig-fan-card[data-pos="-3"] {
    transform: translateX(calc(-50% - 118%)) rotate(0deg) scale(0.96);
    opacity: 0;
    pointer-events: none;
  }
  .saig-fan-card[data-pos="1"],
  .saig-fan-card[data-pos="2"],
  .saig-fan-card[data-pos="3"] {
    transform: translateX(calc(-50% + 118%)) rotate(0deg) scale(0.96);
    opacity: 0;
    pointer-events: none;
  }
  /* Text der inaktiven Karten ganz ausblenden (kein Durchscheinen beim Slide) */
  .saig-fan-card:not([data-pos="0"]) .saig-fan-card__text { opacity: 0; }
  .saig-fan-card__text { font-size: 14.5px; }

  /* Steuerung ist auf dem Handy das primäre Bedienelement -> grösser & voll sichtbar */
  .saig-fan__nav { opacity: 1; gap: 10px; margin-top: 20px; }
  .saig-fan__arrow::after { inset: -5px; }   /* 2026-08-04: 34 + 2x5 = 44px */
  .saig-fan__arrow {
    width: 34px !important; height: 34px !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  .saig-fan__arrow svg { width: 14px !important; height: 14px !important; }
  .saig-fan__dot { padding: 11px !important; }   /* 2026-08-04: Tippziel 25px */
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .saig-fan-card { transition: opacity 0.3s ease; }
}

/* =====================================================================
   Offers-Sektion (V3, Screenshot 5): KI-Lösungen ist die dunkle,
   hervorgehobene Zentrumskarte. DOM-Reihenfolge Beratung → Lösungen →
   Dienste bleibt (Lösungen mittig). Nur die Zentrumskarte wird dunkel
   gefüllt, damit sie – wie im Screenshot – zuerst gelesen wird.
   card-fan.css wird zuletzt geladen und gewinnt daher Gleichstände.
   ===================================================================== */
html body.home-page .home-offers-section--dark .home-offer-card--featured:not(#____never____) {
  background: #0b1c2e !important;
  color: #ffffff !important;
  border-color: var(--saa-red, #d91e18) !important;
  box-shadow: 0 0 0 1px var(--saa-red, #d91e18), 0 30px 72px rgba(217, 30, 24, 0.30) !important;
}
html body.home-page .home-offers-section--dark .home-offer-card--featured h3:not(#____never____) { color: #ffffff !important; }
html body.home-page .home-offers-section--dark .home-offer-card--featured p:not(#____never____) { color: #c3ccd6 !important; }
html body.home-page .home-offers-section--dark .home-offer-card--featured .home-card-meta:not(#____never____) { color: #ffffff !important; }
html body.home-page .home-offers-section--dark .home-offer-card--featured .home-card-arrow:not(#____never____) { border-color: rgba(255,255,255,.5) !important; }

/* =====================================================================
   Offers-Sektion: zentrierte Überschrift „Die drei Säulen …" auf dunklem
   Grund. Weiss erzwungen (Basis-Stylesheet würde sonst Graphite setzen),
   zentriert, Abstand zu den Karten. card-fan.css lädt zuletzt.
   ===================================================================== */
.home-offers-section--dark .home-offers-section__heading {
  text-align: center;   /* volle Containerbreite -> exakt wie das Karten-Grid zentriert */
}
html body .home-offers-section--dark .home-offers-section__heading h2:not(#____never____) {
  color: #ffffff !important;
  line-height: 1.12;
  /* h2 hat eine Basis-max-width (820px) + margin:0 -> als Block linksbündig.
     margin-inline:auto zentriert den Block exakt über dem Karten-Grid. */
  margin-inline: auto !important;
  text-align: center;
}

/* 2026-08-04 (Responsive-Sanierung, Befund D):
   Frueher stand hier white-space:nowrap mit width:max-content und darunter ein
   Sonderfall fuer 600–760px, der die Ueberschrift per width:calc(100% + 128px)
   absichtlich 128px BREITER als ihren Container machte, damit sie einzeilig
   bleibt. Das war der einzige echte Ueberlauf, der nach dem 100vw-Umbau noch
   uebrig blieb: bei 700px ragte die Zeile 89px ueber den Viewport hinaus.

   Jetzt darf die Ueberschrift umbrechen, statt ihren Container zu sprengen.
   Die 820px-Basisgrenze aus styles.css wird weiterhin aufgehoben (sonst
   braeche sie schon auf breitem Desktop um), aber die Containerbreite ist
   ab jetzt die harte Grenze. Zwei Breakpoints (600, 760) entfallen damit. */
.home-offers-section--dark .home-offers-section__heading h2:not(#____never____) {
  max-width: 100% !important;
  width: auto;
  white-space: normal;
  text-wrap: balance;
}