/* testranking.de — Uebersicht/Filter (Pilot Waschtrockner) */
/* Farbtokens des Moduls — die Zeile, an der die ganze Palette haengt.
   Sie steht am .tr-ueb und nicht nur in :root, weil das Modul auch mit
   abgeschaltetem Chrome laeuft; dann fehlt base.css vollstaendig und es muss
   seine Farben selbst mitbringen. Eine Deklaration hier schlaegt ausserdem jeden
   :root-Alias, weil sie naeher am Element steht — wer nur base.css faerbt,
   aendert an diesem Modul nichts.

   Marke: Tannengruen #0F3D2F. Gemessen 12,15:1 auf Weiss; das abgeloeste
   Altblau der Marke hatte 12,14:1 — der Tausch geschieht bei gleicher Helligkeit,
   jeder bestehende Kontrastnachweis bleibt auf die zweite Nachkommastelle gueltig.

   Trennregel dieses Moduls, sie traegt allein die Helligkeit:
     dunkles Gruen #0F3D2F = Marke und Bedienung (Knopf, Link, Fokus)
     helles Gruen  #16a34a = Note und Konfidenz
   Abstand der beiden gemessen: 3,69:1. Deshalb darf der Affiliate-Knopf die
   Marke tragen, ohne mit dem Notenkreis auf derselben Karte zu verschmelzen.

   --tr-mark ist die neutrale Hervorhebung fuer alles, wo Gruen eine Bewertung
   behaupten wuerde: Preise, Rangabzeichen, Datenabdeckung, Bestwert-Markierung.
   Ohne sie entstuende genau der Marke/Note-Konflikt, den der Wechsel aufloesen soll.

   --tr-blue bleibt als Altname bestehen: Chrome-Regeln, die innerhalb des Moduls
   gerendert werden (etwa .trc-marker), erben ihn von hier. Bei abgeschaltetem
   Chrome gaebe es sonst gar keinen Wert mehr.

   Die vier Notenfarben bleiben unveraendert. */
.tr-ueb{--tr-brand:#0F3D2F;--tr-brand-hover:#0A2B21;--tr-brand-tint:rgba(15,61,47,.08);--tr-blue:var(--tr-brand);--tr-mark:#1c2430;--tr-mark-tint:rgba(28,36,48,.06);--tr-mark-rule:rgba(28,36,48,.28);--tr-fokus:var(--tr-brand);--tr-ink:#1c2430;--tr-mut:#697586;--tr-line:#e6e9ef;--tr-bg:#f6f8fb;--tr-top:#16a34a;--tr-good:#65a30d;--tr-mid:#f59e0b;--tr-low:#ef4444;color:var(--tr-ink);font-family:inherit;max-width:1240px;margin:0 auto;padding:8px 20px 40px}

/* === Varianten-Tokens (aus base.css uebernommen) === */
/* Das Modul deklariert am .tr-ueb nur Farben. Die Anzeige der Modellvarianten und des
   Ab-Preises benutzt zusaetzlich Abstaende, Schriftgroessen und Radien des Designsystems.
   Diese Werte sind aus output/chrome/bauteile/base.css uebernommen und muessen mit ihr
   deckungsgleich bleiben — erzeugt von scripts/_tr_varianten_css_bauen.mjs, nicht von Hand
   pflegen. Sie stehen am .tr-ueb UND am Produktkoerper, weil der Umschalter auf der
   Produktseite ausserhalb von .tr-ueb sitzt. */
.tr-ueb,
body.single-product .tr-pd-info,
body.single-product .trc-var,
body.single-product .trc-preis{
  --tr-body: #374151;
  --tr-bw: 1px;
  --tr-dur-1: 120ms;
  --tr-ease-out: cubic-bezier(.2,.7,.3,1);
  --tr-fs-100: .6875rem;
  --tr-fs-200: .75rem;
  --tr-fs-300: .8125rem;
  --tr-fs-400: .9375rem;
  --tr-fs-600: 1.25rem;
  --tr-fs-700: 1.5rem;
  --tr-fw-black: 800;
  --tr-fw-bold: 700;
  --tr-fw-medium: 600;
  --tr-lh-flat: 1.15;
  --tr-lh-tight: 1.25;
  --tr-lh-ui: 1.5;
  --tr-line-ui: #7c8798;
  --tr-ls-caps: .08em;
  --tr-ls-none: 0;
  --tr-ls-num: -.01em;
  --tr-r-md: 10px;
  --tr-r-pill: 999px;
  --tr-s-1: 4px;
  --tr-s-2: 8px;
  --tr-s-3: 12px;
  --tr-s-4: 16px;
  --tr-surface: #ffffff;
  --tr-touch: 44px;
}

.tr-ueb *{box-sizing:border-box}
.tr-ueb-form{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.tr-ueb-form.tr-noside{grid-template-columns:minmax(0,1fr)}
.tr-ueb-form.tr-noside .tr-ueb-side{display:none}

/* Sidebar — sticky but self-scrolling so tall filter lists never clip (fixes unreachable lower facets)
   Achtung: Das Klebenlassen gilt nur am Desktop. Die Mobil-Ruecknahme steht im Block
   "Mobil-Schicht" am Dateiende — sie MUSS hinter dieser Regel stehen, sonst verliert sie
   den Gleichstand bei gleicher Spezifitaet und die Filterspalte deckt mobil das Raster zu. */
.tr-ueb-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:14px 16px}
.tr-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tr-side-head b{font-size:16px}
.tr-reset{background:none;border:0;color:var(--tr-brand);cursor:pointer;font-size:13px;text-decoration:underline}
.tr-facet{border-top:1px solid var(--tr-line);padding:12px 0}
.tr-facet:first-of-type{border-top:0}
.tr-facet h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--tr-mut)}
.tr-facet-opts{display:flex;flex-direction:column;gap:6px}
.tr-facet-select select{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--tr-line);border-radius:9px;background:#fff;color:var(--tr-ink);cursor:pointer}
/* Fokusring: erst der Ring des Chrome, dann der eigene. Das Chrome kehrt seinen Ring
   auf dunklen Flaechen lokal um (base.css tut das fuer .trc-footer, der gruene Kopf
   braucht dasselbe); diese Regel nimmt die Umkehr mit, ohne sie zu kennen. Faellt das
   Chrome weg, greift --tr-fokus. Vorher stand hier hart das Markentoken selbst —
   der Ring war damit zentral nicht mehr nachsteuerbar. */
.tr-facet-select select:focus{outline:2px solid var(--trc-focus-ring,var(--tr-fokus));outline-offset:1px}
.tr-facet-range .tr-range{flex-direction:row;align-items:center;gap:8px}
.tr-range input{width:100%;min-width:0;font:inherit;padding:7px 8px;border:1px solid var(--tr-line);border-radius:8px;color:var(--tr-ink)}
.tr-range input:focus{outline:2px solid var(--trc-focus-ring,var(--tr-fokus));outline-offset:1px}
.tr-range-sep{color:var(--tr-mut);font-size:13px;flex:none}
.tr-unit{color:var(--tr-mut);font-weight:400;font-size:11px}
.tr-facet-chip .tr-facet-opts{flex-direction:row;flex-wrap:wrap}
.tr-opt{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:3px 2px;border-radius:8px}
.tr-opt:hover{background:var(--tr-bg)}
.tr-opt input{accent-color:var(--tr-brand);width:16px;height:16px;margin:0}
.tr-opt-l{flex:1}
.tr-opt-c{color:var(--tr-mut);font-size:12px;background:var(--tr-bg);border-radius:20px;padding:1px 8px}
.tr-facet-chip .tr-opt{background:var(--tr-bg);padding:5px 10px}
.tr-facet-chip .tr-opt-c{display:none}

