/* ============================================================
   Techtanium GLOBALES THEME
   (Stufe A → D0 2026-06-12 → 0.5.0 → 0.6.0 "Frontend Foundation
   Final", 2026-07-05)
   0.5.0: Header-Logo-Regeln, Footer-Lesbarkeit gegen blackline,
   WCAG-Text-Orange auf hell, Mega-Menue-Feinschliff,
   .price_on_application-Hinweisstil.
   0.6.0: Footer-Neuaufbau als mittiger Trust-/Service-/Rechts-
   bereich (Zonen: Newsletter/Boxen+Trust/Widerruf/Social/Fussnote/
   Copyright, tt-footer-trust + tt-footer-badges), Header-Feinschliff
   (Logo 52px Basis, Topbar), Produktdetail-Politur (§7b: Variation,
   Staffeltabelle, Lieferstatus, Menge, Thumbnails).
   Dateiarchitektur:
     1. techtanium-tokens.css  - Tokens + Fonts (zuerst)
     2. techtanium.css         - DIESE DATEI: globale NOVA-Overrides
     3. techtanium-opc.css     - OPC-/Landingpage-Komponenten (tt-*)
     4. techtanium-story.css   - Scrollstory-System (tt-asm)

   Einbindung (verifiziert an NOVA 1.7.1 / JTL-Shop 5.7.1):
   Per template.xml an die Theme-CSS-Gruppen (clear/midnight/
   blackline.css) ANGEHAENGT — laedt NACH dem aktiven NOVA-Theme
   inkl. dessen custom.css. Rein additiv, keine NOVA-Datei wird
   veraendert, keine .tpl-Overrides.
   Basis-Theme-Empfehlung: blackline. NOVA-Framework: Bootstrap 4.

   Alle Selektoren stammen aus gelesenen NOVA-Quelldateien
   (Protokoll: 60_Dokumentation/Techtanium_Stufe_A_CSS_Pruefbericht.md).

   SICHERHEITSREGELN DIESER DATEI:
   - Nur Farben, Typografie, Raender, Schatten, dezente Hover.
   - KEIN display/visibility/position auf NOVA-Elementen.
   - Checkout/Warenkorb/Widerruf: nur globale Farbwirkung, keine
     eigenen Selektoren auf Checkout-Strukturen.
   - NAMESPACE: Eigene Klassen heissen .tt-<name>. ACHTUNG: NOVAs
     Suchvorschlaege (typeahead.js) nutzen ebenfalls tt-*-Klassen
     (.tt-menu, .tt-input, .tt-hint, .tt-suggestion, .tt-cursor,
     .tt-open, .tt-empty, .tt-selectable, .tt-dataset,
     .tt-highlight, .tt-dropdown-menu) — diese Namen NIEMALS fuer
     eigene Klassen verwenden.
   ============================================================ */

/* ============================================================
   1. BASIS: Body, Links, Auswahl, Fokus
   ============================================================ */

body.is-nova {
    background-color: var(--tt-white);
    color: var(--tt-text);
    font-family: var(--tt-font-body);
    line-height: var(--tt-lh-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tt-font-head);
    line-height: var(--tt-lh-tight);
}

h1 { font-size: var(--tt-fs-h1); }
h2 { font-size: var(--tt-fs-h2); }
h3 { font-size: var(--tt-fs-h3); }

/* Textlinks auf hellen Flaechen: WCAG-AA-sicheres Text-Orange
   (0.5.0). Dunkle Bereiche (Header/Footer/tt-Sektionen) setzen
   eigene helle Linkfarben. */
a { color: var(--tt-orange-text); }
a:hover, a:focus { color: var(--tt-orange-text-hover); }

::selection {
    background: var(--tt-orange);
    color: var(--tt-black);
}

:focus-visible {
    outline: 2px solid var(--tt-orange);
    outline-offset: 2px;
}

/* Skip-Links (Tastatur) deutlich sichtbar machen */
.btn-skip-to:focus, .btn-skip-to:focus-visible {
    background: var(--tt-orange);
    color: var(--tt-black);
}

/* Formularfelder: Orange-Fokus statt Theme-Default */
.form-control:focus {
    border-color: var(--tt-orange);
    box-shadow: var(--tt-focus-ring);
}

