/* Startseite, Sanitär: Vorher-Nachher-Swiper (06.10.2026)
   Bilder sind Doppelbilder (links vorher, rechts nachher); jede Ebene zeigt eine Hälfte. */
.home-water .home-water-ba { margin:0; overflow:visible; background:none; border-radius:0; }
.hwba-tabs { display:inline-flex; gap:6px; margin:0 0 14px; padding:5px; border:1px solid #d8e0e7; border-radius:999px; background:#fff; }
.hwba-tabs[hidden] { display:none; }
.hwba-tabs [role="tab"] { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border:0; border-radius:999px; background:transparent; color:#16344b; font-weight:600; font-size:.92rem; cursor:pointer; transition:background .15s ease, color .15s ease; }
.hwba-tabs [role="tab"] svg { width:16px; height:16px; }
.hwba-tabs [role="tab"]:hover { background:#edf3f7; }
.hwba-tabs [role="tab"][aria-selected="true"] { background:#16344b; color:#fff; }
.hwba-tabs [role="tab"]:focus-visible { outline:3px solid #215d85; outline-offset:2px; }

.hwba-swiper { overflow:hidden; }
.hwba-swiper:not(.swiper-initialized) .swiper-wrapper { display:grid; gap:24px; }

.hwba-slider { position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden; border-radius:18px; background:#dce5ec; touch-action:pan-y; cursor:ew-resize; }
.hwba-layer { position:absolute; inset:0; background-repeat:no-repeat; background-size:200% auto; pointer-events:none; user-select:none; }
.hwba-layer--before { background-position:left center; clip-path:inset(0 50% 0 0); }
.hwba-layer--after { background-position:right center; }
.hwba-tag { position:absolute; top:16px; padding:6px 11px; border-radius:6px; background:rgba(22,52,75,.85); color:#fff; font-size:12px; font-weight:600; pointer-events:none; }
.hwba-tag--before { left:16px; }
.hwba-tag--after { right:16px; }
.hwba-handle { position:absolute; top:0; bottom:0; left:50%; width:44px; padding:0; transform:translateX(-50%); border:0; background:transparent; color:#16344b; cursor:ew-resize; touch-action:none; }
.hwba-handle::before { content:""; position:absolute; top:0; bottom:0; left:21px; width:2px; background:#fff; box-shadow:0 0 8px rgba(22,52,75,.3); }
.hwba-handle > span { position:absolute; top:50%; left:0; display:grid; place-items:center; width:44px; height:44px; transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 3px 18px rgba(22,52,75,.3); font-size:1.3rem; }
.hwba-handle:focus-visible > span { outline:3px solid #215d85; outline-offset:2px; }

.hwba-text { margin:14px 2px 0; color:#536574; font-size:.92rem; line-height:1.6; }
.hwba-text strong { color:#16344b; }
.hwba-text a { color:#a61657; font-weight:700; text-decoration:none; white-space:nowrap; }
.hwba-text a:hover { text-decoration:underline; text-underline-offset:3px; }
.home-water .home-water-ba figcaption { padding:10px 2px 0; }

@media (max-width:767.98px) {
  .hwba-tabs { display:flex; width:100%; }
  .hwba-tabs[hidden] { display:none; }
  .hwba-tabs [role="tab"] { flex:1; justify-content:center; }
  .hwba-slider { border-radius:14px; }
  .hwba-tag { top:12px; font-size:11px; }
  .hwba-tag--before { left:12px; }
  .hwba-tag--after { right:12px; }
}
@media (prefers-reduced-motion:reduce) { .hwba-tabs [role="tab"] { transition:none; } }

/* Desktop: etwas flacher, damit Bild und Linkliste im Gleichgewicht stehen */
@media (min-width:992px) { .hwba-slider { aspect-ratio:5 / 4; } }

/* Bad-Vergleich „Vom Bestand zur Badidee“: gleicher Regler, Hochformat der Bildhälften */
.hwba-slider.hwba-slider--bath { aspect-ratio:836 / 940; }
@media (min-width:992px) { .hwba-slider.hwba-slider--bath { aspect-ratio:836 / 940; } }
.bath-compare__legend { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0 0; }
.bath-compare__legend dt { margin-bottom:4px; color:#16344b; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.bath-compare__legend dd { margin:0; color:#536574; font-size:.88rem; line-height:1.6; }
.home26 .bath-image-note { margin-top:12px; }
@media (max-width:575.98px) {
  .bath-compare__legend { grid-template-columns:1fr; gap:10px; }
  .hwba-slider--bath .hwba-tag { font-size:10.5px; padding:5px 8px; }
}