/* Toolbar */
.tr-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tr-count b{font-size:20px;color:var(--tr-brand)}
.tr-sort{font-size:14px;color:var(--tr-mut)}
.tr-sort select{font:inherit;padding:7px 10px;border:1px solid var(--tr-line);border-radius:10px;background:#fff}

/* Grid + cards */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.tr-grid.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s}
.tr-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tr-line);border-radius:14px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.tr-card:hover{box-shadow:0 10px 28px rgba(15,61,47,.12);transform:translateY(-2px)}
.tr-card-media{position:relative;padding:16px;text-align:center;background:#fff}
.tr-card-media img{max-height:180px;width:auto;object-fit:contain}
.tr-score{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;color:#fff;line-height:1}
.tr-score b{font-size:18px;font-weight:800}
.tr-score small{font-size:10px;text-transform:uppercase;opacity:.9}
.tr-score.tr-top{background:var(--tr-top)}.tr-score.tr-good{background:var(--tr-good)}.tr-score.tr-mid{background:var(--tr-mid)}.tr-score.tr-low{background:var(--tr-low)}
.tr-card-body{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px;flex:1}
.tr-card-title{margin:0;font-size:16px;line-height:1.3}
.tr-card-title a{color:var(--tr-ink);text-decoration:none}
.tr-card-title a:hover{color:var(--tr-brand)}
.tr-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.tr-specs li{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;border-bottom:1px dashed var(--tr-line);padding-bottom:3px}
.tr-specs span{color:var(--tr-mut)}
.tr-specs b{font-weight:600;text-align:right}
.tr-proscons{display:flex;flex-direction:column;gap:4px}
.tr-pros,.tr-cons{list-style:none;margin:0;padding:0;font-size:12.5px}
.tr-pros li,.tr-cons li{padding-left:18px;position:relative;line-height:1.5}
.tr-pros li::before{content:"✓";position:absolute;left:0;color:var(--tr-top);font-weight:700}
.tr-cons li::before{content:"✕";position:absolute;left:0;color:var(--tr-low);font-weight:700}
/* Preise tragen die neutrale Hervorhebung, nicht die Marke. Eine gruene Zahl neben
   einem Preis wird als Preisurteil gelesen ("guenstig"), und Designsystem 2.3
   verbietet farbige Preisveraenderung. Die Kompaktkarte — die Karte, die heute
   tatsaechlich ausgeliefert wird — setzt den Preis weiter unten bereits auf
   --tr-ink; hier zieht die Grundregel nur nach. #1c2430 auf Weiss: 15,62:1. */
.tr-price{padding-top:4px}.tr-price b{font-size:19px;color:var(--tr-mark)}.tr-price span{color:var(--tr-mut);font-size:12px}
.tr-card-cta{margin-top:auto;padding-top:6px}
.tr-btn{display:block;text-align:center;background:var(--tr-brand);color:#fff;text-decoration:none;font-weight:700;padding:11px 14px;border-radius:10px;transition:background .15s}
.tr-btn:hover{background:var(--tr-brand-hover);color:#fff}
.tr-empty{grid-column:1/-1;text-align:center;color:var(--tr-mut);padding:40px 0}

/* Intro + headings */
.tr-h1{font-size:30px;line-height:1.2;margin:8px 0 12px;color:var(--tr-ink);font-weight:800}
@media(max-width:600px){.tr-h1{font-size:24px}}
.tr-intro{font-size:16px;line-height:1.6;color:#374151;margin:0 0 20px;max-width:900px}
.tr-h2{font-size:22px;margin:32px 0 16px;color:var(--tr-ink)}
.tr-h2-list{margin-top:36px}

/* Top-Picks band */
.tr-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
@media(max-width:760px){.tr-picks{grid-template-columns:1fr}}
.tr-pick{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid var(--tr-line);border-top:4px solid var(--tr-brand);border-radius:14px;padding:16px;text-decoration:none;color:var(--tr-ink);transition:box-shadow .15s,transform .15s}
.tr-pick:hover{box-shadow:0 12px 30px rgba(15,61,47,.14);transform:translateY(-3px)}
.tr-pick:nth-child(1){border-top-color:var(--tr-mid)}
/* Das Abzeichen traegt "Testsieger", "Preis-Tipp" (loader.php Z. 706/824) — eine
   Rangaussage. Gruen wuerde hier dasselbe behaupten wie der Notenkreis daneben,
   deshalb neutral. Der erste Pick behaelt sein eigenes #b45309. */
.tr-pick-badge{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--tr-mark)}
.tr-pick:nth-child(1) .tr-pick-badge{color:#b45309}
.tr-pick-media{position:relative;height:130px;display:flex;align-items:center;justify-content:center}
.tr-pick-media img{max-height:130px;width:auto;object-fit:contain}
.tr-pick-media .tr-score{position:absolute;top:0;left:0;width:46px;height:46px}
.tr-pick-name{font-weight:700;font-size:15px;line-height:1.3}
.tr-pick-sub{font-size:13px;color:var(--tr-mut)}
.tr-pick-cta{margin-top:4px;background:var(--tr-brand);color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:9px}

/* Comparison table */
.tr-table-wrap{overflow-x:auto;border:1px solid var(--tr-line);border-radius:14px;background:#fff}
.tr-table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tr-table thead th{position:sticky;top:0;background:#f1f4f9;text-align:left;padding:12px 10px;font-size:12.5px;color:var(--tr-mut);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;border-bottom:1px solid var(--tr-line)}
.tr-sortable{cursor:pointer;user-select:none}
.tr-sortable:hover{color:var(--tr-brand)}
.tr-arr{display:inline-block;width:8px;color:var(--tr-brand)}
.tr-sortable.asc .tr-arr::after{content:"▲"}.tr-sortable.desc .tr-arr::after{content:"▼"}
.tr-table td{padding:10px;border-bottom:1px solid var(--tr-line);vertical-align:middle;white-space:nowrap}
.tr-table tbody tr:hover{background:var(--tr-bg)}
.tr-td-rank{color:var(--tr-mut);font-weight:700;text-align:center}
.tr-td-prod a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tr-ink);font-weight:600;white-space:normal;min-width:200px}
.tr-td-prod img{width:44px;height:44px;object-fit:contain;flex:none}
.tr-td-prod a:hover span{color:var(--tr-brand)}
.tr-note-pill{display:inline-block;min-width:34px;text-align:center;color:#fff;font-weight:800;padding:3px 8px;border-radius:8px}
.tr-note-pill.tr-top{background:var(--tr-top)}.tr-note-pill.tr-good{background:var(--tr-good)}.tr-note-pill.tr-mid{background:var(--tr-mid)}.tr-note-pill.tr-low{background:var(--tr-low)}
/* Einzige Definition. Frueher stand hier padding:7px 12px und weiter unten im Angebotsblock
   noch einmal derselbe Selektor mit 9px 14px — der spaetere gewann, der obere war tot.
   Zusammengelegt auf den Wert, der tatsaechlich gerendert wurde: nichts aendert sich optisch. */
.tr-btn-sm{display:inline-block;padding:9px 14px;font-size:13px;border-radius:8px}

/* Editorial / FAQ / Methodik */
.tr-editorial{margin-top:40px;display:grid;grid-template-columns:1fr;gap:8px;max-width:900px}
.tr-h3{font-size:17px;margin:20px 0 6px;color:var(--tr-ink)}
.tr-guide p{font-size:15px;line-height:1.7;color:#374151;margin:0 0 10px}
.tr-faq{margin-top:28px}
.tr-faq-item{border:1px solid var(--tr-line);border-radius:10px;margin-bottom:8px;background:#fff;overflow:hidden}
.tr-faq-item summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:15px;list-style:none;position:relative}
.tr-faq-item summary::-webkit-details-marker{display:none}
.tr-faq-item summary::after{content:"+";position:absolute;right:16px;color:var(--tr-brand);font-weight:700;font-size:20px;line-height:1}
.tr-faq-item[open] summary::after{content:"–"}
.tr-faq-a{padding:0 16px 14px}
.tr-faq-a p{margin:0;font-size:14.5px;line-height:1.65;color:#4b5563}
.tr-methodik{margin-top:28px;background:var(--tr-bg);border:1px solid var(--tr-line);border-radius:12px;padding:16px 18px}
.tr-methodik p{font-size:14px;line-height:1.65;color:#4b5563;margin:0 0 8px}
.tr-autor{font-size:13px;color:var(--tr-mut)}

/* Hub (subcategory grid for container categories) */
.tr-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:8px}
.tr-hub-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:18px 14px;text-decoration:none;color:var(--tr-ink);transition:box-shadow .15s,transform .15s}
.tr-hub-card:hover{box-shadow:0 10px 28px rgba(15,61,47,.12);transform:translateY(-3px)}
.tr-hub-media{height:130px;display:flex;align-items:center;justify-content:center;width:100%}
.tr-hub-media img{max-height:130px;width:auto;object-fit:contain}
.tr-hub-noimg{display:block;width:90px;height:90px;border-radius:14px;background:var(--tr-bg)}
.tr-hub-name{font-weight:700;font-size:15px;line-height:1.3;color:var(--tr-ink)}
.tr-hub-card:hover .tr-hub-name{color:var(--tr-brand)}
.tr-hub-count{font-size:13px;color:var(--tr-mut)}

/* Konfidenz-Badge */
.tr-conf{display:inline-block;margin:2px 0 5px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;border:1px solid transparent}
.tr-conf-gut{background:#dcfce7;color:#15803d;border-color:#86efac}
.tr-conf-mid{background:#fef9c3;color:#a16207;border-color:#fde047}
.tr-conf-low{background:#ffedd5;color:#c2410c;border-color:#fdba74}
.tr-conf-none{background:#f1f5f9;color:#64748b;border-color:#cbd5e1}
/* "ohne Note"-Zustand */
.tr-score.tr-nonote{background:#f1f5f9;color:#64748b;border:1px dashed #cbd5e1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;text-align:center;line-height:1.15;padding:5px 4px}
.tr-score.tr-nonote small{font-weight:400;font-size:9px;opacity:.85}
.tr-note-pill.tr-nonote{background:#f1f5f9;color:#94a3b8;border:1px dashed #cbd5e1}
/* Betriebskosten / TCO */
.tr-tco{display:flex;flex-wrap:wrap;gap:2px 10px;margin:2px 0;font-size:12.5px;color:#475569;line-height:1.4}
.tr-tco-year{font-weight:600}
.tr-tco-5y{color:#64748b}
.tr-tco-5y::before{content:"·\00a0";color:#cbd5e1}

/* Produktseite (Detail) */
.tr-pd{max-width:1080px;margin:16px auto 8px}
/* minmax(0,1fr) statt 1fr: 1fr bedeutet minmax(auto,1fr), und dieses auto-Minimum ist die
   Mindestinhaltsbreite. Preis und Knopf tragen white-space:nowrap, dadurch war die Spalte
   unter 355 px breiter als der Bildschirm und der Produktkopf lief rechts heraus. */
.tr-pd-head{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:24px}
@media(max-width:760px){.tr-pd-head{grid-template-columns:minmax(0,1fr)}}
.tr-pd-media{position:relative;text-align:center;background:#fff;border-radius:12px;padding:10px}
.tr-pd-media img{max-width:100%;max-height:320px;width:auto;object-fit:contain}
.tr-pd-media .tr-score{position:absolute;top:8px;left:8px;width:58px;height:58px}
.tr-pd-brand{font-size:13px;color:var(--tr-mut);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:6px}
.tr-pd-price{font-size:16px;margin:12px 0 4px}.tr-pd-price b{font-size:28px;color:var(--tr-mark)}.tr-pd-price span{color:var(--tr-mut);font-size:13px}
.tr-pd-cta{display:inline-block;margin-top:14px;background:var(--tr-brand);color:#fff;font-weight:700;padding:14px 26px;border-radius:11px;text-decoration:none;font-size:16px}
.tr-pd-cta:hover{background:var(--tr-brand-hover);color:#fff}
.tr-pd-avail.tr-pd-dead{color:var(--tr-low);font-weight:600;margin:10px 0}
.tr-pd-offers{margin-top:16px}.tr-pd-offers ul{list-style:none;margin:6px 0 0;padding:0}
.tr-pd-offers li{display:flex;justify-content:space-between;border-bottom:1px solid var(--tr-line);padding:6px 0;font-size:14px}
.tr-pd-specs{margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
/* table-layout:fixed, weil width:100% bei auto-Layout nur eine Untergrenze ist: lange
   Beschriftungen ohne Trennstelle trieben die Tabelle ueber den Behaelter hinaus und die
   Wertespalte lag mobil unerreichbar rechts ausserhalb. Fixed erzwingt die 100 %,
   overflow-wrap bricht die langen Woerter statt die Spalte aufzublasen. */
.tr-pd-specs table{width:100%;border-collapse:collapse;table-layout:fixed}
.tr-pd-specs th{text-align:left;color:var(--tr-mut);font-weight:600;font-size:14px;padding:9px 12px;width:42%;border-bottom:1px solid var(--tr-line);vertical-align:top;overflow-wrap:anywhere}
.tr-pd-specs td{padding:9px 12px;font-size:14px;border-bottom:1px solid var(--tr-line);font-weight:600;overflow-wrap:anywhere}
.tr-pd .tr-methodik{max-width:none;margin-top:22px}
.tr-pd-alts{margin-top:24px}.tr-pd-alts .tr-hub-media{height:150px}
.tr-pd-desc{margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-pd-desc p{font-size:15px;line-height:1.7;color:#374151;margin:0}
.tr-pd-src{margin:14px 0 0;font-size:12px;color:var(--tr-mut)}.tr-pd-src a{color:var(--tr-mut)}

/* === Produktseite: Takeover — Theme-Doppel-Header/Tabs/Related ausblenden === */
.tr-pd-takeover .woo-image-part,
.tr-pd-takeover .woo_top_meta,
.tr-pd-takeover .rh-300-sidebar,
.tr-pd-takeover ul.smart-scroll-desktop.contents-woo-area,
.tr-pd-takeover #reviews,
.tr-pd-takeover #related-section-woo-area,
.tr-pd-takeover #re-compare-bar-tabs{display:none!important}
.tr-pd-takeover .content-woo-area{display:block!important}
.tr-pd-takeover .woo-title-area{width:100%!important;max-width:none!important;float:none!important;margin-bottom:0!important}

/* === Produktseite: Quick-Facts-Leiste (Big Picture) === */
.tr-pd-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.tr-pd-facts li{flex:1 1 120px;min-width:104px;background:var(--tr-bg);border:1px solid var(--tr-line);border-radius:12px;padding:11px 14px;text-align:center}
.tr-fact-l{display:block;font-size:11px;color:var(--tr-mut);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin-bottom:4px}
.tr-fact-v{font-size:20px;color:var(--tr-ink);font-weight:800;line-height:1.1}
.tr-fact-v small{font-size:12px;color:var(--tr-mut);font-weight:600}

/* === Produktseite: Fazit (einzigartig pro Produkt) === */
/* Verlauf durch eine Flaeche ersetzt — Designsystem 2.3 kennt keine Verlaeufe.
   Der Markenton uebernimmt die Auszeichnung, die vorher der kaum sichtbare
   Blaustich am Fuss des Verlaufs andeutete. Gemessen auf dem ausgemalten
   Grund #ecefee: Fliesstext #28313d 11,36:1, Markenschrift 10,50:1. */
.tr-pd-verdict{margin-top:22px;background:var(--tr-brand-tint);border:1px solid var(--tr-line);border-left:4px solid var(--tr-brand);border-radius:14px;padding:18px 24px}
.tr-pd-verdict h2{margin-top:0}
.tr-pd-verdict p{font-size:16px;line-height:1.75;color:#28313d;margin:6px 0 0}
.tr-pd-verdict b{color:var(--tr-brand);font-weight:700}

/* === Produktseite: Preisverlauf === */
.tr-pd-pricehist{margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-ph-stats{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--tr-mut);margin:2px 0 12px}
.tr-ph-stats b{color:var(--tr-ink);font-size:16px}
.tr-ph-svg{width:100%;height:90px;display:block;overflow:visible}
.tr-ph-up polyline{stroke:var(--tr-low)}
.tr-ph-down polyline{stroke:var(--tr-top)}
/* Die flache Kurve bleibt neutral: --tr-top faerbt zwei Zeilen hoeher bereits die
   FALLENDE Kurve gruen. Markengruen haette hier dieselbe Farbe fuer zwei Aussagen
   im selben Bild — gefallen und unveraendert waeren nicht mehr zu trennen. */
.tr-ph-flat polyline{stroke:var(--tr-mark)}
.tr-ph-note{font-size:12px;color:var(--tr-mut);margin:10px 0 0}

/* === Produktseite: Werbekennzeichnung + Affiliate-Transparenz === */
/* 12px statt 10px: Die Werbekennzeichnung sass direkt am Affiliate-Knopf und war die
   kleinste Schrift der Seite. Kennzeichnung muss klar erkennbar sein — das ist kein
   Layout-, sondern ein Rechtsthema. */
.tr-cta-ad{display:inline-block;margin:0 6px;padding:1px 6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);border-radius:5px;vertical-align:middle}
.tr-pd-affnote{font-size:12px;line-height:1.5;color:var(--tr-mut);margin:8px 0 0;max-width:520px}

/* === Produktseite: Angebots-Panel (Welle 1) === */
.tr-offers{margin-top:6px}
.tr-off-head{font-size:14px;font-weight:700;color:var(--tr-ink);margin:0 0 8px}
.tr-off-single{color:var(--tr-mut);font-weight:600}.tr-off-single span{font-weight:400}
.tr-off-table{width:100%;border-collapse:collapse}
.tr-off-row{border-bottom:1px solid var(--tr-line)}
.tr-off-row td{padding:10px 6px;vertical-align:middle}
.tr-off-best{background:linear-gradient(90deg,rgba(34,197,94,.09),transparent)}
.tr-off-merch{font-weight:700;font-size:14px}
.tr-off-badge{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;text-transform:uppercase;color:#fff;background:var(--tr-top);border-radius:5px;padding:1px 6px;vertical-align:middle}
.tr-off-price{white-space:nowrap}.tr-off-price b{font-size:20px;color:var(--tr-mark)}
.tr-off-price small{display:block;font-size:11px;color:var(--tr-mut);font-weight:400}
.tr-off-act{text-align:right}
.tr-btn-ghost{background:#fff;color:var(--tr-brand);border:1px solid var(--tr-brand)}
.tr-btn-ghost:hover{background:var(--tr-bg);color:var(--tr-brand)}
.tr-off-amazon .tr-off-price small{font-style:italic}

/* === Produktseite: Score-Beleg-Box (Welle 1) === */
.tr-belegbox{margin:10px 0 4px;border:1px solid var(--tr-line);border-radius:12px;background:#fff;overflow:hidden}
.tr-belegbox summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tr-belegbox summary::-webkit-details-marker{display:none}
.tr-belegbox summary::after{content:"\25be";color:var(--tr-mut);transition:transform .2s}
.tr-belegbox[open] summary::after{transform:rotate(180deg)}
/* Zeigt "Datenabdeckung 72%" (loader.php Z. 2272). Gruen laese den Wert als Urteil
   ueber die Datenlage lesen — die Zahl soll fuer sich sprechen. #1c2430 auf
   --tr-bg #f6f8fb: 14,68:1. */
.tr-beleg-conf{font-size:12px;font-weight:700;color:var(--tr-mark);background:var(--tr-bg);border-radius:20px;padding:3px 10px;white-space:nowrap}
.tr-beleg-body{padding:4px 16px 16px;font-size:14px;line-height:1.6;color:#374151}
.tr-beleg-pillars{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.tr-beleg-pillars li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--tr-line);border-radius:9px}
.tr-beleg-dot{width:10px;height:10px;border-radius:50%;flex:none}
.tr-beleg-on .tr-beleg-dot{background:var(--tr-top)}.tr-beleg-off .tr-beleg-dot{background:#cbd5e1}
.tr-beleg-pillars b{font-size:14px}
.tr-beleg-sub{flex:1;font-size:12px;color:var(--tr-mut)}
.tr-beleg-pillars em{font-style:normal;font-size:12px;font-weight:700;flex:none}
.tr-beleg-on em{color:var(--tr-top)}.tr-beleg-off em{color:var(--tr-mut)}
.tr-beleg-note{font-size:12px;color:var(--tr-mut);margin:10px 0 0}

/* === Produktseite: weitere Preisquellen (EAN-Suche) === */
.tr-off-more{font-size:13px;color:var(--tr-mut);margin:12px 0 0}
/* Verweist auf guenstigere Angebote. In Gruen liest sich das als Preisurteil,
   deshalb neutral samt Unterstrich. Die Deckkraft .28 bleibt unveraendert: der alte
   Blauton ergab ausgemalt 1,73:1 gegen Weiss, der neue Neutralton ergibt 1,79:1. */
.tr-off-more a{color:var(--tr-mark);font-weight:700;text-decoration:none;border-bottom:1px solid var(--tr-mark-rule);padding-bottom:1px}
.tr-off-more a:hover{border-bottom-color:var(--tr-mark)}
.tr-off-more .tr-cta-ad{color:var(--tr-mut);background:var(--tr-bg);border-color:var(--tr-line)}

/* === Produktseite: Panel ohne Produktleiter (nicht verfuegbar / kein Live-Preis) === */
.tr-noprice{margin:10px 0 0}
.tr-np-status{display:flex;flex-direction:column;gap:2px;background:var(--tr-bg);border:1px solid var(--tr-line);border-left:4px solid var(--tr-mut);border-radius:10px;padding:10px 14px}
.tr-np-status b{font-size:15px;color:var(--tr-ink)}
.tr-np-status span{font-size:13px;color:var(--tr-mut)}
.tr-np-dead{border-left-color:var(--tr-low)}
.tr-np-dead b{color:var(--tr-low)}
.tr-np-sources{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0}
.tr-np-src-label{font-size:13px;font-weight:700;color:var(--tr-ink);display:inline-flex;align-items:center;gap:6px}
.tr-np-btn{white-space:nowrap}
.tr-np-btn-ghost{background:#fff;color:var(--tr-brand);border:1px solid var(--tr-brand)}
.tr-np-btn-ghost:hover{background:var(--tr-bg);color:var(--tr-brand)}
.tr-np-sources small{flex-basis:100%;font-size:12px;color:var(--tr-mut)}
.tr-np-alts{margin-top:16px}
.tr-np-alts-head{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--tr-mut);margin:0 0 8px}
.tr-np-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){.tr-np-grid{grid-template-columns:1fr}}
.tr-np-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--tr-line);border-radius:10px;padding:8px 10px;text-decoration:none;color:var(--tr-ink);transition:border-color .15s,box-shadow .15s}
.tr-np-card:hover{border-color:var(--tr-brand);box-shadow:0 4px 14px rgba(15,61,47,.12);color:var(--tr-ink)}
.tr-np-media{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center}
.tr-np-media img{max-width:52px;max-height:52px;object-fit:contain}
.tr-np-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.tr-np-name{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr-np-card:hover .tr-np-name{color:var(--tr-brand)}
.tr-np-meta{display:flex;align-items:center;gap:8px;font-size:12px}
.tr-np-meta .tr-note-pill{min-width:28px;padding:1px 6px;font-size:12px}
.tr-np-meta b{color:var(--tr-mark);font-size:13px}

/* === Produktseite: Profi-Tests === */
.tr-pd-tests{margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-tests-summary{font-size:15px;line-height:1.7;color:#28313d;margin:4px 0 2px}
.tr-tests-summary-label{font-size:11px;color:var(--tr-mut);margin:0 0 12px}
.tr-tests-table{width:100%;border-collapse:collapse;font-size:14px}
.tr-tests-table th{text-align:left;color:var(--tr-mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid var(--tr-line)}
.tr-tests-table td{padding:10px;border-bottom:1px solid var(--tr-line);vertical-align:middle}
.tr-test-tester{font-weight:700}
.tr-test-label{color:var(--tr-mut);font-size:13px}
.tr-tests-table a{color:var(--tr-brand);font-weight:600;text-decoration:none}

/* === Produktseite: Videotests (PROC-VIDEO) ===
   Zweispaltig: links die Videobuehne, rechts die Fundstellen als Kapitelliste.
   Die Buehne ist ein gezeichneter Platzhalter im 16:9-Format - sie liest als
   Videofenster, laedt aber NICHTS von Google. Erst der Klick holt den Player,
   und der ersetzt den Platzhalter an derselben Stelle. */
.tr-pd-videos{--tr-vid-plus:#3f7d20;--tr-vid-minus:#9a3412;margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-vid-vorschau{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a5a00;background:rgba(180,120,10,.12);border:1px dashed rgba(180,120,10,.45);border-radius:6px;padding:4px 10px;margin:0 0 10px}
.tr-vid-summary{font-size:15px;line-height:1.7;color:#28313d;margin:4px 0 2px}
.tr-vid-label{font-size:11px;line-height:1.6;color:var(--tr-mut);margin:0 0 16px}

.tr-vid-karte{border:1px solid var(--tr-line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.tr-vid-karte:last-of-type{margin-bottom:4px}

/* --- Kopf --- */
.tr-vid-kopf{margin-bottom:14px}
.tr-vid-titel{display:block;font-size:16px;font-weight:700;line-height:1.35;color:var(--tr-ink);text-decoration:none}
.tr-vid-titel:hover{color:var(--tr-brand);text-decoration:underline}
.tr-vid-titel:focus-visible{outline:2px solid var(--tr-fokus);outline-offset:2px}
.tr-vid-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--tr-mut);margin:5px 0 0}
.tr-vid-kanal{font-weight:600;color:var(--tr-ink)}
.tr-vid-pillen{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tr-vid-pille{font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:5px;padding:3px 8px;background:var(--tr-bg);color:var(--tr-mut);border:1px solid var(--tr-line)}
.tr-vid-art{color:var(--tr-ink)}
.tr-vid-u-ja{background:rgba(63,125,32,.10);color:var(--tr-vid-plus);border-color:rgba(63,125,32,.25)}
.tr-vid-u-gemischt{background:rgba(180,120,10,.10);color:#8a5a00;border-color:rgba(180,120,10,.25)}
.tr-vid-u-nein{background:rgba(154,52,18,.10);color:var(--tr-vid-minus);border-color:rgba(154,52,18,.25)}
.tr-vid-anzeige{background:var(--tr-brand-tint);color:var(--tr-brand);border-color:transparent}

/* --- Zweispaltiger Raum --- */
.tr-vid-raum{display:grid;gap:18px}
.tr-vid-mit-buehne .tr-vid-raum{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}

/* --- Buehne --- */
.tr-vid-buehne{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,#24313c 0%,#141c24 55%,#0d1318 100%)}
.tr-vid-buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* padding-bottom haelt den zentrierten Inhalt von der Dauer-Plakette frei - auf einer
   schmalen Buehne (390px -> 155px hoch) stossen sie sonst aneinander. */
.tr-vid-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-bottom:22px;text-decoration:none;color:#fff}
.tr-vid-start:hover .tr-vid-start-knopf{transform:scale(1.06);background:var(--tr-brand)}
.tr-vid-start:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.tr-vid-start-knopf{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;transition:transform var(--tr-dur-1,.15s) var(--tr-ease-out,ease-out),background var(--tr-dur-1,.15s)}
.tr-vid-start-text{font-size:13.5px;font-weight:700;letter-spacing:.01em}
.tr-vid-start-dauer{position:absolute;right:10px;bottom:10px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;background:rgba(0,0,0,.62);border-radius:4px;padding:2px 7px}
.tr-vid-laeuft .tr-vid-start{display:none}

/* Zeitleiste direkt unter der Buehne: wo im Video liegen die Fundstellen? */
.tr-vid-spur{position:relative;display:block;height:4px;border-radius:2px;background:var(--tr-line);margin:8px 0 0}
.tr-vid-spur i{position:absolute;top:-3px;width:2px;height:10px;border-radius:1px;background:var(--tr-brand)}
.tr-vid-datenschutz{font-size:11px;line-height:1.55;color:var(--tr-mut);margin:10px 0 0}

/* --- Fundstellenliste --- */
.tr-vid-liste-kopf{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tr-mut);margin:0 0 6px}
.tr-vid-spalte-liste>.tr-vid-liste-kopf+*+.tr-vid-liste-kopf,.tr-vid-spalte-liste>*+.tr-vid-liste-kopf{margin-top:14px}
.tr-vid-punkte{list-style:none;margin:0;padding:0}
.tr-vid-punkte li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--tr-line)}
.tr-vid-punkte li:last-child{border-bottom:0}
.tr-vid-minus li:first-child{border-top:1px solid var(--tr-line)}
.tr-vid-punkt{font-size:13.5px;line-height:1.5;color:var(--tr-ink);flex:1 1 60%}
.tr-vid-plus .tr-vid-punkt::before{content:"+";display:inline-block;width:14px;font-weight:800;color:var(--tr-vid-plus)}
.tr-vid-minus .tr-vid-punkt::before{content:"\2212";display:inline-block;width:14px;font-weight:800;color:var(--tr-vid-minus)}

.tr-vid-chip{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:26px;padding:2px 8px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tr-brand);background:var(--tr-brand-tint);border:1px solid transparent;border-radius:6px;text-decoration:none}
.tr-vid-chip:hover{border-color:var(--tr-brand)}
.tr-vid-chip:focus-visible{outline:2px solid var(--tr-fokus);outline-offset:2px}
/* Laeuft der Player, springen die Zeitmarken IM Video - das soll man sehen. */
.tr-vid-laeuft .tr-vid-chip{background:var(--tr-brand);color:#fff}
.tr-vid-laeuft .tr-vid-chip:hover{border-color:var(--tr-brand);filter:brightness(1.12)}

.tr-vid-messwerte{width:100%;border-collapse:collapse;font-size:13.5px}
.tr-vid-messwerte td{padding:7px 0;border-bottom:1px solid var(--tr-line);vertical-align:middle}
.tr-vid-messwerte td:first-child{color:var(--tr-mut)}
.tr-vid-messwerte td:nth-child(2){text-align:right;padding-right:10px;white-space:nowrap}
.tr-vid-messwerte td:last-child{width:1%;white-space:nowrap}
.tr-vid-messwerte tr:last-child td{border-bottom:0}

@media(max-width:820px){
  /* Unter 820px steht die Liste unter der Buehne - nebeneinander waere beides zu schmal. */
  .tr-vid-mit-buehne .tr-vid-raum{grid-template-columns:1fr}
}

/* === Entity-Seiten (Anbieter / Testorganisationen) + Bewertung === */
.tr-entity{max-width:860px}
.tr-entity-typ{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-mut);margin:0 0 8px}
.tr-entity-profil{font-size:15px;line-height:1.75;color:#28313d;background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:18px 22px}
.tr-entity-ratings{margin-top:24px}
.tr-entity-avg{font-size:16px}/* Die Durchschnittsbewertung ist wortwoertlich eine Note. Sie darf weder die Marke
   noch eine Notenfarbe tragen: die eine behauptete Werbung, die andere eine
   testranking-Note, obwohl der Wert von Lesern stammt. */
.tr-entity-avg b{color:var(--tr-mark);font-size:22px}
.tr-entity-few{color:var(--tr-mut)}
.tr-entity-review{border:1px solid var(--tr-line);border-radius:10px;padding:10px 14px;margin:8px 0;background:#fff}
.tr-entity-stars{color:#f59e0b;letter-spacing:2px}
.tr-entity-review small{color:var(--tr-mut);margin-left:6px}
.tr-entity-review p{margin:6px 0 0;font-size:14px;line-height:1.6}
.tr-rate-form{background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:16px 20px;display:grid;gap:10px;max-width:520px}
.tr-rate-form input[type=text],.tr-rate-form textarea{border:1px solid var(--tr-line);border-radius:9px;padding:9px 12px;font:inherit;width:100%}
.tr-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;opacity:0}
.tr-rate-stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.tr-rate-stars input{display:none}
.tr-rate-stars label{font-size:30px;color:#d1d5db;cursor:pointer;transition:color .12s}
.tr-rate-stars input:checked ~ label,.tr-rate-stars label:hover,.tr-rate-stars label:hover ~ label{color:#f59e0b}
.tr-rate-msg{font-weight:600}.tr-rate-ok{color:var(--tr-top)}
.tr-rate-privacy{font-size:11px;color:var(--tr-mut);margin:2px 0 0}
.tr-entity-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(15,61,47,.4)}
.tr-entity-link:hover{color:var(--tr-brand)}

/* === SHOWCASE: Optimal-Produktseite === */
.tr-sc-nav{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--tr-line);border-radius:12px;margin:14px 0 4px;overflow-x:auto}
.tr-sc-nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:6px 8px;white-space:nowrap}
.tr-sc-nav a{display:block;padding:8px 13px;border-radius:8px;font-size:13px;font-weight:700;color:var(--tr-ink);text-decoration:none}
.tr-sc-nav a:hover{background:var(--tr-bg);color:var(--tr-brand)}
.tr-sc-fit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
@media(max-width:760px){.tr-sc-fit{grid-template-columns:1fr}}
.tr-sc-fit-col{background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:16px 20px}
.tr-sc-fit-pro{border-top:3px solid var(--tr-top)}.tr-sc-fit-con{border-top:3px solid var(--tr-mid)}
.tr-sc-fit-col h3{margin:0 0 8px}
.tr-sc-fit-col ul{list-style:none;margin:0;padding:0}
.tr-sc-fit-col li{padding:7px 0 7px 26px;position:relative;font-size:14px;line-height:1.55;border-bottom:1px solid var(--tr-line)}
.tr-sc-fit-col li:last-child{border-bottom:0}
.tr-sc-fit-pro li::before{content:"✓";position:absolute;left:2px;color:var(--tr-top);font-weight:800}
.tr-sc-fit-con li::before{content:"→";position:absolute;left:2px;color:var(--tr-mid);font-weight:800}
/* Verlauf entfernt. Weiss statt Markenton, weil in diesem Panel --tr-mut-Text steht:
   #697586 auf dem Markenton #ecefee erreicht nur 4,04:1 und verfehlt AA. Auf Weiss
   sind es 4,68:1 — und damit sogar mehr als am Fuss des alten Verlaufs (#f6f8ff:
   4,41:1, ebenfalls verfehlt). Die Flaeche ist hier die barrierefreiere Loesung. */
.tr-sc-distance{margin-top:22px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:20px 24px}
.tr-sc-dist-sub{font-size:14px;color:var(--tr-mut);margin:4px 0 14px}
.tr-sc-dist-row{display:flex;align-items:center;gap:16px}
#tr-dist-slider{flex:1;accent-color:var(--tr-brand);height:6px}
#tr-dist-val{font-size:22px;font-weight:800;color:var(--tr-brand);min-width:78px;text-align:right}
.tr-sc-dist-verdict{margin:14px 0 0;font-size:15px;font-weight:600;padding:12px 16px;border-radius:10px}
.tr-dist-ok{background:rgba(34,197,94,.1);color:#166534}
.tr-dist-warn{background:rgba(245,158,11,.12);color:#92400e}
.tr-sc-specs #tr-spec-search{width:100%;border:1px solid var(--tr-line);border-radius:10px;padding:11px 14px;font:inherit;font-size:14px;margin:4px 0 14px;background:var(--tr-bg)}
.tr-sc-speccount{font-size:12px;font-weight:700;color:var(--tr-mut);background:var(--tr-bg);border-radius:20px;padding:3px 10px;vertical-align:middle;margin-left:8px}
.tr-sc-specgroup{border:1px solid var(--tr-line);border-radius:10px;margin:8px 0;overflow:hidden}
.tr-sc-specgroup summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:14px;background:var(--tr-bg);display:flex;justify-content:space-between}
.tr-sc-specgroup summary::-webkit-details-marker{display:none}
.tr-sc-specgroup summary::after{content:"▾";color:var(--tr-mut)}
.tr-sc-specgroup[open] summary::after{transform:rotate(180deg)}
.tr-sc-gcount{font-size:11px;color:var(--tr-mut);font-weight:600;margin-left:auto;margin-right:10px}
.tr-sc-specgroup table{margin:0}
.tr-sc-compare{margin-top:24px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-sc-cmp-table{width:100%;border-collapse:collapse;font-size:14px}
.tr-sc-cmp-table thead th{vertical-align:top;text-align:center;padding:10px;border-bottom:2px solid var(--tr-line);min-width:130px}
.tr-sc-cmp-table thead th:first-child{min-width:90px}
.tr-sc-cmp-table thead img{max-height:84px;width:auto;display:block;margin:0 auto 8px}
.tr-sc-cmp-table thead a{font-size:12.5px;font-weight:700;color:var(--tr-ink);text-decoration:none;display:block;line-height:1.35}
/* Markiert im Vergleich die Spalte der aufgerufenen Seite ("Dieses Geraet",
   loader.php Z. 2006) — ein Standortzeichen, keine Empfehlung. Gruen wuerde es zu
   einer machen. Weiss auf #1c2430: 15,62:1. */
.tr-sc-cmp-badge{display:inline-block;margin-top:6px;font-size:10px;font-weight:800;text-transform:uppercase;color:#fff;background:var(--tr-mark);border-radius:5px;padding:2px 8px}
.tr-sc-cmp-table tbody th{text-align:left;color:var(--tr-mut);font-weight:600;font-size:13px;padding:9px 10px;border-bottom:1px solid var(--tr-line)}
.tr-sc-cmp-table tbody td{text-align:center;padding:9px 10px;border-bottom:1px solid var(--tr-line)}
.tr-sc-cmp-self{background:var(--tr-mark-tint)}
.tr-sc-reviews{margin-top:24px;background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:18px 24px}
.tr-sc-upcoming{margin-top:24px}
.tr-sc-up-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tr-sc-up-card{background:#fff;border:1px dashed var(--tr-line);border-radius:14px;padding:16px 18px;position:relative;opacity:.85}
.tr-sc-up-ico{font-size:24px;display:block;margin-bottom:6px}
.tr-sc-up-card b{font-size:14px}
.tr-sc-up-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--tr-brand);background:rgba(15,61,47,.08);border-radius:5px;padding:2px 8px}
.tr-sc-up-card p{font-size:12.5px;color:var(--tr-mut);line-height:1.5;margin:6px 0 0}

/* === Abstands-Check: Mini-TV-Visual + Modell-Vorschlaege === */
.tr-sc-distance{position:relative}
.tr-tv-mini{position:absolute;top:18px;right:24px;display:flex;flex-direction:column;align-items:center;gap:0}
.tr-tv-screen{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1c2430,#2f3b4d);border:2px solid #0e131a;border-radius:4px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tr-tv-stand{height:5px;background:#0e131a;border-radius:0 0 3px 3px}
.tr-tv-stand::after{content:"";display:block;width:160%;height:3px;background:#0e131a;border-radius:3px;margin:5px 0 0 -30%}
@media(max-width:760px){.tr-tv-mini{position:static;margin-bottom:10px;align-items:flex-start}}
.tr-dist-suggest{margin-top:14px}
.tr-dist-sug-head{font-size:13.5px;font-weight:700;color:var(--tr-ink);margin:0 0 10px}
.tr-dist-sug-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tr-dist-sug-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:#fff;border:1px solid var(--tr-line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--tr-ink);transition:box-shadow .15s,border-color .15s}
.tr-dist-sug-card:hover{border-color:var(--tr-brand);box-shadow:0 4px 14px rgba(15,61,47,.12);color:var(--tr-ink)}
.tr-dist-sug-card img{max-height:70px;width:auto;object-fit:contain}
.tr-dist-sug-z{font-size:11px;font-weight:800;color:#fff;background:var(--tr-brand);border-radius:5px;padding:1px 8px}
.tr-dist-sug-t{font-size:12.5px;line-height:1.35;font-weight:600}
.tr-dist-sug-card b{color:var(--tr-mark);font-size:15px}

/* === KVA-Entscheidungshelfer === */
.tr-kva-helper{background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:20px 24px;margin:18px 0}
.tr-kh-sub{font-size:14px;color:var(--tr-mut);margin:4px 0 14px}
.tr-kh-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.tr-kh-label{font-size:13.5px;font-weight:700;min-width:280px}
.tr-kh-opt{border:1px solid var(--tr-line);background:#fff;border-radius:20px;padding:8px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s}
.tr-kh-opt:hover{border-color:var(--tr-brand);color:var(--tr-brand)}
.tr-kh-opt.on{background:var(--tr-brand);border-color:var(--tr-brand);color:#fff}
.tr-kh-result{margin-top:14px}
.tr-kh-head{font-size:13.5px;font-weight:700;margin:0 0 10px}
.tr-kh-meta{font-size:11px;color:var(--tr-mut)}
.tr-kh-empty{font-size:14px;color:var(--tr-mut)}
@media(max-width:760px){.tr-kh-label{min-width:100%}}

/* === KVA Ultimate: Intro-Quellen, Picks-Note, Archiv-Band, Marken, Alternativen === */
.tr-intro-src{color:var(--tr-mut);font-size:11.5px}
.tr-kva-picks-note{font-size:11.5px;color:var(--tr-mut);margin:6px 0 0}
.tr-pick-price{font-weight:800;color:var(--tr-mark)}
.tr-archiv-band{grid-column:1/-1;background:var(--tr-bg);border:1px dashed var(--tr-line);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--tr-mut);margin:6px 0}
.tr-marken{margin-top:26px}
.tr-marken-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.tr-marke-card{background:#fff;border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px}
.tr-marke-card b{font-size:15px}
.tr-marke-card p{font-size:13px;line-height:1.6;color:#374151;margin:6px 0 0}
.tr-alternativen{margin-top:26px}
.tr-alternativen p{font-size:15px;line-height:1.7}
.tr-alt-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.tr-alt-tile{display:block;background:#fff;border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;font-weight:700;font-size:14px;color:var(--tr-brand);text-decoration:none;text-align:center}
.tr-alt-tile:hover{border-color:var(--tr-brand);box-shadow:0 3px 10px rgba(15,61,47,.10)}

/* === Kaffee-Systemvergleich (Hub) === */
.tr-sysvgl{margin-top:28px}
.tr-sysvgl-table td{font-size:13px;vertical-align:top}
.tr-sysvgl-table small{color:var(--tr-mut)}
.tr-sysvgl-note{font-size:11.5px;color:var(--tr-mut);line-height:1.6;margin-top:10px}

/* ============ KAFFEE-HUB: visuelle System-Karten ============ */
.tr-sys-cards-wrap{margin-top:22px}
.tr-sys-legend{font-size:12.5px;color:var(--tr-mut);margin:2px 0 16px}
.tr-leg-lo{color:hsl(122,45%,38%);font-weight:700;margin-left:8px}
.tr-leg-hi{color:hsl(8,52%,46%);font-weight:700;margin-left:6px}
.tr-sys-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tr-sys-card{position:relative;background:#fff;border:1px solid var(--tr-line);border-radius:12px;padding:18px 15px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(15,61,47,.04)}
.tr-sys-best{border-color:#16a34a;box-shadow:0 2px 10px rgba(22,163,74,.12)}
.tr-sys-ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase}
.tr-sys-head{display:flex;align-items:center;gap:9px;margin-top:2px}
.tr-sys-ico{display:inline-flex;color:var(--tr-brand)}
.tr-sys-ico .tr-sys-svg{width:26px;height:26px;display:block}
.tr-sys-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.tr-sys-verdict{font-size:12px;color:#475569;font-weight:600;margin:7px 0 13px;min-height:30px}
.tr-sys-price{font-size:15px;color:#111827;margin-bottom:12px;display:flex;align-items:baseline;gap:5px}
.tr-sys-plabel{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-mut);font-weight:700}
.tr-sys-price b{font-size:17px;font-weight:700}
.tr-sys-cost{background:#f8fafc;border:1px solid #eef1f6;border-radius:9px;padding:9px 11px;margin-bottom:13px}
.tr-sys-cost-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.tr-sys-mlabel{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-mut);font-weight:700}
.tr-sys-bar-track{height:8px;background:#e5e9f0;border-radius:5px;overflow:hidden}
.tr-sys-bar{height:100%;border-radius:5px;transition:width .5s}
.tr-sys-jahr{font-size:15px;font-weight:800;white-space:nowrap;color:#111827}
.tr-sys-tasse{font-size:11px;color:var(--tr-mut);margin-top:6px}
.tr-sys-meta{margin:0 0 14px;padding:0;flex:1;display:flex;flex-direction:column;gap:9px}
.tr-sys-meta>div{display:flex;flex-direction:column;gap:1px}
.tr-sys-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--tr-mut);font-weight:700}
.tr-sys-meta dd{margin:0;font-size:12.5px;line-height:1.4;color:#1f2937}
.tr-sys-btn{text-align:center;font-size:12.5px;padding:9px 10px;margin-top:auto}
@media(max-width:900px){.tr-sys-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tr-sys-cards{grid-template-columns:1fr}}

/* System-Helfer Empfehlungsbox */
.tr-sys-helper{margin-top:22px}
.tr-sys-rec{display:flex;gap:16px;align-items:center;background:#fff;border:2px solid var(--tr-brand);border-radius:14px;padding:16px 18px;margin-top:14px;animation:trfade .3s}
@keyframes trfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tr-sys-rec-ico{flex-shrink:0;color:var(--tr-brand);display:inline-flex}
.tr-sys-rec-ico .tr-sys-svg{width:40px;height:40px}
.tr-sys-rec-body{display:flex;flex-direction:column;gap:2px}
.tr-sys-rec-lbl{font-size:12px;color:var(--tr-mut);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tr-sys-rec-name{font-size:19px;font-weight:800}
.tr-sys-rec-verdict{font-size:13px;color:#374151}
/* Der Inhalt ist "ab 249 EUR - ca. 87 EUR/Jahr" (loader.php Z. 1497), also Preis
   und Betriebskosten. Neutral aus demselben Grund wie jeder andere Preis. */
.tr-sys-rec-facts{font-size:13px;font-weight:700;color:var(--tr-mark);margin-top:2px}
.tr-sys-rec-btn{align-self:flex-start;margin-top:10px;font-size:13px}

/* Produkt-Showcase */
.tr-showcase-sub{font-size:13.5px;color:#374151;margin:2px 0 14px;line-height:1.6}
.tr-showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tr-showcase-card{background:#fff;border:1px solid var(--tr-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.tr-showcase-card:hover{box-shadow:0 6px 20px rgba(15,61,47,.12);transform:translateY(-2px)}
.tr-showcase-cat{font-size:11px;font-weight:800;color:var(--tr-brand);text-transform:uppercase;letter-spacing:.04em}
.tr-showcase-media{height:150px;display:flex;align-items:center;justify-content:center;margin:8px 0}
.tr-showcase-media img{max-height:150px;max-width:100%;object-fit:contain}
.tr-showcase-name{font-size:14px;font-weight:700;line-height:1.4;min-height:38px}
.tr-showcase-badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;margin:8px 0;align-self:flex-start}
.tr-badge-test{background:#dcfce7;color:#15803d}
.tr-badge-score{background:#e0edff;color:#1e40af}
.tr-badge-neutral{background:#f1f5f9;color:#475569}
.tr-showcase-price{font-size:17px;font-weight:800;color:var(--tr-mark);margin-top:auto}
.tr-showcase-cta{font-size:12.5px;font-weight:700;color:var(--tr-brand);margin-top:8px}
.tr-showcase-note,.tr-showcase-card~.tr-showcase-note{font-size:11px;color:var(--tr-mut);margin-top:10px}
@media(max-width:820px){.tr-showcase-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tr-showcase-grid{grid-template-columns:1fr}}

/* Detail-Tabelle aufklappbar */
.tr-sys-details{margin-top:24px;border:1px solid var(--tr-line);border-radius:12px;background:#fff}
.tr-sys-details>summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:14px;list-style:none}
.tr-sys-details>summary::-webkit-details-marker{display:none}
.tr-sys-details>summary::before{content:"▸ ";color:var(--tr-brand)}
.tr-sys-details[open]>summary::before{content:"▾ "}
.tr-sys-details .tr-table-wrap{padding:0 14px 14px}

/* ---------- Kompaktkarte (Uebersicht): Bild, Note, Titel, Preis, Detail ---------- */
.tr-card--compact{border-radius:12px;border-color:#e8ecf3;box-shadow:0 1px 2px rgba(15,61,47,.04)}
.tr-card--compact:hover{box-shadow:0 8px 24px rgba(15,61,47,.10);transform:translateY(-2px);border-color:#d8e0ee}
.tr-card--compact .tr-card-media{display:flex;align-items:center;justify-content:center;
  padding:14px 14px 8px;min-height:150px;background:#fff;text-decoration:none}
.tr-card--compact .tr-card-media img{max-height:132px;width:auto;object-fit:contain;
  transition:transform .18s ease}
.tr-card--compact:hover .tr-card-media img{transform:scale(1.035)}
.tr-card--compact .tr-score{top:9px;left:9px;width:42px;height:42px;
  box-shadow:0 2px 8px rgba(15,61,47,.18)}
.tr-card--compact .tr-score b{font-size:15px}
.tr-card--compact .tr-score small{font-size:9px;letter-spacing:.02em}
.tr-card--compact .tr-card-body{gap:8px;padding:0 13px 13px}
.tr-card--compact .tr-card-title{font-size:13.5px;line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tr-card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding-top:9px;border-top:1px solid #eef1f6}
.tr-card--compact .tr-price{display:flex;flex-direction:column;line-height:1.15;margin:0}
.tr-card--compact .tr-price b{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tr-ink)}
.tr-card--compact .tr-price span{font-size:10.5px;color:var(--tr-mut);margin-top:2px}
.tr-card--compact .tr-price-none{font-size:12px;font-weight:600;color:var(--tr-mut)}
.tr-btn-detail{padding:7px 13px;font-size:12.5px;font-weight:600;border-radius:8px;white-space:nowrap;
  background:#fff;color:var(--tr-brand);border:1px solid #d6ddea;text-decoration:none;transition:all .15s}
.tr-btn-detail:hover{background:var(--tr-brand);color:#fff;border-color:var(--tr-brand)}
@media (max-width:640px){
  .tr-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
}
/* Hier standen bis zum 13.09.2026 sechs weitere Zeilen: Bildhoehe, Titel- und
   Preisgroesse, die gestapelte Fusszeile und die Ausrichtung von "Details".
   Sie sind ersatzlos entfernt, weil der Block "bis 760px" in der Mobil-Schicht
   jede einzelne von ihnen ueberschreibt — sie standen frueher in der Datei und
   waren damit tote Deklarationen. Was die Karte auf dem Telefon tut, steht jetzt
   an genau einer Stelle. */

/* ==========================================================================
   MOBIL-SCHICHT — 12.09.2026
   Alle Bildschirmabfragen, die Grundregeln von oben zuruecknehmen, stehen ab hier.
   Warum gesammelt am Dateiende und nicht jeweils neben der Regel: bei gleicher
   Spezifitaet entscheidet allein die Quellreihenfolge. Genau daran ist die alte
   Mobil-Regel fuer .tr-ueb-side gescheitert — sie stand VOR der Regel, die sie
   aufheben sollte, und war dadurch im gesamten Bereich 0-900px wirkungslos, ohne
   dass irgendwo ein Fehler auftauchte. Am Dateiende kann das nicht mehr passieren.
   Reihenfolge innerhalb dieses Abschnitts: von breit nach schmal. Die schmalere
   Abfrage MUSS spaeter stehen, sonst gewinnt die breitere bei gleicher Spezifitaet.
   ========================================================================== */

/* --- Waagerecht scrollende Tabellen: sichtbarer Hinweis, dass rechts mehr steht ---
   Die Top-10-Tabelle ist 916 bis 1059 px breit, ihr Behaelter mobil 330 px; sichtbar
   waren drei von neun Spalten, der Affiliate-Knopf lag 535 px ausserhalb. overflow-x
   allein zeigt auf iOS keinen Balken, solange niemand scrollt — der Nutzer sieht eine
   Tabelle, die am Rand einfach aufhoert. Die beiden hellen Verlaeufe haengen am Inhalt
   (local) und decken die beiden Schattenverlaeufe ab, solange an dieser Seite nichts
   mehr kommt; ragt Inhalt darueber hinaus, wird der Schatten frei. Der Hinweis zeigt
   sich also von selbst nur dort, wo es wirklich weitergeht — ohne Skript und ohne
   Overlay, das Antipper abfangen koennte. Farbwerte: dasselbe #fff, das der Behaelter
   schon traegt, und der Schattenton des Moduls rgba(15,61,47,...) — seit dem
   Palettenwechsel der Markenton, damit alle Schatten des Moduls einer Familie
   angehoeren. Der Hinweis wird dadurch nicht schwaecher: der alte Navyton
   rgba(16,32,64,.17) ergab 1,41:1 gegen Weiss, der neue ergibt 1,37:1 — dieselbe
   Kante, andere Nuance.
   ------------------------------------------------------------------------------- */
.tr-table-wrap{
  background-image:
    linear-gradient(to right,#fff,rgba(255,255,255,0)),
    linear-gradient(to left,#fff,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(15,61,47,.17),rgba(15,61,47,0)),
    linear-gradient(to left,rgba(15,61,47,.17),rgba(15,61,47,0));
  background-position:left center,right center,left center,right center;
  background-size:34px 100%,34px 100%,15px 100%,15px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}

/* --- H1 der Kategorieseiten ins Designsystem holen ----------------------------
   Die Ueberschrift ist ein Elementor-Heading-Widget ausserhalb von .tr-ueb; die
   Modulregel .tr-h1 erreicht sie deshalb nie (gemessen: 29px, Roboto, rgb(17,17,17)
   aus dem Theme). Der Selektor traegt 0,2,1 und schlaegt damit die Theme-Regel auf
   blankem h1 (0,0,1); uebersicht.css wird ausserdem nach style.css und nach den
   Elementor-Dateien geladen (im Quelltext geprueft). Keine eigenen Farbwerte, nur
   Tokens — der Palettenumbau soll genau eine Stelle haben. Aussenabstaende bleiben
   unangetastet: die setzt Elementor am Widget, nicht an der Ueberschrift.
   ----------------------------------------------------------------------------- */
.elementor-location-archive h1.elementor-heading-title{font-family:var(--tr-font);color:var(--tr-ink);font-weight:800;font-size:30px;line-height:1.2}

/* ---------- bis 900px: Telefon und kleines Tablet ---------- */
@media(max-width:900px){
  /* 1. Ruecknahme der klebenden Filterspalte — der eigentliche Hauptfehler.
        Longhand gegen Longhand, damit overflow-y:auto der Grundregel sicher
        getroffen wird; overscroll:auto gibt den Wisch wieder an die Seite weiter. */
  .tr-ueb-form{grid-template-columns:minmax(0,1fr)}
  .tr-ueb-main{min-width:0}
  .tr-ueb-side{position:static;max-height:none;overflow-x:visible;overflow-y:visible;overscroll-behavior:auto}

  /* 2. Seitenrand: 16px, der gleiche Rand, den Kopf- und Fusszeile des Chrome halten.
        Der volle Wert steht hier und nicht 6px als Ergaenzung zu Elementors 10px:
        Das Chrome-Bauteil "mobil" raeumt Elementors Polster auf der Archivvorlage
        ausdruecklich weg (mobil.css, .trc-on .elementor-location-archive
        .elementor-widget-shortcode{padding:0}) und ueberlaesst den Rand dem Modul.
        Beide Arbeiten hatten das je fuer sich geloest — 6 + 0 ergab 6px statt 16.
        Ist das Chrome abgeschaltet, bleiben Elementors 10px stehen und es werden 26px:
        etwas breit, aber nie zu eng. */
  .tr-ueb{padding-left:16px;padding-right:16px}
  .tr-kva-helper{padding-left:14px;padding-right:14px}

  /* 3. Schriftgroesse der Formularfelder: Safari auf iOS zoomt bei jedem Feld unter
        16px in die Seite hinein und zoomt nicht von selbst zurueck. Elf Felder je
        Kategorieseite heisst: bei praktisch jeder Filterbenutzung. */
  .tr-facet-select select,.tr-range input,.tr-sort select{font-size:16px}

  /* 4. Antippflaechen. 25px hohe Filterzeilen und ein 17px hoher Zuruecksetzen-Knopf
        sind mit dem Finger nicht sicher zu treffen. Der negative Aussenabstand am
        Zuruecksetzen haelt die Kopfzeile trotz groesserer Flaeche gleich hoch. */
  /* Nach Facettenart getrennt, weil .tr-facet-chip .tr-opt (0,2,0) eine schlichte
     .tr-opt-Regel (0,1,0) schlagen wuerde — die Chips waeren sonst weiter 25px hoch. */
  .tr-facet-checkbox .tr-opt{padding:9px 6px}
  .tr-facet-chip .tr-opt{padding:9px 12px}
  /* Gemessen blieb der Zuruecksetzen-Knopf trotz des Polsters bei 41px — 3px unter
     der Grenze, weil seine Zeilenhoehe nur 17px betraegt. min-height statt mehr
     Polster, damit der negative Aussenabstand weiter passt und die Kopfzeile des
     Filters nicht waechst. */
  .tr-reset{display:inline-flex;align-items:center;min-height:var(--tr-touch);padding:12px 8px;margin:-12px -8px}
  .tr-facet-select select,.tr-sort select{padding:11px 12px}
  .tr-range input{padding:10px}
  .tr-btn-sm{padding:12px 14px}
  .tr-kh-opt{padding:12px 16px}
  .tr-btn-detail{padding:10px 13px}

  /* 5. Optionslisten zweispaltig. Der Hersteller-Filter allein hatte 49 Eintraege
        und damit die halbe Filterhoehe; groessere Antippflaechen haetten das noch
        verschlimmert. Zwei Spalten fangen das ohne Skript wieder auf. Bereichs- und
        Auswahlfelder bleiben ausgenommen — die brauchen die volle Breite. */
  .tr-facet-checkbox .tr-facet-opts,.tr-facet-chip .tr-facet-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:4px 8px}
  .tr-opt-l{min-width:0;overflow-wrap:anywhere}

  /* 6. Sehr lange Listen zusaetzlich deckeln. :has zaehlt die Eintraege; erst ab dem
        25. bekommt die Liste eine Hoehe und scrollt in sich selbst. Das ist die kleine
        Schwester des Fehlers, den Punkt 1 behebt — deshalb bewusst nur 320px (rund ein
        Drittel des Bildschirms statt 96 %) und mit weiterreichendem Wisch. Faellt :has
        aus, bleibt die Liste offen; unerreichbar wird dadurch nie etwas.
        Der Verlauf oben/unten zeigt an, dass die Liste weitergeht. */
  .tr-facet-opts:has(>.tr-opt:nth-child(25)){max-height:320px;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;
    background-image:
      linear-gradient(#fff,rgba(255,255,255,0)),
      linear-gradient(rgba(255,255,255,0),#fff),
      linear-gradient(rgba(15,61,47,.15),rgba(15,61,47,0)),
      linear-gradient(rgba(15,61,47,0),rgba(15,61,47,.15));
    background-position:top center,bottom center,top center,bottom center;
    background-size:100% 24px,100% 24px,100% 10px,100% 10px;
    background-repeat:no-repeat;
    background-attachment:local,local,scroll,scroll}

  /* 7. Schriftgroessen des Filters auf die eigene Skala ziehen. Gemessen trug der
        Filterkopf 13px und die Optionszeile 14px — auf dem Telefon dieselben Werte
        wie am 1.440px-Bildschirm, obwohl die Textspalte von 1.240 auf 358px faellt.
        --tr-fs-400 ist im Designsystem das Bedien-Register (Navigation, Knoepfe,
        Filter, Kartentitel) und hat mit 15px keinen Halbpixelwert.
        Kindselektor statt Nachfahre, damit die Regel die aeltere .tr-facet h4
        (gleiche Spezifitaet, weiter oben) sicher schlaegt und nicht zufaellig eine
        Ueberschrift innerhalb einer Facette mitnimmt. */
  .tr-facet>h4{font-size:var(--tr-fs-400)}
  .tr-opt{font-size:var(--tr-fs-400)}
}

/* ---------- bis 760px: die Karte und das Empfehlungsband ---------- */
/* Hier liegt die Antwort auf Meldung 1 ("mobil verbuggt, Buttons zu gross").
   WARUM 760 UND NICHT 560 WIE IM KONZEPT: Der Abschneidefehler der Aktionszeile ist
   keine Telefon-Eigenheit. Gemessen bei 390px Sichtbreite ist die Karte 175px breit
   und "Vergleichen" fehlen 14px. Bei 700px Sichtbreite ist die Karte 224px breit und
   den beiden Schaltern bleiben je 92px — noetig sind rund 105. Der Fehler reicht also
   bis an den Desktop heran. 760 ist der breiteste Haltepunkt, den diese Datei schon
   kennt, und liegt unter der 768er-Grenze des Designsystems; oberhalb bleibt alles
   unveraendert. Zwischen 761 und 900px bleibt der Schnitt bestehen — er gehoert in
   karte.css, siehe Quittung. */
@media(max-width:760px){

  /* 1. EMPFEHLUNGSBAND QUER STATT HOCH.
        .tr-picks faellt unter 760px auf eine Spalte und .tr-pick bleibt dabei die
        Desktop-Saeule: Abzeichen, 130px Bild, Name, Zeile, Knopf — dreimal
        untereinander. Gemessen 913px, also 1,1 Bildschirme, bevor ueberhaupt etwas
        anderes kommt. Das Bild verlaesst deshalb den Fluss nach links; der Text
        behaelt seine Reihenfolge und wird linksbuendig, weil zentrierter Flattersatz
        neben einem Bild keine Kante hat, an der das Auge zurueckspringt.
        position:absolute und nicht Raster: die Vorlage bringt je nach Aufrufer vier
        oder fuenf Zeilen mit (der KVA-Block hat eine Preiszeile mehr), und eine
        Rasterplatzierung, die beide Faelle ohne Leerzeile trifft, laesst sich nicht
        schreiben, solange die Zeilenzahl im Markup nicht feststeht.
        112px Mindesthoehe = 88px Bild + 2x12px Polster: das Bild kann damit nie aus
        dem Kasten ragen, auch wenn der Text kuerzer ist als das Bild. */
  .tr-picks{gap:var(--tr-s-3)}
  .tr-pick{position:relative;align-items:flex-start;justify-content:center;text-align:left;
    gap:var(--tr-s-1);padding:var(--tr-s-3) var(--tr-s-3) var(--tr-s-3) 112px;min-height:112px}
  .tr-pick-media{position:absolute;left:var(--tr-s-3);top:50%;transform:translateY(-50%);
    width:88px;height:88px}
  .tr-pick-media img{max-height:88px}
  /* Der Notenkreis behaelt sein Verhaeltnis zum Bild: 46 von 130 waren 35%, 38 von 88
     sind 43% — knapp mehr, weil eine zweistellige Note unter 38px unleserlich wird. */
  .tr-pick-media .tr-score{width:38px;height:38px}
  .tr-pick-media .tr-score b{font-size:14px}
  .tr-pick-media .tr-score small{font-size:8px}
  .tr-pick-cta{margin-top:var(--tr-s-1)}

  /* 2. DIE KARTE WIRD IN GANZER FLAECHE ZUR TREFFERFLAECHE.
        Gemessen trug die Karte drei Links auf EIN Ziel: Bild, Titel und der Knopf
        "Details". Dazwischen lagen tote Zonen — wer auf den Preis tippte, loeste
        nichts aus. Der Deckel am Titel-Link macht die ganze Karte antippbar; die
        beiden Schalter und der Variantenumschalter liegen mit z-index darueber und
        bleiben eigenstaendig bedienbar. Das ist die Voraussetzung dafuer, "Details"
        streichen zu duerfen, ohne Trefferflaeche zu verlieren. */
  .tr-card{position:relative}
  .tr-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
  .tr-card .trc-karte-aktionen,.tr-card .trc-var,.tr-card button{position:relative;z-index:2}

  /* 3. "DETAILS" ENTFAELLT.
        Gemessen 155x50px = 7.750px2 mobil gegen 66,6x44px = 2.930px2 am Desktop: der
        Knopf ist auf dem kleinen Bildschirm 2,6-mal so gross wie auf dem grossen. Das
        ist die Beobachtung "die Buttons sind teilweise zu gross", und er fuehrt an das
        Ziel, das Bild und Titel schon erreichen. Mit Punkt 2 gewinnt der Nutzer
        Flaeche, statt sie zu verlieren.
        display:none und nicht Markup: das Element bleibt fuer Breiten ueber 760px und
        fuer die Vergleichstabelle bestehen. Der ersatzlose Ausbau gehoert in loader.php
        und steht in der Quittung — bis dahin wirkt diese Zeile.
        Die Fusszeile wird damit wieder zur Reihe wie am Desktop: sie war nur
        gestapelt, um dem Knopf eine eigene volle Zeile zu geben. */
  .tr-card .tr-btn-detail{display:none}
  .tr-card-foot{flex-direction:row;align-items:flex-end;gap:var(--tr-s-2)}

  /* 4. VERGLEICHEN UND MERKEN WERDEN SYMBOLSCHALTER.
        Rechnung, warum Beschriftungen hier nicht nachjustierbar sind: die Zeile traegt
        Innenabstand, die beiden Schalter teilen sich den Rest zu gleichen Teilen
        (flex:1 1 0). "Vergleichen" braucht mit Symbol rund 105px. Bei 440px
        Sichtbreite — breiter als jedes gaengige Telefon — hat die Karte 199px und
        jeder Schalter 83px. Zwei beschriftete Schalter passen im zweispaltigen Raster
        auf kein Telefon; gemessen abgeschnitten wurde von 380 bis 440px durchgehend.
        Deshalb 44x44 mit Symbol. Die Beschriftung wird NICHT entfernt, sondern nur
        aus dem Bild genommen (1px-Ausschnitt): Screenreader und Sprachsteuerung lesen
        "Vergleichen" und "Merken" weiter, display:none haette den Namen geloescht.
        Rechts ausgerichtet, weil der Preis links darueber steht und beide sonst um
        dieselbe Kante konkurrieren.
        BRUECKE: Solange die Zeile aus dem Chrome-Bauteil karte.php kommt, greifen
        diese Regeln ueber .tr-card (0,2,x) und schlagen karte.css (0,1,x) unabhaengig
        von der Ladereihenfolge. Zieht die Zeile wie in der Quittung beschrieben ins
        Modul, werden sie wirkungslos und koennen entfallen — kaputt geht dabei nichts. */
  /* flex-direction GEHOERT hier ausdruecklich hin: karte.css setzt unter 380px
     flex-direction:column. Hoehere Spezifitaet wirkt nur auf Eigenschaften, die
     tatsaechlich dastehen — ohne diese Zeile blieb die Spalte auf 360 und 375px in
     Kraft, den verbreitetsten Telefonbreiten. Die beiden 44px-Schalter standen dort
     untereinander statt nebeneinander und die Karte wurde rund 52px HOEHER statt
     niedriger; gemessen 342px auf 360px gegen 290px auf 390px. */
  .tr-card .trc-karte-aktionen{flex-direction:row;justify-content:flex-end;gap:var(--tr-s-2);
    padding:var(--tr-s-1) 13px 13px;margin-top:calc(var(--tr-s-2) * -1)}
  .tr-card .trc-karte-aktionen>*{flex:0 0 var(--tr-touch);width:var(--tr-touch);
    min-width:var(--tr-touch);height:var(--tr-touch);min-height:var(--tr-touch);padding:0;gap:0}
  .tr-card .trc-vgl-toggle__text,.tr-card .trc-merk-btn__text{position:absolute;
    width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;border:0}

  /* 5. DER PLATZ GEHT AN DAS PRODUKT.
        Der Bildbereich war der einzige Kartenteil, der mobil gegenueber dem Desktop
        VERLIERT: 98 von 330px (29,7%) gegen 154 von 339px (45,4%). Die Karte
        verkleinerte ihren Inhalt und behielt ihre Bedienung. 104px Bildhoehe plus
        8/6px Polster ergeben die 118px, die der Bildbereich jetzt bekommt. */
  .tr-card--compact .tr-card-media{min-height:118px;padding:10px 10px 6px}
  .tr-card--compact .tr-card-media img{max-height:104px}

  /* 6. TYPOGRAFIE DER KARTE UND DER LISTENUEBERSCHRIFT.
        Gemessen war der Kartentitel mobil 12,5px und der Preiszusatz 10,5px — beides
        Halbpixelwerte, die das Designsystem ersatzlos gestrichen hat, und beides unter
        dem Bedien-Register fs-400. Der Preis selbst stand mobil auf 15px gegen 17px am
        Desktop; diese Ausnahme ist oben entfallen, er traegt jetzt ueberall 17px.
        Die Listenueberschrift stand auf 22px — ein Wert, den die Skala nicht kennt. */
  .tr-card--compact .tr-card-title{font-size:var(--tr-fs-400)}
  .tr-card--compact .tr-price span{font-size:var(--tr-fs-200)}
  .tr-h2{font-size:var(--tr-fs-600)}
}

/* ---------- bis 600px ---------- */
@media(max-width:600px){
  .elementor-location-archive h1.elementor-heading-title{font-size:24px}
}

/* ---------- bis 560px ---------- */
@media(max-width:560px){
  /* Innenpolster der Produktseiten-Panels: 24px je Seite kosten auf einem 390px
     breiten Bildschirm ein Sechstel der Textbreite. */
  .tr-pd-head{padding:16px}
  .tr-pd-specs,.tr-pd-desc,.tr-pd-verdict,.tr-pd-pricehist,.tr-pd-tests,.tr-pd-videos{padding:14px 16px}
  .tr-vid-karte{padding:12px 13px}
  .tr-pd-specs th{width:40%;padding:9px 8px}
  .tr-pd-specs td{padding:9px 8px}

  /* Beleg-Box: die Zeile ist eine Flex-Reihe aus Punkt, Titel, Beschreibung und
     Status. Der Status traegt flex:none und schob sich bei langen Titeln aus dem
     Behaelter — das ist der gemessene Ueberlaeufer von 5,7px (em "noch keine" in
     .tr-beleg-pillars, im Quelltext der Produktseite belegt). Die Beschreibung
     bekommt mobil eine eigene Zeile, damit Titel und Status nebeneinander passen. */
  .tr-beleg-pillars li{flex-wrap:wrap;row-gap:2px}
  .tr-beleg-pillars b{min-width:0;overflow-wrap:anywhere}
  .tr-beleg-sub{flex:1 1 100%;order:3;min-width:0}
  .tr-beleg-pillars em{margin-left:auto}
}

/* ---------- bis 520px ---------- */
@media(max-width:520px){
  /* Angebotszeile als Block statt als dreispaltige Tabelle: die Preisspalte traegt
     white-space:nowrap und damit knapp 95px Mindestbreite. Fuer den Affiliate-Knopf
     blieben bei 320px noch 81px, seine Beschriftung brach auf vier Zeilen um. Als
     Block bekommt jede Angabe ihre Zeile und der Knopf die volle Breite. */
  .tr-off-table,.tr-off-table tbody,.tr-off-row,.tr-off-row td{display:block}
  .tr-off-row{padding:10px 0}
  .tr-off-row td{padding:1px 0;text-align:left}
  .tr-off-price{white-space:normal}
  .tr-off-act{text-align:left}
  .tr-off-act .tr-btn{display:block;width:100%;margin-top:8px}
}

/* ---------- bis 400px: kleine Telefone ---------- */
@media(max-width:400px){
  /* Zwei Kartenspalten erzwingen. Mit auto-fill und minmax(158px) passte bei 320px
     Bildschirm nur eine Spalte hinein, wodurch die Seite auf 55.804px wuchs — das
     Doppelte. repeat(2,minmax(0,1fr)) hat keine Mindestinhaltsbreite und passt immer.
     Der eigentliche Hebel gegen die Seitenhoehe bleibt die fehlende Blaetterung. */
  .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* Nur noch das Polster ist hier eine Ausnahme. Bildhoehe und Mindesthoehe des
     Bildbereichs stehen seit dem 13.09.2026 im 760er-Block und gelten auch hier:
     104px Bild + 8px + 6px ergeben wieder genau 118px. Zwei eigene Werte an dieser
     Stelle haetten den Bildzuwachs auf den verbreiteten Telefonbreiten (360, 390)
     still wieder zurueckgenommen — genau dort, wo er gemessen wurde. */
  .tr-card--compact .tr-card-media{padding:8px 8px 6px}
  .tr-card--compact .tr-card-body{padding:0 9px 10px}
  /* Die Aktionszeile haelt die Kante des Kartenkoerpers, der hier 9px traegt. */
  .tr-card .trc-karte-aktionen{padding:var(--tr-s-1) 9px 10px}
  .tr-facet-checkbox .tr-facet-opts,.tr-facet-chip .tr-facet-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   VORBEREITET — wirkt erst, wenn loader.php das Markup liefert
   Dieser Abschnitt ist mit dem heutigen Markup vollstaendig wirkungslos: die
   Selektoren treffen nichts. Er liegt hier, damit die Aenderung in loader.php
   einseitig bleibt und kein zweiter CSS-Ausrollvorgang noetig wird.
   Die genauen Markup-Aenderungen stehen in der Quittung zu diesem Durchgang.
   ========================================================================== */

/* Klappbare Filtergruppen ohne Skript: <details class="tr-facet"> mit
   <summary> statt <div class="tr-facet"> mit <h4>. Der Zaehler in der
   Zusammenfassung ist Pflicht, sonst weiss niemand, was sich hinter der
   geschlossenen Gruppe verbirgt. */
.tr-facet>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;margin:0;padding:11px 2px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--tr-mut);font-weight:700}
.tr-facet>summary::-webkit-details-marker{display:none}
.tr-facet>summary::after{content:"+";font-size:19px;line-height:1;color:var(--tr-brand);font-weight:700}
.tr-facet[open]>summary::after{content:"–"}
.tr-facet>summary:focus-visible{outline:2px solid var(--trc-focus-ring,var(--tr-fokus));outline-offset:2px}
.tr-facet-sum-c{font-size:11px;font-weight:600;color:var(--tr-mut);background:var(--tr-bg);border-radius:20px;padding:1px 8px;margin-left:auto}
.tr-facet>summary+.tr-facet-opts{margin-top:8px}
/* Bis 900px traegt die Zusammenfassung die Antippflaeche und das Bedien-Register des
   Designsystems: 44px hoch (--tr-touch), 15px Schrift. Auf dem Telefon ist sie der
   einzige Schalter, der die Gruppe oeffnet; ein 37px hoher Streifen mit 13px Versalien
   ist dafuer zu wenig. Die Gruppe gibt dafuer ihr eigenes Polster ab — sonst kostet
   jede geschlossene Gruppe 44 + 24px, und bei zehn Gruppen waeren das 240px, die
   nichts anzeigen. Geoeffnet kommt das untere Polster zurueck.
   Die volle Antippflaeche der Optionszeile haengt bewusst an :has(>summary): ohne
   Klappmechanik wuerde sie jede Liste um rund 5px je Zeile verlaengern und damit den
   heutigen Zustand verschlechtern; mit ihr kostet sie geschlossen nichts.
   WARUM DIESE REGELN HIER STEHEN UND NICHT IN DER MOBIL-SCHICHT: .tr-facet>summary
   wird wenige Zeilen weiter oben gesetzt. Bei gleicher Spezifitaet gewinnt die
   spaetere Regel — eine Mobil-Regel vor dieser Stelle waere wirkungslos, und genau
   diese Fehlerklasse hat dieses Stylesheet schon einmal eine ganze Mobil-Korrektur
   gekostet. */
@media(max-width:900px){
  .tr-facet>summary{font-size:var(--tr-fs-400);min-height:var(--tr-touch);padding:var(--tr-s-2) 2px}
  .tr-facet:has(>summary){padding:0}
  .tr-facet[open]:has(>summary){padding-bottom:var(--tr-s-3)}
  .tr-facet:has(>summary) .tr-opt{min-height:var(--tr-touch)}
}
/* Am Desktop bleiben die Gruppen offen, obwohl das Markup sie geschlossen ausliefert.
   Wo ::details-content noch unbekannt ist, faellt die Regel weg und der Nutzer klappt
   selbst auf — funktionsfaehig bleibt es in beiden Faellen. */
@media(min-width:901px){
  .tr-facet::details-content{content-visibility:visible;block-size:auto;overflow:visible}
  /* Am Desktop ist die Gruppe immer aufgeklappt, also darf dort kein Plus/Minus stehen:
     ein "+" neben einer offenen Liste behauptet etwas Falsches. Aus demselben Grund
     kein Zeigefinger — hier ist nichts zu klicken. Beides gilt in BEIDEN Faellen,
     auch wenn der Rueckfall unten das open-Attribut setzt. */
  .tr-facet>summary{cursor:default}
  .tr-facet>summary::after{content:none}
  .tr-facet-sum-c{display:none}
}
/* Nebenspalten der Top-10-Tabelle: loader.php gibt die Klasse an th und td der
   Spalten aus, die mobil weichen duerfen. Rang, Modell, Note und Knopf bleiben. */
@media(max-width:640px){
  .tr-table .tr-col--sek{display:none}
}

/* === Modellvarianten und Ab-Preis === */
/* Uebernommen aus den Bauteilen varianten.css und abpreis.css. Die Klassennamen
   tragen weiter das trc-Praefix, obwohl der Code im Modul liegt: ein Umbenennen
   haette jede Ausgabezeile des PHP mit angefasst, ohne etwas zu verbessern.
   Erzeugt von scripts/_tr_varianten_css_bauen.mjs. */
/* =============================================================================
   Bauteil "Varianten" (trc-var*) — Umschalter zwischen den Ausfuehrungen eines
   Modells und die Farbe als Angabe.

   Zwei Erscheinungsformen, eine Form:
     .trc-var--gross   auf der Produktseite (Name + abweichender Preis)
     .trc-var--klein   auf der Produktkarte (schmaler, kleinere Schrift)

   KEIN Selektor zielt auf eine .tr-Klasse des Uebersichtsmoduls. Das Bauteil
   bringt seinen eigenen Kasten mit und passt in jeden Rahmen, in den ein anderes
   Bauteil es haengt.

   DREI STELLEN, DIE BEGRUENDUNG BRAUCHEN:

   1. Der Farbpunkt zieht seine Fuellung aus der Variable --trc-var-farbe, die das
      PHP je Punkt ins style-Attribut schreibt. Das ist der einzige Farbwert im
      ganzen Chrome, der nicht aus base.css kommt, und er darf es nicht: er ist
      ein Produktdatum (die Farbe des Geraets), keine Gestaltungsentscheidung.
      Rand, Groesse und Form bleiben hier und damit im System.

   2. Der Hinweis "seitlich wischen" ist die Affordanz zur scrollenden Spur.
      Verlaeufe sind im Chrome verboten (Designsystem 2.3), eine weiche Kante am
      Rand faellt also aus — und genau die fehlende Affordanz war der Fehler der
      Top-10-Tabelle dieses Portals: eine Liste, die am Rand aufhoert, sieht aus
      wie eine vollstaendige Liste. Also Klartext. Ohne JavaScript steht er
      immer, wenn viele Varianten vorliegen; mit JavaScript nur dann, wenn
      tatsaechlich etwas ueberlaeuft (Klassen --gemessen und --scrollt).

   3. Die Spur bekommt oben und unten 8px Innenabstand und denselben Wert als
      negativen Aussenabstand. Grund: overflow-x macht die y-Achse zur
      Klippkante, und der zweilagige Fokusring ragt 6px ueber die Schaltflaeche
      hinaus. Ohne diesen Ausgleich waere der Fokus in der Spur oben und unten
      abgeschnitten.
   ========================================================================== */

.trc-var{
  box-sizing:border-box;
  margin:var(--tr-s-4) 0;
  min-width:0;
}
.trc-var *,
.trc-var *::before,
.trc-var *::after{ box-sizing:border-box; }

/* ----------------------------------------------------------------- Kopfzeile
   Links die Achse ("Farbe", "Fassungsvermoegen"), rechts die Zahl. Die Zahl
   steht hier und nicht an den Schaltflaechen, damit auch ohne Scrollen klar
   ist, wie viele Ausfuehrungen es ueberhaupt gibt. */
.trc-var__kopf{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--tr-s-2);
  margin:0 0 var(--tr-s-2);
}
.trc-var__label{
  font-size:var(--tr-fs-100);
  font-weight:var(--tr-fw-medium);
  letter-spacing:var(--tr-ls-caps);
  text-transform:uppercase;
  color:var(--tr-mut);
  line-height:var(--tr-lh-ui);
}
.trc-var__zahl{
  font-size:var(--tr-fs-200);
  color:var(--tr-mut);
  line-height:var(--tr-lh-ui);
}

/* --------------------------------------------------------------------- Spur */
.trc-var__spur{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding:var(--tr-s-2) 0;
  margin:calc(var(--tr-s-2) * -1) 0;
}

/* Die Spezifitaet ist hier Absicht: Das Theme setzt auf Listen im Inhaltsbereich
   list-style:disc und margin-left:40px mit hoeherer Spezifitaet als .trc-var__liste.
   Gemessen an der ausgerollten Seite: display:flex aus dieser Datei kam an, list-style
   und margin nicht — vor den Farbpunkten stand ein Aufzaehlungspunkt und die Spur war
   40px eingerueckt. Der Eintrag bekommt zusaetzlich display:block: den Marker zeichnet
   display:list-item, und ihn abzuschalten ist verlaesslicher, als um list-style zu
   streiten. */
.trc-var .trc-var__liste{
  display:flex;
  flex-wrap:wrap;
  gap:var(--tr-s-2);
  margin:0;
  padding:0;
  list-style:none;
}
.trc-var .trc-var__eintrag{ margin:0; padding:0; list-style:none; display:block; }

/* Viele Ausfuehrungen (oder wenig Platz auf der Karte): eine Zeile, die scrollt.
   Umbruch bleibt die Vorgabe — er braucht keine Bedienung. */
.trc-var--viele .trc-var__liste,
.trc-var--klein .trc-var__liste{ flex-wrap:nowrap; }
.trc-var--viele .trc-var__spur,
.trc-var--klein .trc-var__spur{ scroll-snap-type:x proximity; }
.trc-var--viele .trc-var__eintrag,
.trc-var--klein .trc-var__eintrag{ scroll-snap-align:start; }

/* ------------------------------------------------------------ Schaltflaeche */
.trc-var__opt{
  display:inline-flex;
  align-items:center;
  gap:var(--tr-s-2);
  min-height:var(--tr-touch);
  padding:var(--tr-s-1) var(--tr-s-3);
  border:var(--tr-bw) solid var(--tr-line-ui);
  border-radius:var(--tr-r-md);
  background:var(--tr-surface);
  color:var(--tr-ink);
  text-decoration:none;
  font-size:var(--tr-fs-400);
  font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-tight);
  transition:background-color var(--tr-dur-1) var(--tr-ease-out),
             border-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-var__opt:hover{
  background:var(--tr-bg);
  border-color:var(--tr-brand);
}

/* Gewaehlt: Markenrand, Markentint, Markenschrift, Haekchen — vier Signale, von
   denen drei auch ohne Farbe funktionieren. Bewusst KEIN ausgegrauter oder
   flaechig gefuellter Knopf: die aktuelle Ausfuehrung ist die gewaehlte, nicht
   die gesperrte. Der Rand kommt als innerer Schatten und nicht als dickerer
   Rahmen, damit die Schaltflaeche exakt so gross bleibt wie ihre Nachbarn.
   Markenton auf Markentint misst 10,50:1 (base.css). */
.trc-var__opt--aktiv{
  border-color:var(--tr-brand);
  box-shadow:inset 0 0 0 2px var(--tr-brand);
  background:var(--tr-brand-tint);
  color:var(--tr-brand);
  font-weight:var(--tr-fw-bold);
}
.trc-var__opt--aktiv:hover{
  background:var(--tr-brand-tint);
  border-color:var(--tr-brand);
}

/* Nicht mehr lieferbar. Das kann nur die AKTUELLE Ausfuehrung sein — auf alle
   anderen wird gar nicht erst verlinkt. Gedaempft, nicht rot: "nicht lieferbar"
   ist kein Qualitaetsurteil (Designsystem 2.3). Steht nach --aktiv, damit die
   Daempfung der Markenschrift vorgeht. */
.trc-var__opt--weg{ color:var(--tr-mut); }

.trc-var__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}
.trc-var__name{ white-space:nowrap; }

/* Der Preis steht nur an den Ausfuehrungen, die anders kosten als die gezeigte.
   Deshalb ist er hier kein Hauptdarsteller, sondern eine zweite Zeile: er
   beantwortet "was kostet der Wechsel", nicht "was kostet das Geraet". */
.trc-var__preis{
  font-size:var(--tr-fs-200);
  font-weight:var(--tr-fw-medium);
  color:var(--tr-body);
  white-space:nowrap;
}
.trc-var__preis--leer{ color:var(--tr-mut); }

/* Das Haekchen erbt die Markenfarbe der gewaehlten Schaltflaeche. */
.trc-var__opt .trc-ico{ flex:none; }
.trc-var__opt--aktiv .trc-ico{ width:18px; height:18px; }

/* --------------------------------------------------------------- Farbpunkt */
.trc-var__punkt{
  flex:none;
  inline-size:14px;
  block-size:14px;
  border-radius:var(--tr-r-pill);
  border:var(--tr-bw) solid var(--tr-line-ui);
  /* Der Rand ist Pflicht, nicht Zierde: ohne ihn waere der weisse Punkt auf der
     weissen Schaltflaeche unsichtbar. --tr-line-ui misst 3,63:1 auf Weiss und
     erfuellt damit die 3:1 fuer Nicht-Text (WCAG 1.4.11). */
  background:var(--trc-var-farbe, var(--tr-bg));
}

/* ------------------------------------------------------------------ Hinweis */
.trc-var__hinweis{
  display:none;
  align-items:center;
  gap:var(--tr-s-1);
  margin:var(--tr-s-2) 0 0;
  font-size:var(--tr-fs-200);
  color:var(--tr-mut);
  line-height:var(--tr-lh-ui);
}
.trc-var__hinweis .trc-ico{ width:16px; height:16px; flex:none; }

/* Ohne JavaScript entscheidet die Zahl der Ausfuehrungen (serverseitig). */
.trc-var--viele .trc-var__hinweis{ display:flex; }
/* Mit JavaScript entscheidet die Messung: --gemessen nimmt den Hinweis weg,
   --scrollt holt ihn zurueck. Die zweite Regel hat eine Klasse mehr und
   gewinnt deshalb ohne !important. */
.trc-var--gemessen .trc-var__hinweis{ display:none; }
.trc-var--gemessen.trc-var--scrollt .trc-var__hinweis{ display:flex; }

/* --------------------------------------------------------------------- Fokus
   base.css bringt den zweilagigen Ring mit, aber die dortige :where()-Regel hat
   Spezifitaet 0 und verliert gegen die outline:none-Regeln von RehUb. Die
   zweite, staerkere Regel in base.css zaehlt die Bauteile einzeln auf; dieses
   ist neu und traegt seine Regel deshalb selbst. Gleiche Werte, keine
   Abweichung vom System. */
.trc-var a:focus-visible{
  outline:2px solid var(--trc-focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--trc-focus-halo);
}
/* Die gewaehlte Schaltflaeche behaelt ihren inneren Markenrand auch im Fokus —
   sonst verloere sie beim Tabben ihre Auszeichnung. Eine Klasse mehr als die
   Regel darueber, damit sie gewinnt. */
.trc-var .trc-var__opt--aktiv:focus-visible{
  box-shadow:inset 0 0 0 2px var(--tr-brand), 0 0 0 4px var(--trc-focus-halo);
}

/* ================================================================ Karte klein
   Auf der Produktkarte ist der Platz knapp und der Preis steht bereits an der
   Karte. Die Schaltflaechen werden schmaler und leiser — die Antippflaeche
   bleibt bei 44px, sie ist nicht verhandelbar (Designsystem 8.3). */
/* Der Streifen haengt am Kartenpreis, und dessen Block ist eine Flex-Zeile. Ohne die
   folgende Regel bekommt er nur den Rest NEBEN dem Preis — gemessen 62 von 175 px, und
   die Zahl "3 Ausfuehrungen" (75 px) wurde am Kartenrand abgeschnitten. Er gehoert auf
   eine eigene Zeile ueber die volle Kartenbreite. width UND flex-basis, damit die Regel
   auch dann greift, wenn der Preisblock kein Flex-Container ist. */
/* Der Fuss ist eine Flex-Zeile. Ohne Umbruch kann der Streifen seine ganze Zeile nicht
   bekommen: flex-basis:100% wird dann nicht umgebrochen, sondern laeuft ueber die Karte
   hinaus — gemessen 83 px ueber den rechten Kartenrand, wodurch der Karteninhalt
   verrutschte.
   Der Umbruch haengt an :has() und gilt NUR fuer Fuesse mit Streifen. Der erste Versuch
   setzte ihn auf jeden Kartenfuss — die Annahme "Preis und Zusatz passen ohnehin
   nebeneinander" war falsch: auf /wassersprudler/ brach "ab 142,99 EUR" gegen
   "2 Angebote" um und die Karte wuchs von 290 auf 373 px, auf ALLEN Karten der Seite.
   Browser ohne :has() zeigen den Streifen wie vorher beschnitten — sichtbar unschoen,
   aber ohne Hoehenschaden auf der ganzen Seite. */
.tr-card .tr-card-foot:has(.trc-var--klein){ flex-wrap:wrap; }
/* Der Streifen steht gestapelt: Kopfzeile (Achsenname + Zahl), darunter die Punkte.
   Ein Versuch, ihn in EINE Zeile zu legen, wurde gemessen und wieder verworfen — die
   hoechste Karte stieg dabei von 373 auf 402 px (/entsafter/ sogar auf 454), weil der
   Kopf mit nowrap den Platz fuer die Punktespur nahm und diese umbrach. Gestapelt ist
   hier das Kompaktere; die Messung hat gegen die Erwartung entschieden. */
.tr-card .trc-var--klein{ flex:1 0 100%; width:100%; min-width:0; margin-left:0; }
/* Auf der Karte zeigt die FARB-Achse nur die Punkte, ohne Namen und Preis.
   Gemessen: eine beschriftete Schaltflaeche ist 83 px breit, drei davon 249 px — die
   Karte ist 175 px. Das Ergebnis war eine waagerecht scrollende Spur INNERHALB einer
   Karte in einem zweispaltigen Raster: sie kaempft mit dem Seitenscrollen, und ein
   scrollIntoView auf ein Kind verschob den ganzen Karteninhalt sichtbar nach links.
   Drei Punkte brauchen rund 60 px und passen ohne Spur.
   Nur bei der Farbachse: dort ERSETZT der Punkt die Beschriftung. Bei Groesse oder
   Menge gibt es keinen Punkt, dort bliebe eine leere Schaltflaeche stehen — deshalb
   haengt die Regel an data-achse und nicht an der Kartenbreite.
   Die Beschriftung bleibt fuer Screenreader lesbar (abgeschnitten, nicht entfernt),
   und wie viele es sind, steht weiterhin im Kopf. */
.tr-card .trc-var--klein[data-achse="farbe"] .trc-var__text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.tr-card .trc-var--klein[data-achse="farbe"] .trc-var__opt{
  position:relative; padding:var(--tr-s-1); gap:0; min-width:0;
}
.tr-card .trc-var--klein[data-achse="farbe"] .trc-var__liste{ flex-wrap:wrap; }
/* Nichts im Streifen darf die Karte breiter machen, als sie ist. */
.tr-card .trc-var--klein .trc-var__spur{ max-width:100%; }
.trc-var--klein{ margin:var(--tr-s-2) 0 0; }
.trc-var--klein .trc-var__kopf{ margin-bottom:var(--tr-s-1); }
.trc-var--klein .trc-var__opt{
  padding:var(--tr-s-1) var(--tr-s-2);
  font-size:var(--tr-fs-300);
  gap:var(--tr-s-1);
}
.trc-var--klein .trc-var__punkt{ inline-size:12px; block-size:12px; }
.trc-var--klein .trc-var__preis{ font-size:var(--tr-fs-100); }
.trc-var--klein .trc-var__hinweis{ margin-top:var(--tr-s-1); }

/* ================================================================ Schmalbild
   Unter 380px bleibt fuer Punkt, Name und Preis nebeneinander kein Platz mehr;
   die Schaltflaechen duerfen dort die volle Breite nehmen. Nur in der grossen
   Fassung — auf der Karte bleibt die Reihe eine Reihe. */
@media (max-width:379px){
  /* Hier wird nichts geschoben, also darf auch nichts von Schieben reden.
     Die Regel steht vor den Umbruchregeln, damit die Messung per JavaScript
     (--gemessen --scrollt, eine Klasse mehr) sie weiterhin ueberstimmen kann. */
  .trc-var--gross .trc-var__hinweis{ display:none; }
  .trc-var--gross .trc-var__liste{ flex-wrap:wrap; }
  .trc-var--gross .trc-var__eintrag{ flex:1 1 100%; }
  .trc-var--gross .trc-var__opt{ width:100%; justify-content:flex-start; }
  .trc-var--gross .trc-var__text{
    flex-direction:row;
    align-items:baseline;
    gap:var(--tr-s-2);
    flex:1 1 auto;
    justify-content:space-between;
  }
}

/* =============================================================================
   Bauteil "Ab-Preis" (trc-preis*) — die Preisangabe und ihr Bezug.

   ZWEI ERSCHEINUNGSFORMEN, EIN BAUPRINZIP:
     Karte     — nur Innenleben. Das Markup wird in den bestehenden Preiskasten des
                 Uebersichtsmoduls gehaengt; dessen Regeln (Groesse, Farbe,
                 Zeilenfuehrung) bleiben in Kraft und werden hier NICHT angefasst.
     .trc-preis--gross — eigener Kasten fuer Produktseite, Shortcode, Elementor.

   DREI ENTSCHEIDUNGEN, DIE MAN AM ERGEBNIS NICHT SIEHT:

   1. Das Wort "ab" ist in em bemasst, nicht in einem Schriftgrad-Token. Es sitzt
      IM Zahlenelement und muss deshalb mit der Zahl mitwachsen: 17 px in der Karte,
      15 px in der Karte unter 640 px, 24 px auf der Produktseite. Ein fester Wert
      waere in genau einer dieser drei Lagen richtig. Der Faktor .68 haelt das Wort
      auf allen dreien unter der 13-px-Grenze, ab der es mit der Zahl konkurriert —
      die Zahl traegt die Information, "ab" nur ihre Einschraenkung.

   2. KEIN Selektor zielt auf eine .tr-Klasse des Moduls. Auf der Karte gilt dadurch
      weiterhin dessen Regel fuer den Zusatz (.tr-card--compact .tr-price span,
      10,5 px, --tr-mut) und gewinnt mit hoeherer Spezifitaet gegen
      .trc-preis__zusatz. Das ist gewollt: der Zusatz stand dort auch bisher in
      dieser Groesse, die Karte aendert sich also NUR um das Wort "ab". Die Vorgabe
      --tr-fs-300 greift ueberall sonst, wo das Bauteil ohne fremden Rahmen steht.

   3. .trc-preis__wert bekommt white-space:nowrap. "ab 1.222,00 EUR" darf nicht
      zwischen "ab" und der Zahl umbrechen — eine Zahl ohne ihr "ab" in der Zeile
      darueber waere genau die Falschaussage, die dieses Bauteil abstellt. Zwischen
      Zahl und EUR steht ohnehin ein geschuetztes Leerzeichen.
   ========================================================================== */

/* ----------------------------------------------------------------- gemeinsam */

.trc-preis__wert{
  white-space:nowrap;
  letter-spacing:var(--tr-ls-num);
}

/* Das "ab": kleiner, leiser, nicht fett. Es ist eine Einschraenkung der Zahl,
   keine zweite Zahl. --tr-mut ist die Stufe fuer Meta und Einheiten. */
.trc-preis__ab{
  font-size:.68em;
  font-weight:var(--tr-fw-medium);
  letter-spacing:var(--tr-ls-none);
  color:var(--tr-mut);
}

/* Der Bezug der Zahl: "2 Angebote", "5 Farben", "bei OTTO". Ohne ihn waere "ab"
   eine Werbefloskel — mit ihm eine Angabe, die man nachpruefen kann. */
.trc-preis__zusatz{
  display:block;
  font-size:var(--tr-fs-300);
  line-height:var(--tr-lh-ui);
  color:var(--tr-mut);
}

/* ------------------------------------------------------------------- gross
   Produktseite und Shortcode. Vier Zeilen in fallender Lautstaerke:
   Zahl, Bezug, Spanne, Stand. */

.trc-preis--gross{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--tr-s-1);
  margin:var(--tr-s-3) 0;
  min-width:0;
}
.trc-preis--gross *,
.trc-preis--gross *::before,
.trc-preis--gross *::after{ box-sizing:border-box; }

.trc-preis--gross .trc-preis__wert{
  font-size:var(--tr-fs-700);
  /* 800 ist laut Designsystem 4.4 fuer Zahlen reserviert — hier gilt die Reservierung. */
  font-weight:var(--tr-fw-black);
  line-height:var(--tr-lh-flat);
  color:var(--tr-ink);
}

/* Spanne und Stand stehen eine Stufe unter dem Bezug: sie beantworten eine Frage,
   die erst nach dem Bezug entsteht ("bis wohin?", "wie alt?"). */
.trc-preis__spanne,
.trc-preis__stand{
  display:block;
  font-size:var(--tr-fs-200);
  line-height:var(--tr-lh-ui);
  color:var(--tr-mut);
}

/* Kein Preis. In der Karte traegt das Modul die Gestaltung (.tr-price-none) und
   behaelt sie; hier gilt die Regel nur im eigenen Kasten. */
.trc-preis--gross .trc-preis__leer{
  font-size:var(--tr-fs-400);
  font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-ui);
  color:var(--tr-mut);
}

/* Unter 380 px wird die Zahl eine Stufe kleiner. Grund ist nicht die Zahl selbst,
   sondern die Zeile "Ausfuehrungen von 1.222,00 EUR bis 1.398,00 EUR": zwei
   Betraege in einer Zeile brauchen auf dem schmalsten Geraet Platz, und ein
   Umbruch mittendrin macht aus einer Spanne zwei Behauptungen. */
@media (max-width:379px){
  .trc-preis--gross .trc-preis__wert{ font-size:var(--tr-fs-600); }
}

/* === Tabellen im Kategorietext === */
/* Der Kategorietext wird von WooCommerce als .term-description ausgegeben und kann
   redaktionelle Tabellen enthalten. Eine davon (Entsafter, Vergleich der Bauarten)
   ist 464px breit und steckte in keinem scrollbaren Behaelter — gemessen bei 390px
   Sichtbreite: die ganze SEITE bekam 480px Breite und scrollte waagerecht.
   Das Markup kommt aus der Termbeschreibung und laesst sich nicht umbauen, ohne den
   Text anzufassen; display:block macht die Tabelle deshalb selbst zum Scrollbehaelter.
   min-width haelt die Spalten lesbar, statt sie auf Sichtbreite zu quetschen. */
.term-description table{
  display:block;
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:760px){
  /* Ab Tablet passt sie ohnehin — dort wieder eine normale Tabelle, damit die
     Spaltenbreiten sich am Inhalt ausrichten koennen. */
  .term-description table{ display:table; overflow-x:visible; }
}