/* ============================================================
   2. TOPBAR  (#header-top-bar, layout/header_top_bar.tpl)
   ============================================================ */

#header-top-bar {
    background-color: var(--tt-anthracite);   /* 0.6.11: gleicher Ton wie Header/Footer (war --tt-black) */
    color: var(--tt-steel);
    border-bottom: 1px solid var(--tt-line);
}

#header-top-bar a,
#header-top-bar .nav-link,
#header-top-bar .dropdown-toggle {
    color: var(--tt-steel);
}

#header-top-bar a:hover,
#header-top-bar .nav-link:hover,
#header-top-bar .nav-link:focus {
    color: var(--tt-orange);
}

#header-top-bar .topbar-note {
    color: var(--tt-steel-light);
}

/* ============================================================
   3. HEADER / NAVIGATION
   (header#jtl-nav-wrapper, #shop-nav, #mainNavigation —
    layout/header.tpl, header_nav_icons.tpl)
   ============================================================ */

header#jtl-nav-wrapper {
    background-color: var(--tt-anthracite);
    border-bottom: 1px solid var(--tt-orange);   /* Markenlinie */
}

header#jtl-nav-wrapper .navbar {
    background-color: transparent;
}

/* --- Header-Logo (0.5.0) ---------------------------------------
   NOVA rendert das Admin-Logo als <img id="shop-logo"> mit den
   Attributen width=180 height=50 (layout/header_logo.tpl). Die
   PRAESENZ (Hoehe ab 992px) steuert die Template-Einstellung
   "menu_logoheight" (Admin → Templateeinstellungen → Header) —
   deren Inline-Regel `header .navbar-brand img` (0-1-2) gewinnt
   BEWUSST gegen diese Klassenregel (0-1-1). Hier nur:
   Verzerrschutz (width:auto statt 180px-Attribut), sinnvolle
   Basisgroesse, responsive Deckelung. Kein fester Dateiname. */
.navbar-brand img {
    height: 52px;              /* Basis; ab 992px via Admin-Setting uebersteuerbar */
    width: auto;               /* Attribut width=180 nicht erzwingen → keine Verzerrung */
    max-width: min(48vw, 420px);   /* 0.6.1: finales Desktop-Logo (~6.3:1) braucht bis ~405px bei 64px Hoehe */
    object-fit: contain;
}

.navbar-brand { margin-right: clamp(1rem, 2.5vw, 2.25rem); }

/* 0.6.1 FINALE LOGO-ENTSCHEIDUNG (2026-07-05):
   Desktop = techtanium_header_logo_desktop_FINAL.png (MIT "EST 2022")
     → wird von Dima im Admin hochgeladen (Darstellung → Standard-
       elemente → Logo); empfohlene Logo-Hoehe (menu_logoheight): 64.
   Mobile  = techtanium_header_logo_mobile_FINAL.png (OHNE EST)
     → liegt im Template (themes/techtanium/images/) und ersetzt
       das Admin-Logo unterhalb 992px per content-Swap. Browser
       ohne content-url-Support zeigen weiter das Desktop-Logo
       (sauberer Fallback). Absoluter Pfad = Shop laeuft im
       Domain-Root; bei Umzug in Unterordner Pfad anpassen. */
@media (max-width: 991.98px) {
    /* 0.6.2: Logo muss neben Burger + 3 Icons passen → Breite
       viewportabhaengig deckeln (100vw minus ~195px fuer Burger/
       Icons/Abstaende), KEINE starre Hoehe (sonst kein Schrumpfen).
       Kollision mit "Mein Konto" (0.6.1) damit behoben. */
    .navbar-brand img {
        height: auto;
        width: auto;
        max-height: 40px;
        max-width: min(50vw, calc(100vw - 195px));
        object-fit: contain;
    }

    #shop-logo {
        content: url('/templates/TechtaniumPremium/themes/techtanium/images/techtanium_header_logo_mobile_FINAL.png');
    }
}

/* Topbar ruhiger (0.6.0): kleinere, gesperrte Technik-Zeile */
#header-top-bar {
    font-size: 12.5px;
    letter-spacing: 0.02em;
}

/* Hauptnavigation: Stahl-Text, Orange bei Hover/Aktiv.
   Unterstreichung als inset-Schatten -> kein Layout-Shift. */
