/* ============================================================
   Techtanium UI-LAYER 0.6.3 "F2 Final" (2026-07-05)
   Umsetzung der freigegebenen F2.0.6.3-Previews:
   1 Header v3 (3 Ebenen, Motion-Rail)   4 Loader
   2 Suchfeld als geschlossene Komponente 5 Custom Cursor
   3 Mobile Mini-Motion                   6 Mobile-PDS-Politur
   Wird als LETZTE Datei der Theme-Gruppen geladen (template.xml)
   und darf daher fruehere Regeln uebersteuern.
   0.6.6: Header-Zielstruktur = NOVAs NATIVES Layout "Menü in
   eigener Zeile" (Admin: menu_single_row = JA). Diese Datei stylt
   dessen echte Klassen (hide-navbar, nav-logo-/main-search-/
   nav-icons-wrapper, mainNavigation); die Rail kommt als eigene
   Spalte aus js/custom.js. KEIN .tpl-Override noetig.
   ============================================================ */

/* ---------- 1a. ZEILE 1: Topbar-Feinschliff (nativ; erscheint,
       wenn Admin-Einstellung "Topbar anzeigen" aktiv ist).
       DE|EN = NOVA snippets/language_dropdown.tpl (nativ, sobald
       zweite Sprache aktiviert ist) — hier nur Optik. ---------- */
#header-top-bar .nav-link,
#header-top-bar .dropdown-toggle {
    font-size: 12px;
    letter-spacing: 0.04em;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

#header-top-bar .dropdown-menu {
    background: var(--tt-anthracite-2);
    border: 1px solid var(--tt-line);
    border-top: 2px solid var(--tt-orange);
    font-size: 12.5px;
}

#header-top-bar .dropdown-menu .dropdown-item { color: var(--tt-steel-light); }

#header-top-bar .dropdown-menu .dropdown-item:hover,
#header-top-bar .dropdown-menu .dropdown-item:focus {
    color: var(--tt-white);
    background: rgb(255 106 0 / 12%);
}

/* ---------- 1b. ZEILE 2/3: NATIVES NOVA-Layout „Menü in eigener
       Zeile" (Admin: menu_single_row = JA → header_menu_single_row.tpl).
       0.6.6 NATIVE: Der fruehere CSS/JS-Umbau des Einzeilen-Markups
       (.tt-v3, order-/wrap-/Search-Move-Haecks) ist ERSATZLOS
       entfernt — das native Layout liefert die Zielstruktur selbst:
       Zeile 2 = row [ col Logo | col Suche | col Icons ] (+ Rail-col
       per JS), Zeile 3 = eigene Menue-Navbar (#mainNavigation).
       Alle Selektoren stammen aus header_menu_single_row.tpl. ---------- */
@media (min-width: 992px) {
    /* Zeile 2: vertikal zentrierte, ruhige Markenzeile */
    #jtl-nav-wrapper .hide-navbar .navbar {
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Suche: rechtsbuendig an den Icons, edle feste Maximalbreite */
    #jtl-nav-wrapper .main-search-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    #jtl-nav-wrapper .main-search-wrapper .search-wrapper {
        width: 100%;
        max-width: 420px;
    }

    #jtl-nav-wrapper .nav-icons-wrapper #shop-nav .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Zeile 3: Menuezeile mit Haarlinie zur Markenzeile */
    #jtl-nav-wrapper .hide-navbar + div {
        border-top: 1px solid var(--tt-hairline);
    }

    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link {
        padding: 1rem 1.4rem;
    }

    /* aktive/hover-Unterstreichung der Menuezeile in Marken-Orange
       (NOVA zeichnet sie sonst weiss/dunkel via ::before) */
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.active > .nav-link::before,
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.hover > .nav-link::before {
        border-color: var(--tt-orange);
    }

    #jtl-nav-wrapper .nav-scrollbar-inner { padding-bottom: 0.25rem; }
}

/* ---------- 1d. FEINSCHLIFF 0.6.7 (Dimas Live-Abnahme) ----------
   1) Menue-Unterstrich: NOVA animiert width+translateX(-50%) →
      Subpixel-Fehler an der rechten Kante. Neu: scaleX-Animation
      (GPU, exakte Endkanten), 3px statt 6px, Marken-Orange. */
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link::before {
    left: 0;
    right: 0;
    width: auto !important;
    transform: scaleX(0);
    transform-origin: center;
    border-width: 0 0 3px;
    border-color: var(--tt-orange);
    transition: transform 0.35s var(--tt-ease);
}

