/* thiesa.de auf NOVA, dritte Fassung (thiesa-ADR 0009, 0010).
   Chef 04.11.2026: „hauptfarbe bleibt weiß mit grau und dezentes blau. logo bleibt auch gleich.“
   Chef 04.11.2026: „Jedes Produkt hat immer eine andere Farbe. […] dadurch sieht der Shop schnell aus wie ein Zirkus.“
   Deshalb: Produktbilder in Übersichten mit zurückgenommener Farbe auf gleicher Fläche, volle Farbe bei Zuwendung.
   Chef 04.11.2026: „Aber mach es auch nicht zu tot also mit Gefühl arbeiten.“ Also keine Graustufen, nur ruhiger.
   Alle Farben stehen hier als Variablen. NOVA lädt Teile seines CSS später nach, deshalb tragen Überschreibungen
   von NOVA-Regeln !important. Eigene Bausteine beginnen mit .ts- und brauchen das nicht. Zuerst Handy, dann breiter. */
:root{
  --ts-weiss:#ffffff;
  --ts-grau-0:#f7f8fa;      /* ganz zarte Fläche */
  --ts-grau-1:#eef0f3;      /* Fläche, Bühne */
  --ts-grau-2:#e1e5ea;      /* Linien */
  --ts-grau-5:#6d6d6d;      /* Logo-Grau, Nebentext */
  --ts-text:#23292f;        /* Fließtext */
  --ts-blau:#2f6fb0;        /* Knöpfe, Links, Symbole */
  --ts-blau-dunkel:#245a91; /* Hover */
  --ts-blau-hell:#e9f1fa;   /* zarte Hinterlegung */
  --ts-radius:16px;
  --ts-schatten:0 1px 2px rgba(20,30,40,.05),0 8px 24px rgba(20,30,40,.07);
  /* Zwei Breiten für die ganze Seite und ein Rand. Chef 04.11.2026: „Passe die Breite harmonischer an, da ist einfach zu
     viel Varianz.“ Breit: Kopf, Vitrine, Kennst du schon, Wege, Fuß. Schmal: Einstieg mit Suche und Abteilungen. */
  --ts-breit:1120px;
  --ts-schmal:760px;
  --ts-rand:20px;
}
@media (min-width:768px){:root{--ts-rand:32px}}
@media (min-width:1100px){:root{--ts-rand:40px}}

/* Grundlagen */
body{color:var(--ts-text);background:var(--ts-weiss)}
a{color:var(--ts-blau)}
a:hover,a:focus{color:var(--ts-blau-dunkel)}
.btn-primary{background:var(--ts-blau)!important;border-color:var(--ts-blau)!important;color:#fff!important}
.btn-primary:hover,.btn-primary:focus{background:var(--ts-blau-dunkel)!important;border-color:var(--ts-blau-dunkel)!important}
.btn-outline-primary{color:var(--ts-blau)!important;border-color:var(--ts-blau)!important}
.btn-outline-primary:hover{background:var(--ts-blau)!important;color:#fff!important}

/* Kopf: weiß, feine Linie, Logo im Originalgrau */
/* Übergang Kopf zur Seite ohne Strich: Kopf und Einstieg sind eine weiße Fläche. Erst beim Scrollen hebt sich der Kopf
   mit einem weichen Schatten ab (berater.js setzt html.ts-gerollt). Kein backdrop-filter, sonst hängt das Handy-Menü fest.
   Chef 04.11.2026: „Mir gefällt der Übergang vom Header auf die Hauptseite noch nicht.“ */
#jtl-nav-wrapper{background:var(--ts-weiss)!important;border-bottom:0!important;box-shadow:0 0 0 rgba(20,30,40,0)!important;transition:box-shadow .3s ease}
html.ts-gerollt #jtl-nav-wrapper{box-shadow:0 12px 26px -20px rgba(20,30,40,.4),0 1px 0 rgba(20,30,40,.04)!important}
#jtl-nav-wrapper .navbar-brand{padding:12px 0!important}
#jtl-nav-wrapper #shop-logo{width:min(56vw,240px);height:auto!important;max-height:none!important}
.topbar-wrapper{background:var(--ts-grau-0)!important;border-bottom:1px solid var(--ts-grau-2)}
#jtl-nav-wrapper>.container-fluid{max-width:calc(var(--ts-breit) + 2 * var(--ts-rand))!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--ts-rand)!important;padding-right:var(--ts-rand)!important}
#search .form-control,#search input[type=search],.main-search .form-control{border-radius:999px!important;background:var(--ts-grau-0)!important;border-color:var(--ts-grau-2)!important}

/* Kopf auf dem Handy wie bei priamond.de (Chef 04.11.2026: „Der Header auf dem Handy sieht noch fipslig aus.
   Orientiere die an priamond“): Menü und Konto links, Logo groß in der Mitte, Warenkorb rechts. In der Kasse gibt es
   kein Menü, dort bleibt das Logo links. Die Sprachauswahl entfällt, es gibt nur Deutsch. */
@media (max-width:991.98px){
  #jtl-nav-wrapper,#jtl-nav-wrapper>.container-fluid{display:flow-root;height:auto!important;min-height:0}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none))>.container-fluid{padding-top:14px;padding-bottom:14px}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) .toggler-logo-wrapper,#jtl-nav-wrapper:has(#burger-menu:not(.d-none)) #logo{position:static!important}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) .navbar-brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0!important;padding:0!important}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) #shop-logo{width:min(47vw,210px);max-width:none!important}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) .account-icon-dropdown{position:absolute;top:50%;left:calc(var(--ts-rand) + 40px);transform:translateY(-50%);z-index:2}
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) .cart-icon-dropdown{margin-right:0}
  /* Das Konto-Fenster richtet sich nach dem Symbol links und läuft sonst aus dem Bild. */
  #jtl-nav-wrapper:has(#burger-menu:not(.d-none)) .account-icon-dropdown .dropdown-menu{position:absolute!important;top:calc(100% + 8px)!important;left:-46px!important;right:auto!important;width:calc(100vw - 24px)!important;max-width:420px;min-width:0!important;transform:none!important}
  #jtl-nav-wrapper .language-dropdown{display:none!important}
  #jtl-nav-wrapper .navbar-toggler-icon,#jtl-nav-wrapper .navbar-toggler-icon::before,#jtl-nav-wrapper .navbar-toggler-icon::after{border-color:var(--ts-text)!important;background-color:var(--ts-text)!important}
  #jtl-nav-wrapper .nav-link .fas,#jtl-nav-wrapper .nav-link .far{color:var(--ts-text)!important}
  /* Kasse: NOVA lässt den Menüknopf versteckt (d-none) im HTML stehen. Deshalb gilt die Mitte oben nur bei sichtbarem
     Menü. In der Kasse stehen Logo links und „Sichere Bezahlung“ rechts in einer Zeile.
     Chef 05.11.2026 mit Bildschirmfoto der Kasse: „Warenkorb Überschneidungen“ */
  #jtl-nav-wrapper:has(.secure-checkout-icon)>.container-fluid{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
  #jtl-nav-wrapper:has(.secure-checkout-icon) .toggler-logo-wrapper{position:static!important;flex:0 1 auto;min-width:0}
  #jtl-nav-wrapper:has(.secure-checkout-icon) #logo{float:none!important}
  #jtl-nav-wrapper:has(.secure-checkout-icon) .navbar{flex:0 0 auto;padding:0!important;margin:0!important}
  #jtl-nav-wrapper:has(.secure-checkout-icon) .navbar-brand{display:block;padding:0!important;margin:0!important}
  #jtl-nav-wrapper:has(.secure-checkout-icon) #shop-logo{display:block;width:min(44vw,190px)!important;max-width:none!important}
}
.secure-checkout-icon{white-space:nowrap;font-size:.9rem;font-weight:600;color:var(--ts-grau-5)}
.secure-checkout-icon .fa-lock{color:var(--ts-blau)}
@media (max-width:374.98px){.secure-checkout-icon{font-size:.78rem}#jtl-nav-wrapper:has(.secure-checkout-icon) #shop-logo{width:36vw!important}}
/* Desktop-Kopf wie priamond.de: keine Leiste darüber, Logo links, Suche mittig, Symbole rechts, ein Menü als schmale
   zweite Zeile, sobald es Kategorien gibt. Chef 04.11.2026: „Der Desktop header kann gleichwie der bei priamond aufgebaut
   werden. Auf die Suchzeile.“ Auf der Startseite blendet sich die Suche im Kopf erst ein, wenn die große Suche aus dem
   Bild ist (berater.js setzt html.ts-heldsuche), damit nie zwei Suchfelder zugleich zu sehen sind. */
@media (min-width:992px){
  .topbar-wrapper{display:none!important}
  /* Logo am Desktop größer. Chef 04.11.2026: „Das Logo ist auch zu klein“ */
  #jtl-nav-wrapper #shop-logo{width:300px!important;max-width:none!important}
  #jtl-nav-wrapper .navbar-brand{padding:9px 0!important}
  #jtl-nav-wrapper>.container-fluid{position:relative;padding-top:6px;padding-bottom:6px}
  #jtl-nav-wrapper:has(#mainNavigation .navbar-nav>li)>.container-fluid{padding-bottom:50px}
  /* Menüzeile: NOVA versteckt den Scrollbalken der Zeile in 1,5rem Innenabstand unter einem abgeschnittenen Rahmen. Bei
     unserer festen Höhe von 43 px zeigte Windows deshalb Scrollbalken mit Pfeilen, die Schrift war oben abgeschnitten, und
     der Rahmen schnitt die Aufklappmenüs ab. Jetzt: kein Innenabstand, Scrollbalken unsichtbar, Rahmen offen.
     Chef 05.11.2026: „Was ist mit dem Header los am Desktop? Bitte bereinigen“ */
  #jtl-nav-wrapper #mainNavigation{position:absolute!important;left:0;right:0;bottom:0;display:flex!important;height:44px!important;justify-content:center;overflow:visible!important}
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body{width:auto}
  #jtl-nav-wrapper #mainNavigation .navbar-nav{display:flex;flex-direction:row;gap:8px;height:43px;align-items:center;padding-bottom:0!important;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  #jtl-nav-wrapper #mainNavigation .navbar-nav::-webkit-scrollbar{display:none}
  /* NOVA lässt am Desktop 4rem Luft zwischen Kopf und Inhalt, das ist bei unserem schlanken Kopf zu viel */
  #content-wrapper:not(.has-fluid){padding-top:1.5rem}
  #jtl-nav-wrapper #mainNavigation .nav-link{padding:8px 14px!important;font-size:15px;font-weight:600;color:var(--ts-text)!important}
  #jtl-nav-wrapper #mainNavigation .nav-link:hover{color:var(--ts-blau)!important}
  #jtl-nav-wrapper .nav-link::before{border-color:var(--ts-blau)!important}
  /* NOVA richtet die Zeile am Desktop unten aus (align-items-lg-end), Logo, Suche und Symbole sollen auf einer Linie liegen */
  #jtl-nav-wrapper .navbar{align-items:center!important}
  #jtl-nav-wrapper #shop-nav{align-items:center!important}
  /* Nur Konto, Wunschzettel und Warenkorb. Sprache gibt es nur eine, die Vergleichsliste blendet NOVA selbst aus (d-none). */
  #jtl-nav-wrapper #shop-nav>li.language-dropdown,#jtl-nav-wrapper #shop-nav>li.d-none{display:none!important}
  #jtl-nav-wrapper #shop-nav>li:not(.search):not(.d-none):not(.language-dropdown){display:flex!important;align-items:center!important}
  #jtl-nav-wrapper #shop-nav>li:not(.search)>a{display:flex!important;align-items:center!important;gap:8px;padding:8px 10px!important;color:var(--ts-text)!important}
  #jtl-nav-wrapper #shop-nav>li:not(.search)>a i,#jtl-nav-wrapper #shop-nav>li:not(.search)>a .fas,#jtl-nav-wrapper #shop-nav>li:not(.search)>a .far,#jtl-nav-wrapper #shop-nav>li:not(.search)>a .fa{font-size:21px!important;line-height:1!important;margin:0!important}
  #jtl-nav-wrapper #shop-nav>li:last-child>a{padding-right:0!important}
  #jtl-nav-wrapper .cart-icon-dropdown-price{font-size:15px!important;font-weight:600}
  #jtl-nav-wrapper .search-wrapper{position:absolute!important;top:var(--ts-kopf-mitte,40px)!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;
    width:clamp(240px,calc(100% - 660px),520px)!important;min-width:0!important;max-width:none!important;margin:0!important;float:none!important;transition:opacity .25s ease,visibility .25s ease}
  html.ts-heldsuche #jtl-nav-wrapper .search-wrapper{opacity:0;visibility:hidden}
  /* An der Stelle der Kopfsuche steht oben auf der Startseite immer ein Vorteil, alle 5 Sekunden blendet der nächste über.
     Beim Scrollen blendet die Suche darüber. Chef 05.11.2026: „wenn man ganz oben ist sieht es da etwas leer aus“,
     dann zu drei Vorteilen nebeneinander: „Ne jetzt sieht der Header wieder zu voll aus“ */
  #jtl-nav-wrapper .ts-kopf-vorteile{position:absolute;top:var(--ts-kopf-mitte,40px);left:50%;transform:translate(-50%,-50%);display:block;width:260px;height:26px;
    margin:0;padding:0;list-style:none;white-space:nowrap;font-size:.92rem;font-weight:600;color:var(--ts-grau-5);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
  html.ts-heldsuche #jtl-nav-wrapper .ts-kopf-vorteile{opacity:1;visibility:visible}
  #jtl-nav-wrapper .ts-kopf-vorteile li{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:7px;opacity:0;animation:ts-vorteil 15s ease-in-out infinite}
  #jtl-nav-wrapper .ts-kopf-vorteile li:nth-child(2){animation-delay:5s}
  #jtl-nav-wrapper .ts-kopf-vorteile li:nth-child(3){animation-delay:10s}
  #jtl-nav-wrapper .ts-kopf-vorteile svg{flex:0 0 auto;width:15px;height:15px;padding:3px;box-sizing:content-box;border-radius:50%;background:var(--ts-blau-hell);
    fill:none;stroke:var(--ts-blau);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  #jtl-nav-wrapper .search-wrapper form,#jtl-nav-wrapper .search-wrapper .form-icon,#jtl-nav-wrapper .search-wrapper .input-group{display:flex;width:100%!important;max-width:none!important}
  #jtl-nav-wrapper .search-wrapper .input-group{flex-wrap:nowrap!important}
  #jtl-nav-wrapper .search-wrapper .twitter-typeahead{display:flex!important;flex:1 1 auto!important;width:auto!important;min-width:0!important}
  #jtl-nav-wrapper .search-wrapper .form-control{flex:1 1 auto;width:100%!important;height:44px;padding-left:20px!important;background:var(--ts-grau-0)!important;border:1.5px solid var(--ts-grau-2)!important;border-right:0!important;
    border-radius:999px 0 0 999px!important;color:var(--ts-text)!important;box-shadow:none!important}
  #jtl-nav-wrapper .search-wrapper .btn{height:44px;padding:0 18px!important;background:var(--ts-grau-0)!important;border:1.5px solid var(--ts-grau-2)!important;border-left:0!important;border-radius:0 999px 999px 0!important;box-shadow:none!important}
  #jtl-nav-wrapper .search-wrapper .btn,#jtl-nav-wrapper .search-wrapper .btn i{color:var(--ts-grau-5)!important}
  #jtl-nav-wrapper .search-wrapper:focus-within .form-control,#jtl-nav-wrapper .search-wrapper:focus-within .btn{border-color:var(--ts-blau)!important;background:#fff!important}
}