header#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    color: var(--tt-steel-light);
    font-family: var(--tt-font-head);
    font-weight: 600;
}

header#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
header#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus,
header#jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
    color: var(--tt-white);
    box-shadow: inset 0 -2px 0 var(--tt-orange);
}

/* Icon-Navigation rechts (Konto, Warenkorb, Wunschliste) */
#shop-nav .nav-link {
    color: var(--tt-steel-light);
}

#shop-nav .nav-link:hover,
#shop-nav .nav-link:focus {
    color: var(--tt-orange);
}

/* Mega-Menue/Dropdowns im Header: dunkle Flaeche, feine Linien.
   (Uebersteuert blackline: dort weiss.) */
header#jtl-nav-wrapper .dropdown-menu {
    background-color: var(--tt-anthracite-2);
    color: var(--tt-steel-light);
    border: 1px solid var(--tt-line);
    border-top: 2px solid var(--tt-orange);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-pop);
}

header#jtl-nav-wrapper .dropdown-menu a,
header#jtl-nav-wrapper .dropdown-menu .dropdown-item {
    color: var(--tt-steel-light);
}

header#jtl-nav-wrapper .dropdown-menu a:hover,
header#jtl-nav-wrapper .dropdown-menu a:focus,
header#jtl-nav-wrapper .dropdown-menu .dropdown-item:hover,
header#jtl-nav-wrapper .dropdown-menu .dropdown-item:focus {
    color: var(--tt-white);
    background-color: rgb(255 106 0 / 12%);
    box-shadow: inset 2px 0 0 var(--tt-orange);
}

/* Mega-Menue-Feinschliff (0.5.0): nur Optik — ruhigere Abstaende,
   Spaltenkoepfe als technischer Kicker. KEINE Inhalte/Links. */
header#jtl-nav-wrapper .dropdown-menu .dropdown-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: color var(--tt-dur-fast) var(--tt-ease),
                background-color var(--tt-dur-fast) var(--tt-ease);
}

header#jtl-nav-wrapper .dropdown-menu .dropdown-header,
header#jtl-nav-wrapper .dropdown-menu .nav-mega-heading {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tt-steel);
}

header#jtl-nav-wrapper .dropdown-menu .dropdown-divider {
    border-top-color: var(--tt-line);
}

/* ============================================================
   4. SUCHE  (snippets/search_form.tpl: .search-wrapper,
      .main-search, input .ac_input; Submit = .btn-secondary)
   ============================================================ */

.search-wrapper .main-search .form-control,
.search-wrapper .main-search .ac_input {
    background-color: var(--tt-paper);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    color: var(--tt-text);
}

.search-wrapper .main-search .form-control:focus,
.search-wrapper .main-search .ac_input:focus {
    border-color: var(--tt-orange);
    box-shadow: var(--tt-focus-ring);
}

/* Such-Button: Orange mit dunklem Icon (Kontrastregel) */
.search-wrapper .btn-secondary {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
    color: var(--tt-black);
}

.search-wrapper .btn-secondary:hover,
.search-wrapper .btn-secondary:focus,
.search-wrapper .btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--tt-orange-hover);
    border-color: var(--tt-orange-hover);
    color: var(--tt-black);
}

/* blackline invertiert das Such-Icon mobil (weiss) — auf Orange
   bleibt das dunkle Icon besser lesbar: */
@media (max-width: 991.98px) {
    .search-wrapper .btn-secondary .fas.fa-search {
        filter: none;
    }
}

/* ============================================================
   5. BUTTONS (global, Bootstrap-4-Varianten)
   Wirkt shopweit inkl. Checkout — bewusst NUR Farben/Form,
   keine Groessen-/Layoutaenderungen.
   ============================================================ */

.btn {
    border-radius: var(--tt-radius);
}

.btn-primary {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
    color: var(--tt-black);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--tt-orange-hover);
    border-color: var(--tt-orange-hover);
    color: var(--tt-black);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--tt-orange-deep);
    border-color: var(--tt-orange-deep);
    color: var(--tt-black);
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--tt-steel);
    border-color: var(--tt-steel);
    color: var(--tt-black);
}

.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: var(--tt-focus-ring);
}

.btn-outline-primary {
    color: var(--tt-text);
    border-color: var(--tt-steel);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: transparent;
    color: var(--tt-orange-text);
    border-color: var(--tt-orange-text);
}