#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.active > .nav-link::before,
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.hover > .nav-link::before {
    transform: scaleX(1);
}

/* 2)+6) Mega-Menue/Unterkategorien: statt Orange-Balken der
   Footer-Look — Orange + feine Unterstreichung, kein Hintergrund.
   Gilt fuer Desktop-Dropdowns UND das mobile Menue (gleiche
   Klassen). Uebersteuert techtanium.css §3 (ui.css laedt spaeter). */
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,
header#jtl-nav-wrapper #mainNavigation .nav .nav-link:hover,
header#jtl-nav-wrapper #mainNavigation .nav .nav-link:focus {
    color: var(--tt-orange);
    background-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* 2b) 0.6.12: blackline setzt global `a:not(.btn){text-decoration:underline}`.
   Die Mega-Menue-Kategorielinks sind <a class="categories-recursive-link">
   (NICHT .nav-link, fuer das blackline text-decoration:none setzt) -> sie
   trugen einen DAUERHAFTEN grauen Unterstrich (spaltenbreit), der neben unserem
   orangen Hover-Unterstrich rechts sichtbar blieb. Default-Unterstrich hier
   abschalten; der orange Hover-Unterstrich (Regel oben) gewinnt via :hover. */
header#jtl-nav-wrapper .dropdown-menu a,
header#jtl-nav-wrapper .dropdown-menu .categories-recursive-link,
header#jtl-nav-wrapper .dropdown-menu .dropdown-item {
    text-decoration: none;
}

/* 3) Topbar-Hover: blacklines Gelb (#EFC03D) sickert durch →
   hart auf Techtanium-Orange (bewusst mit !important, blackline
   mischt hier mehrere Pfade). */
#header-top-bar a:hover,
#header-top-bar a:focus,
#header-top-bar .nav-link:hover,
#header-top-bar .nav-link:focus {
    color: var(--tt-orange) !important;
}

/* 4) Icon-Zeile (KORREKTUR 0.6.8): blackline ersetzt die Glyphen
   durch SCHWARZE SVG-Hintergrundbilder (#shop-nav .fas.fa-user usw.:
   background url(icon_*.svg) + filter:invert(1) = weiss; ::before
   content:none) → color kann die Icons NICHT faerben (nur die
   Textsumme, die faerbt bereits techtanium.css). Loesung: die
   Filterkette selbst tauschen. Die Hover-Kette erzeugt aus Schwarz
   exakt #FF6A00 (Canvas-vermessen, Abweichung 0); die Basis nutzt
   dieselbe Funktionsliste (= weiss, identisch zu invert(1)), damit
   der Uebergang weich interpoliert statt hart springt. */
#shop-nav .nav-link .fas {
    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
    transition: filter 0.18s var(--tt-ease);
}

#shop-nav .nav-link:hover .fas,
#shop-nav .nav-link:focus .fas,
#shop-nav .nav-item:hover > .nav-link .fas {
    filter: invert(40%) sepia(95%) saturate(2500%) hue-rotate(5deg) brightness(110%) contrast(100%);
}

/* 5) Custom Cursor unterhalb Desktop-Breite hart aus (echte
   Handys sind schon per pointer:coarse ausgeschlossen; dies
   deckt zusaetzlich Browser-Simulation/Hybrid-Geraete ab). */
@media (max-width: 991.98px) {
    #tt-cur-dot, #tt-cur-ring { display: none !important; }
    body.tt-cursor-on, body.tt-cursor-on a, body.tt-cursor-on button { cursor: auto; }
}

/* ---------- 1e. WEICHES EIN-/AUSBLENDEN DES HEADERS BEIM SCROLLEN (0.6.13)
   NOVAs Kern-Skript blendet die obere Headerzeile beim Runterscrollen HART
   per `display:none` aus (.hide-navbar) bzw. entfernt `.d-lg-flex` an der
   Topbar -> abruptes "Stocken". Wir ersetzen NUR die Optik durch eine
   gleitende max-height/opacity/transform-Transition. NOVAs Logik/Timing
   bleibt unberuehrt (KEIN Core-Hack). Menuezeile (#mainNavigation) + das
   Haeuschen (.nav-home-button) bleiben sichtbar wie gehabt. Nur Desktop
   (>=992px); mobil bleibt alles nativ. Ohne die NOVA-Klassen passiert nichts.
   overflow:hidden bewusst NUR im geschlossenen Zustand -> Such-/Sprach-
   Dropdowns werden im offenen Zustand nicht abgeschnitten. */