/* Produktbilder: erkennbar in echter Farbe, nur leicht beruhigt. Ruhe entsteht über gleiche graue Bühne und gleiche Größen.
   Chef 04.11.2026: „Vielleicht arbeitest du mehr mit kleinen Symbolen für die Kategorien anstatt Bildern. Die Produkte
   kann man dann schon wieder eher erkennen.“ */
.productbox .productbox-image img,.product-slider-wrapper img,.ts-best__bild img{filter:saturate(.8);transition:filter .35s ease}
.productbox:hover .productbox-image img,.product-slider-wrapper .product-wrapper:hover img,.ts-best:hover .ts-best__bild img,.ts-best:focus-within .ts-best__bild img,.ts-best.ts-best--farbig .ts-best__bild img{filter:none}

/* Startseite: NOVA gibt dem Inhalt 64 px Abstand nach oben, der Einstieg soll direkt am Kopf sitzen. */
#content-wrapper:has(.ts-start){padding-top:0!important}
.ts-wrap{max-width:calc(var(--ts-breit) + 2 * var(--ts-rand));margin:0 auto;padding:0 var(--ts-rand)}
.ts-wrap--schmal{max-width:calc(var(--ts-schmal) + 2 * var(--ts-rand))}

/* Einstieg: eine Frage, ein Feld */
/* overflow-x:clip statt hidden: Die Liste der Live-Suche darf unten aus dem Einstieg heraus, die Parallaxe-Ebenen bleiben
   seitlich beschnitten und sind oben und unten über ihre Maske ohnehin durchsichtig. */
.ts-einstieg{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;padding:44px 0 28px;text-align:center}
/* Der Einstieg liegt vor der Finder-Bühne, sonst verdeckt sie das Menü der Live-Suche und die KI-Antwort (thiesa-ADR 0045).
   Chef 05.11.2026: „Das Suchfeld und das dazugehörige drop down für die Live suche ist in der eben nicht vorne“ */
.ts-einstieg{z-index:5}
/* Parallaxe (thiesa-ADR 0013): tiefe.js setzt --ts-par. Chef 04.11.2026: „So und nun noch ein paar Paralax scroll mit
   rein und dann wird die Sache rund.“ Die Ebenen liegen hinter dem Inhalt und sind nur Schmuck. */
[data-ts-tiefe]{transform:translate3d(0,var(--ts-par,0px),0)}
.ts-tiefe{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 58%,transparent 100%)}
.ts-tiefe [data-ts-tiefe]{will-change:transform}
.ts-tiefe__licht{position:absolute;left:-10%;right:-10%;top:-45%;height:150%;
  background:radial-gradient(42% 38% at 26% 34%,rgba(47,111,176,.11),transparent 72%),radial-gradient(36% 34% at 80% 58%,rgba(35,41,47,.05),transparent 72%)}
.ts-einstieg__inner{max-width:calc(var(--ts-schmal) + 2 * var(--ts-rand))}
.ts-einstieg__titel{font-size:clamp(1.6rem,.9rem + 3.2vw,3rem);line-height:1.12;font-weight:800;letter-spacing:-.025em;margin:0 0 1.9rem;color:var(--ts-text);text-wrap:balance}
/* Die Überschrift ist die Begrüßung: Gruß und Frage als zwei gleich große Zeilen (berater.js setzt den Tagesgruß).
   Chef 05.11.2026: „Die Begrüßung darf gerne wie bei priamond individuell und gleichmäßig geschrieben sein“ */