.btn-outline-secondary {
    color: var(--tt-text);
    border-color: var(--tt-steel);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: transparent;
    color: var(--tt-orange-text);
    border-color: var(--tt-orange-text);
}

/* ============================================================
   6. BREADCRUMB  (layout/breadcrumb.tpl: .breadcrumb-wrapper,
      #breadcrumb; Bootstrap .breadcrumb-item)
   ============================================================ */

.breadcrumb-wrapper {
    font-size: 0.875rem;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb-item a {
    color: var(--tt-text-muted);
}

.breadcrumb-item a:hover { color: var(--tt-orange-text); }

.breadcrumb-item.active { color: var(--tt-text); }

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--tt-orange);
}

/* ============================================================
   7. PRODUKTKARTEN  (productlist/item_box.tpl: .productbox,
      .productbox-inner, .productbox-title, .price_wrapper …)
   ============================================================ */

.productbox {
    background-color: var(--tt-paper);
    border: 1px solid var(--tt-line-light);
    border-radius: var(--tt-radius);
    transition: border-color var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease),
                transform var(--tt-dur) var(--tt-ease);
}

.productbox.productbox-hover:hover,
.productbox.productbox-hover:focus-within {
    border-color: var(--tt-orange);
    box-shadow: var(--tt-shadow-card);
    transform: translateY(-2px);
}

.productbox .productbox-title,
.productbox .productbox-title a {
    color: var(--tt-text);
    font-family: var(--tt-font-head);
    font-weight: 600;
}

.productbox .productbox-title a:hover {
    color: var(--tt-orange-text);
    text-decoration: underline;
}

/* Preise: Mono-Font, tabellarische Ziffern (Technik-/Datenblatt-Optik) */
.price_wrapper,
.productbox-price,
.price {
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--tt-text);
}

/* --- „Preis auf Anfrage" als Auswahl-Hinweis (0.5.0) ------------
   NOVA rendert bei Preis = 0 den Text der Sprachvariable
   priceOnApplication in <span class="price_label
   price_on_application"> (productdetails/price.tpl). Bei uns
   betrifft das ausschliesslich VATERARTIKEL ohne gewaehlte
   Variation. Hier NUR Styling als ruhiger Hinweis statt
   Preis-Optik. Der TEXT wird nicht per CSS ersetzt (A11y/DE-EN):
   Dima aendert ihn je Sprache im Admin unter Sprachverwaltung,
   Variable `priceOnApplication` → produktfamilienuebergreifend:
   DE „Bitte wählen Sie zuerst die gewünschte Ausführung."
   EN "Please select the desired option first."
   Kein .tpl-Override, globale 0-Preis-Einstellung unveraendert. */
.price_on_application {
    display: inline-block;
    font-family: var(--tt-font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tt-text);
    background: var(--tt-white);
    border: 1px solid var(--tt-line-light);
    border-left: 3px solid var(--tt-orange);
    border-radius: var(--tt-radius);
    padding: 0.6rem 1rem;
    margin: 0.25rem 0 0.5rem;
}

/* ============================================================
   7b. PRODUKTDETAILSEITE (0.6.0) — nur Optik-Politur.
   Selektoren verifiziert an NOVA productdetails/*.tpl:
   variation.tpl (.variations, select.variation, .swatches-text,
   .label-variation), price.tpl (.bulk-prices Tabelle), stock.tpl
   (.delivery-status), basket.tpl (#add-to-cart, .choose_quantity),
   image.tpl (.product-thumbnails). Keine Logik-/Datenaenderung.
   ============================================================ */

/* Variationslabels: technische Zeile statt Fliesstext */
#product-offer .label-variation {
    font-family: var(--tt-font-head);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tt-text);
}

/* Variations-Dropdown: Datenblatt-Optik + Orange-Fokus */
#product-offer select.variation {
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
    font-size: 14px;
    color: var(--tt-text);
    background-color: var(--tt-paper);
}

#product-offer select.variation:focus {
    border-color: var(--tt-orange);
    box-shadow: var(--tt-focus-ring);
}

/* Text-Swatches (falls Variation als Kacheln rendert) */
#product-offer .swatches-text {
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
}

#product-offer .swatches-text.active {
    border-color: var(--tt-orange);
    box-shadow: inset 0 0 0 1px var(--tt-orange);
}

