/* Bredo Slider — Style-Layer für ALLE Slider auf der Site.
   Eine einheitliche Sprache: eckige Pfeile, eckige Dots, gleiche Farben,
   gleiche Hover-States.

   Quellen-Markup, das hier gestyled wird:
     - .feedback-slider (Startseite, Kundenstimmen)
     - .project-slider  (Über-Uns Hauptbereich, Leistungen-Detail)
     - .contact-slider  (Kontakt — historisch, aktuell statisches Markup)
     - .bredo-slider    (neue Slider-Komponente src/components/site/Slider.astro;
                         Reserve für künftige Sektionen)

   Die Slider-Engine kommt aus public/site-runtime.js, diese Datei macht
   ausschliesslich Optik. Höhere Spezifität via html.bredo-js …, damit
   site.css / Astro-scoped-Styles ohne !important geschlagen werden. */

/* ───────────────────────────────────────────────────────────────────────
   Pfeile — eckig 56×56, dunkel, Brand-Orange auf Hover.
   Gilt für alle Pfeil-Klassen, egal welches Markup.
   ─────────────────────────────────────────────────────────────────────── */
html.bredo-js .bredo-slider-arrow,
html.bredo-js .feedback-arrow,
html.bredo-js .project-slider-arrow,
html.bredo-js .contact-slider-arrow,
html.bredo-js .bredo-projects-swiper__btn {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--font-color--title-color, #101418);
  color: var(--bg-color--white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: none;
  transform: none;
}
html.bredo-js .bredo-slider-arrow:hover,
html.bredo-js .feedback-arrow:hover,
html.bredo-js .project-slider-arrow:hover,
html.bredo-js .contact-slider-arrow:hover,
html.bredo-js .bredo-projects-swiper__btn:hover {
  background: var(--bg-color--primary, #ff6229);
  color: var(--bg-color--white, #fff);
  border-color: var(--bg-color--primary, #ff6229);
  transform: none;
}
html.bredo-js .bredo-slider-arrow[aria-disabled='true'],
html.bredo-js .bredo-slider-arrow:disabled,
html.bredo-js .feedback-arrow[aria-disabled='true'],
html.bredo-js .project-slider-arrow[aria-disabled='true'],
html.bredo-js .contact-slider-arrow[aria-disabled='true'],
html.bredo-js .bredo-projects-swiper__btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Swiper-Bullets eckig statt rund. */
html.bredo-js .bredo-projects-swiper__bullet {
  width: 14px;
  height: 8px;
  border-radius: 0;
  background: rgba(16, 20, 24, 0.25);
  transform: none;
}
html.bredo-js .bredo-projects-swiper__bullet--active {
  background: var(--bg-color--primary, #ff6229);
  transform: scaleX(1.5);
}

/* Icons im Pfeil-Button — SVG aus der Bredo-Slider-Komponente. */
html.bredo-js .bredo-slider-arrow svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────
   Feedback-Slider (Startseite, Kundenstimmen) — Pfeile oben rechts ÜBER
   dem Slider, gleiche Position wie HomeProjects-Carousel oberhalb. Damit
   sieht die Startseite konsistent aus: jede horizontale Slider-Sektion
   hat ihre Buttons oben-rechts.
   ─────────────────────────────────────────────────────────────────────── */
html.bredo-js .feedback-slider .feedback-arrow.left,
html.bredo-js .feedback-slider .feedback-arrow.right {
  position: absolute;
  top: -84px;
  bottom: auto;
  inset-inline-end: auto;
}
html.bredo-js .feedback-slider .feedback-arrow.left {
  right: 64px;
}
html.bredo-js .feedback-slider .feedback-arrow.right {
  right: 0;
}
@media (max-width: 991px) {
  html.bredo-js .feedback-slider .feedback-arrow.left,
  html.bredo-js .feedback-slider .feedback-arrow.right {
    top: -72px;
  }
}
@media (max-width: 575px) {
  html.bredo-js .feedback-slider .feedback-arrow.left,
  html.bredo-js .feedback-slider .feedback-arrow.right {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    max-height: 48px;
    top: -64px;
  }
  html.bredo-js .feedback-slider .feedback-arrow.left {
    right: 56px;
  }
}

/* Slider-Nav (Dots) unter dem Slider zentriert. */
html.bredo-js .feedback-slider .feedback-slide-nav {
  position: static;
  margin-top: 24px;
  inset: auto;
}

/* ───────────────────────────────────────────────────────────────────────
   Dots — eckig 14×8, dunkel default, Brand-orange aktiv.
   Selektoren auf .bw-slider-dot (Eigen-Markup).
   ─────────────────────────────────────────────────────────────────────── */
html.bredo-js .bw-slider-dot {
  width: 14px;
  height: 8px;
  border-radius: 0;
  background: rgba(16, 20, 24, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}
html.bredo-js .bw-slider-dot.bw-active,
html.bredo-js .bw-slider-dot[aria-current='true'] {
  background: var(--bg-color--primary, #ff6229);
  transform: scaleX(1.5);
}
html.bredo-js .bredo-slider--on-dark .bw-slider-dot {
  background: rgba(255, 255, 255, 0.35);
}
html.bredo-js .bredo-slider--on-dark .bw-slider-dot.bw-active {
  background: #fff;
}

/* ───────────────────────────────────────────────────────────────────────
   .bredo-slider — Slide-Geometrie + Layout für die zentrale Slider-
   Komponente (src/components/site/Slider.astro). Eine Sprache für ALLE
   Slider auf der Site: Feedback, Home/Projekte, Leistungen/Projekte,
   Über-Uns/Projekte. Engine-Logik kommt aus site-runtime.js, hier nur
   Geometrie + Optik.
   ─────────────────────────────────────────────────────────────────────── */
/* Legacy-Defaults neutralisieren — site.css setzt auf .bw-slider
   `background: #ddd; height: 300px; text-align: center` als Initial-
   Style. Das passte zum Original-Hero-Slider mit dunklem Banner;
   für unsere Card-Slider muss es transparent + auto-Höhe sein. */
html.bredo-js .bredo-slider {
  background: transparent;
  height: auto;
  text-align: left;
}

.bredo-slider {
  --bredo-slider-perview: var(--bredo-slider-perview-mobile, 1);
  --bredo-slide-gap: var(--bredo-slide-gap, 22px);
  --bredo-slide-width: calc(
    (100% - (var(--bredo-slider-perview) - 1) * var(--bredo-slide-gap))
    / var(--bredo-slider-perview)
  );
  --bredo-slide-padx: var(--bredo-slider-padx-mobile, 0px);
  position: relative;
  padding-top: 80px;
}
@media (min-width: 576px) {
  .bredo-slider {
    --bredo-slider-perview: var(--bredo-slider-perview-tablet, var(--bredo-slider-perview-mobile, 1));
    --bredo-slide-padx: 0px;
  }
}
@media (min-width: 992px) {
  .bredo-slider {
    --bredo-slider-perview: var(--bredo-slider-perview-desktop, var(--bredo-slider-perview-tablet, 1));
  }
}
@media (max-width: 575px) {
  .bredo-slider {
    padding-top: 0;
    padding-bottom: 72px;
  }
}

/* Controls-Bar oben rechts: Counter (optional) + Pfeile (optional).
   Flex-Layout statt Absolut-Positionierung — Counter und Pfeile leben
   nebeneinander und reagieren auf vorhandene/fehlende Geschwister. */
html.bredo-js .bredo-slider .bredo-slider-controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
@media (max-width: 575px) {
  html.bredo-js .bredo-slider .bredo-slider-controls {
    position: static;
    justify-content: center;
    margin-top: 24px;
    order: 3;
  }
}

/* Pfeile innerhalb der Controls-Bar nicht absolut positionieren — sie
   sollen im Flex-Container nebeneinanderstehen. Optik (56×56, eckig,
   Brand-Orange auf Hover) kommt aus der allgemeinen Pfeil-Regel oben. */
html.bredo-js .bredo-slider .bredo-slider-arrow {
  position: static;
  top: auto;
  right: auto;
  left: auto;
}

/* Native <button[disabled]> visualisieren — das CSS-Modul kennt
   aria-disabled bereits, aber Slider.astro rendert echte <button>-Tags,
   die die Engine via disabled-Attribut markiert. */
html.bredo-js .bredo-slider .bredo-slider-arrow:disabled,
html.bredo-js .bredo-slider .bredo-slider-arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* Counter "3 / 12" — sitzt links neben den Pfeilen, monospaced Ziffern. */
html.bredo-js .bredo-slider .bredo-slider-counter {
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  color: var(--font-color--title-color, #101418);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  justify-content: flex-end;
}
html.bredo-js .bredo-slider--on-dark .bredo-slider-counter {
  color: var(--bg-color--white, #fff);
}

/* Dots-Reihe unter dem Slider zentriert. */
.bredo-slider .bredo-slider-nav {
  position: static;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 16px 0 0;
  inset: auto;
}

/* HINWEIS: `content-visibility: auto` ist hier bewusst NICHT gesetzt —
   bei horizontalen Scroll-Carousels schiebt der Browser off-screen-
   Slides auf die `contain-intrinsic-size` (1px) zusammen, was die
   Scroll-Position der nachfolgenden Slides verschiebt. Das Carousel
   bricht visuell. content-visibility eignet sich nur für vertikale
   Off-Viewport-Items, nicht für horizontale Slider, wo alle Slides
   gleichzeitig im DOM ihre echten Offsets behalten müssen. */

/* Aria-Live-Region für Slide-Wechsel — nur akustisch existent, optisch
   raus aus dem Layout-Fluss. */
html.bredo-js .bredo-slider .bw-slider-aria-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   STRUKTURELLES Slider-Layout (Flex-Scroll-Mask + Slide-Geometrie).

   KRITISCH für No-FOUC: Diese Regeln lagen früher im CSS-String, den
   public/site-runtime.js zur Laufzeit (deferred, Body-Ende) injiziert
   hat — zusammen mit dem Setzen von `html.bredo-js`. Effekt: Vor dem
   Ausführen der Runtime zeigte der Slider seinen Legacy-Roh-Zustand
   (site.css `.bw-slider { background:#ddd; height:300px }` +
   `.bw-slide { display:inline-block; width:100% }` im `overflow:hidden`-
   Mask = graue 300px-Box, nur erster Slide sichtbar). Erst beim Lauf der
   Runtime sprang das Layout aufs echte Carousel um — auf Safari als
   ruckelndes „Nachladen" sichtbar.

   Jetzt statisch im head-CSS + `html.bredo-js` wird synchron im <head>
   gesetzt (BaseLayout) → finales Carousel-Layout schon beim first paint.
   Die deferred Runtime liefert nur noch Verhalten (Pfeile, Drag, Dots,
   Auto-Advance) und die Reveal-Fade-CSS (below-the-fold, kein Flicker). */
html.bredo-js .bw-slider .bw-slider-mask {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto !important;
  overflow-y: hidden;
  position: relative;
  scroll-snap-type: x mandatory;
  /* scroll-behavior bewusst NICHT 'smooth' — die Runtime tweent scrollLeft
     selbst per rAF; smooth würde dagegen arbeiten (Counter-Glitches). */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* Scroll-Anchoring aus: verhindert, dass der Browser die Scroll-Position
     beim Nachladen/Aufdecken von Slide-Inhalt selbsttätig verschiebt
     (Mit-Ursache des "startet auf Seite 2"-Effekts). */
  overflow-anchor: none;
  touch-action: pan-y pinch-zoom;
  white-space: normal;
  column-gap: var(--bredo-slide-gap, 0px);
  padding-inline: var(--bredo-slide-padx, 0px) 0;
  scroll-padding-inline-start: var(--bredo-slide-padx, 0px);
}
html.bredo-js .bw-slider .bw-slider-mask::-webkit-scrollbar {
  display: none;
}
html.bredo-js .bw-slider .bw-slider-mask.is-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
html.bredo-js .bw-slider .bw-slider-mask .bw-slide {
  flex: 0 0 var(--bredo-slide-width, 100%) !important;
  width: var(--bredo-slide-width, 100%) !important;
  max-width: var(--bredo-slide-width, 100%) !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}