.ts-einstieg__titel>span{display:block}
.ts-suche{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--ts-grau-2);border-radius:999px;padding:6px 6px 6px 46px;box-shadow:var(--ts-schatten);text-align:left}
.ts-suche:focus-within{border-color:var(--ts-blau);box-shadow:0 0 0 4px var(--ts-blau-hell),var(--ts-schatten)}
.ts-suche.ts-suche--denkt{border-color:var(--ts-blau)}
.ts-suche__lupe{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--ts-grau-5);stroke-width:2;stroke-linecap:round}
.ts-suche .twitter-typeahead{flex:1 1 auto;min-width:0;display:block!important}
.ts-suche .twitter-typeahead .ts-suche__feld{width:100%}
.ts-suche__feld{flex:1;min-width:0;width:100%;border:0;outline:0;padding:.7rem .25rem;font-size:1.05rem;background:transparent;color:var(--ts-text)}
.ts-suche__feld::placeholder{color:#9aa1a8}
/* Kein zweiter Rahmen im Feld: Den Fokus zeigt schon die Pille (.ts-suche:focus-within). NOVA setzt einen Umriss auf
   :focus-visible. Chef 05.11.2026: „Dieser zusätzliche innere Rahmen sieht Blöd aus.“ */
.ts-suche__feld:focus,.ts-suche__feld:focus-visible{outline:0!important;box-shadow:none!important;border:0!important}

/* Live-Suche mit Artikeln (livesuche.js). In der großen Suche öffnet sich die Liste unter der ganzen Pille. */
.ts-suche .twitter-typeahead{position:static!important}
.ts-suche .tt-menu{top:calc(100% + 8px)!important;left:0!important;right:0!important}
.tt-menu{z-index:1060!important;min-width:280px;max-height:70vh;overflow-y:auto;padding:6px!important;background:#fff!important;
  border:1px solid var(--ts-grau-2)!important;border-radius:16px!important;box-shadow:0 18px 40px -18px rgba(20,30,40,.35)!important;text-align:left}
/* typeahead macht den Treffer selbst zum .tt-suggestion, NOVA setzt dort display:block und eigene Abstände */
.tt-menu .ts-vorschlag.tt-suggestion{display:flex!important;align-items:center;gap:12px;padding:8px 10px!important;margin:0!important;border:0!important;border-radius:12px;
  background:none!important;cursor:pointer;color:var(--ts-text)!important;white-space:normal}
.tt-menu .ts-vorschlag.tt-suggestion.tt-cursor,.tt-menu .ts-vorschlag.tt-suggestion:hover{background:var(--ts-blau-hell)!important}
.ts-vorschlag img,.ts-vorschlag__ohne{flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:var(--ts-grau-1);object-fit:contain;mix-blend-mode:multiply}
.ts-vorschlag__text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ts-vorschlag__text strong{font-weight:650;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-vorschlag__text strong .tt-highlight{color:var(--ts-blau);font-weight:750}
.ts-vorschlag__text small{font-size:.8rem;color:var(--ts-grau-5)}
.ts-vorschlag__preis{flex:0 0 auto;font-weight:700;font-size:.9rem;white-space:nowrap}
.ts-vorschlag-hinweis{padding:8px 10px 4px;font-size:.82rem;color:var(--ts-grau-5)}
.ts-suche__kamera,.ts-suche__knopf{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer}
.ts-suche__kamera{background:var(--ts-blau-hell);color:var(--ts-blau)}
.ts-suche__kamera:hover{background:#dbe8f6}
.ts-suche__knopf{background:var(--ts-blau);color:#fff}
.ts-suche__knopf:hover{background:var(--ts-blau-dunkel)}
.ts-suche__kamera svg,.ts-suche__knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Suchfeld hervorgehoben: zarter blauer Rand, weicher blauer Lichtkranz, etwas höher, blaue Lupe, größere Schrift.
   Beim Hineinklicken ein deutlicher Ring. Chef 05.11.2026: „Sauber und jetzt Suchfeld noch etwas hervorheben und wir haben es.“ */
.ts-suche{border:2px solid rgba(47,111,176,.34);padding:7px 7px 7px 54px;
  box-shadow:0 0 0 6px rgba(233,241,250,.9),0 20px 40px -22px rgba(36,90,145,.5),0 2px 4px rgba(20,30,40,.04);transition:border-color .15s,box-shadow .2s}
.ts-suche:hover{border-color:rgba(47,111,176,.55)}
.ts-suche:focus-within{border-color:var(--ts-blau);box-shadow:0 0 0 7px #d6e5f5,0 22px 44px -20px rgba(36,90,145,.6)}
.ts-suche__lupe{left:21px;width:22px;height:22px;stroke:var(--ts-blau)}
.ts-suche__feld{padding:.8rem .25rem;font-size:1.12rem}
.ts-suche__feld::placeholder{color:#7f8891}
.ts-suche__kamera,.ts-suche__knopf{width:50px;height:50px}
/* Kamera nur auf Touch-Geräten. Chef 04.11.2026: „Am Desktop müssen wir da aber ohne Kamera arbeiten.“ */
/* Eine Zeile Erklärung zur Foto-Suche, nur auf Touch-Geräten. Ein Tipp darauf öffnet die Kamera.
   Chef 04.11.2026: „das mit dem Foto versteht niemand. Da muss es eine Erklärung geben ohne das man einen ganzen Roman
   lesen muss“ */
.ts-foto-tipp{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin:12px 0 0;padding:9px 14px;border:0;border-radius:999px;
  background:var(--ts-blau-hell);color:var(--ts-blau);font-size:.9rem;font-weight:600;line-height:1.2;cursor:pointer}
.ts-foto-tipp svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.ts-suche__kamera,.ts-foto-tipp{display:none}}

/* Wiedersehen: was ein Wiederkehrer zuletzt angesehen hat (berater.js, thiesa-ADR 0016) */
.ts-wiedersehen{margin:32px 0 0}
.ts-wiedersehen[hidden]{display:none}
.ts-wiedersehen__titel{margin:0 0 12px;font-size:.95rem;font-weight:600;color:var(--ts-grau-5)}
.ts-wiedersehen__reihe{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ts-wiedersehen__karte{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;
  border:1px solid var(--ts-grau-2);box-shadow:0 6px 16px -12px rgba(20,30,40,.35);color:var(--ts-text)!important;text-decoration:none!important;
  font-size:.9rem;font-weight:600;text-align:left;transition:border-color .15s,transform .15s}
.ts-wiedersehen__karte:hover{border-color:var(--ts-blau);transform:translateY(-1px)}
.ts-wiedersehen__karte img{flex:0 0 auto;width:38px;height:38px;border-radius:50%;object-fit:contain;background:var(--ts-grau-1);mix-blend-mode:multiply}
.ts-wiedersehen__karte span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* „Zuletzt angesehen“ an den Rand: ab 1300 px eine schmale Leiste rechts neben der Begrüßung, darunter rückt berater.js die
   Liste unter die Finder-Bühne (.ts-wiedersehen-unten). Chef 05.11.2026: „Doenzulettt angesehene Produkte könnten auch an
   den Rand verschwinden“ */
.ts-wiedersehen-unten{margin-top:-28px;margin-bottom:36px}
.ts-wiedersehen-unten .ts-wiedersehen{margin:0}
@media (min-width:1300px){
  .ts-wiedersehen{position:absolute;top:48px;right:clamp(16px,2.5vw,48px);z-index:2;width:clamp(200px,15vw,250px);margin:0;text-align:left}
  .ts-wiedersehen__titel{margin:0 0 8px 4px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .ts-wiedersehen__reihe{flex-direction:column;flex-wrap:nowrap;gap:6px}
  .ts-wiedersehen .ts-wiedersehen__karte{flex:0 0 auto;padding:4px 12px 4px 4px;font-size:.84rem}
  .ts-wiedersehen__karte img{width:30px;height:30px}
}

/* Kamera- und KI-Rückmeldung */
.ts-kamera-hinweis{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;display:flex;align-items:center;gap:12px;max-width:min(92vw,460px);padding:14px 18px;border-radius:14px;background:var(--ts-text);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.95rem;line-height:1.35}
.ts-kamera-hinweis[hidden]{display:none}
.ts-kamera-hinweis__kreis{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ts-dreh .8s linear infinite}
@keyframes ts-dreh{to{transform:rotate(360deg)}}

/* Implantatteile-Finder als Bühne unter der Suche, statt der neun Abteilungen (thiesa-ADR 0045).
   Chef 05.11.2026: „Selbst ich weiß nicht wasnichbda suchen soll und das ist ein Zeichen. Stattdessen geht der inolantstfinder
   total unter.“ Ruhig in Weiß und zartem Blau, ein großer Knopf, die vier Schritte als Karten wie im Finder. */
.ts-ipd{padding:8px 0 60px}
.ts-ipd__karte{position:relative;display:grid;gap:24px;padding:28px 22px 24px;border-radius:24px;overflow:hidden;
  background:linear-gradient(140deg,#f5f9fd 0%,var(--ts-blau-hell) 100%);border:1px solid rgba(47,111,176,.16);
  box-shadow:0 18px 40px -30px rgba(36,90,145,.55)}
.ts-ipd__schmuck{position:absolute;right:-28px;top:-18px;width:190px;height:190px;fill:none;stroke:rgba(47,111,176,.08);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ts-ipd__text{position:relative}
.ts-ipd__marke{margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blau)}
.ts-ipd__titel{margin:0 0 18px;font-size:clamp(1.45rem,1.05rem + 1.5vw,2.15rem);font-weight:700;line-height:1.15;color:var(--ts-text)}
.ts-ipd__satz{margin:18px 0 0;max-width:34em;font-size:1.02rem;line-height:1.5;color:var(--ts-grau-5)}
.ts-ipd__titel a{color:inherit!important;text-decoration:none!important}
.ts-ipd__titel a:hover{color:var(--ts-blau)!important}
.ts-ipd__knopf{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;background:var(--ts-blau);
  color:#fff!important;font-size:1.05rem;font-weight:700;text-decoration:none!important;box-shadow:0 12px 24px -12px rgba(36,90,145,.75);
  transition:transform .15s,box-shadow .15s,background .15s}
.ts-ipd__knopf:hover,.ts-ipd__knopf:focus-visible{transform:translateY(-1px);background:#285f97;box-shadow:0 16px 28px -12px rgba(36,90,145,.8)}
.ts-ipd__knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ts-ipd__klein{margin:8px 0 0;font-size:.86rem;line-height:1.45;color:var(--ts-grau-5)}
.ts-ipd__schritte{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ts-ipd__schritt{display:flex;flex-direction:column;gap:2px;padding:14px 14px 13px;border-radius:16px;background:#fff;
  border:1px solid rgba(47,111,176,.14);box-shadow:0 8px 18px -14px rgba(36,90,145,.45)}
.ts-ipd__nr{display:grid;place-items:center;width:28px;height:28px;margin:0 0 6px;border-radius:50%;background:var(--ts-blau-hell);
  color:var(--ts-blau);font-size:.85rem;font-weight:800}
.ts-ipd__schritt:first-child .ts-ipd__nr{background:var(--ts-blau);color:#fff}
.ts-ipd__schritt strong{font-size:1rem;color:var(--ts-text)}
.ts-ipd__schritt small{font-size:.8rem;line-height:1.35;color:var(--ts-grau-5)}
/* Handy: die vier Schritte als eine Zeile kleiner Karten, damit der Knopf früher kommt */
@media (max-width:575.98px){
  .ts-ipd__karte{gap:18px;padding:24px 18px 20px}
  .ts-ipd__schritte{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ts-ipd__schritt{align-items:center;text-align:center;padding:10px 4px 9px;border-radius:12px}
  .ts-ipd__schritt small{display:none}
  .ts-ipd__schritt strong{font-size:.78rem;line-height:1.2}
  .ts-ipd__nr{width:24px;height:24px;margin:0 0 5px;font-size:.78rem}
}
@media (min-width:992px){
  .ts-ipd__karte{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:48px;padding:42px 48px}
  .ts-ipd__schritte{gap:12px}
  .ts-ipd__schritt{padding:16px 16px 15px}
  .ts-ipd__schmuck{right:auto;left:-40px;top:auto;bottom:-60px;width:260px;height:260px}
}

/* Bestseller-Bühne als Vitrine mit Regalboden (thiesa-ADR 0012).
   Chef 04.11.2026: „Aber diese Farben und Formen sind so dolle verschieden. Irgendwie muss das anders wirken.“
   Chef 04.11.2026: „Der Shop kann ruhig noch mehr Tiefe bekommen, plastischer und mit mehr 3d Effekt wirken“
   Chef 04.11.2026: „Die Schatten sind trotzdem abgeschnitten und das ist kacke“
   Ruhe durch einen gemeinsamen Raum: eine Vitrine wie eine Studio-Hohlkehle, ohne Kanten, ein Licht. Die Bilder stehen
   auf der Standlinie bei 86 % und bringen ihren Schatten mit (werkzeuge/bilder_einheitlich.py). Ihr Weiß verschmilzt
   per multiply mit der Vitrine, deshalb darf kein Element dazwischen eine eigene Ebene bilden (keine perspective,
   kein filter, kein eigener Hintergrund am Bildfeld), sonst stehen weiße Quadrate da und die Schatten enden an deren
   Kante. Die Perspektive steckt deshalb in der Bewegung des Bildes selbst. Alle Produkte bewegen sich gemeinsam und
   kippen um ihren Standpunkt. buehne.js setzt --ts-p (Scroll), --ts-kx/--ts-ky (Maus) auf der Vitrine. */
.ts-buehne{--ts-p:.5;--ts-kx:0;--ts-ky:0;position:relative;isolation:isolate;overflow:hidden;padding:26px 0 24px;margin:4px 0 28px;background:#f4f6f8}
/* Rückwand der Vitrine (::before) mit z-index -1 innerhalb der Vitrine (isolation), so bleibt sie Hintergrund für das
   multiply der Bilder. Sie bewegt sich nicht mehr, die Produkte auch nicht (Chef: „die Bilder schwimmen beim scrollen“).
   ::after trägt die Vertiefung oben. Kein will-change an der Wand: Als eigene Grafikebene ließ sie in Chrome die
   verschmolzenen Produktbilder verschwinden, gemessen am 04.11.2026. */
.ts-buehne::before{content:"";position:absolute;left:0;right:0;top:-30%;bottom:-30%;z-index:-1;
  background:radial-gradient(120% 52% at 50% 46%,#fafbfc 0,#f4f6f8 55%,#eceff3 100%);
}
.ts-buehne::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 18px 28px -22px rgba(20,30,40,.2)}
.ts-buehne__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.ts-buehne__titel{font-size:1.15rem;font-weight:750;margin:0}
/* Pfeile und Laufleiste (Chef 05.11.2026: „Die besteseller Liste lässt sich blöd scrollen“). Vorher gab es weder Balken
   noch Pfeile: Am Desktop kam man nur mit Umschalt und Mausrad weiter, auf dem Handy war nicht zu sehen, wie viel folgt. */
.ts-buehne__pfeile{display:flex;gap:8px}
.ts-buehne__pfeile[hidden],.ts-buehne__lauf[hidden]{display:none}
.ts-buehne__pfeil{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ts-grau-2);border-radius:50%;background:#fff;color:var(--ts-text);cursor:pointer;
  box-shadow:0 4px 12px -8px rgba(20,30,40,.35);transition:border-color .15s,color .15s,opacity .15s}
.ts-buehne__pfeil:hover{border-color:var(--ts-blau);color:var(--ts-blau)}
.ts-buehne__pfeil:disabled{opacity:.35;cursor:default;border-color:var(--ts-grau-2);color:var(--ts-text)}
.ts-buehne__pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ts-buehne__lauf{position:relative;height:3px;margin:14px auto 0;max-width:160px;border-radius:3px;background:var(--ts-grau-2);overflow:hidden}
.ts-buehne__lauf span{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:3px;background:var(--ts-blau);transition:transform .1s linear}
@media (hover:hover) and (pointer:fine){.ts-buehne__lauf{display:none}}
@media (hover:none),(pointer:coarse){.ts-buehne__pfeile{display:none}}
.ts-buehne__reihe{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ts-rand);padding:4px var(--ts-rand) 6px;margin:0 calc(-1 * var(--ts-rand));scrollbar-width:none}
.ts-buehne__reihe::-webkit-scrollbar{display:none}
.ts-best{--ts-heben:0;flex:0 0 58%;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
/* Bildfläche immer quadratisch, auch bei Hochkant-Bildern. Chef 05.11.2026: „Hier rückt einer aus der Reihe bei den Bildern“ */
.ts-best__bild{position:relative;display:block;aspect-ratio:1}
.ts-best__bild>img{position:absolute;inset:0}
/* perspective() gibt jedem Bild eine eigene 3D-Grafikebene, ohne es zu bewegen (derselbe Auslöser wie vorher bei .ts-3d). Nur so verschmilzt Safari das Weiß der Bilder
   mit der Vitrine, ohne Ebene standen helle Kästen dahinter (Chef 05.11.2026: „Bitte den Helen Balken in der Vitrine
   wieder entfernen“). Die 3D-Bewegung (.ts-3d) gibt es nur mit Maus: Auf dem Handy löste schon das Antippen zum Wischen
   den Hover aus, das Produkt hob sich animiert nach vorn und das Wischen hakte (Chef 05.11.2026: „Die Vitrine lässt sich
   wieder schlecht scrollen“). */
.ts-best__bild img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform-origin:50% 86%;transform:perspective(1100px) translateZ(0)}
@media (hover:none),(pointer:coarse){
  .ts-best__bild img{transition:none}
  .ts-best:hover .ts-best__bild img,.ts-best:focus-within .ts-best__bild img{filter:saturate(.8)}
}
/* Die Produkte stehen beim Scrollen fest. Chef 04.11.2026: „die Bilder schwimmen beim scrollen“. Bewegung gibt es nur
   noch am Desktop mit der Maus: Die Vitrine folgt dem Zeiger leicht, das Produkt darunter hebt sich nach vorn. */
.ts-3d .ts-best__bild img{transform:perspective(1100px)
    rotateX(calc(var(--ts-ky) * -6deg))
    rotateY(calc(var(--ts-kx) * 12deg))
    translateZ(calc(var(--ts-heben) * 40px))
    translateY(calc(var(--ts-heben) * -6px));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.ts-3d .ts-best:hover,.ts-3d .ts-best:focus-within{--ts-heben:1}
.ts-best__info{position:relative;display:flex;align-items:center;gap:10px;padding:0 14px}
.ts-best__name{flex:1;min-width:0;font-weight:650;font-size:.95rem;line-height:1.25;color:var(--ts-text)!important;text-decoration:none!important}
.ts-best__name:hover{color:var(--ts-blau)!important}
.ts-best__preis{font-weight:700;font-size:.95rem;white-space:nowrap}
.ts-best__form{margin:0}
/* Köder am Regal (thiesa-ADR 0015): eine ruhige Zeile unter dem Namen, nur wenn sie stimmt */
.ts-best__koeder{display:flex;align-items:center;gap:6px;margin:-4px 14px 0;font-size:.82rem;font-weight:600;color:var(--ts-blau)}
.ts-best__koeder::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--ts-blau)}
.ts-best__kaufen{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--ts-blau);color:#fff;cursor:pointer;
  box-shadow:0 6px 14px -6px rgba(36,90,145,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.ts-best__kaufen:hover{background:var(--ts-blau-dunkel)}
.ts-best__kaufen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* Kennst du schon? Der Berater stellt ein Produkt vor (thiesa-ADR 0015). Gleiche Vitrine wie „Beliebt“, ein Licht. */
.ts-tipp{padding:8px 0 28px}
/* Hellblauer Rahmen mit zartem Hof, damit das vorgestellte Produkt aus der Seite heraustritt.
   Chef 05.11.2026: „Das Highlight Produkt, was sehr Verkaufsberater dort vorstellen soll, muss noch leicht blau
   eingerahmt werden oder so dass es besser zu sehen ist“
   Chef 05.11.2026: „Den Rahmen vielleicht eher etwas dezenter, dafür noch leuchtender, wieso Neon blau […] dass das so
   ganz dezent […] ringsrum so ein bisschen raus leuchtet“
   Deshalb: feiner Rand und ein weicher Schein rundum im Farbton von --ts-blau (210°), nur heller und satter. */
.ts-tipp__tafel{display:grid;gap:0;border-radius:var(--ts-radius);overflow:hidden;background:#fff;border:1px solid rgba(51,153,255,.5);
  box-shadow:0 0 0 1px rgba(51,153,255,.1),0 0 14px rgba(51,153,255,.32),0 0 38px rgba(51,153,255,.16),0 22px 44px -30px rgba(36,90,145,.35)}
.ts-tipp__bild{display:grid;place-items:center;aspect-ratio:4/3;background:radial-gradient(110% 80% at 50% 40%,#fafbfc 0,#f2f4f7 60%,#e9ecf0 100%)}
.ts-tipp__bild img{width:78%;max-width:340px;height:auto;mix-blend-mode:multiply}
.ts-tipp__text{padding:22px 22px 24px}
.ts-tipp__frage{margin:0 0 4px;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blau)}
.ts-tipp__name{margin:0 0 8px;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ts-tipp__name a{color:var(--ts-text)!important;text-decoration:none!important}
.ts-tipp__nutzen{margin:0 0 14px;font-size:1.05rem;line-height:1.45;color:var(--ts-text)}
.ts-tipp__punkte{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;font-size:.95rem;color:var(--ts-grau-5)}
.ts-tipp__punkte li{display:flex;align-items:flex-start;gap:8px}
.ts-tipp__punkte svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--ts-blau);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ts-tipp__kauf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ts-tipp__kauf form{margin:0}
.ts-tipp__preis{font-size:1.2rem;font-weight:800}
.ts-tipp__knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:0;border-radius:999px;
  background:var(--ts-blau);color:#fff!important;font-weight:700;text-decoration:none!important;cursor:pointer;
  box-shadow:0 10px 20px -10px rgba(36,90,145,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:background .15s,transform .15s}
.ts-tipp__knopf:hover{background:var(--ts-blau-dunkel);transform:translateY(-1px)}

/* Angebot im Fenster nach „In den Warenkorb“ (snippets/ts_nach_dem_korb.tpl) */
.ts-angebot{display:flex;flex-direction:column;gap:12px;margin:4px 0 16px;padding:14px 16px;border-radius:14px;background:var(--ts-blau-hell);border:1px solid #cfe0f2}
.ts-angebot[hidden]{display:none}
.ts-angebot__text{display:flex;align-items:center;gap:10px;margin:0;font-weight:700;color:var(--ts-text)}
.ts-angebot__text svg{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:var(--ts-blau);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ts-angebot__knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ts-angebot__form{margin:0}
.ts-angebot__ja{min-height:42px;padding:0 20px;border:0;border-radius:999px;background:var(--ts-blau);color:#fff;font-weight:700;cursor:pointer}
.ts-angebot__ja:hover{background:var(--ts-blau-dunkel)}
.ts-angebot__nein{border:0;background:none;color:var(--ts-grau-5);text-decoration:underline;cursor:pointer;padding:6px 4px}

/* Zwei Wege: Teile-Finder und PRIAMOND */
.ts-wege{padding:8px 0 56px}
.ts-wege__raster{display:grid;gap:10px}
.ts-weg{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--ts-radius);background:var(--ts-grau-0);border:1px solid var(--ts-grau-2);color:var(--ts-text)!important;text-decoration:none!important;transition:border-color .15s,background .15s,transform .2s ease,box-shadow .2s ease}
.ts-weg{box-shadow:0 1px 0 #fff inset,0 6px 16px -10px rgba(20,30,40,.25)}
.ts-weg:hover{border-color:var(--ts-blau);background:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(36,90,145,.35)}
.ts-weg svg{flex:0 0 auto;width:28px;height:28px;fill:none;stroke:var(--ts-blau);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ts-weg span{display:flex;flex-direction:column;font-size:.9rem;color:var(--ts-grau-5)}
.ts-weg strong{color:var(--ts-text);font-size:1rem}
/* Seit die Finder-Bühne oben steht, bleibt hier nur PRIAMOND: eine Karte, schmal und mittig (thiesa-ADR 0045) */
.ts-wege__raster--eins{max-width:calc(560px + 2 * var(--ts-rand))}
@media (min-width:768px){.ts-wege__raster.ts-wege__raster--eins{grid-template-columns:1fr}}

/* Produktlisten von NOVA im ruhigen Rahmen */
.product-slider-wrapper{padding-top:16px;padding-bottom:16px}
.productbox-inner,.productbox .productbox-inner{border-radius:var(--ts-radius)}
.productbox .productbox-image{background:var(--ts-grau-1);border-radius:var(--ts-radius)}
.productbox .productbox-image img{mix-blend-mode:multiply}
/* Artikel ohne Bild: Platzhalter „Foto folgt“ statt des grauen JTL-Bilds (thiesa-ADR 0019).
   Browser ohne content auf img bekommen ihn über berater.js. */
img[src$="/gfx/keinBild.gif"]{content:url(gfx/foto-folgt.svg?v=2)}
#gallery img[src$="/gfx/keinBild.gif"],#gallery img[src*="/gfx/foto-folgt.svg"]{width:62%;height:auto}

/* Fuß aufgeräumt in der breiten Spalte. Chef 04.11.2026: „Und räume den Footer auf. Der fetzt nicht.“
   Oben Marke, zwei Linkgruppen aus dem Backend und PRIAMOND in einer Reihe, unten eine ruhige Zeile mit Preishinweis,
   „Vertrag widerrufen“ (Pflicht seit 19.06.2026, gut lesbar und immer sichtbar) und dem Hinweis auf JTL-Shop.
   Die Kästen von NOVA bleiben, ihre Hüllen werden mit display:contents ins Raster gelegt. */
#footer{background:var(--ts-grau-0)!important;color:var(--ts-text)!important;border-top:1px solid var(--ts-grau-2);margin-top:0!important}
#footer>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px;max-width:calc(var(--ts-breit) + 2 * var(--ts-rand))!important;
  padding:40px var(--ts-rand) 0!important;margin:0 auto}
#footer a{color:var(--ts-text)!important}
#footer a:hover{color:var(--ts-blau)!important}
.ts-haus,#footer-boxes{display:contents}
.ts-haus__marke,.ts-haus__verbund{grid-column:1 / -1}
.ts-haus__marke img{display:block;width:150px;height:auto}
.ts-haus__satz{margin:12px 0 10px;font-size:1rem;font-weight:600;color:var(--ts-text)}
.ts-haus__vorteile{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:.9rem;color:var(--ts-grau-5)}
.ts-haus__vorteile li{display:flex;align-items:center;gap:8px}
.ts-haus__vorteile svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--ts-blau);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ts-haus__mail{font-weight:600;font-size:.95rem;text-decoration:none!important;border-bottom:1px solid var(--ts-grau-2)}
.ts-haus__titel,#footer .productlist-filter-headline{margin:0 0 .6rem!important;padding:0!important;font-size:.76rem!important;font-weight:700!important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ts-grau-5)!important;border:0!important}
.ts-haus__link{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--ts-grau-2);text-decoration:none!important;
  box-shadow:0 6px 16px -12px rgba(20,30,40,.3);transition:border-color .15s,transform .15s}
.ts-haus__link strong{color:var(--ts-text);letter-spacing:.04em}
.ts-haus__link span{color:var(--ts-grau-5);font-size:.9rem}
.ts-haus__link:hover{border-color:var(--ts-blau);transform:translateY(-1px)}
/* Linkgruppen: auch auf dem Handy offen statt eingeklappt, kompakt */
#footer-boxes>[class*="col"]{width:auto;max-width:none;flex:none;padding:0}
#footer .box-linkgroup{margin:0}
#footer .box-linkgroup .box-normal-link{display:none!important}
#footer .box-linkgroup .productlist-filter-headline{display:block!important}
#footer .box-linkgroup .collapse{display:block!important;height:auto!important}
#footer .box-linkgroup .nav-link{padding:3px 0!important;font-size:.92rem;line-height:1.5}
#footer .box-linkgroup .nav-link,#footer .productlist-filter-headline{-webkit-hyphens:auto;hyphens:auto}
@media (max-width:767.98px){#footer .box-linkgroup .nav-link{font-size:.88rem}}
/* Reihenfolge auf dem Handy: Marke, Links, PRIAMOND, Widerruf, Preishinweis */
.ts-haus__marke{order:1}
#footer-boxes>[class*="col"]{order:2}
.ts-haus__verbund{order:3}
#footer .withdrawal-link-wrapper{order:4}
#footer .footnote-vat{order:5}
#footer .box-normal-hr{display:none}
/* Unterste Zeile */
#footer .withdrawal-link-wrapper,#footer .footnote-vat{grid-column:1 / -1;margin:0}
#footer .withdrawal-link-wrapper{border-top:1px solid var(--ts-grau-2);padding-top:18px}
#footer .withdrawal-link-wrapper>[class*="col"]{width:auto;max-width:none;flex:none;padding:0}
#footer .withdrawal-link-wrapper .mt-3{margin:0!important}
#footer .withdrawal-link{display:inline-flex!important;align-items:center;width:auto!important;min-height:40px;padding:0 18px!important;border-radius:999px!important;
  background:#fff!important;border:1.5px solid var(--ts-blau)!important;color:var(--ts-blau)!important;font-weight:700;font-size:.9rem}
#footer .withdrawal-link:hover{background:var(--ts-blau)!important;color:#fff!important}
#footer .footnote-vat{color:var(--ts-grau-5);font-size:.85rem}
#copyright{background:var(--ts-grau-0)!important;color:var(--ts-grau-5)!important}
#copyright>.container-fluid{max-width:calc(var(--ts-breit) + 2 * var(--ts-rand));margin:0 auto;padding:10px var(--ts-rand) 24px!important}
#copyright .row{margin:0}
#copyright #system-credits{padding-right:0!important;font-size:.8rem}
#copyright a{color:var(--ts-grau-5)!important}

/* Tablet */
@media (min-width:768px){
  .ts-einstieg{padding:52px 0 36px}
  .ts-best{flex-basis:calc(100% / 3)}
  .ts-wege__raster{grid-template-columns:1fr 1fr}
  .ts-tipp__tafel{grid-template-columns:1.05fr 1fr;align-items:stretch}
  .ts-tipp__bild{aspect-ratio:auto;min-height:340px}
  .ts-tipp__text{display:flex;flex-direction:column;justify-content:center;padding:36px 40px}
  #footer>.container{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);column-gap:40px}
  .ts-haus__marke{grid-column:1;grid-row:1}
  .ts-haus__verbund{grid-column:4;grid-row:1}
  .ts-wiedersehen__karte{flex:1 1 0}
}
/* Desktop */
@media (min-width:1100px){
  /* Kompakter, damit Begrüßung, Suche und Finder-Bühne auf einen Bildschirm passen.
     Chef 05.11.2026: „Bekommen wir das mehr auf eine Seite?“ */
  /* Wieder etwas mehr Luft. Chef 05.11.2026: „Insgesamt wieder etwas vertikal auseinander ziehen es steht jetzt zu eng“ */
  .ts-einstieg{padding:64px 0 46px}
  .ts-einstieg__titel{font-size:clamp(2rem,1rem + 2.2vw,2.6rem);margin-bottom:1.9rem}
  .ts-best{flex-basis:25%}
}

/* Sprunglink „Zum Inhalt springen“: NOVA schreibt seinen gelben Rand direkt in die Seite, deshalb hier */
.btn-skip-to{border-color:var(--ts-blau)!important;color:var(--ts-blau)!important}

/* Artikelseite auf dem Handy: weniger Luft, Menge und Knopf in einer Zeile, Knopf mit Schrift, Kaufleiste unten
   (kaufleiste.js). Chef 05.11.2026: „Wollen wir das in den warenkorb nicht lieber unten anheften? Dann fällt das
   schneller ins Auge“ und „Da ist auch so viel Luft“ */
#add-to-cart .btn-basket-check>span{display:inline!important}
@media (max-width:991.98px){
  .product-info .info-essential{margin:10px 0 14px!important}
  .product-info .shortdesc{margin-bottom:10px!important}
  .product-info .variations dl,.product-info .variations .form-group{margin-bottom:10px!important}
  .product-info .price_wrapper{margin-bottom:4px!important}
  .product-info .stock-information{margin-top:8px!important;padding-top:10px!important;padding-bottom:10px!important}
  #add-to-cart{margin-top:14px!important}
  #add-to-cart .basket-form-inline{flex-wrap:nowrap;margin-bottom:8px!important}
  #add-to-cart .basket-form-inline>[class*="col"]{flex:0 0 48%;max-width:48%;margin-top:0!important;margin-bottom:0!important}
  #add-to-cart .basket-form-inline>[class*="col"]+[class*="col"]{flex:1 1 0;max-width:none;padding-left:0}
  #add-to-cart .basket-form-inline .btn,#add-to-cart .basket-form-inline .form-control{height:48px}
  .product-info .product-offer{margin-bottom:16px!important}
}
.ts-kaufleiste{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:flex;align-items:center;gap:14px;
  padding:10px var(--ts-rand) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--ts-grau-2);
  box-shadow:0 -12px 26px -20px rgba(20,30,40,.45)}
.ts-kaufleiste[hidden]{display:none}
.ts-kaufleiste__preis{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.15}
.ts-kaufleiste__preis strong{font-size:1.15rem;font-weight:800;color:var(--ts-text)}
.ts-kaufleiste__preis small{font-size:.72rem;color:var(--ts-grau-5)}
.ts-kaufleiste__knopf{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border:0;border-radius:999px;
  background:var(--ts-blau);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 10px 20px -12px rgba(36,90,145,.8)}
.ts-kaufleiste__knopf:hover{background:var(--ts-blau-dunkel)}
.ts-kaufleiste__knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:992px){.ts-kaufleiste{display:none!important}}
html.ts-mit-kaufleiste body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
html.ts-mit-kaufleiste #consent-settings-btn{bottom:calc(84px + env(safe-area-inset-bottom))!important}
html.ts-mit-kaufleiste .smoothscroll-top{margin-bottom:72px}
/* Ohne gewählte Variante steht dort, wo später Menge und Knopf stehen, ein gleich hoher Platzhalter statt des hohen
   Hinweiskastens. So springt nichts, wenn die Variante gewählt ist. Chef 05.11.2026: „Der Button springt noch je nachdem
   ob eine Variation ausgewählt ist oder nicht“ */
#add-to-cart .choose-variations{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0 0 8px!important;padding:0 16px!important;
  border:1px dashed var(--ts-grau-2)!important;border-radius:4px;background:var(--ts-grau-0)!important;color:var(--ts-grau-5)!important;font-size:0!important;line-height:1.2}
#add-to-cart .choose-variations .sr-only{display:none}
#add-to-cart .choose-variations::after{content:"Bitte zuerst eine Variante wählen";font-size:.95rem;font-weight:600}
/* Mengenfeld mit Einheit (z. B. Sack): Minus, Zahl, Einheit und Plus bleiben in einer Zeile */
/* NOVA gibt der Einheit dieselbe Klasse form-control wie dem Zahlenfeld, deshalb getrennt. Chef 05.11.2026: „Mengenanzeige
   spinnt noch“ */
/* Ein Rahmen um die ganze Gruppe, die Teile selbst ohne Ränder. Safari zeichnete sonst Lücken unter Zahl und Einheit.
   Chef 05.11.2026: „Das Mengenfeld ist auch noch fehlerhaft“ */
#add-to-cart .input-group.form-counter{flex-wrap:nowrap!important;align-items:stretch;height:48px!important;max-height:none!important;border:1px solid #9aa1a8;border-radius:6px;background:#fff;overflow:hidden}
#add-to-cart .input-group.form-counter>*,#add-to-cart .input-group.form-counter .btn,#add-to-cart .input-group.form-counter input.quantity,
#add-to-cart .input-group.form-counter .unit{border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;height:100%!important;margin:0!important}
#add-to-cart .input-group.form-counter input.quantity{flex:1 1 auto;min-width:34px;width:1%;padding:0 2px!important;text-align:center;-webkit-appearance:none;appearance:textfield;font-size:1rem}
#add-to-cart .input-group.form-counter input.quantity::-webkit-inner-spin-button,#add-to-cart .input-group.form-counter input.quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#add-to-cart .input-group.form-counter .unit{flex:0 0 auto;width:auto!important;min-width:0;display:flex;align-items:center;padding:0 6px 0 2px!important;font-size:.85rem;color:var(--ts-grau-5)}
#add-to-cart button[name="inWarenkorb"] .btn-basket-check{white-space:nowrap}
@media (max-width:374.98px){#add-to-cart button[name="inWarenkorb"] .btn-basket-check i{display:none}#add-to-cart button[name="inWarenkorb"]{padding-left:8px;padding-right:8px;font-size:.92rem}}
#add-to-cart .input-group.form-counter .btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 12px!important;color:var(--ts-text)}
#add-to-cart .input-group.form-counter .input-group-prepend,#add-to-cart .input-group.form-counter .input-group-append{display:flex;align-items:stretch}
/* Ohne gewählte Variante fehlt die Zeile „Lieferzeit“, mit Variante kommt sie dazu. Der Platz wird vorher freigehalten. */
@media (max-width:991.98px){#buy_form:has(#add-to-cart .choose-variations) .delivery-status{min-height:57px}}

/* Persönliches Angebot des Beraters (berater.js, Plugin thiesa_berater 0.4, thiesa-ADR 0025). Ruhig, mit demselben leisen
   Schein wie „Kennst du schon?“, immer mit „Nein danke“, ohne Countdown. */
.ts-berater-angebot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;padding:14px 16px;border-radius:16px;background:#fff;
  border:1px solid rgba(51,153,255,.5);box-shadow:0 0 0 1px rgba(51,153,255,.08),0 0 14px rgba(51,153,255,.26);text-align:left}
.ts-berater-angebot img{flex:0 0 auto;width:56px;height:56px;border-radius:12px;object-fit:contain;background:var(--ts-grau-1);mix-blend-mode:multiply}
.ts-berater-angebot__text{flex:1 1 220px;min-width:0}
.ts-berater-angebot__titel{margin:0 0 2px;font-weight:750;color:var(--ts-text)}
.ts-berater-angebot__satz{margin:0;font-size:.92rem;line-height:1.4;color:var(--ts-text)}
.ts-berater-angebot__frist{display:block;margin-top:4px;font-size:.78rem;color:var(--ts-grau-5)}
.ts-berater-angebot__knoepfe{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ts-berater-angebot__ja{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--ts-blau);color:#fff;font-weight:700;cursor:pointer}
.ts-berater-angebot__ja:hover{background:var(--ts-blau-dunkel)}
.ts-berater-angebot__ja:disabled{opacity:.6}
.ts-berater-angebot__nein{border:0;background:none;color:var(--ts-grau-5);text-decoration:underline;cursor:pointer;padding:6px 4px}
.ts-berater-hinweis{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--ts-blau-hell);color:var(--ts-blau);font-size:.9rem;font-weight:600}
/* Der Berater kommt sichtbar herein: kurz hochgleiten, dann zweimal leise aufleuchten. Wer „Bewegung reduzieren“
   eingestellt hat, sieht ihn ohne Bewegung. Chef 05.11.2026: „Und ab wann weiß ich, dass der verkaufsberater agiert?
   Da wäre eine Animation ganz nett“ */
@keyframes ts-berater-ein{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ts-berater-schein{0%,100%{box-shadow:0 0 0 1px rgba(51,153,255,.08),0 0 14px rgba(51,153,255,.26)}
  50%{box-shadow:0 0 0 3px rgba(51,153,255,.18),0 0 26px rgba(51,153,255,.5)}}
@keyframes ts-berater-funkeln{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.25) rotate(20deg);opacity:1}}
.ts-berater-angebot{animation:ts-berater-ein .5s cubic-bezier(.2,.7,.2,1) both,ts-berater-schein 1.6s ease-in-out .5s 2}
.ts-berater-angebot__marke{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blau)}
.ts-berater-angebot__marke::before{content:"";flex:0 0 auto;width:12px;height:12px;
  background:radial-gradient(circle,var(--ts-blau) 0 30%,transparent 32%),conic-gradient(from 0deg,transparent 0 10%,rgba(51,153,255,.9) 12% 13%,transparent 15% 35%,rgba(51,153,255,.9) 37% 38%,transparent 40% 60%,rgba(51,153,255,.9) 62% 63%,transparent 65% 85%,rgba(51,153,255,.9) 87% 88%,transparent 90%);
  border-radius:50%;animation:ts-berater-funkeln 1.6s ease-in-out .5s 3}
.ts-berater-angebot--vorschau{border-style:dashed;background:#fbfdff}
.ts-berater-angebot--vorschau .ts-berater-angebot__marke{text-transform:none;letter-spacing:0}
.ts-berater-angebot__grund{display:block;margin-top:4px;font-size:.75rem;color:var(--ts-grau-5)}
.ts-wiedersehen:not([hidden]){animation:ts-berater-ein .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.ts-berater-angebot,.ts-berater-angebot__marke::before,.ts-wiedersehen:not([hidden]){animation:none}}

/* Varianten als ruhige Kästchen: Name oben, Aufpreis klein darunter, nichts bricht um. „+/- 0,00 €“ blendet
   kaufleiste.js aus. Chef 05.11.2026: „Variationen werden nicht schön angezeigt.“ */
.variations .swatches.swatches-text{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:92px;min-height:56px;
  margin:0!important;padding:8px 14px!important;border:1.5px solid var(--ts-grau-2)!important;border-radius:12px!important;background:#fff!important;
  color:var(--ts-text)!important;font-weight:650;line-height:1.2;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s}
.variations .swatches.swatches-text:hover{border-color:var(--ts-blau)!important}
.variations .swatches.swatches-text.active,.variations .swatches.swatches-text:has(input:checked){border-color:var(--ts-blau)!important;background:var(--ts-blau-hell)!important;color:var(--ts-blau)!important}
.variations .swatches.swatches-text .variation-badge{display:block;margin:0!important;padding:0!important;background:none!important;font-size:.78rem;font-weight:500;color:var(--ts-grau-5)!important;white-space:nowrap}
.variations .swatches.swatches-text.not-available{opacity:.5}
.variations .swatches-selected{font-weight:700;color:var(--ts-blau)!important}
/* Die Kästchen teilen sich die ganze Breite. Chef 05.11.2026: „da wird echt viel Fläche verschenkt. Lass uns doch die
   ganze Breite nutzen für Variationen und Preise.“ */
.variations .form-row.swatches{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;width:100%;margin:0!important;transform:none!important}
.variations .form-row.swatches>.col{flex:none!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important}
.variations .swatches.swatches-text{width:100%;min-width:0!important}
.variations .variation-wrapper,.variations .variation-wrapper dd,.variations dl{width:100%}

/* Chef-Vorschau des Beraters (berater.js, ?berater=<Schlüssel>): kleine Notiz unten, was er gerade tut */
.ts-berater-notiz{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:1045;display:flex;gap:8px;align-items:flex-start;
  max-width:520px;padding:10px 14px;border:1px dashed rgba(51,153,255,.6);border-radius:14px;background:rgba(255,255,255,.97);
  box-shadow:0 0 14px rgba(51,153,255,.25);color:var(--ts-text);font-size:.82rem;line-height:1.35;text-align:left;cursor:pointer;
  animation:ts-berater-ein .5s cubic-bezier(.2,.7,.2,1) both}
.ts-berater-notiz strong{flex:0 0 auto;color:var(--ts-blau);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;margin-top:1px}
html:not(.ts-mit-kaufleiste) .ts-berater-notiz{bottom:calc(16px + env(safe-area-inset-bottom));left:74px}

/* Preis mit Steuerhinweis in einer Zeile, Lieferzeit über die ganze Breite, „Frage zum Artikel“ auf dem Handy als Symbol.
   Chef 05.11.2026: „Lass uns doch die ganze Breite nutzen für Variationen und Preise.“ */
.product-info .price_wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin-bottom:0!important}
.product-info .price_wrapper .price_label{flex:0 0 100%;margin:0;font-size:.85rem;color:var(--ts-grau-5)}
.product-info .price_wrapper .price{margin:0!important;line-height:1.05}
.product-info .price_wrapper .price-note{flex:1 1 120px;margin:0!important;font-size:.82rem;line-height:1.3;color:var(--ts-grau-5)}
.product-info .stock-information{align-items:center}
.product-info .delivery-status ul{margin:0}
.product-info .delivery-status li{line-height:1.35}
@media (max-width:991.98px){
  .product-info .question-on-item{flex:0 0 auto;max-width:none;padding-left:8px}
  .product-info .question-on-item .question{display:grid;place-items:center;width:40px;height:40px;padding:0!important;border:1px solid var(--ts-grau-2)!important;border-radius:50%;
    color:var(--ts-grau-5)!important;font-size:0!important}
  .product-info .question-on-item .question .fa{font-size:1.15rem!important;margin:0!important}
  .product-info .question-on-item .question span:not(.fa){display:none!important}
}
/* Die Seite rollt nie seitlich. NOVAs Schieber „Ähnliche Artikel“ ragt vor dem Einrichten über den Rand (gemessen
   05.11.2026: 474 statt 375 px Breite bei mega X-Pose Liquid). clip statt hidden, damit der Kopf weiter klebt. */
html,body{overflow-x:clip}

/* Warenkorb: ruhiger Lieferhinweis statt des gelben JTL-Fensters (berater.js). Bis berater.js ihn umbaut, ist das
   Fenster schon ruhig gefärbt, damit nichts gelb aufblitzt. Chef 05.11.2026: „Das gelbe Fenster stört im warenkorb“ */
#alert-list .alert[data-key="orderAmountStock"]{background:var(--ts-grau-0)!important;border:1px solid var(--ts-grau-2)!important;color:var(--ts-text)!important;
  font-size:.88rem;padding:8px 12px}
#alert-list .alert[data-key="orderAmountStock"] .fa-exclamation-triangle,#alert-list .alert[data-key="orderAmountStock"] .close{display:none}
.ts-lieferhinweis{margin:-4px 0 14px;font-size:.88rem;color:var(--ts-grau-5)}
.ts-lieferhinweis__kopf{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.ts-lieferhinweis__kopf::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ts-blau);opacity:.7}
.ts-lieferhinweis__satz{text-decoration:underline dotted;text-underline-offset:3px}
.ts-lieferhinweis__zeit{font-weight:600;color:var(--ts-text)}
.ts-lieferhinweis__liste{margin:6px 0 0 18px;padding:0}

/* Warenkorb: Dein Berater empfiehlt dazu, eine Karte mit Hammer-Angebot (berater.js, Plugin thiesa_berater 0.6).
   Chef 05.11.2026: „unter den Produkten vor Kasse bieten wir als Verkaufsberatung echtes warenkorb Cross selling an.
   Mit Hammer angeboten“ */
.ts-dazu{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--ts-grau-2);animation:ts-berater-ein .5s cubic-bezier(.2,.7,.2,1) both}
.ts-dazu__marke{display:flex;align-items:center;gap:6px;margin:0;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blau)}
.ts-dazu__marke::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ts-blau);box-shadow:0 0 8px rgba(51,153,255,.7)}
.ts-dazu__titel{margin:2px 0 12px;font-size:1.15rem;font-weight:750;color:var(--ts-text)}
.ts-dazu__reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ts-dazu__karte{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 10px 12px;border:1px solid var(--ts-grau-2);border-radius:14px;background:#fff}
.ts-dazu__bild{display:grid;place-items:center;aspect-ratio:1/1;margin-bottom:4px;border-radius:10px;background:var(--ts-grau-0);overflow:hidden}
.ts-dazu__bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ts-dazu__name{font-size:.9rem;font-weight:650;line-height:1.3;color:var(--ts-text)!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ts-dazu__grund{font-size:.75rem;line-height:1.3;color:var(--ts-grau-5)}
.ts-dazu__variante{font-size:.75rem;line-height:1.3;font-weight:600;color:var(--ts-blau)}
.ts-dazu__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:auto 0 6px;padding-top:4px}
.ts-dazu__preis strong{font-size:1rem;font-weight:750;color:var(--ts-text)}
.ts-dazu__preis del{font-size:.82rem;color:var(--ts-grau-5)}
.ts-dazu__form{margin:0}
.ts-dazu__knopf{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:999px;
  background:var(--ts-blau);color:#fff!important;font-size:.88rem;font-weight:700;line-height:1.15;text-align:center;text-decoration:none!important;cursor:pointer}
.ts-dazu__knopf:hover{background:var(--ts-blau-dunkel)}
.ts-dazu__knopf:disabled{opacity:.6;cursor:default}
.ts-dazu__knopf--leise{background:var(--ts-blau-hell);color:var(--ts-blau)!important}
.ts-dazu__knopf--leise:hover{background:#dce9f7}
.ts-dazu__nein{margin-top:2px;padding:4px;border:0;background:none;color:var(--ts-grau-5);font-size:.8rem;text-decoration:underline;cursor:pointer}
.ts-dazu__frist{font-size:.72rem;line-height:1.3;color:var(--ts-grau-5)}
.ts-dazu__karte--hammer{border-color:rgba(51,153,255,.55);box-shadow:0 0 0 1px rgba(51,153,255,.1),0 0 16px rgba(51,153,255,.3);
  animation:ts-berater-schein 1.6s ease-in-out .6s 2}
.ts-dazu__hammer{position:absolute;top:8px;left:8px;z-index:1;margin:0;padding:3px 9px;border-radius:999px;background:var(--ts-blau);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 8px rgba(47,111,176,.35)}
.ts-dazu__karte--hammer .ts-dazu__preis strong{color:var(--ts-blau)}
@media (max-width:767.98px){
  .ts-dazu__reihe{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ts-dazu__reihe::-webkit-scrollbar{display:none}
  .ts-dazu__karte{flex:0 0 46%;scroll-snap-align:start}
  .ts-dazu__knopf{font-size:.8rem;padding:0 8px}
  .ts-dazu__form .ts-dazu__knopf{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.ts-dazu,.ts-dazu__karte--hammer{animation:none}}

/* Aufklappmenü am Desktop: Kacheln mit Produktfoto und Artikelzahl je Kategorie (menue.js, thiesa-ADR 0028), ohne
   seitlichen Scrollbalken. Chef 05.11.2026: „Bisschen langweilig oder? Bitte mehr Bilder oder Symbole“ */
@media (min-width:992px){
  #mainNavigation .dropdown-menu{overflow-x:hidden!important;border:0;border-radius:0 0 16px 16px;box-shadow:0 18px 40px rgba(20,30,40,.12)}
  #mainNavigation .dropdown-menu .subcategory-wrapper{padding:20px 24px 24px}
  #mainNavigation .dropdown-menu .subcategory-wrapper>.row{margin-left:-6px;margin-right:-6px;row-gap:6px}
  #mainNavigation .dropdown-menu .subcategory-wrapper>.row>.nav-item{padding-left:6px;padding-right:6px;margin:0!important}
  #mainNavigation .ts-kachel{display:flex!important;align-items:center;gap:14px;padding:8px 10px!important;margin:0!important;border:1px solid transparent!important;
    border-radius:14px;text-decoration:none!important;transition:background-color .15s,border-color .15s,transform .15s}
  #mainNavigation .ts-kachel::before,#mainNavigation .ts-kachel::after{display:none!important}
  #mainNavigation .ts-kachel:hover,#mainNavigation .ts-kachel:focus-visible{background:var(--ts-blau-hell);border-color:rgba(47,111,176,.22)!important;transform:translateY(-1px)}
  .ts-kachel__bild{flex:0 0 68px;display:grid;place-items:center;width:68px;height:68px;border-radius:12px;background:var(--ts-grau-0);overflow:hidden}
  .ts-kachel__bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .2s}
  .ts-kachel__bild--symbol{background:var(--ts-blau-hell);color:var(--ts-blau)}
  .ts-kachel:hover .ts-kachel__bild img{transform:scale(1.06)}
  .ts-kachel__text{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ts-kachel__text .text-truncate{font-size:.98rem;font-weight:650;color:var(--ts-text)}
  .ts-kachel:hover .ts-kachel__text .text-truncate{color:var(--ts-blau)}
  .ts-kachel__anzahl{font-size:.78rem;color:var(--ts-grau-5)}
}
@media (max-width:991.98px){.ts-kachel__bild,.ts-kachel__anzahl{display:none!important}}
@media (prefers-reduced-motion:reduce){#mainNavigation .ts-kachel,.ts-kachel__bild img{transition:none}}
/* Vorteile im Kopf nur am Desktop. Ohne Bewegung steht nur der erste. */
@keyframes ts-vorteil{0%{opacity:0;transform:translateY(6px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:991.98px){.ts-kopf-vorteile{display:none!important}}
@media (prefers-reduced-motion:reduce){#jtl-nav-wrapper .ts-kopf-vorteile li{animation:none}#jtl-nav-wrapper .ts-kopf-vorteile li:first-child{opacity:1}}

/* Kopf am Desktop wie priamond.de: volle Breite, Logo links mit Abstand, Suche mittig, rechts Telefon, Konto und
   Warenkorb. Chef 05.11.2026: „Das Logo am Desktop kann ruhig etwas weiter nach links. Dann haben wir da etwas mehr
   Platz“ und „Vergleich mal Primond Desktop und thiesa Desktop. Gleiche die ruhig an“ */
.ts-telefon{display:none!important}
@media (min-width:992px){
  /* Mitte zwischen der alten Breite (Logo bei 393 px) und voller Breite (Logo bei 88 px): höchstens 1520 px.
     Chef 05.11.2026: „Das ist jetzt wieder zu weit mein Freund.“ */
  #jtl-nav-wrapper>.container-fluid{max-width:1520px!important;padding-left:clamp(24px,4vw,40px)!important;padding-right:clamp(24px,4vw,40px)!important}
  #jtl-nav-wrapper .navbar-brand{margin-left:0!important}
  /* Höhe wie priamond.de, gemessen dort bei 1920 px: Logo oben 36 px (Mitte 61), Symbole 35 bis 75 px, Kopf 132 px.
     Vorher bei thiesa: Logo oben 15 px, Symbole 20 px, Kopf 124 px. Die obere Zeile rückt 15 px tiefer, das Logo noch
     6 px mehr, die Menüzeile behält ihre 44 px. Chef 05.11.2026: „Das Logo muss übrigens weiter runter. Am Desktop. Siehe
     dir priamond an. Da ist es perfekt von der Höhe“ */
  #jtl-nav-wrapper>.container-fluid{padding-top:21px!important}
  #jtl-nav-wrapper:has(#mainNavigation .navbar-nav>li)>.container-fluid{padding-bottom:43px!important}
  #jtl-nav-wrapper .navbar-brand{transform:translateY(6px)}
  #jtl-nav-wrapper .search-wrapper{width:clamp(200px,calc(100% - 760px),460px)!important;z-index:30}
  #jtl-nav-wrapper .search-wrapper form{position:relative}
  .ts-telefon{display:flex!important;align-items:center}
  .ts-telefon__nummer{display:none;font-size:16px;font-weight:600;white-space:nowrap}
  /* Ein Ring um die ganze Pille statt NOVAs eckigem Umriss um das Feld. Chef 05.11.2026: „Kleinigkeit mit dem Suchfeld
     oben und dem blauen Rand“ */
  #jtl-nav-wrapper .search-wrapper .form-control:focus,#jtl-nav-wrapper .search-wrapper .form-control:focus-visible{outline:0!important;box-shadow:none!important}
  #jtl-nav-wrapper .search-wrapper .input-group{border-radius:999px;transition:box-shadow .15s}
  #jtl-nav-wrapper .search-wrapper .input-group:focus-within{box-shadow:0 0 0 4px var(--ts-blau-hell)}
}
@media (min-width:992px) and (max-width:1499.98px){#jtl-nav-wrapper #shop-logo{width:230px!important}}
@media (min-width:1500px){.ts-telefon__nummer{display:inline}}
#jtl-nav-wrapper .ts-telefon .nav-link{gap:8px}

/* KI-Antwort unter dem Suchfeld (kisuche.js, thiesa-ADR 0029), vor allem anderen im Kopf.
   Chef 05.11.2026: „Und das such drop down in den Vordergrund“ */
.ts-ki{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1080;padding:14px 16px 12px;background:#fff;border:1px solid var(--ts-grau-2);
  border-radius:16px;box-shadow:0 18px 40px -18px rgba(20,30,40,.35);text-align:left;color:var(--ts-text);animation:ts-berater-ein .35s cubic-bezier(.2,.7,.2,1) both}
.ts-ki[hidden]{display:none}
.ts-ki__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ts-ki__marke{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blau)}
.ts-ki__marke::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ts-blau);box-shadow:0 0 8px rgba(51,153,255,.7)}
.ts-ki__zu{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--ts-grau-5);cursor:pointer}
.ts-ki__zu:hover{background:var(--ts-grau-1)}
.ts-ki__zu svg,.ts-rueckruf__zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ts-ki__antwort{margin:0 0 10px;font-size:.98rem;line-height:1.45}
.ts-ki__warte{display:flex;align-items:center;gap:10px;margin:4px 0 6px;color:var(--ts-grau-5);font-size:.95rem}
.ts-ki__kreis{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ts-blau-hell);border-top-color:var(--ts-blau);animation:ts-dreh .8s linear infinite}
.ts-ki__liste{display:grid;gap:4px;margin:0 0 8px}
.ts-ki__artikel{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;color:var(--ts-text)!important;text-decoration:none!important}
.ts-ki__artikel:hover{background:var(--ts-blau-hell)}
.ts-ki__bild{flex:0 0 auto;width:48px;height:48px;border-radius:10px;background:var(--ts-grau-0);overflow:hidden}
.ts-ki__bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ts-ki__text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ts-ki__text strong{font-size:.95rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-ki__text small{font-size:.85rem;font-weight:600;color:var(--ts-grau-5)}
.ts-ki__alle{display:inline-block;padding:4px 8px;font-size:.9rem;font-weight:600;color:var(--ts-blau)!important}
.ts-suche-tipp{margin:14px 0 0;font-size:.95rem;color:var(--ts-grau-5)}
.ts-suche-tipp button{padding:0;border:0;background:none;color:var(--ts-blau);font:inherit;font-weight:600;cursor:pointer;border-bottom:1px dotted currentColor}
@media (min-width:992px){#jtl-nav-wrapper .search-wrapper .ts-ki{min-width:420px}}

/* Rückruf-Fenster (rueckruf.js) und Telefon im Fuß */
.ts-rueckruf{width:min(92vw,420px);padding:26px 24px 22px;border:0;border-radius:18px;box-shadow:0 30px 60px -20px rgba(20,30,40,.45);color:var(--ts-text)}
.ts-rueckruf::backdrop{background:rgba(20,30,40,.35)}
.ts-rueckruf__zu{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--ts-grau-5);cursor:pointer}
.ts-rueckruf__zu:hover{background:var(--ts-grau-1)}
.ts-rueckruf__titel{margin:0 0 12px;font-size:1.3rem;font-weight:750}
.ts-rueckruf__nummer{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--ts-blau-hell);color:var(--ts-blau)!important;
  font-size:1.25rem;font-weight:750;text-decoration:none!important}
.ts-rueckruf__nummer svg{width:22px;height:22px;fill:currentColor}
.ts-rueckruf__oder{margin:18px 0 8px;font-weight:600}
.ts-rueckruf__form{display:grid;gap:10px}
.ts-rueckruf__feld{display:grid;gap:4px;margin:0;font-size:.85rem;font-weight:600;color:var(--ts-grau-5)}
.ts-rueckruf__feld input,.ts-rueckruf__feld select,.ts-rueckruf__feld textarea{width:100%;padding:10px 12px;border:1px solid var(--ts-grau-2);border-radius:10px;
  font:inherit;font-size:1rem;font-weight:400;color:var(--ts-text);background:#fff}
.ts-rueckruf__feld input:focus,.ts-rueckruf__feld select:focus,.ts-rueckruf__feld textarea:focus{outline:0;border-color:var(--ts-blau);box-shadow:0 0 0 3px var(--ts-blau-hell)}
.ts-rueckruf__falle{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.ts-rueckruf__hinweis{margin:0;font-size:.78rem;line-height:1.4;color:var(--ts-grau-5)}
.ts-rueckruf__meldung{margin:0;font-size:.9rem;color:#b3261e}
.ts-rueckruf__meldung:empty{display:none}
.ts-rueckruf__senden{min-height:46px;border:0;border-radius:999px;background:var(--ts-blau);color:#fff;font-weight:700;font-size:1rem;cursor:pointer}
.ts-rueckruf__senden:hover{background:var(--ts-blau-dunkel)}
.ts-rueckruf__senden:disabled{opacity:.6}
.ts-rueckruf__danke{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--ts-blau-hell);color:var(--ts-blau);font-weight:700}
.ts-haus__tel{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.05rem;font-weight:700;color:var(--ts-text)!important;text-decoration:none!important}
.ts-haus__tel svg{width:18px;height:18px;fill:var(--ts-blau)}
.ts-haus__rueckruf{display:block;margin:0 0 10px;padding:0;border:0;background:none;color:var(--ts-blau);font-weight:600;font-size:.95rem;cursor:pointer;border-bottom:1px dotted currentColor}
@media (prefers-reduced-motion:reduce){.ts-ki{animation:none}}