/* ========== CUSTOM: Feintuning & stabile Layout-Fixes ========== */

/* Buttons: kleine Micro-Interactions */
.btn.primary{
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn.primary:hover{ transform: translateY(-1px); }
.btn.primary:active{ transform: translateY(0); filter: saturate(1.05); }

/* Tabs: Hover-Fallback + moderner color-mix */
.tabs .tab:not(.is-active):hover{
  background: rgba(19,164,216,.08); /* Fallback für ältere Browser */
  border-color: rgba(19,164,216,.35);
  background: color-mix(in srgb, var(--primary, #13A4D8) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #13A4D8) 35%, transparent);
}

/* Brandbar: dauerhaft hellblau + oberer Streifen; immer über dem Hero */
.brandbar,
.brandbar .wrap{
  background: #EAF6FF;
  border-bottom: 1px solid #D6EEFE;
}
.brandbar{
  position: relative;
  z-index: 20;                         /* Header liegt über dem Hero/Overlay */
  border-top: 30px solid #13A4D8; /* dünner blauer Balken */
}

/* Hero: sichere Layer + Mindesthöhe gegen Zoom-„Leerraum“ */
.hero{ position: relative; z-index: 0; min-height: clamp(520px, 62vh, 820px); }
.hero::before{ pointer-events: none; z-index: 0; }

/* ================================================================ */
/* === LOGO SLIDER – minimal, CSS-only, nahtlos ===================== */
.logo-rail{
  /* Variablen */
  --bg: #ffffff;      /* Tipp: leichtes Grau kaschiert Off-White der JPG-Logos besser als #fff */
  --h: 64px;          /* Logo-Höhe: 52/60/64/70 */
  --gap: 36px;        /* Abstand zwischen Logos */
  --speed: 30s;       /* kleiner = schneller (20–40s) */
  --fadeL: 140px;      /* links: früher ausblenden */
  --fadeR: 140px;      /* rechts: später einblenden */
  --seam-tweak: -0.5px;/* Naht-Feintuning gegen Mikro-Ruckler */
  --band-pad: 32px;   /* Laufband-Höhe über Padding steuern */

  background: var(--bg);             /* <— fehlte bei dir */
  border-top: 1px solid #e9edf2;
  border-bottom: 1px solid #e9edf2;
  padding: var(--band-pad) 0;        /* <— nur diese eine Padding-Zeile behalten */
  overflow: hidden;
  position: relative;

  /* Full-bleed (falls gewünscht – sonst die 5 Zeilen entfernen) */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Fades (kräftiger Verlauf, später rein / früher raus) */
.logo-rail::before,
.logo-rail::after{
  content:"";
  position:absolute; top:0; bottom:0; pointer-events:none; z-index:3;
}
.logo-rail::before{
  left:0; width:var(--fadeL);
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 70%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%
  );
}
.logo-rail::after{
  right:0; width:var(--fadeR);
  background: linear-gradient(
    to left,
    var(--bg) 0%,
    var(--bg) 70%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%
  );
}

/* Marquee-Wrapper */
.logo-rail .marquee{
  overflow: hidden;
  background: transparent;
}

/* EIN Track, Logos doppelt → bei -50% nahtloser Loop */
.logo-rail .track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  height: var(--h);
  will-change: transform;
  animation: marquee calc(var(--speed) + 0.03s) linear infinite both;
  line-height: 0;
  -webkit-mask-image: none !important;
          mask-image: none !important;

  /* Naht-Stabilität */
  min-width: max-content;
  backface-visibility: hidden;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* JS übernimmt das Panning: CSS-Animation dann ausschalten */
.logo-rail.js-pan .track{
  animation: none !important;
}

/* Logos füllen die Höhe */
.logo-rail .track img{
  height: var(--h);
  width: auto;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

/* Naht-Korrektur (Seam-Tweak) – beseitigt Mikro-Ruckler */
@keyframes marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-50% + var(--seam-tweak)), 0, 0); }
}

/* Mobile */
@media (max-width: 480px){
  .logo-rail{
    --h: 48px;
    --band-pad: 18px;   /* mobiles Laufband etwas niedriger */
  }
}
@media (prefers-reduced-motion: reduce){
  .btn.primary{ transition: none; }
  .btn.primary:hover{ transform: none; }
}

/* ===== Zahlarten-Block: Titel + Icons ===== */
.pay-block{
  display: grid;
  justify-items: center;   /* Titel & Liste zentriert innerhalb des Blocks */
  row-gap: 8px;
  width: max-content;      /* Block so breit wie das Icon-Raster */
  /* margin-inline: auto;   <- nur nötig, wenn du ihn irgendwo zentrieren willst */
}

.pay-title{
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.pay-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 12px 18px;
  justify-content: center;
  margin: 0; padding: 0; list-style: none;
}

/* Im Footer rechts an der Wrap-Kante ausrichten + Abstand einstellbar */
.footer-right .pay-block{
  margin-inline: 0;
  margin-left: auto;                          /* schiebt den Block nach rechts */
  margin-right: var(--pay-offset, 16px);      /* Feintuning: 12–28px nach Geschmack */
}

/* Auf kleinen Screens wieder mittig */
@media (max-width: 560px){
  .footer-right .pay-block{
    margin-left: auto;
    margin-right: auto;
  }
}