/* aqua-rebell.de – Korrekturen am Original-CSS (asset/aquasabi.css). Nur Fehler des alten Themes und Ersatz für das,
   was dort jQuery/Inline-Skripte erledigt haben; sonst gilt das Original 1:1. */

/* Breadcrumb: Pfeile per clip-path statt Border-Dreiecken, 1 px Überlappung – sonst graue Streifen des .arrow bei
   krummen Zoomstufen (Fix wie dev.aquasabi.de, tasks/21-09/TASK-theme-breadcrumb-luecken.md) */
#breadcrumb li { position: relative; }
#breadcrumb li:before,
#breadcrumb li:after {
  border: 0;
  background-color: #fff;
  top: 0;
  bottom: 0;
  width: 11px;
}
#breadcrumb li:before {
  left: -10px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}
#breadcrumb li:after {
  right: -10px;
  -webkit-clip-path: polygon(0 0, 1px 0, 100% 50%, 1px 100%, 0 100%);
  clip-path: polygon(0 0, 1px 0, 100% 50%, 1px 100%, 0 100%);
}
#breadcrumb li:not(:last-of-type):hover:before,
#breadcrumb li:not(:last-of-type):hover:after { background-color: #50c8c6; }

/* Horizontaler Überlauf: .row mit -10 px Rand in Spalten ohne Innenabstand (#product-offer, Fuß-Grid) ragt 1–10 px über
   den Viewport. clip statt hidden: erzeugt keinen Scroll-Container, position: sticky bleibt wirksam */
#content-wrapper,
#footer { overflow-x: clip; }

/* UVP-Kennzeichnung vor dem Preis (im Original ein Inline-<style>; Text hier aus der Sprachdatei) */
#item-final-price .currency:before { content: attr(data-uvp); padding-right: 10px; }

/* Scroll-Spy (Produkt- und Inhaltsseiten): CSS-Sticky statt der .stickied-Berechnung per jQuery */
@media (min-width: 768px) {
  .item-body-sidebar #scroll-spy,
  .layout-faq .sidebar #scroll-spy { position: -webkit-sticky; position: sticky; top: 10px; }
}

/* Produktgalerie: Breiten/Positionen setzte im Original jQuery */
#small-gallery-touch-area .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
#small-gallery-slider { display: flex; transition: transform 250ms ease; }
#small-gallery-slider img {
  flex: 0 0 auto;
  width: calc(100% / var(--bilder, 1));
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
#small-gallery-zoom-output .inner { width: 100%; height: 100%; overflow: hidden; }
#small-gallery-zoom-output img { max-width: none; }
#large-gallery-touch-area > img {
  display: none;
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 60px;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: calc(100% - 70px);
  z-index: 99999;
  cursor: zoom-out;
}
#large-gallery-touch-area > img.aktiv { display: block; }
#large-gallery-touch-area #large-gallery-image-indicator-bar { opacity: 1; z-index: 99999; }
body.large-gallery-open { overflow: hidden; }

/* Ein-/Ausblenden durch site.js (Filter, „Mehr Artikel anzeigen“, „Alle Kundenmeinungen“) */
.product-wrapper.verborgen,
.timeline-card.verborgen { display: none; }
.timeline-card .read-more,
#reset-filters,
.aqua-sorter { cursor: pointer; }

/* Dritte Menüebene (PowerMenu) rechts neben dem Panel */
#s360-powermenu-hook .s360-powermenu-customcontainer { top: 0; left: 100%; }

/* Sprachwahl: Kürzel DE/EN statt Flaggen (Wunsch User 05.10.2026), gestaltet wie das PowerMenü (öffnet per Klick):
   Feld wie ein Reiter (offen #99d932), Panel #8fcb2f mit 5px-Rahmen #80b62c, Innenfläche bündig mit dem Feld, Einträge
   16px fett/weiß mit 20px Abstand, Trennlinie, Hover #99d932, 5px-Streifen in Panelfarbe verbindet Feld und Panel.
   Rahmen als box-shadow statt border: am rechten Rand sonst 1px horizontaler Überlauf. */
#header-lang-wrapper .sprachkuerzel {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
#header-lang-wrapper .language-dropdown.open:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 5px;
  background: #8fcb2f;
  z-index: 401;
}
#header-lang-wrapper #language-dropdown {
  top: calc(100% + 5px);
  margin-top: 0;
  left: 0;
  right: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: #8fcb2f;
  box-shadow: 0 0 0 5px #80b62c;
}
#header-lang-wrapper #language-dropdown a {
  display: block;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
#header-lang-wrapper #language-dropdown a:not(:last-child) { border-bottom: 1px solid #80b62c; }
#header-lang-wrapper #language-dropdown a:hover,
#header-lang-wrapper #language-dropdown a:focus { background-color: #99d932; }
#header-lang-wrapper #language-dropdown .sprachkuerzel {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  font-size: inherit;
}
@media (max-width: 767px) {
  #header-lang-wrapper .sprachkuerzel { width: 45px; height: 45px; line-height: 45px; }
}

/* Hinweis „Übersetzt aus …“ an Kundenmeinungen: Sprach-Symbol ist breiter als fa-check/fa-heart – Abstand am Text
   statt am gefloateten Symbol (ein breiterer Float verkürzt die Zeile und bricht den Hinweis um); immer einzeilig */
.timeline-card .stat.uebersetzung { white-space: nowrap; }
.timeline-card .footer .stats .stat.uebersetzung span { margin-left: 28px; }   /* schlägt die Theme-Regel (5 Klassen) */

/* Barrierefreiheit (05.10.2026): Sprunglink nur bei Tastaturfokus sichtbar; Fokusrahmen für Schaltflächen aus div;
   Galerie-Symbole bei Tastaturfokus wie beim Überfahren mit der Maus. Optik sonst unverändert. */
.sprunglink { position: absolute; left: -10000px; top: 0; z-index: 100000; padding: 10px 16px; background: #fff;
  color: #1c1c1c; font-weight: 700; }
.sprunglink:focus { left: 10px; top: 10px; outline: 3px solid #1d5c8f; }
#content-wrapper:focus, #large-gallery-touch-area:focus { outline: none; }
#item [role="button"]:focus-visible,
.language-dropdown [role="button"]:focus-visible { outline: 3px solid #1d5c8f; outline-offset: 2px; }
#large-gallery-close-click-target:focus-visible { outline-offset: -6px; }
#small-gallery-desktop-icons:focus-within { opacity: 1; }
/* Titelzeile der Inhaltstabellen als <caption> (bau/zugang.py) – Optik wie die bisherige Kopfzelle <th colspan> */
table.lined > caption { caption-side: top; padding: 0 0 5px; color: inherit; font-size: 16px; font-weight: 700;
  line-height: 30px; text-align: left; }
/* Bildpunkte unter 1200 px: 15 px groß, Mittenabstand 24 px statt 20 px – Mindestabstand für Touch-Ziele (WCAG 2.5.8),
   seit die Punkte Schaltflächen sind; ab 1200 px sind sie 26 px groß und unverändert */
@media (max-width: 1199px) {
  #small-gallery-image-indicators .indicator,
  #large-gallery-image-indicators .indicator { margin: 0 4.5px; }
}