/* ==========================================================================
   logo-slider.css — Widget: Endlos-Logoslider (Kundenlogos)
   Markup: widgets/logo-slider.php  ·  Dauer/Hover-Pause: logo-slider.js
   Ueber dem laufenden Band steht "Zufriedene Kunden", darunter "… und viele mehr".
   Zwei Varianten (index.php bindet beide ein, CSS zeigt je nach Breite eine):
     .widget-slider--vertical    schmale Spalte rechts im Hero  (>= 700px)
     .widget-slider--horizontal  volle Breite unter dem Hero-CTA (< 700px)

   Bewegung: reines CSS. .logo-slider__marquee enthaelt die Liste ZWEIMAL und
   wird linear um -50% verschoben (= exakt eine Kopie) -> nahtloser Loop,
   pixelgenau weil beide Kopien identisch sind. Zwischen JEDEM Logo (und am
   Ende jeder Kopie) steht ein echtes Abstands-Item
   (.logo-slider__item--spacer, feste Groesse --ls-gap / --ls-h-gap) -> der
   Abstand von Logo zu Logo ist ueberall gleich, auch am Kopien-Uebergang.
   Jedes Logo hugt seine Grafik (feste Hoehe/Breite quer zur Laufrichtung,
   natuerliche Groesse laengs, gedeckelt per --ls-logo-max-width) -> gleicher
   Abstand = gleicher SICHTBARER Abstand.
   ========================================================================== */

:root {
    /* Gemeinsam. */
    --ls-fade: 10%;              /* Ein-/Ausblendzone am Bandrand. */
    --ls-label-color: #ffffff;

    /* Vertikale Variante. */
    --ls-column-width: clamp(180px, 21vw, 264px);
    --ls-inset-right: 4.5rem;
    --ls-logo-height: 60px;      /* feste Logo-Hoehe (quer zur Laufrichtung). */
    --ls-logo-max-width: 210px;  /* Deckelung fuer sehr breite Logos. */
    --ls-gap: 74px;              /* Abstand Logo -> Logo (Spacer-Hoehe). */
    --ls-speed: 46;              /* px pro Sekunde. */

    /* Horizontale Variante. */
    --ls-h-logo-height: 50px;
    --ls-h-logo-max-width: 176px;
    --ls-h-gap: 66px;            /* Abstand Logo -> Logo (Spacer-Breite). */
    --ls-h-speed: 60;
}

/* ==========================================================================
   Gemeinsames Bandgeruest
   ========================================================================== */
.logo-slider {
    position: relative;
    overflow: hidden;   
}

.widget-slider {
    /*
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.05);
    */
}