@media (min-width: 992px) {
    #jtl-nav-wrapper .hide-navbar {
        max-height: 130px;   /* knapp ueber der Zeilenhoehe (Logo 64 + Padding) -> minimaler Leerlauf, kein Clipping offen */
        /* Seidige Premium-Kurve; Opacity fuehrt (0.34s) und maskiert den
           max-height-Anlauf -> Bewegung wirkt sofort + weich. */
        transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.34s ease,
                    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: max-height, opacity, transform;
    }
    #jtl-nav-wrapper .hide-navbar.d-none {
        display: block !important;      /* statt hartem display:none -> animierbar */
        max-height: 0 !important;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-16px);
        pointer-events: none;
    }
    #header-top-bar {
        max-height: 50px;
        transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
        will-change: max-height, opacity;
    }
    /* Topbar offen = `.d-none.d-lg-flex`, geschlossen = nur `.d-none`.
       Nur den geschlossenen Zustand sanft kollabieren. */
    #header-top-bar.d-none:not(.d-lg-flex) {
        display: flex !important;
        max-height: 0 !important;
        overflow: hidden;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    #jtl-nav-wrapper .hide-navbar, #header-top-bar { transition: none !important; }
}

/* ---------- 1c. Motion-Rail (CAD-Inszenierung; nur Desktop breit).
       0.6.6: wird als eigene Spalte NACH .nav-logo-wrapper in die
       Zeile-2-Row injiziert (custom.js); order 2 = zwischen Logo
       (order-lg-1) und Suche (order-lg-2, spaeter im DOM). ---------- */
.tt-rail {
    display: none;
    order: 2;
    flex: 1 1 0%;
    min-width: 120px;
    max-width: 640px;
    height: 64px;
    align-self: center;
    margin: 0 24px;
    border-left: 1px solid var(--tt-hairline);
    border-right: 1px solid var(--tt-hairline);
    overflow: hidden;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .tt-rail { display: flex; align-items: center; }
}

.tt-rail svg { width: 100%; height: 60px; display: block; }
.tt-rail .scene { opacity: 0; transition: opacity 1.6s ease; }
.tt-rail .scene.on { opacity: 1; }
.tt-rail .rst  { stroke: rgb(201 207 213 / 62%); stroke-width: 1.3; fill: none; }
.tt-rail .rst2 { stroke: rgb(201 207 213 / 32%); stroke-width: 1; fill: none; }
.tt-rail .ror  { stroke: var(--tt-orange); fill: none; stroke-width: 1.3; }
.tt-rail .cad  { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tt-rail .scene.on .cad {
    animation: tt-cdraw 2.2s cubic-bezier(0.45, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes tt-cdraw { to { stroke-dashoffset: 0; } }
.tt-rail .scan { transform-box: fill-box; }
.tt-rail .scene.on .scan { animation: tt-cscan 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1s infinite; opacity: 0; }
@keyframes tt-cscan {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 0.85; }
    50% { transform: translateX(176px); opacity: 0.85; }
    62%, 100% { transform: translateX(176px); opacity: 0; }
}
.tt-rail .scene.on .rpulse { animation: tt-cpulse 4.5s ease-in-out 2.2s infinite; }
@keyframes tt-cpulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }

@media (prefers-reduced-motion: reduce) {
    .tt-rail .scene { transition: none; }
    .tt-rail .cad { stroke-dasharray: none; stroke-dashoffset: 0; }
    .tt-rail .scene.on * { animation: none !important; }
    .tt-rail .scan { opacity: 0 !important; }
}

/* ---------- 2. SUCHFELD als geschlossene Komponente ----------
   Rahmen + Fokusring liegen auf der Input-Group; Input und
   Lupen-Button randlos integriert → Ring umschliesst beide.
   HEADERFIX2 0.6.5: generalisiert auf .search-wrapper — NOVA hat
   ZWEI Markups: snippets/search_form.tpl (form.main-search, mobil)
   UND layout/header_nav_search.tpl (form > .form-icon, Desktop-
   Icon-Zeile). Die alte .main-search-Eingrenzung liess die
   Desktop-Suche ungestylt (weisser Kasten, Lupe rutschte unter
   das Feld). */
.search-wrapper .input-group {
    background: var(--tt-paper);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    overflow: hidden;
    flex-wrap: nowrap !important;
    transition: border-color var(--tt-dur-fast) var(--tt-ease),
                box-shadow var(--tt-dur-fast) var(--tt-ease);
}

.search-wrapper .input-group:hover { border-color: var(--tt-steel); }

.search-wrapper .input-group:focus-within {
    border-color: var(--tt-orange);
    box-shadow: 0 0 0 3px rgb(255 106 0 / 22%);
}

.search-wrapper .form-control,
.search-wrapper .ac_input {
    border: 0;
    background: transparent;
    min-width: 0;
}

.search-wrapper .form-control:focus,
.search-wrapper .ac_input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

.search-wrapper .btn-secondary { border: 0; border-radius: 0; }

/* Innere Struktur der Suche fuellt die Wrapper-Breite (Zeile 2) */
#jtl-nav-wrapper .main-search-wrapper .search-wrapper form,
#jtl-nav-wrapper .main-search-wrapper .search-wrapper .form-icon,
#jtl-nav-wrapper .main-search-wrapper .search-wrapper .input-group {
    width: 100%;
}

