/* =========================================================================
   TT Portlet Collection – TT Newsslider (Swiper-basierter News-/Blog-Slider)
   Karten mit Vorschaubild, Schriftbox (Überschrift + Vorschautext), Meta-Zeile
   (Datum/Autor) und „Mehr lesen"-Button. Gleiche Slider-Technik wie TT-Artikelslider.
   ========================================================================= */
.tt-ns{ position:relative; margin:0 0 8px; }
.tt-ns *, .tt-ns *::before, .tt-ns *::after{ box-sizing:border-box; }

/* Swiper-Viewport */
.tt-ns__viewport{ position:relative; width:100%; padding:4px 2px 8px; overflow:hidden; }
.tt-ns .swiper-wrapper{ display:flex; align-items:stretch; }
.tt-ns .swiper-slide{ height:auto; display:flex; }
.tt-ns__slide{ display:flex; width:100%; }

/* Fallback, falls Swiper (Theme-JS) nicht verfügbar ist */
.tt-ns__viewport:not(.swiper-initialized) .swiper-wrapper{ display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--tt-gap,20px); }
.tt-ns__viewport:not(.swiper-initialized) .tt-ns__slide{ flex:0 0 clamp(240px,33%,360px); scroll-snap-align:start; }

/* Karte */
.tt-ns__card{
    display:flex; flex-direction:column; width:100%;
    border:1px solid #eceff3; overflow:hidden;
    box-shadow:0 4px 14px rgba(15,23,42,.06); transition:box-shadow .18s ease, transform .18s ease;
}
.tt-ns__card:hover{ box-shadow:0 14px 32px rgba(15,23,42,.14); transform:translateY(-2px); }

/* Vorschaubild */
.tt-ns__imgwrap{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#f1f5f9; }
.tt-ns__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.tt-ns__card:hover .tt-ns__img{ transform:scale(1.04); }

/* Body: Schriftbox (oben) + Spacer + Meta + Button (unten, bündig) */
.tt-ns__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:16px; gap:10px; }
.tt-ns__spacer{ flex:1 1 auto; min-height:4px; }

/* Schriftbox: gemeinsamer Hintergrund für Überschrift + Vorschautext */
.tt-ns__box{ display:flex; flex-direction:column; gap:8px; }
.tt-ns__box--filled{ padding:12px 14px; border-radius:10px; }

.tt-ns__title{
    color:#0f172a; font-weight:700; font-size:17px; line-height:1.3; text-decoration:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tt-ns__title:hover{ color:#2563eb; text-decoration:none; }
/* Konfigurierbare Überschrift-Farben.
   !important ist hier nötig: textStyle() setzt die Grundfarbe als Inline-Style
   auf demselben Element – ohne !important könnte die Hover-Farbe sie niemals
   überschreiben. Gleiche Lösung wie im TT Hersteller-/Artikelslider.
   Die Hover-Farbe greift sowohl beim Überfahren der Überschrift selbst als
   auch beim Überfahren der Karte. */
.tt-ns .tt-ns__card .tt-ns__title.tt-ns__title--c{ color:var(--head-c,#0f172a)!important; }
.tt-ns .tt-ns__card .tt-ns__title.tt-ns__title--ch:hover,
.tt-ns .tt-ns__card:hover .tt-ns__title.tt-ns__title--ch,
.tt-ns .tt-ns__card:focus-within .tt-ns__title.tt-ns__title--ch{ color:var(--head-ch,#2563eb)!important; }

.tt-ns__text{
    margin:0; font-size:14px; line-height:1.55; color:#475569;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* Meta-Zeile (Datum / Autor) */
.tt-ns__meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:#94a3b8; }
.tt-ns__metaitem{ display:inline-flex; align-items:center; gap:6px; }
.tt-ns__metaitem i{ font-size:13px; }

/* „Mehr lesen"-Button (Bootstrap-Klasse ODER eigene Farben – wie TT Panel) */
.tt-ns__cta{ align-self:flex-start; }
.tt-ns__cta--block{ width:100%; align-self:stretch; justify-content:center; text-align:center; }
.tt-ns__cta--block.tt-ns__btnbs{ display:flex; }
.tt-ns__btnbs{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; }
.tt-ns__btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em; cursor:pointer;
    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, transform .12s, box-shadow .12s;
}
.tt-ns__btn:hover{ text-decoration:none; transform:translateY(-1px); }
.tt-ns__btn--custom{ background:var(--btnc-bg,#2563eb); border-color:var(--btnc-bd,#2563eb); color:var(--btnc-tx,#fff); }
.tt-ns__btn--custom:hover{ background:var(--btnc-bg-h,#1d4ed8); border-color:var(--btnc-bd-h,#1d4ed8); color:var(--btnc-tx-h,#fff); }
.tt-ns__btn--custom:active{ background:var(--btnc-bg-a,#1e40af); border-color:var(--btnc-bd-a,#1e40af); color:var(--btnc-tx-a,#fff); }
.tt-ns__btn--custom:focus,
.tt-ns__btn--custom:focus-visible{ background:var(--btnc-bg-f,#2563eb); border-color:var(--btnc-bd-f,#2563eb); color:var(--btnc-tx-f,#fff); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }

/* Navigationspfeile (rund, seitlich) */
.tt-ns__nav{
    position:absolute; top:calc(50% - 24px); transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#334155;
    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;
}
.tt-ns__nav:hover{ background:#2563eb; color:#fff; }
.tt-ns__prev{ left:-6px; }
.tt-ns__next{ right:-6px; }
.tt-ns__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.tt-ns__nav.swiper-button-lock{ display:none; }

/* Punkte-Navigation */
.tt-ns__dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.tt-ns__dots .swiper-pagination-bullet{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; opacity:1; cursor:pointer; }
.tt-ns__dots .swiper-pagination-bullet-active{ background:#2563eb; width:22px; border-radius:5px; }

@media(max-width:600px){
    .tt-ns__prev{ left:0; } .tt-ns__next{ right:0; }
    .tt-ns__nav{ width:34px; height:34px; font-size:13px; }
}