/* Staffelpreise: ruhige Datenblatt-Tabelle */
.bulk-prices {
    border: 1px solid var(--tt-line-light);
    border-radius: var(--tt-radius);
    overflow: hidden;
}

.bulk-prices .table { margin-bottom: 0; }

.bulk-prices th {
    font-family: var(--tt-font-head);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-text-muted);
    border-top: 0;
    border-bottom: 1px solid var(--tt-line-light);
}

.bulk-prices td {
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--tt-line-light);
}

.bulk-prices .table-hover tbody tr:hover {
    background-color: rgb(255 106 0 / 5%);
}

/* Verfuegbarkeit/Lieferzeit: ruhigere Badge-Typografie */
.delivery-status {
    font-family: var(--tt-font-head);
    letter-spacing: 0.03em;
    border-radius: var(--tt-radius);
}

.stock-information { font-size: 14px; }

/* Menge + Warenkorbzeile ruhiger */
#add-to-cart .choose_quantity .form-control {
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
}

#add-to-cart .form-counter .btn {
    color: var(--tt-text);
    border-color: var(--tt-line);
}

#add-to-cart .form-counter .btn:hover {
    color: var(--tt-orange-text);
    border-color: var(--tt-orange-text);
}

/* Bildbereich: feine Rahmen, Orange nur als Interaktion */
#product-offer .product-thumbnails img {
    border: 1px solid var(--tt-line-light);
    border-radius: var(--tt-radius);
    transition: border-color var(--tt-dur-fast) var(--tt-ease);
}

#product-offer .product-thumbnails img:hover {
    border-color: var(--tt-orange);
}

/* ============================================================
   8. KATEGORIE-KACHELN  (productlist/header.tpl:
      .content-cats-small, .sub-categories)
      Dunkle Techtanium-Kacheln nach Designsystem §6
   ============================================================ */

.content-cats-small .sub-categories {
    background-color: var(--tt-anthracite-2);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow var(--tt-dur) var(--tt-ease),
                border-color var(--tt-dur) var(--tt-ease);
}

.content-cats-small .sub-categories:hover,
.content-cats-small .sub-categories:focus-within {
    border-color: var(--tt-line);
    box-shadow: inset 0 -2px 0 var(--tt-orange);
}

.content-cats-small .sub-categories a {
    color: var(--tt-steel-light);
    font-family: var(--tt-font-head);
    font-weight: 600;
}

.content-cats-small .sub-categories a:hover {
    color: var(--tt-white);
    text-decoration: none;
}

/* Kachelbilder: heller Bildteller, damit Produktfreisteller wirken */
.content-cats-small .sub-categories .subcategories-image {
    background-color: var(--tt-paper);
    border-radius: var(--tt-radius);
}

/* ============================================================
   9. SEITENLEISTE / FILTER / PAGINATION (Listenseiten)
   ============================================================ */

.productlist-filter-headline {
    border-bottom-color: var(--tt-line-light);
    font-family: var(--tt-font-head);
}

.pagination-wrapper:not(.pagination-no-wrapper) {
    border-top-color: var(--tt-line-light);
    border-bottom-color: var(--tt-line-light);
}

.page-link { color: var(--tt-text-muted); }
.page-link:hover { color: var(--tt-orange-text); }

.page-item.active .page-link { color: var(--tt-text); }

.page-item.active .page-link::after {
    border-bottom-color: var(--tt-orange);
}

/* Badges (z. B. Trefferzahlen in Filtern) */
.badge-primary {
    background-color: var(--tt-orange);
    color: var(--tt-black);
}

/* ============================================================
   10. FOOTER  (#footer, #copyright, .footnote-vat —
       layout/footer.tpl; Widerrufslink bleibt unangetastet
       sichtbar, nur Farbgebung)
   ============================================================ */

/* 0.6.0 "Frontend Foundation Final": Footer = mittiger Trust-/
   Service-/Rechtsbereich. Aufbau laut NOVA layout/footer.tpl
   (verifiziert): Newsletter → #footer-boxes (Boxenverwaltung
   Position "Fußbereich": Trust-Box [Eigene Box, tt-footer-trust]
   + Linkgruppen) → .withdrawal-link-wrapper (Widerrufsformular-
   Button) → Social → .footnote-vat → #copyright.
   KEIN .tpl-Override. Die 0.5.0-Lesbarkeitsregeln gegen blackline
   (#212121-Links, gelber Hover, weisse Collapse-/Tabellenflaechen,
   weisser Newsletter-Button) sind hier integriert. Inhalte/
   Linkgruppen/Rechtstexte bleiben unberuehrt, kein BrandFree-CSS. */