/* ---------- 3. Mobile Mini-Motion (JS injiziert .tt-mini-motion
       unter der mobilen Suche; <992px sichtbar) ---------- */
.tt-mini-motion {
    display: none;
    position: relative;
    height: 3px;
    margin: 8px 2px 2px;
    background: linear-gradient(90deg, transparent,
        var(--tt-hairline-2) 12%, var(--tt-hairline-2) 88%, transparent);
    pointer-events: none;
}

.tt-mini-motion i {
    position: absolute;
    top: -1px; left: 0;
    width: 34px; height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--tt-orange), transparent);
    animation: tt-mpulse 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes tt-mpulse {
    0%, 18% { left: -8%; opacity: 0; }
    28% { opacity: 0.9; }
    50% { left: 96%; opacity: 0.9; }
    60%, 100% { left: 104%; opacity: 0; }
}

@media (max-width: 991.98px) { .tt-mini-motion { display: block; } }
@media (prefers-reduced-motion: reduce) { .tt-mini-motion { display: none !important; } }

/* ---------- 4. LOADER (JS erzeugt #tt-loader; 1x pro Session) -- */
#tt-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: var(--tt-anthracite);   /* 0.6.12: flach wie die Landingpage - KEIN Karo mehr (das Vollbild-Raster war teuer zu rendern und liess die Animation ruckeln) */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tt-lfade 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.55s forwards;
}

#tt-loader .tt-l-box { position: relative; width: min(480px, 62vw); overflow: hidden; }

#tt-loader img {
    width: 100%;
    display: block;
    will-change: transform, opacity;
    transform: translateZ(0) scale(0.985);   /* 0.6.12: eigene GPU-Ebene -> weicher */
    opacity: 0.55;
    animation: tt-lset 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}

#tt-loader .tt-l-cover {
    position: absolute;
    inset: -2px -2px -2px 0;
    background: var(--tt-anthracite);   /* 0.6.12: Wischfarbe = Loader-Ton */
    will-change: transform;
    transform: translateZ(0);
    animation: tt-lsweep 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}

#tt-loader .tt-l-cover::before {
    content: "";
    position: absolute;
    left: -1px; top: 8%; bottom: 8%;
    width: 1.5px;
    background: linear-gradient(180deg, transparent, var(--tt-orange) 30%, var(--tt-orange) 70%, transparent);
    opacity: 0.9;
}

@keyframes tt-lset  { to { transform: translateZ(0) scale(1); opacity: 1; } }
@keyframes tt-lsweep{ from { transform: translateZ(0) translateX(0); } to { transform: translateZ(0) translateX(103%); } }
@keyframes tt-lfade { to { opacity: 0; visibility: hidden; } }

/* ---------- 5. CUSTOM CURSOR (JS injiziert; Desktop only) ----- */
body.tt-cursor-on, body.tt-cursor-on a, body.tt-cursor-on button { cursor: none; }
body.tt-cursor-on input, body.tt-cursor-on textarea, body.tt-cursor-on select { cursor: text; }

#tt-cur-dot, #tt-cur-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 21000;
    will-change: transform;
}

#tt-cur-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #DDE2E7;
    box-shadow: 0 0 3px rgb(221 226 231 / 35%);
}

