/* =========================================================================
   TT Textslider – Frontend-Styles

   Zwei Bereiche nebeneinander (oder untereinander): links/rechts/oben/unten
   der Bildblock, daneben der Swiper-Textslider. Slider-, Pfeil- und
   Punkt-Optik sind bewusst identisch zum TT Herstellerslider.

   Alle konfigurierbaren Werte kommen als CSS-Variablen aus dem PHP und sind
   dort auf Farben, Längen und Ganzzahlen begrenzt.
   ========================================================================= */

.tt-ts{ position:relative; }
.tt-ts *, .tt-ts *::before, .tt-ts *::after{ box-sizing:border-box; }

/* ------------------------------------------------------- Rahmen um alles */
.tt-ts--boxed{
    border:var(--ts-boxbw,1px) solid var(--ts-boxbd,#e2e8f0);
    border-radius:var(--ts-boxrad,12px);
    padding:var(--ts-boxpad,24px);
}

/* --------------------------------------------------------------- Raster */
.tt-ts__grid{
    display:flex;
    gap:var(--ts-colgap,32px);
    align-items:center;
    width:100%;
}
.tt-ts--va-start   .tt-ts__grid{ align-items:flex-start; }
.tt-ts--va-center  .tt-ts__grid{ align-items:center; }
.tt-ts--va-end     .tt-ts__grid{ align-items:flex-end; }
.tt-ts--va-stretch .tt-ts__grid{ align-items:stretch; }

.tt-ts__col{ min-width:0; }
.tt-ts__col--text{ position:relative; flex:1 1 auto; }
.tt-ts__col--img{ flex:0 0 var(--ts-imgw,35%); max-width:var(--ts-imgw,35%); }

/* Position des Bildblocks. Der Bildblock steht im Markup hinter dem Slider;
   für „links" und „oben" dreht die Reihenfolge, nicht das Markup. */
.tt-ts--img-left  .tt-ts__grid{ flex-direction:row-reverse; }
.tt-ts--img-right .tt-ts__grid{ flex-direction:row; }
.tt-ts--img-top    .tt-ts__grid{ flex-direction:column-reverse; }
.tt-ts--img-bottom .tt-ts__grid{ flex-direction:column; }
.tt-ts--img-top .tt-ts__col--img,
.tt-ts--img-bottom .tt-ts__col--img{ flex:0 0 auto; max-width:100%; width:100%; }
.tt-ts--img-top .tt-ts__col--text,
.tt-ts--img-bottom .tt-ts__col--text{ width:100%; }

/* --------------------------------------------------------------- Slider */
.tt-ts__viewport{ position:relative; width:100%; overflow:hidden; padding:2px 2px 6px; }
.tt-ts .swiper-wrapper{ display:flex; align-items:stretch; }
.tt-ts .swiper-slide{ height:auto; display:flex; }
.tt-ts__slide{ display:flex; width:100%; }

/* Fallback, falls Swiper (Theme-JS) nicht verfügbar ist: nebeneinander
   scrollbar statt gestapelt. */
.tt-ts__viewport:not(.swiper-initialized) .swiper-wrapper{
    display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--tt-gap,24px);
}
.tt-ts__viewport:not(.swiper-initialized) .tt-ts__slide{ flex:0 0 100%; scroll-snap-align:start; }

