/* ct-version: 20260820-15 */ /* ct: Footer nach Mockup — Ink-Flaeche (Farbe kommt aus den Template- Farb-Slots), Spaltenkoepfe als Label, Zahlarten-Chips, Copyright-Zeile. Der Footer traegt genestete Controls (Scroll-Top) — explizit mitstylen (NOVA-LIVE-LEHREN K: weisses Icon auf weissem Knopf). */ :root{--ct-css-footer:'20260820-15'} /* ct: Der Fuss ist das letzte Band — gleiches Vertikalmass wie jedes andere (NOVA setzt hier 64px, das Raster sagt --ct-band-y). Die frueher hier angesprochene .footer-wrapper existiert in NOVA 5.7.2 nicht mehr; die Regel lief ins Leere (gemessen padding-top 64px = NOVA-Wert). */ footer#footer{border-top:1px solid var(--ct-dline);padding-top:var(--ct-band-y)} /* ct: Fusszeilen-Flucht (Ben, 19.08.2026 — Fehlerregister 17). NOVA nimmt im Fuss einen normalen Bootstrap-.container (max-width 1250) und im Copyright-Band einen container-fluid: gemessen 1440 lief der Fuss auf 95..1345, das Copyright auf 16..1424, der Content auf 40..1400 — drei Kanten in einem Bild. Beide Baender laufen jetzt auf derselben Formel wie .ct-wrap/#content-wrapper (ct-base.css). Bootstraps Row-Negativrand (-16) und das Spaltenpolster (+16) heben sich auf, der Spalteninhalt landet exakt auf der Flucht. */ footer#footer > .container, footer#footer > #copyright > .container-fluid{ max-width:calc(var(--ct-wrap-max) + 80px); margin-left:auto;margin-right:auto; padding-left:40px;padding-right:40px; } @media (max-width: 767.98px){ footer#footer > .container, footer#footer > #copyright > .container-fluid{padding-left:20px;padding-right:20px} } /* Marken-Spalte (Mockup .fgrid Spalte 1) */ .ct-fbrand{ font-family:var(--ct-font-display);font-weight:900;font-size:22px; letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin-bottom:16px; } .ct-fbrand span{color:var(--ct-volt);text-transform:lowercase} .ct-fabout{font-size:13px;line-height:1.7;color:var(--ct-dmuted);margin:0 0 20px;max-width:330px} /* ct: 20260820-14 (Ben-Review) — aus dem unterstrichenen Textlink wird eine echte Schaltflaeche ("da kannst n hübschen button draus machen über die ganze breite"): Ghost-Button auf Volt-Kante, Hoehe aus dem Bedienelement-Token, volle Spaltenbreite (Deckel = Textbreite der Marken-Spalte, mobil ohne Deckel). */ footer#footer a.ct-fcontact{ display:flex;align-items:center;justify-content:center; width:100%;max-width:330px;min-height:var(--ct-control-h); border:1px solid var(--ct-volt);border-radius:var(--ct-radius-sm); padding:0 18px; font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#fff;text-decoration:none;text-align:center; } footer#footer a.ct-fcontact:hover{background:var(--ct-volt);border-color:var(--ct-volt);color:var(--ct-ink)} @media (max-width: 767.98px){ footer#footer a.ct-fcontact{max-width:none} } /* Spaltenkoepfe: Boxen-Titel als Label (Mockup `footer h4`: Archivo 700, 12px, .2em, versal, WEISS — die Links darunter sind das Gedaempfte). ⚠️ NOVA rendert denselben Kopf ZWEIMAL (Fehlerregister 13 / NOVA-LIVE-LEHREN I.0): als `.box-normal-link .text-truncate` (mobiler Klapp-Kopf) und als `.productlist-filter-headline.d-none.d-md-flex` (ab md). Vorher traf unsere Regel keine der beiden — die CMS-Spalten standen unformatiert neben unserer eigenen "Sicher bezahlen"-Spalte. */ footer#footer .box-title, footer#footer h3, footer#footer h4, footer#footer .productlist-filter-headline, footer#footer .box-normal-link .text-truncate, .ct-foot-head{ font-family:var(--ct-font-display); font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:#fff; margin-bottom:18px; } footer#footer .box-normal-link .text-truncate{margin-bottom:0} /* Links in den CMS-Spalten: gedaempft, 13px, luftige Zeile (Mockup li a) */ footer#footer .nav-panel .nav-link{ color:var(--ct-dmuted);font-size:13px;line-height:2.15; padding-top:0;padding-bottom:0;padding-left:0; } footer#footer .nav-panel .nav-link:hover{color:var(--ct-volt)} /* ct: ct-base.css setzt h1-h3/.h1-.h3 global auf --ct-text (dunkel). Im Fuss liegt alles auf Ink — Klassen-Ueberschriften (NOVA nutzt div.h2 fuer die Newsletter-Zeile) deshalb explizit zuruecksetzen. */ footer#footer .h1, footer#footer .h2, footer#footer .h3{color:#fff} footer#footer a{color:rgba(255,255,255,.82);font-size:14px} /* ct: Mobile Akkordeon-Koepfe der CMS-Boxen als solche kenntlich machen — sie sehen sonst wie normale Ueberschriften aus, obwohl sie der einzige Weg in die zugeklappten Listen sind (Fehlerregister 14). Ab md klappt NOVA die Boxen dauerhaft auf (.collapse.d-md-block), dann keine Deko. */ @media (max-width: 767.98px){ footer#footer .box-normal-link{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:14px 0; border-bottom:1px solid var(--ct-dline); color:#fff; } footer#footer .box-normal-link .text-truncate{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:#fff; } /* ct: 20260820-14 (Ben-Review, "was sollen das für icons sein") — der rotierte 2px-Border-Chevron renderte bei DPR 3 krumm und hing durch das translate schief vor der Trennlinie. Jetzt ein echtes SVG-Chevron als Hintergrundbild: rendert glatt, dreht beim Aufklappen um die eigene Mitte. Farbe fest Volt (data-URI kann kein currentColor). */ footer#footer .box-normal-link::after{ content:"";flex:none;width:14px;height:14px;margin-left:12px; background:url("data:image/svg+xml;utf8,") center/contain no-repeat; /* ct: 20260820-15 (Abnahme 16a) — my-nova setzt auf DASSELBE ::after einen FontAwesome-Glyph (content \f078) und gewann die content- Kaskade: gemessen lagen ZWEI Chevrons uebereinander (weiss + Volt, 5px versetzt). font-size:0 macht jeden Text-Glyph unsichtbar, unabhaengig davon, wessen content gewinnt — das SVG ist eine feste 14px-Box und bleibt. */ font-size:0;line-height:0; transition:transform .15s ease; } footer#footer .box-normal-link[aria-expanded="true"]::after{ transform:rotate(180deg); } } footer#footer a:hover{color:var(--ct-volt);text-decoration:none} /* Zahlarten-Chips */ /* ct: 20260820-12 (Befund 8, Ben 20.08.2026) — CHIP KUERZT NICHT MEHR, ER BRICHT UM. Die Ellipse aus -11 war die falsche Notbremse: gemessen 1440 brauchte "Nachnahme (zzgl. 2 EUR Übermittlungsentgelt)" 355px bei 314px Spaltenbreite und stand im Fuss UND auf der PDP als "NACHNAHME (ZZGL. 2 EUR ÜBERMITTLUNGSE…" da. Eine Zahlart, deren Konditionen der Kunde nicht lesen kann, ist keine Information — der title-Tooltip existiert mobil gar nicht. ⚠️ Register 11 (zwei Hoehen in einer Gruppe) bleibt eingehalten, aber ueber einen anderen Mechanismus: die Hoehe kommt nicht mehr aus einem festen `height` am Chip, sondern aus `align-items:stretch` an der ZEILE. Damit haben nebeneinanderstehende Chips zwingend dieselbe Hoehe (eine Quelle: die Zeile), und ein zweizeiliger Name zieht seine Nachbarn mit, statt allein auszubrechen. `min-height` haelt das Einzeilen-Mass von 32px als Untergrenze. Eine fest zweizeilige Hoehe FUER ALLE waere die Alternative gewesen — sie haette jedem kurzen Chip 22px Luft verpasst, ohne dass es etwas zeigt. */ .ct-payrow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px} .ct-paychip{ display:flex;align-items:center; min-height:32px;line-height:1.25; border:1px solid var(--ct-dline); border-radius:var(--ct-radius-sm); /* ct: 20260820-11 — Rolle Chip; EINE Quelle fuer Fuss UND PDP-Zahlarten */ padding:5px 12px; white-space:normal; max-width:100%; font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.82); } /* Rechtslinks-Zeile (Mockup .fbot .lnks) — rechts, muted, immer sichtbar */ #copyright .row{align-items:center} .ct-legal-col{margin-left:auto} .ct-legal{display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:flex-end} footer#footer .ct-legal a{font-size:11.5px;color:rgba(255,255,255,.42)} footer#footer .ct-legal a:hover{color:var(--ct-volt)} footer#footer .ct-copy-left{font-size:11.5px;color:rgba(255,255,255,.42)} /* ct: 20260820-10 (Ben, 20.08.2026) — Widerruf ist wieder eine ECHTE SCHALTFLAECHE, kein entstylter Textlink: der Widerrufsbutton muss als Button erkennbar sein (gesetzliche Vorgabe, vgl. Kuendigungsbutton-Muster § 312k BGB — "gut sichtbar, als Schaltflaeche"). Die vorige Fassung hier hatte NOVAs {button}-Snippet bewusst auf Linkoptik reduziert (spanl-Muster) — genau das hat Ben beanstandet. Hoehe kommt aus dem Bedienelement-Token: NOVAs {button variant='primary'} traegt .btn-primary, und der globale CT-Buttonstil (ct-base.css) setzt dort min-height:var(--ct-control-h)=44 — ein eigenes kleineres height verloere dagegen (gemessen 20.08.: 44px). Also KEINE zweite Hoehe erfinden (Fehlerregister 11), nur Ghost-Optik: Outline statt Volt-Flaeche, Hover = Volt wie alle Footer-Aktionen. */ .ct-copy-withdrawal{display:inline-block} /* ct: !important-AUSNAHMEFAELLE dieser Datei (dokumentiert, Fehlerregister 16): Bootstrap-Utilities tragen selbst !important — innerhalb der important-Ebene entscheidet die Spezifitaet. `.mt-3` (margin-top:1rem!important): NOVA rendert den Widerrufs-Knopf in genau diesem Wrapper; ohne die Neutralisierung schiebt er sich in der Fusszeile eine Zeile nach unten. */ .ct-copy-withdrawal .mt-3{margin-top:0 !important} footer#footer .ct-copy-withdrawal .btn{ display:inline-flex;align-items:center;width:auto; background:transparent; border:1px solid rgba(255,255,255,.35); padding:0 16px; color:rgba(255,255,255,.82); font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; text-decoration:none; border-radius:var(--ct-radius-sm); /* ct: 20260820-11 — Rolle Bedienelement */ /* Bootstraps Innen-Highlight zeichnete einen hellen 1px-Strich ueber dem Text — gemessen box-shadow: rgba(255,255,255,.15) 0 1px 0 0 inset. */ box-shadow:none; } footer#footer .ct-copy-withdrawal .btn:hover, footer#footer .ct-copy-withdrawal .btn:focus{ background:var(--ct-volt);border-color:var(--ct-volt);color:var(--ct-ink); } /* ct: 20260820-10 (Ben, 20.08.2026) — "Powered by JTL-Shop" wirkte wie eine eigene Zeile: NOVA rendert den Link mit .text-white (weiss, !important) und .text-decoration-underline, waehrend die Rechtslinks daneben 11.5px in 42%-Weiss ohne Unterstrich sind — anderes Gewicht liest sich als anderer Kontext. Gleiche Schrift-Familie wie .ct-legal, dann sitzt es in der Zeile. !important nur gegen Bootstraps .text-white (siehe Ausnahmefall-Kommentar). */ footer#footer #system-credits{font-size:11.5px;color:rgba(255,255,255,.42)} footer#footer #system-credits a{ color:rgba(255,255,255,.42) !important; font-size:11.5px;text-decoration:none; } footer#footer #system-credits a:hover{color:var(--ct-volt) !important} .ct-copy-vat{color:var(--ct-dmuted);font-size:12.5px} /* Copyright-Band */ footer#footer .footer-bottom, footer#footer .copyright{border-top:1px solid var(--ct-dline)} /* Scroll-to-Top: sichtbar auf Ink (LEHREN K: genestete Controls erben die Footer-Farbe — sonst weisses Icon auf weissem Knopf). ⚠️ Der Selektor `.scroll-top` griff INS LEERE: NOVA rendert den Knopf mit `smoothscroll-top go-to-top scroll-to-TOP` — gemessen 19.08. war er weiss mit grauem Pfeil, nicht Volt. Jetzt am tatsaechlichen Anker. */ footer#footer .smoothscroll-top, .smoothscroll-top{ /* ct: Volt bleibt hier bewusst (Akzentrolle, kein Kauf-CTA). */ background:var(--ct-volt);color:var(--ct-ink); border:0;border-radius:var(--ct-radius-sm); /* ct: 20260820-11 — Rolle Bedienelement */ } .smoothscroll-top:hover, .smoothscroll-top:focus{background:var(--ct-volt-d);color:var(--ct-ink)} /* ct: Der fixe Knopf lag ueber Kacheln der Content-Flucht (Ben mass ihn auf dem Preis der 7. Slider-Karte, [1373,836]) — NOVA setzt ihn 47x44 auf right:20px/bottom:-20px. ct: 20260820-12 (Fehlerregister 7, im Sammel-Fixpaket nachgemessen) — 8px -> 0. Die Begruendung von -11 ("ueberlappt nur die letzten 8px der Kachelkante, nie Preis oder CTA") galt nur fuer die GALERIE-Ansicht, wo der CTA im Kartenpolster sitzt. Seit die LISTEN-Ansicht ihren Kaufknopf dauerhaft zeigt (ct-kategorie.css -34), laeuft dieser bis an die Content-Flucht: gemessen 1440 Knopf 1392..1432 gegen CTA-Kante 1399 = 7px Ueberdeckung des Warenkorb-Knopfes. Mit `right:0` sitzt der Knopf bei 1400..1440, also exakt IM Seitenrand neben der Flucht (40px), und kann auf keiner Breite mehr etwas ueberdecken. Genau der Fehlerregister-17-Fall: der Wert war fuer EINE Ansicht richtig gerechnet. */ .smoothscroll-top{ /* ct: 20260820-15 (Abnahme N-13) — right:0 klebte den Knopf an die Viewportkante (optisch angeschnitten). 8px bleiben INNERHALB des 40px-Seitenrands — die Begruendung von -12 (nie ueber der Content-Flucht) gilt damit weiter. */ right:8px;bottom:16px; width:40px;height:40px; line-height:40px; } @media (max-width: 767.98px){ /* ct: 20260820-12 (Befund 7, Ben 20.08.2026) — MOBIL WIRD DER KNOPF AUSGEBLENDET. Er lag auf dem Warenkorb-CTA der Produktkachel (Bens Screenshot ga-start-390-s3.png zeigt ihn direkt auf "IN DEN WARENKORB"). ⚠️ Ein groesserer Offset loest das NICHT, und zwar nachrechenbar: der Knopf ist 40px breit und sitzt bei 390px Viewport auf x=342..382, die Kachel-CTAs laufen ueber die volle Kachelbreite bis x=374. Jede horizontale Verschiebung bleibt also IM CTA, und jede vertikale verschiebt die Kollision nur auf die naechste Kachel — bei einer Liste aus Kacheln gibt es keine Hoehe, die dauerhaft frei ist. Der Knopf ist mobil ausserdem am wenigsten wert (kurze Wischwege, System-Gesten). Der frueher hier vermerkte Fix (Fussbereich bekommt Luft in Knopfhoehe) hat nur die Fusszeilen-Kollision geloest; die auf den Kacheln blieb — Fehlerregister 17, derselbe Befund an der naechsten Stelle. Das Polster im Copyright-Band faellt deshalb mit weg, es hielt nur noch Platz fuer ein Element frei, das es hier nicht mehr gibt. */ .smoothscroll-top{display:none} .ct-legal{justify-content:center;gap:16px} .ct-legal-col{margin-left:0} footer#footer .ct-copy-left{text-align:center} /* ct: 20260820-14 (Ben-Review) — "Powered by JTL-Shop" klebte direkt am Widerrufs-Button der Zeile darueber (gemessen 390: 0px Abstand). */ footer#footer #system-credits{margin-top:16px;text-align:center} } /* Kategorietext am Seitenende */ /* ct: Auf dem Raster wie jedes andere Band (vorher 56/40 freihaendig). */ .ct-catseo{border-top:1px solid var(--ct-line);padding:var(--ct-band-y) 0;background:#fff} .ct-catseo .desc{color:var(--ct-muted);font-size:14.5px;line-height:1.7;max-width:900px} .ct-catseo h2,.ct-catseo h3{font-size:22px;color:var(--ct-text)}