#tt-cur-ring {
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;   /* Zentrum bleibt exakt auf Position */
    border-radius: 50%;
    border: 1px solid rgb(216 221 226 / 55%);
    box-shadow: 0 0 0 1px rgb(14 16 19 / 35%), inset 0 0 6px rgb(221 226 231 / 6%);
    transition: width 0.28s cubic-bezier(0.3, 0.7, 0.3, 1),
                height 0.28s cubic-bezier(0.3, 0.7, 0.3, 1),
                margin 0.28s cubic-bezier(0.3, 0.7, 0.3, 1),
                border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.18s ease;
}

body.tt-cur-hover #tt-cur-ring {
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-color: rgb(255 106 0 / 80%);
    box-shadow: 0 0 0 1px rgb(14 16 19 / 35%), 0 0 10px rgb(255 106 0 / 18%), inset 0 0 6px rgb(255 106 0 / 8%);
}

body.tt-cur-off #tt-cur-dot, body.tt-cur-off #tt-cur-ring { opacity: 0; }

/* Waehrend der Brand-Ladeanimation KEINEN Cursor zeigen (nativ + custom),
   damit der Fokus auf dem aufbauenden Logo bleibt. SELBSTHEILEND: gilt nur,
   solange #tt-loader im DOM ist (JS entfernt ihn nach ~2,1s) -> danach kommt
   der Cursor automatisch zurueck. Keine JS-Aenderung, kein Risiko eines
   dauerhaft versteckten Cursors. Hoehere Spezifitaet (2 IDs) => kein !important
   noetig. Der Ring blendet dank vorhandenem opacity-Transition sanft wieder ein. */
#tt-loader { cursor: none; }
#tt-loader ~ #tt-cur-dot,
#tt-loader ~ #tt-cur-ring { opacity: 0; }

/* ---------- 6. Mobile-PDS-Politur (nur <992px) ---------------- */
@media (max-width: 991.98px) {
    /* CTA: volle Breite, Text sichtbar (NOVA rendert Text nativ) */
    #add-to-cart button[name="inWarenkorb"] {
        width: 100%;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-family: var(--tt-font-head);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-size: 14.5px;
    }

    /* Ruhige vertikale Rhythmik in der Kaufzone */
    #product-offer .price_wrapper { margin-top: 0.5rem; }
    .bulk-prices { margin: 0.75rem 0; }
    #product-offer .stock-information,
    #product-offer .delivery-status { margin: 0.5rem 0; }
    #add-to-cart .choose_quantity { margin-bottom: 0.75rem; }
    #product-offer .price_on_application { display: block; }

    /* Thumbnails etwas Luft */
    #product-offer .product-thumbnails-wrapper { margin-bottom: 0.75rem; }

    /* Abstand PDS → Footer */
    #content { padding-bottom: 1.25rem; }

    /* Mobile Navigation (Burger-Panel): dunkle Premium-Flaeche */
    header#jtl-nav-wrapper #mainNavigation {
        background: var(--tt-anthracite-2);
        border-top: 1px solid var(--tt-line);
    }

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


/* ==========================================================================
   Techtanium — Artikeltexte auf der Produktdetailseite
   Stand 2026-07-28 · Baustein, noch nicht eingebaut
   Zweck: Datentabellen und Auswahlhilfen in den Artikelbeschreibungen im
   Techtanium-Stil. Einmal einbauen, danach nutzen alle 184 Familien es ohne
   weitere Template-Arbeit.
   Einbau: Inhalt an das Ende von themes/techtanium/techtanium-ui.css anfügen.
   Nutzt ausschliesslich bestehende Tokens aus techtanium-tokens.css.
   ========================================================================== */

/* Einleitung ueber der ersten Tabelle */
.tt-lead {
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--tt-black);
}

/* --- Datentabelle (technische Daten) ------------------------------------- */
.tt-spec {
    width: 100%;
    margin: 22px 0 30px;
    border-collapse: collapse;
    border-top: 2px solid var(--tt-orange);
    background: var(--tt-paper);
}

.tt-spec th,
.tt-spec td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--tt-line);
    text-align: left;
    vertical-align: top;
}

/* Beschriftungsspalte. Farbe bewusst NICHT --tt-steel: auf weissem Grund
   erreicht Steel nur 2,97:1 und faellt damit unter WCAG AA (4,5:1).
   Auf den dunklen Flaechen des Themes ist Steel dagegen korrekt (5,7:1).
   Die Hierarchie entsteht hier ueber Groesse, Versalien und Laufweite. */
