/* =========================================================================
   TT Herstellerslider – Frontend-Styles
   Aufbau und Optik bewusst identisch zum TT Artikelslider: gleiche Karten-,
   Pfeil- und Punkt-Gestaltung, gleiche Button-Logik (Bootstrap-Klasse ODER
   eigene Farben über CSS-Variablen).

   Die ganze Karte ist ein <a>; alles darin sind <span>-Elemente, damit keine
   verschachtelten Links entstehen. Deshalb setzen die Bausteine explizit
   display-Werte.
   ========================================================================= */

.tt-hs{ position:relative; }
.tt-hs__viewport{ overflow:hidden; }
.tt-hs__slide{ height:auto; display:flex; }

/* ------------------------------------------------------------------ Karte */
.tt-hs__card{
    display:flex; flex-direction:column; width:100%;
    text-decoration:none!important; color:inherit;
    overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.06);
    transition:box-shadow .15s, transform .15s, border-color .15s;
}
.tt-hs__card:hover,
.tt-hs__card:focus-visible{
    text-decoration:none!important; transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(15,23,42,.12);
}
.tt-hs__card:focus-visible{ outline:2px solid var(--nav-bg-h,#2563eb); outline-offset:2px; }

/* ------------------------------------------------------------------- Bild */
.tt-hs__imgwrap{
    display:flex; align-items:center; justify-content:center;
    height:var(--hs-imgh,110px); padding:var(--hs-imgp,14px);
    box-sizing:border-box; width:100%;
}
/* „Einpassen" (Standard): Logo vollstaendig zeigen, Seitenverhaeltnis halten. */
.tt-hs__img{
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain; display:block;
    transition:filter .18s, opacity .18s;
}
/* „Ausfuellen": Bild bedeckt die gesamte Flaeche und wird beschnitten. Dafuer
   muss es die Flaeche auch wirklich einnehmen – max-* allein genuegt nicht. */
.tt-hs--cover .tt-hs__imgwrap{ padding:0; }
.tt-hs--cover .tt-hs__img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }

/* Graustufen-Effekt – immer genau eine der beiden Varianten (oder keine). */
.tt-hs--gray .tt-hs__img{ filter:grayscale(1); opacity:.75; }
.tt-hs--gray .tt-hs__card:hover .tt-hs__img,
.tt-hs--gray .tt-hs__card:focus-visible .tt-hs__img{ filter:none; opacity:1; }

.tt-hs--graycolor .tt-hs__img{ filter:none; opacity:1; }
.tt-hs--graycolor .tt-hs__card:hover .tt-hs__img,
.tt-hs--graycolor .tt-hs__card:focus-visible .tt-hs__img{ filter:grayscale(1); opacity:.75; }

.tt-hs__ph{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; color:#cbd5e1; font-size:26px;
}

/* ------------------------------------------------------------------- Name */
.tt-hs__name{
    display:block; padding:0 12px 12px; font-weight:600; line-height:1.25;
    word-break:break-word; color:inherit;
}
/* !important ist hier noetig: textStyle() setzt die Grundfarbe als Inline-Style
   auf demselben Element – ohne !important koennte die Hover-Farbe sie nie
   ueberschreiben. Gleiche Loesung wie im TT Artikelslider. */
.tt-hs .tt-hs__card .tt-hs__name.tt-hs__name--c{ color:var(--name-c,#0f172a)!important; }
.tt-hs .tt-hs__card:hover .tt-hs__name.tt-hs__name--ch{ color:var(--name-ch,#2563eb)!important; }
.tt-hs .tt-hs__card .tt-hs__name.tt-hs__name--ul,
.tt-hs .tt-hs__card:hover .tt-hs__name.tt-hs__name--ul{ text-decoration:underline!important; }
.tt-hs .tt-hs__card .tt-hs__name.tt-hs__name--ulh{ text-decoration:none!important; }
.tt-hs .tt-hs__card:hover .tt-hs__name.tt-hs__name--ulh{ text-decoration:underline!important; }

/* Ausrichtung von Name und Button */
.tt-hs--left   .tt-hs__name,
.tt-hs--left   .tt-hs__btnrow{ text-align:left;   justify-content:flex-start; }
.tt-hs--center .tt-hs__name,
.tt-hs--center .tt-hs__btnrow{ text-align:center; justify-content:center; }
.tt-hs--right  .tt-hs__name,
.tt-hs--right  .tt-hs__btnrow{ text-align:right;  justify-content:flex-end; }

/* ----------------------------------------------------------------- Button */
/* Der „Button" ist ein <span> in Button-Optik – die Karte selbst ist der Link. */
.tt-hs__btnrow{ display:flex; margin-top:auto; padding:0 12px 12px; }
.tt-hs__cta--block{ width:100%; }
.tt-hs__cta--block.tt-hs__btnbs{ display:flex; }
.tt-hs__btnbs{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; }
.tt-hs__btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    text-decoration:none; font-weight:600; line-height:1; border-radius:9px;
    border:2px solid transparent; padding:.6em 1.1em; white-space:nowrap;
    transition:background-color .12s, border-color .12s, color .12s;
}
/* Eigene Farben (Stil „Eigene Konfiguration"). !important, damit Theme-Regeln
   für Buttons/Links die konfigurierten Farben nicht überschreiben. */
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btn.tt-hs__btn--custom{
    background:var(--btnc-bg,#2563eb)!important; border-color:var(--btnc-bd,#2563eb)!important; color:var(--btnc-tx,#fff)!important;
}
.tt-hs .tt-hs__card:hover .tt-hs__cta.tt-hs__btn.tt-hs__btn--custom{
    background:var(--btnc-bg-h,#1d4ed8)!important; border-color:var(--btnc-bd-h,#1d4ed8)!important; color:var(--btnc-tx-h,#fff)!important;
}
.tt-hs .tt-hs__card:active .tt-hs__cta.tt-hs__btn.tt-hs__btn--custom{
    background:var(--btnc-bg-a,#1e40af)!important; border-color:var(--btnc-bd-a,#1e40af)!important; color:var(--btnc-tx-a,#fff)!important;
}
.tt-hs .tt-hs__card:focus-visible .tt-hs__cta.tt-hs__btn.tt-hs__btn--custom{
    background:var(--btnc-bg-f,#2563eb)!important; border-color:var(--btnc-bd-f,#2563eb)!important; color:var(--btnc-tx-f,#fff)!important;
}
/* Bootstrap-Stile: Schriftfarbe absichern, da der Button hier ein <span>
   innerhalb eines Links ist und Theme-Regeln sonst die Linkfarbe erzwingen. */
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-primary,
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-secondary,
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-info,
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-success{ color:#fff!important; }
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-light{ color:#212529!important; }
.tt-hs .tt-hs__card .tt-hs__cta.tt-hs__btnbs.btn-outline-primary{ color:var(--bs-primary,var(--primary,#2563eb))!important; }
.tt-hs .tt-hs__card:hover .tt-hs__cta.tt-hs__btnbs.btn-outline-primary{
    color:#fff!important; background:var(--bs-primary,var(--primary,#2563eb))!important;
}

/* ------------------------------------------------------- Navigationspfeile */
.tt-hs__nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:15px; box-shadow:0 6px 18px rgba(15,23,42,.12);
    transition:background .12s,color .12s,border-color .12s;
    border:1px solid var(--nav-bd,#e2e8f0)!important;
    background:var(--nav-bg,#fff)!important;
    color:var(--nav-ic,#334155)!important;
}
.tt-hs__nav i{ color:inherit!important; }
.tt-hs__nav:hover{
    background:var(--nav-bg-h,#2563eb)!important; color:var(--nav-ic-h,#fff)!important;
    border-color:var(--nav-bd-h,#2563eb)!important;
}
/* Mit Punkte-Navigation wird der Wurzelcontainer hoeher – Pfeile dann auf die
   Kartenmitte statt auf die Mitte inkl. Punkte setzen. */
.tt-hs--dots .tt-hs__nav{ top:calc(50% - 12px); }
.tt-hs__prev{ left:-6px; }
.tt-hs__next{ right:-6px; }
.tt-hs__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.tt-hs__nav.swiper-button-lock{ display:none; }

/* ------------------------------------------------------ Punkte-Navigation */
.tt-hs__dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.tt-hs__dots .swiper-pagination-bullet{
    width:8px; height:8px; border-radius:50%; opacity:1; cursor:pointer;
    background:var(--dot-bg,#cbd5e1)!important;
}
.tt-hs__dots .swiper-pagination-bullet-active{
    width:22px; border-radius:5px; background:var(--dot-bg-a,#2563eb)!important;
}

@media(max-width:600px){
    .tt-hs__prev{ left:0; } .tt-hs__next{ right:0; }
    .tt-hs__nav{ width:34px; height:34px; font-size:13px; }
    .tt-hs__name{ padding:0 8px 10px; }
    .tt-hs__btnrow{ padding:0 8px 10px; }
}