.logo-slider__marquee {
    display: flex;
    will-change: transform;
    animation-duration: var(--ls-duration, 40s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.logo-slider.is-paused .logo-slider__marquee {
    animation-play-state: paused;
}

.logo-slider__track {
    flex: none;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.logo-slider__item {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.logo-slider__item--spacer {
    flex: none;
}

/* Logo-Box hugt die Grafik: die weisse Version steht im Normalfluss und gibt
   die Boxgroesse vor, die farbige liegt deckungsgleich darueber (gleiches
   Seitenverhaeltnis lt. whiten.js). width:fit-content, damit die Box im
   Flex-Kontext auf die Grafik schrumpft statt die Spalte zu fuellen. */
.logo-slider__logo {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    pointer-events: auto;
}

.logo-slider__img {
    display: block;
    object-fit: contain;
    transition: opacity var(--transition-base);
}

.logo-slider__img--white { position: relative; }

.logo-slider__img--color {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Hover-Crossfade: weiss aus, Farbe ein. Logos ohne echte Farbversion
   (.logo-slider__logo--mono, z. B. Burgerheart, 60 seconds) haben gar keine
   farbige <img> -> kein Crossfade, kein Transparenz-Flackern. */
.logo-slider__img--color { opacity: 0; }
.logo-slider__logo:not(.logo-slider__logo--mono):hover .logo-slider__img--white { opacity: 0; }
.logo-slider__logo:hover .logo-slider__img--color { opacity: 1; }

/* Touch: kein Hover -> Farbe dauerhaft sichtbar. */
@media (hover: none) {
    .logo-slider__logo:not(.logo-slider__logo--mono) .logo-slider__img--white { opacity: 0; }
    .logo-slider__img--color { opacity: 1; }
}

/* Ortsname unter dem Wappen – im Fluss, verbraucht Platz. Der Spacer bleibt
   trotzdem ueberall gleich gross -> gleicher Abstand von Item zu Item,
   Beschriftung eingerechnet. */
.logo-slider__caption {
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    color: var(--ls-label-color);
}

/* Label ueber dem Band ("Zufriedene Kunden") — etwas kraeftiger als das
   Fuss-Label darunter, wirkt so wie eine kleine Ueberschrift. */
.widget-slider__head {
    flex: none;
    /* margin:0, da .widget-slider--horizontal per flex-gap trennt; die
       vertikale Variante setzt ihren eigenen margin-bottom (s.u.). */
    margin: 0;
    text-align: center;
    color: var(--ls-label-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Label unter dem Band ("… und viele mehr"). */
.widget-slider__foot {
    flex: none;
    margin: 0;
    text-align: center;
    color: var(--ls-label-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

@keyframes ls-marquee-y { to { transform: translate3d(0, -50%, 0); } }
@keyframes ls-marquee-x { to { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   Variante: vertikal (Spalte rechts im Hero-Bild)
   ========================================================================== */
.widget-slider--vertical {
    position: absolute;
    top: 0;
    right: calc(max(1.5rem, (100% - var(--content-max)) / 2) + var(--ls-inset-right));
    bottom: 0;
    z-index: 1;
    width: var(--ls-column-width);
    display: flex;
    flex-direction: column;
    padding-block: 1.25rem;
    pointer-events: none;
    
}

.widget-slider--vertical .logo-slider {
    /* Fuellt die verbleibende Hoehe (nach Kopf-/Fuss-Label) -> Band reicht
       fast bis ganz oben, sitzt aber (dank bottom:0 am Container) buendig
       unten. Kein fester/kleiner Wert mehr, sonst bleibt oben zu viel
       Leerraum (sah auf normalen Bildschirmen "erst ab Bildschirmmitte" aus). */
    flex: 1;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%);
}

.widget-slider--vertical .logo-slider__marquee {
    flex-direction: column;
    align-items: center;
    animation-name: ls-marquee-y;
}

.widget-slider--vertical .logo-slider__track { flex-direction: column; align-items: center; }
.widget-slider--vertical .logo-slider__item--spacer { height: var(--ls-gap); }

/* Ortsnamen in der schmalen Spalte kleiner (horizontal sind sie display:none). */
.widget-slider--vertical .logo-slider__caption {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.widget-slider--vertical .logo-slider__img--white {
    height: var(--ls-logo-height);
    width: auto;
    max-width: var(--ls-logo-max-width);
}
.widget-slider--vertical .logo-slider__img--color {
    width: 100%;
    height: 100%;
}

.widget-slider--vertical .widget-slider__head {
    /* Kein eigener margin-top: der Container-Padding (padding-block:1.25rem
       auf .widget-slider--vertical) sorgt oben fuer denselben Abstand wie
       unten am Fuss-Label (das ebenfalls kein margin-bottom hat). */
    margin-bottom: calc(0.5rem + 12px);
    white-space: nowrap;
    font-size: 0.82rem;
}

.widget-slider--vertical .widget-slider__foot {
    margin-top: calc(0.5rem + 12px);
    white-space: nowrap;
    font-size: 0.82rem;
    letter-spacing: 0;
}

.snap-section:not(.hero) .widget-slider--vertical { display: none; }

@media (max-width: 699.98px) {
    .widget-slider--vertical { display: none; }
}

/* 700–1023px: der Hero nutzt noch das mobile Kopf-Layout (zentriertes Logo,
   kein Header-CTA). Damit sich die vertikale Logospalte und die
   Hero-Ueberschrift nicht ueberlappen: schmalere Spalte, minimaler Abstand
   von rechts, und der Hero-Textblock bekommt rechts entsprechend Platz. */
@media (min-width: 700px) and (max-width: 1023.98px) {
    .hero {
        --ls-column-width: clamp(148px, 19vw, 186px);
        --ls-inset-right: 1.25rem;
        --ls-logo-max-width: 148px; /* schmale Spalte -> Logos nicht ueberlaufen lassen */
    }
    .hero .hero__content {
        padding-right: calc(var(--ls-column-width) + var(--ls-inset-right) + 2rem);
    }
    .hero .hero__content h1 {
        font-size: clamp(1.9rem, 6vw, 2.75rem);
    }
    .widget-slider--vertical .widget-slider__head,
    .widget-slider--vertical .widget-slider__foot {
        white-space: normal;
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   Variante: horizontal (volle Breite, IM FLUSS direkt unter dem Hero-CTA)
   ========================================================================== */
.widget-slider--horizontal {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    pointer-events: none;
    padding-left: 1rem;
}

.widget-slider--horizontal .logo-slider {
    flex: none;
    height: calc(var(--ls-h-logo-height) + 2.4rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.widget-slider--horizontal .logo-slider__marquee {
    flex-direction: row;
    align-items: center;
    width: max-content;
    height: 100%;
    animation-name: ls-marquee-x;
}

.widget-slider--horizontal .logo-slider__track { flex-direction: row; align-items: center; }
.widget-slider--horizontal .logo-slider__item--spacer { width: var(--ls-h-gap); }

.widget-slider--horizontal .logo-slider__img--white {
    width: auto;
    height: var(--ls-h-logo-height);
    max-width: var(--ls-h-logo-max-width);
}
.widget-slider--horizontal .logo-slider__img--color {
    width: 100%;
    height: 100%;
}

/* Ortsnamen auch in der horizontalen Variante – klein, im Fluss (verbraucht
   Platz, wie in der vertikalen Variante). Bei den 4 beschrifteten Wappen wird
   das Item dadurch etwas breiter als die uebrigen Logos. */
.widget-slider--horizontal .logo-slider__item {
    gap: 0.25rem;
}
.widget-slider--horizontal .logo-slider__caption {
    font-size: 0.58rem;
    letter-spacing: 0;
}

.widget-slider--horizontal .widget-slider__head,
.widget-slider--horizontal .widget-slider__foot {
    text-align: left;
    padding-inline: 1.5rem;
}

@media (min-width: 700px) {
    .widget-slider--horizontal { display: none; }
}