.tt-ts__card{
    display:flex; flex-direction:column; justify-content:center; width:100%;
    min-height:var(--ts-minh,0);
    background:var(--ts-cardbg,rgba(0,0,0,0));
    border-radius:var(--ts-cardrad,12px);
    padding:var(--ts-cardpad,0);
}
.tt-ts--carded .tt-ts__card{ border:var(--ts-cardbw,1px) solid var(--ts-cardbd,#e2e8f0); }

/* ------------------------------------------------- Titel und Button je Folie */
.tt-ts__title{
    color:var(--ts-headc,#0f172a);
    font-size:var(--ts-headfs,20px);
    line-height:1.25; font-weight:700; margin:0 0 .6em;
}
.tt-ts--txt-left   .tt-ts__title{ text-align:left; }
.tt-ts--txt-center .tt-ts__title{ text-align:center; }
.tt-ts--txt-right  .tt-ts__title{ text-align:right; }

.tt-ts__btnrow{ display:flex; margin-top:var(--ts-btngap,16px); }
.tt-ts--btn-left   .tt-ts__btnrow{ justify-content:flex-start; }
.tt-ts--btn-center .tt-ts__btnrow{ justify-content:center; }
.tt-ts--btn-right  .tt-ts__btnrow{ justify-content:flex-end; }
.tt-ts__cta{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    text-decoration:none!important; }
.tt-ts__cta.tt-btn--block{ width:100%; }
.tt-ts__btntext{ display:inline; }

/* ------------------------------------------------------ Redaktionstext */
.tt-ts__rte{
    color:var(--ts-txtc,#334155);
    font-size:var(--ts-txtfs,15px);
    line-height:var(--ts-txtlh,1.6);
    word-break:break-word;
}
.tt-ts--txt-left   .tt-ts__rte{ text-align:left; }
.tt-ts--txt-center .tt-ts__rte{ text-align:center; }
.tt-ts--txt-right  .tt-ts__rte{ text-align:right; }

.tt-ts__rte > *:first-child{ margin-top:0; }
.tt-ts__rte > *:last-child{ margin-bottom:0; }
.tt-ts__rte p{ margin:0 0 .85em; }
.tt-ts__rte h2, .tt-ts__rte h3, .tt-ts__rte h4,
.tt-ts__rte h5, .tt-ts__rte h6{
    color:var(--ts-headc,#0f172a);
    font-size:var(--ts-headfs,20px);
    line-height:1.25; margin:0 0 .6em; font-weight:700;
}
.tt-ts__rte h4{ font-size:calc(var(--ts-headfs,20px) * .9); }
.tt-ts__rte h5, .tt-ts__rte h6{ font-size:calc(var(--ts-headfs,20px) * .82); }
.tt-ts__rte ul, .tt-ts__rte ol{ margin:0 0 .85em; padding-left:1.4em; }
.tt-ts__rte li{ margin:0 0 .3em; }
.tt-ts__rte a{ color:var(--ts-linkc,#2563eb); text-decoration:underline; }
.tt-ts__rte a:hover{ color:var(--ts-linkch,#1d4ed8); }
.tt-ts__rte blockquote{
    margin:0 0 .85em; padding:.4em 0 .4em 1em;
    border-left:3px solid var(--ts-linkc,#2563eb); color:inherit; font-style:italic;
}
.tt-ts__rte pre{ margin:0 0 .85em; padding:.7em .9em; background:rgba(15,23,42,.05); border-radius:8px; overflow:auto; }
.tt-ts__rte code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; }
.tt-ts__rte table{ width:100%; margin:0 0 .85em; border-collapse:collapse; }
.tt-ts__rte th, .tt-ts__rte td{ padding:.45em .6em; border:1px solid rgba(15,23,42,.14); text-align:left; vertical-align:top; }
.tt-ts__rte th{ font-weight:600; background:rgba(15,23,42,.04); }
.tt-ts__rte hr{ border:0; border-top:1px solid rgba(15,23,42,.14); margin:1em 0; }
.tt-ts__rte img{ max-width:100%; height:auto; }

/* Listen mit Symbol (das <i> setzt PHP in jedes <li> einer <ul>). */
.tt-ts--listicon .tt-ts__rte ul{ list-style:none; padding-left:0; }
.tt-ts--listicon .tt-ts__rte ul li{ position:relative; padding-left:1.75em; }
.tt-ts__rte .tt-ts__li{
    position:absolute; left:0; top:.15em;
    color:var(--ts-liicon,#16a34a); font-size:.95em; line-height:inherit;
}

/* ------------------------------------------------------------- Bildblock */
.tt-ts__images{
    display:grid;
    grid-template-columns:repeat(var(--ts-imgcols,2), minmax(0, 1fr));
    gap:var(--ts-imggap,18px);
    width:100%;
}
.tt-ts__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--ts-lblgap,8px);
    text-decoration:none!important; color:inherit;
    transition:transform .18s ease, opacity .18s ease;
}
a.tt-ts__item:focus-visible{ outline:2px solid var(--nav-bg-h,#2563eb); outline-offset:3px; border-radius:6px; }

/* Position der Beschriftung. Bei „links"/„rechts" steht die Beschriftung in
   einer Zeile neben dem Bild – das Markup gibt die Reihenfolge bereits vor. */
.tt-ts--lbl-left  .tt-ts__item,
.tt-ts--lbl-right .tt-ts__item{ flex-direction:row; align-items:center; }
.tt-ts--lbl-left  .tt-ts__label{ text-align:right; }
.tt-ts--lbl-right .tt-ts__label{ text-align:left; }

.tt-ts__imgbox{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; height:var(--ts-imgh,96px); padding:var(--ts-imgpad,8px);
    background:var(--ts-imgbg,rgba(0,0,0,0));
    flex:0 0 auto;
}
.tt-ts--lbl-left .tt-ts__imgbox,
.tt-ts--lbl-right .tt-ts__imgbox{ width:auto; min-width:var(--ts-imgh,96px); flex:0 0 auto; }

/* JTL rendert Bilder über {image} als <picture><source><img>. `display:contents`
   blendet die Hülle aus dem Layout aus, damit das <img> selbst das Flex-Kind der
   Bildfläche bleibt – sonst greifen Höhe und absolute Positionierung nicht. */
.tt-ts__imgbox picture{ display:contents; }
.tt-ts__imgbox img{ max-width:100%; max-height:100%; }

/* Alle Bilder bekommen GENAU dieselbe Fläche – unabhängig von der Größe der
   Bilddatei. Sonst wirken sie unterschiedlich groß, und beim Vergrößern
   springt das Raster. Das Seitenverhältnis bleibt dabei erhalten:
   „contain" passt vollständig ein, „cover" füllt aus und schneidet ab. */
.tt-ts__img{
    width:100%; height:100%; max-width:100%; max-height:100%;
    object-fit:contain; object-position:center; display:block;
    transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.tt-ts--fit-cover .tt-ts__img{ object-fit:cover; }
/* Wechselbild liegt deckungsgleich über dem Standardbild. */
/* Das Wechselbild deckt GENAU die Innenfläche des Bildrahmens ab – dieselbe
   Fläche, die auch das Standardbild einnimmt. Mit left/right/top/bottom allein
   behielte das Bild seine Originalgröße; deshalb die Fläche ausrechnen. */
.tt-ts__img--hover{
    position:absolute;
    left:var(--ts-imgpad,8px); top:var(--ts-imgpad,8px); right:auto; bottom:auto;
    width:calc(100% - 2 * var(--ts-imgpad,8px));
    height:calc(100% - 2 * var(--ts-imgpad,8px));
    max-width:none; max-height:none;
    opacity:0; pointer-events:none;
}
.tt-ts__item:hover .tt-ts__img--hover,
.tt-ts__item:focus-visible .tt-ts__img--hover{ opacity:1; }
.tt-ts__item:hover .tt-ts__img--base,
.tt-ts__item:focus-visible .tt-ts__img--base{ opacity:0; }
.tt-ts__imgbox:has(.tt-ts__img--hover) .tt-ts__img--base{ transition:opacity .2s ease; }

/* Rahmenformen */
.tt-ts--frame-square  .tt-ts__imgbox{ border:var(--ts-imgfbw,1px) solid var(--ts-imgfbd,#e2e8f0); border-radius:0; }
.tt-ts--frame-rounded .tt-ts__imgbox{ border:var(--ts-imgfbw,1px) solid var(--ts-imgfbd,#e2e8f0); border-radius:var(--ts-imgrad,10px); }
.tt-ts--frame-circle  .tt-ts__imgbox{
    border:var(--ts-imgfbw,1px) solid var(--ts-imgfbd,#e2e8f0); border-radius:50%;
    width:var(--ts-imgh,96px); aspect-ratio:1/1; margin:0 auto; overflow:hidden;
}
.tt-ts--imgshadow .tt-ts__imgbox{ box-shadow:0 8px 22px rgba(15,23,42,.14); }

/* Weißer Bildhintergrund (JPG ohne Transparenz): Weiß optisch mit dem
   Hintergrund verrechnen. „multiply" macht reines Weiß unsichtbar, „darken"
   lässt nur Flächen verschwinden, die heller als der Hintergrund sind.
   Damit sich das Bild mit dem SEITEN-Hintergrund mischt und nicht nur mit der
   Bildfläche, darf diese keinen eigenen Hintergrund haben. */
.tt-ts--white-multiply .tt-ts__img{ mix-blend-mode:multiply; }
.tt-ts--white-darken   .tt-ts__img{ mix-blend-mode:darken; }
.tt-ts--white-multiply .tt-ts__imgbox,
.tt-ts--white-darken   .tt-ts__imgbox{ background:transparent; }

/* Graustufen – immer genau eine der beiden Varianten (oder keine). */
.tt-ts--gray .tt-ts__img{ filter:grayscale(1); }
.tt-ts--gray .tt-ts__item:hover .tt-ts__img,
.tt-ts--gray .tt-ts__item:focus-visible .tt-ts__img{ filter:none; }
.tt-ts--graycolor .tt-ts__img{ filter:none; }
.tt-ts--graycolor .tt-ts__item:hover .tt-ts__img,
.tt-ts--graycolor .tt-ts__item:focus-visible .tt-ts__img{ filter:grayscale(1); }

/* Abdunkeln: alle Bilder gedimmt, das berührte in voller Deckkraft. */
.tt-ts--imgdim .tt-ts__item{ opacity:var(--ts-imgdim,.55); }
.tt-ts--imgdim .tt-ts__item:hover,
.tt-ts--imgdim .tt-ts__item:focus-visible{ opacity:1; }
.tt-ts--imgdim .tt-ts__images:hover .tt-ts__item:not(:hover){ opacity:var(--ts-imgdim,.55); }

/* Zoom */
.tt-ts--zoom .tt-ts__item:hover,
.tt-ts--zoom .tt-ts__item:focus-visible{ transform:scale(var(--ts-imgzoom,1.08)); }

/* Beschriftung */
.tt-ts__label{
    display:block; font-size:var(--ts-lblfs,14px); line-height:1.3; font-weight:600;
    color:var(--ts-lblc,#0f172a); text-align:center; word-break:break-word;
    transition:color .15s ease;
}
.tt-ts__item:hover .tt-ts__label,
.tt-ts__item:focus-visible .tt-ts__label{ color:var(--ts-lblch,#2563eb); }

/* ------------------------------------------------------- Navigationspfeile */
.tt-ts__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-ts__nav i{ color:inherit!important; }
.tt-ts__nav:hover{
    background:var(--nav-bg-h,#2563eb)!important; color:var(--nav-ic-h,#fff)!important;
    border-color:var(--nav-bd-h,#2563eb)!important;
}
.tt-ts--dots .tt-ts__nav{ top:calc(50% - 11px); }
.tt-ts__prev{ left:-6px; }
.tt-ts__next{ right:-6px; }
/* Sind Pfeile aktiv, bekommt die Textspalte seitlich Platz. Ohne diesen
   Freiraum lägen die runden Schaltflächen mitten auf dem Fließtext. */
.tt-ts--arrows .tt-ts__col--text{ padding-left:48px; padding-right:48px; }
.tt-ts--arrows .tt-ts__prev{ left:0; }
.tt-ts--arrows .tt-ts__next{ right:0; }
.tt-ts__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.tt-ts__nav.swiper-button-lock{ display:none; }

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

/* ------------------------------------------------------------- Responsive */
@media(max-width:768px){
    /* Auf dem Handy immer untereinander – Bildblock unter dem Text, außer er
       war ausdrücklich oben konfiguriert.

       Wichtig: Die Regeln müssen MINDESTENS so spezifisch sein wie
       „.tt-ts--img-right .tt-ts__grid" (0,2,0). Eine Media Query erhöht die
       Spezifität nicht – eine einfache Regel auf .tt-ts__grid würde von der
       Desktop-Regel überstimmt und der Slider bliebe auf dem Handy zweispaltig. */
    .tt-ts.tt-ts--img-left .tt-ts__grid,
    .tt-ts.tt-ts--img-right .tt-ts__grid,
    .tt-ts.tt-ts--img-bottom .tt-ts__grid{ flex-direction:column; }
    .tt-ts.tt-ts--img-top .tt-ts__grid{ flex-direction:column-reverse; }
    .tt-ts__grid{ gap:var(--ts-colgap,24px); }
    /* Ebenfalls spezifisch genug: „.tt-ts--va-center .tt-ts__grid" (0,2,0) würde
       sonst gewinnen. Bei align-items:center bekommen die Spalten im
       Spalten-Layout ihre Inhaltsbreite – und können breiter als der Bildschirm
       werden (waagerechtes Scrollen). */
    .tt-ts.tt-ts--va-start .tt-ts__grid,
    .tt-ts.tt-ts--va-center .tt-ts__grid,
    .tt-ts.tt-ts--va-end .tt-ts__grid,
    .tt-ts.tt-ts--va-stretch .tt-ts__grid{ align-items:stretch; }
    /* Zusätzlich hart begrenzen – unabhängig von der Ausrichtung. */
    .tt-ts__col--text,
    .tt-ts.tt-ts--img-left .tt-ts__col--img,
    .tt-ts.tt-ts--img-right .tt-ts__col--img,
    .tt-ts__col--img{ flex:0 0 auto; max-width:100%; width:100%; }
    .tt-ts__prev{ left:0; } .tt-ts__next{ right:0; }
    .tt-ts__nav{ width:34px; height:34px; font-size:13px; }
    .tt-ts--arrows .tt-ts__col--text{ padding-left:38px; padding-right:38px; }
    .tt-ts--boxed{ padding:calc(var(--ts-boxpad,24px) * .6); }
}
@media(max-width:480px){
    .tt-ts__images{ grid-template-columns:repeat(min(var(--ts-imgcols,2), 2), minmax(0,1fr)); }
}