/* --- Grundflaeche + mittiger Container --- */
#footer {
    background-color: var(--tt-anthracite);   /* 0.6.11: flach wie der Header - Blueprint-Karo entfernt */
    border-top: 2px solid var(--tt-orange);
    color: var(--tt-steel-light);
    font-size: 15px;
}

#footer > .container {
    max-width: min(var(--tt-maxw), 100%);
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(28px, 4vw, 44px);
}

#footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
    color: var(--tt-white);
}

/* --- Spalten-/Bereichskoepfe (blackline: #212121) --- */
#footer .card .card-title,
#footer .productlist-filter-headline,
#footer .newsletter-footer-heading {
    color: var(--tt-white);
    font-family: var(--tt-font-head);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 14px;
}

#footer .productlist-filter-headline {
    position: relative;
    border-bottom: 0;
    padding-top: 14px;
    margin-bottom: 14px;
}

#footer .productlist-filter-headline::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 28px; height: 2px;
    background: var(--tt-orange);
}

/* --- Links (blackline: #212121 / Hover #EFC03D) --- */
#footer a,
#footer a:not(.btn),
#footer .nav-link {
    color: var(--tt-steel-light);
}

#footer a:hover, #footer a:focus,
#footer a:not(.btn):hover, #footer a:not(.btn):focus {
    color: var(--tt-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#footer .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label {
    color: var(--tt-steel);
}

/* Mobile Aufklapp-Gruppen: dunkles Panel statt blackline-Weiss */
#footer .box-categories .dropdown .collapse,
#footer .box-linkgroup .dropdown .collapse {
    background: var(--tt-panel);
}

#footer .link-group-item.dropdown:has(.collapse:not(.show)) {
    border-bottom: 1px solid var(--tt-hairline-2);
}

#footer .table-striped tr {
    background-color: transparent;
    color: var(--tt-steel-light);
}

/* --- Zone Newsletter --- */
#footer .newsletter-footer-heading { font-size: 19px; letter-spacing: 0.06em; }

#footer .newsletter-footer .info { color: var(--tt-steel); font-size: 12.5px; }

#footer .newsletter-email-wrapper .form-control {
    background: var(--tt-panel);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    color: var(--tt-white);
}

#footer .newsletter-email-wrapper .form-control::placeholder { color: var(--tt-steel); }

#footer .newsletter-email-wrapper .form-control:focus {
    border-color: var(--tt-orange);
    box-shadow: var(--tt-focus-ring);
}

#footer .newsletter-email-wrapper button[type=submit] {
    background: var(--tt-orange);
    color: var(--tt-black);
    font-weight: 600;
    box-shadow: none;
    border-color: var(--tt-orange);
}

#footer .newsletter-email-wrapper button[type=submit]:hover,
#footer .newsletter-email-wrapper button[type=submit]:focus {
    background: var(--tt-orange-hover);
    color: var(--tt-black);
}

#footer .newsletter-footer + hr {
    border: 0;
    border-top: 1px solid var(--tt-hairline);
    margin: clamp(28px, 4vw, 44px) 0;
}

/* --- Zone Boxen (Linkgruppen mittig, ruhige Rhythmik) --- */
#footer-boxes { justify-content: center; row-gap: 24px; }

#footer .box-normal-hr { border: 0; margin: 0; }

#footer li { margin-bottom: 0.625rem; }
#footer .nav-link { padding: 0.3rem 0; }

/* --- Zone Trust (Eigene Box "tt-footer-trust", Boxenverwaltung
       Position Fußbereich; HTML-Vorlage in 60_Dokumentation).
       :has() hebt die Box-Spalte auf volle Breite — ohne
       :has()-Support bleibt sie normale Spalte (degradiert sauber). */
#footer-boxes > [class*="col-"]:has(.tt-footer-trust) {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: clamp(20px, 3vw, 36px);
}

#footer .box-custom .box-content-wrapper { margin: 0; }