.tt-spec th {
    width: 30%;
    font-family: var(--tt-font-head);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-anthracite-2);
    white-space: nowrap;
}

/* Technische Werte in Monospace — Ziffern stehen sauber untereinander */
.tt-spec td {
    font-family: var(--tt-font-mono);
    font-size: 0.92rem;
    color: var(--tt-black);
}

/* --- Auswahlhilfe (Normenvergleich) -------------------------------------- */
.tt-choose {
    width: 100%;
    margin: 22px 0 30px;
    border-collapse: collapse;
    background: var(--tt-paper);
}

.tt-choose thead th {
    padding: 10px 16px;
    background: var(--tt-anthracite);
    color: var(--tt-white);
    font-family: var(--tt-font-head);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.tt-choose tbody th,
.tt-choose tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--tt-line);
    text-align: left;
    vertical-align: top;
}

.tt-choose tbody th {
    font-family: var(--tt-font-mono);
    font-weight: 600;
    color: var(--tt-black);
    white-space: nowrap;
}

/* Die Norm, auf deren Seite man sich gerade befindet, wird hervorgehoben */
.tt-choose tbody tr.is-self {
    background: rgb(255 106 0 / 7%);
}

.tt-choose tbody tr.is-self th {
    box-shadow: inset 3px 0 0 var(--tt-orange);
}

/* --- Rechtlich relevanter Einschraenkungshinweis ------------------------- */
.tt-note {
    margin: 18px 0 0;
    padding: 13px 18px;
    border-left: 3px solid var(--tt-steel);
    background: rgb(142 151 159 / 10%);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tt-anthracite-2);
}

/* --- Mobil -------------------------------------------------------------- */
/* Geprueft bei 390 px. Drei Tabellenspalten sind auf Smartphonebreite nicht
   lesbar, deshalb werden beide Tabellen zu gestapelten Bloecken. */
@media (max-width: 575px) {

    /* Innenabstaende duerfen die Breite nicht vergroessern — sonst laufen
       die auf display:block gesetzten Zellen um genau die Paddingsumme heraus. */
    .tt-spec, .tt-spec tbody, .tt-spec tr, .tt-spec th, .tt-spec td,
    .tt-choose, .tt-choose tbody, .tt-choose tr, .tt-choose th, .tt-choose td {
        box-sizing: border-box;
    }

    /* Technische Daten: Beschriftung ueber dem Wert.
       Auch table/tbody/tr muessen auf block stehen — sonst erzwingt die
       Tabelle weiterhin ihre Mindestbreite und laeuft rechts heraus. */
    .tt-spec,
    .tt-spec tbody,
    .tt-spec tr,
    .tt-spec th,
    .tt-spec td {
        display: block;
        width: 100%;
    }
    .tt-spec th {
        padding-bottom: 2px;
        border-bottom: 0;
        white-space: normal;      /* lange Beschriftungen duerfen umbrechen */
    }
    .tt-spec td {
        padding-top: 0;
        overflow-wrap: anywhere;  /* Monowerte brechen statt abzuschneiden */
    }

    /* Auswahlhilfe: je Norm ein Block statt drei Spalten */
    .tt-choose,
    .tt-choose tbody,
    .tt-choose tr,
    .tt-choose th,
    .tt-choose td {
        display: block;
        width: 100%;
    }
    .tt-choose thead {
        display: none;
    }
    .tt-choose tbody tr {
        padding: 14px 0 12px;
        border-bottom: 1px solid var(--tt-line);
    }
    .tt-choose tbody tr:last-child {
        border-bottom: 0;
    }
    .tt-choose tbody th {
        padding: 0 16px 1px;
        border-bottom: 0;
        font-size: 0.95rem;
    }
    /* erste Zelle = Endform, als Unterzeile zur Norm */
    .tt-choose tbody td:first-of-type {
        padding: 0 16px 6px;
        border-bottom: 0;
        font-family: var(--tt-font-mono);
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        color: var(--tt-anthracite-2);
    }
    /* zweite Zelle = Auswahlkriterium */
    .tt-choose tbody td:last-child {
        padding: 0 16px;
        border-bottom: 0;
    }
    .tt-choose tbody tr.is-self th {
        box-shadow: none;
    }
    .tt-choose tbody tr.is-self {
        border-left: 3px solid var(--tt-orange);
    }
}