.tt-footer-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border-top: 1px solid var(--tt-hairline-2);
    border-bottom: 1px solid var(--tt-hairline-2);   /* 0.6.13: BLEIBT - schliesst den Trust-Block ab, damit der Widerruf-Block nicht gestaucht wirkt */
}

.tt-footer-trust__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 24px;
    border-right: 1px solid var(--tt-hairline);
}

.tt-footer-trust__item:last-child { border-right: 0; }

.tt-footer-trust__item svg {
    width: 26px; height: 26px; flex: none;
    stroke: var(--tt-orange); fill: none; stroke-width: 1.4;
    margin-top: 2px;
}

.tt-footer-trust__item b {
    display: block;
    color: var(--tt-white);
    font-family: var(--tt-font-head);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.tt-footer-trust__item span {
    color: var(--tt-steel);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .tt-footer-trust { grid-template-columns: 1fr; }
    .tt-footer-trust__item { border-right: 0; border-bottom: 1px solid var(--tt-hairline); }
    .tt-footer-trust__item:last-child { border-bottom: 0; }
}

/* --- Design-Slot Zahlung/Versand (Inhalte erst F4, keine
       fremden Logos — reine Chip-Optik fuer spaetere Admin-Box) --- */
.tt-footer-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.tt-footer-badges span {
    font-family: var(--tt-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--tt-steel-light);
    border: 1px solid var(--tt-hairline-2);
    border-radius: var(--tt-radius);
    padding: 7px 13px;
}

/* --- Zone Widerrufsformular-Button (nur Optik; Ziel/Inhalt =
       Spezialseite Online-Widerrufsformular, unberuehrt) --- */
#footer .withdrawal-link-wrapper {
    justify-content: center;
    /* 0.6.13: NUR die lange Linie DIREKT ueber dem Button entfernt; die
       Abschluss-Linie des Trust-Blocks bleibt (siehe oben). Etwas Luft,
       damit der Button nicht gestaucht wirkt. */
    margin-top: clamp(22px, 3vw, 34px);
    padding-top: 0;
}

#footer .withdrawal-link-wrapper > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

#footer .withdrawal-link,
#footer .withdrawal-link.btn-primary {
    display: inline-block;
    width: auto;
    min-width: 300px;
    background: transparent;
    border: 1px solid var(--tt-orange);
    color: var(--tt-steel-light);
    font-family: var(--tt-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--tt-radius);
    padding: 0.8rem 2.2rem;
}

#footer .withdrawal-link:hover,
#footer .withdrawal-link:focus,
#footer .withdrawal-link.btn-primary:hover,
#footer .withdrawal-link.btn-primary:focus {
    background: var(--tt-orange);
    border-color: var(--tt-orange);
    color: var(--tt-black);
    text-decoration: none;
}

/* --- Social / Fussnote / Copyright --- */
#footer .footer-social-media ul { gap: 8px; justify-content: center; }

#footer .btn-icon-secondary {
    color: var(--tt-steel-light);
    border-color: var(--tt-line);
}

#footer .btn-icon-secondary:hover { color: var(--tt-orange); border-color: var(--tt-orange); }

#footer .footnote-vat {
    color: var(--tt-steel);
    text-align: center;
    font-size: 12.5px;
    /* 0.6.13: Linie unter dem Button bleibt entfernt, etwas mehr Luft. */
    margin-top: clamp(18px, 2.4vw, 28px);
    padding-top: 0;
}

/* 0.6.12: #copyright ist im Live-Shop LEER (nur ein leeres .col — am Quelltext
   verifiziert) und zeigte nur eine graue Abgrenzungslinie ohne Funktion ->
   komplett ausgeblendet. Falls je eine Copyright-/Rechtszeile gewuenscht wird,
   diese eine Regel entfernen (Inhalt kaeme aus Admin/NOVA layout/footer.tpl). */
#copyright { display: none; }

#copyright a { color: var(--tt-steel-light); }

#copyright a:hover, #copyright a:focus { color: var(--tt-orange); }

/* ============================================================
   11. COOKIE-CONSENT  (#consent-manager — NUR Farben/Links,
       keine Layout-/Funktionsaenderung; Buttons erben Abschn. 5)
   ============================================================ */

#consent-manager a {
    color: var(--tt-orange-text);
}

/* ============================================================
   12. TECHTANIUM-UTILITIES (.tt-*) — fuer OPC-Sektionen der
       Startseite und spaetere Landingpages. Kollisionsverbot
       mit typeahead-Klassen beachten (Kopfkommentar).
   ============================================================ */

.tt-section-dark {
    background-color: var(--tt-anthracite);
    color: var(--tt-steel-light);
}

.tt-section-black {
    background-color: var(--tt-black);
    color: var(--tt-steel-light);
}

.tt-section-light {
    background-color: var(--tt-white);
    color: var(--tt-text);
}

.tt-section-dark h1, .tt-section-dark h2, .tt-section-dark h3,
.tt-section-black h1, .tt-section-black h2, .tt-section-black h3 {
    color: var(--tt-white);
}

/* Blueprint-Grid als reiner CSS-Hintergrund (kein Bild-Request) */
.tt-blueprint {
    background-image:
        linear-gradient(rgb(61 71 85 / 8%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(61 71 85 / 8%) 1px, transparent 1px);
    background-size: var(--tt-grid) var(--tt-grid);
}

/* Sektionstitel mit kurzer Orange-Linie davor */
.tt-section-title {
    font-family: var(--tt-font-head);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tt-section-title::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--tt-orange);
    flex: none;
}

/* Eigene Buttons (fuer OPC-Inhalte, unabhaengig von .btn-*) */
.tt-btn-primary {
    display: inline-block;
    background: var(--tt-orange);
    color: var(--tt-black);
    font-family: var(--tt-font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tt-ls-upper);
    border: 0;
    border-radius: var(--tt-radius);
    padding: 0.75rem 1.5rem;
    transition: background var(--tt-dur-fast) var(--tt-ease),
                transform var(--tt-dur-fast) var(--tt-ease);
}

.tt-btn-primary:hover {
    background: var(--tt-orange-hover);
    color: var(--tt-black);
    transform: translateY(-2px);
    text-decoration: none;
}

.tt-btn-primary:active { background: var(--tt-orange-deep); transform: none; }

.tt-btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--tt-steel-light);
    font-family: var(--tt-font-head);
    font-weight: 600;
    border: 1px solid var(--tt-steel);
    border-radius: var(--tt-radius);
    padding: 0.75rem 1.5rem;
    transition: color var(--tt-dur-fast) var(--tt-ease),
                border-color var(--tt-dur-fast) var(--tt-ease);
}

.tt-btn-secondary:hover {
    color: var(--tt-orange);
    border-color: var(--tt-orange);
    text-decoration: none;
}

.tt-section-light .tt-btn-secondary { color: var(--tt-text); border-color: var(--tt-steel); }
.tt-section-light .tt-btn-secondary:hover { color: var(--tt-orange-text); border-color: var(--tt-orange-text); }

/* Dunkle Infokarte mit Eckfase oben rechts */
.tt-card-dark {
    background: var(--tt-anthracite-2);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    clip-path: polygon(0 0, calc(100% - var(--tt-chamfer)) 0, 100% var(--tt-chamfer), 100% 100%, 0 100%);
    padding: var(--tt-space-5);
}

/* Helle Inhaltskarte */
.tt-card {
    background: var(--tt-paper);
    border: 1px solid var(--tt-line-light);
    border-radius: var(--tt-radius);
    transition: border-color var(--tt-dur) var(--tt-ease),
                transform var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-card:hover {
    border-color: var(--tt-orange);
    transform: translateY(-2px);
    box-shadow: var(--tt-shadow-card);
}

/* Themenwelt-Kachel: Orange-Linie faehrt unten ein */
.tt-tile {
    position: relative;
    overflow: hidden;
    background: var(--tt-anthracite-2);
    border: 1px solid var(--tt-line);
}

.tt-tile::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--tt-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-tile:hover::after { transform: scaleX(1); }

/* Technische Daten / Artikelnummern / Masse */
.tt-mono {
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Scroll-Reveal (js/custom.js setzt .is-visible; ohne JS alles sichtbar) */
.tt-reveal { opacity: 1; transform: none; }

.js .tt-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--tt-dur) var(--tt-ease),
                transform var(--tt-dur) var(--tt-ease);
}

.js .tt-reveal.is-visible { opacity: 1; transform: none; }