/* ==========================================================================
   testranking.de — Markenschicht
   ==========================================================================

   Diese Datei tut drei Dinge und sonst nichts:

     1. Sie zieht die Grundwerte des Elternthemas auf die Marke (Designsystem 2.1,
        Tannengruen #0F3D2F seit 12.09.2026).
     2. Sie stellt die Geometrie, die das Modul-CSS vom Vorgaengertheme erwartet.
     3. Sie traegt die wenigen Altregeln, die noch etwas treffen.

   Ladeordnung: uf-basis (Prio 1) -> diese Datei (Prio 3) -> chrome.css und
   uebersicht.css des Moduls (Prio 5). Die Module gewinnen also - richtig so,
   sie sind die Oberflaeche.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Marke

   Die Werte zeigen auf die Token des Chrome-Moduls. Das ist zulaessig, obwohl
   chrome.css spaeter laedt: var() wird bei der BENUTZUNG aufgeloest, nicht bei
   der Deklaration. Der Literalwert dahinter ist der Rueckfall fuer den Fall,
   dass das Chrome abgeschaltet ist (?trc=off laedt chrome.css nicht mit).
   -------------------------------------------------------------------------- */

:root{
  --uf-link:       var(--tr-brand, #0F3D2F);
  --uf-link-hover: var(--tr-brand-hover, #0A2B21);
  --uf-link-rule:  var(--tr-brand-rule, rgba(15,61,47,.55));
  --uf-focus:      var(--tr-brand, #0F3D2F);

  --uf-ink:   var(--tr-ink,  #1c2430);
  --uf-body:  var(--tr-body, #374151);
  --uf-mut:   var(--tr-mut,  #5d6879);
  --uf-line:  var(--tr-line, #e6e9ef);
  --uf-line-ui: var(--tr-line-ui, #7c8798);

  --uf-maxw:     var(--tr-maxw, 1240px);
  --uf-pad-x:    var(--tr-pad-x, 20px);
  --uf-pad-x-sm: var(--tr-pad-x-sm, 16px);
  --uf-radius:   var(--tr-r-md, 10px);
  --uf-touch:    var(--tr-touch, 44px);
}

/* --------------------------------------------------------------------------
   2. Geometrie der Inhaltsspalte

   Der Vorgaenger lieferte hier 1080px (`.rh-container`), der eigene Kopf und
   Footer stehen seit jeher auf 1240px (`--tr-maxw`). Diese Unstimmigkeit war
   auf jeder Produkt- und Kategorieseite sichtbar: Der Inhalt stand 80px enger
   als das Band darueber.

   Mit dem neuen Theme faellt sie weg — Kopf, Inhalt und Footer teilen ab jetzt
   dieselbe Huellenbreite. Das ist die einzige gewollte Layoutaenderung des
   Umbaus und steht so in der Vergleichsmessung.
   -------------------------------------------------------------------------- */

.uf-inhalt{ padding-block: 0 0; }

/* Die Kopfzeile des Chrome steht fix; der Inhalt beginnt direkt darunter.
   Senkrechte Abstaende bringen die Module selbst mit — eine zweite Quelle
   ergaebe doppelte Luft. */
.uf-inhalt--produkt,
.uf-inhalt--kategorie{ padding-block: 0; }

.uf-inhalt--seite,
.uf-inhalt--beitrag,
.uf-inhalt--suche,
.uf-inhalt--archiv,
.uf-inhalt--404{ padding-block: var(--tr-s-5, 24px) var(--tr-s-8, 56px); }

/* Produktseite: die Kopfzone (Brotkrume + H1) sitzt auf hellem Grund und
   grenzt sich vom Rumpf ab — dieselbe Rolle, die beim Vorgaenger
   `.border-grey-bottom.whitebg` hatte. */
.uf-produkt-kopf{
  background: var(--tr-surface, #fff);
  border-bottom: 1px solid var(--uf-line);
  padding-block: var(--tr-s-3, 12px) var(--tr-s-4, 16px);
}
.uf-produkt-kopf .product_title,
.uf-produkt-kopf .uf-titel{
  font-size: var(--tr-fs-700, 1.5rem);
  line-height: var(--tr-lh-tight, 1.25);
  margin: 0;
}
.uf-produkt-rumpf{ padding-block: var(--tr-s-5, 24px) var(--tr-s-7, 40px); }

/* Kategorieseite: der Titel gehoert optisch zum Modul darunter. */
.uf-kat-kopf{ padding-block: var(--tr-s-5, 24px) 0; }
.uf-kat-kopf .uf-titel{
  font-size: var(--tr-fs-800, 1.875rem);
  line-height: var(--tr-lh-tight, 1.25);
  letter-spacing: var(--tr-ls-tight, -.015em);
}
.uf-kat-rumpf{ padding-block: var(--tr-s-4, 16px) var(--tr-s-6, 32px); }
.uf-kat-fuss{ padding-block: 0 var(--tr-s-8, 56px); }

/* --------------------------------------------------------------------------
   3. Redaktionszeile und Autorenkasten
   -------------------------------------------------------------------------- */

.uf-redaktion{
  display: flex; flex-wrap: wrap; gap: var(--tr-s-3, 12px);
  align-items: center;
  font-size: var(--tr-fs-300, .8125rem);
  color: var(--uf-mut);
  margin: 0 0 var(--tr-s-3, 12px);
}
.uf-redaktion__name{ font-weight: var(--tr-fw-medium, 600); }

.uf-autor{
  background: var(--tr-bg, #f6f8fb);
  border-color: var(--uf-line);
  border-radius: var(--tr-r-lg, 12px);
}
.uf-autor__bild{ border-radius: var(--tr-r-pill, 999px); }

/* --------------------------------------------------------------------------
   4. Brotkrume
   -------------------------------------------------------------------------- */

.uf-krume{ font-size: var(--tr-fs-300, .8125rem); }
.uf-krume-teil:last-child{ color: var(--uf-mut); }
.uf-kat-fuss .uf-krume{ margin-top: var(--tr-s-4, 16px); }

/* --------------------------------------------------------------------------
   5. Suchergebnis
   -------------------------------------------------------------------------- */

.uf-trefferliste{ display: grid; gap: var(--tr-s-2, 8px); }
.uf-treffer{
  display: flex; flex-wrap: wrap; gap: var(--tr-s-2, 8px);
  align-items: baseline; justify-content: space-between;
  padding: var(--tr-s-3, 12px);
  background: var(--tr-surface, #fff);
  border: 1px solid var(--uf-line);
  border-radius: var(--tr-r-md, 10px);
}
.uf-treffer__link{ font-weight: var(--tr-fw-medium, 600); text-decoration: none; }
.uf-treffer__link:hover{ text-decoration: underline; }

.uf-suchform{ display: flex; gap: var(--tr-s-2, 8px); margin: 0 0 var(--tr-s-5, 24px); flex-wrap: wrap; }
.uf-suchform input[type="search"]{ flex: 1 1 260px; min-height: var(--uf-touch); }
.uf-404-kats{ display: grid; gap: var(--tr-s-2, 8px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* --------------------------------------------------------------------------
   6. Altbestand

   Uebernommen aus dem Customizer-CSS (1.695 B, Stand 15.09.2026). Von den
   dortigen 14 Regeln treffen genau die folgenden noch etwas; der Rest zielte
   auf RehUb-Navigationsleisten (#2f61c1) und auf aawp-Boxen, die seit dem
   Ende der Amazon-PA-API nichts mehr rendern (gemessen: 0 aawp-Elemente auf
   14 zufaelligen Produktseiten).
   -------------------------------------------------------------------------- */

.tr-ebay-zeile{ margin: var(--tr-s-4, 16px) 0 0; }
.tr-ebay-knopf{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--uf-touch); padding: 0 var(--tr-s-4, 16px);
  font-size: var(--tr-fs-400, .9375rem); font-weight: var(--tr-fw-medium, 600);
  border: 1px solid var(--uf-line-ui); border-radius: var(--tr-r-md, 10px);
  background: var(--tr-surface, #fff); color: var(--uf-link);
  text-decoration: none;
}
.tr-ebay-knopf:hover{ border-color: var(--uf-link); background: var(--tr-bg, #f6f8fb); }

/* Der Hinweiskasten fuer nicht mehr lieferbare Geraete. Er wird heute vom
   Modul gerendert; die Altklassen bleiben, damit ein alter Inhalt, der sie
   noch traegt, nicht ungestaltet dasteht. */
.nv-box{
  background: #fff8e5; padding: var(--tr-s-3, 12px);
  border-radius: var(--tr-r-sm, 8px); margin: 0 auto; clear: both;
}
.nvt, .altt{ color: #8a6100; font-size: var(--tr-fs-500, 1.0625rem); font-weight: var(--tr-fw-medium, 600); }
a.gebrauchta{ font-weight: var(--tr-fw-medium, 600); text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 767px){
  .uf-produkt-kopf{ padding-block: var(--tr-s-2, 8px) var(--tr-s-3, 12px); }
  .uf-produkt-kopf .product_title{ font-size: var(--tr-fs-600, 1.25rem); }
  .uf-kat-kopf .uf-titel{ font-size: var(--tr-fs-700, 1.5rem); }
  .uf-treffer{ flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   8. Unterkategorien im Kategoriekopf
   -------------------------------------------------------------------------- */

.uf-kat-kinder{ margin: var(--tr-s-3, 12px) 0 0; }
.uf-kat-kinder ul{ display: flex; flex-wrap: wrap; gap: var(--tr-s-2, 8px); }
.uf-kat-kinder li{ margin: 0; }
.uf-kat-kinder a{
  display: inline-flex; align-items: center; gap: var(--tr-s-1, 4px);
  min-height: 32px; padding: 0 var(--tr-s-3, 12px);
  font-size: var(--tr-fs-300, .8125rem); font-weight: var(--tr-fw-medium, 600);
  color: var(--uf-ink); text-decoration: none;
  background: var(--tr-bg, #f6f8fb);
  border: 1px solid var(--uf-line); border-radius: var(--tr-r-pill, 999px);
}
.uf-kat-kinder a:hover{ border-color: var(--uf-link); color: var(--uf-link); }
.uf-kat-kinder__n{ color: var(--uf-mut); font-weight: var(--tr-fw-normal, 400); }

/* --------------------------------------------------------------------------
   9. Altbestand auf der Produktseite

   Vor-/Nachteile und Bildergalerie - nachgebaut aus der RehUb-Produktvorlage.
   -------------------------------------------------------------------------- */

.tr-vn, .tr-gal, .uf-pd-alttext{
  max-width: var(--tr-maxw, 1240px);
  margin: var(--tr-s-5, 24px) auto 0;
  padding: var(--tr-s-5, 24px);
  background: var(--tr-surface, #fff);
  border: 1px solid var(--uf-line);
  border-radius: var(--tr-r-lg, 12px);
}
.tr-vn__kopf, .tr-gal__kopf,
.uf-pd-abschnitt__titel{
  font-size: var(--tr-fs-600, 1.25rem);
  line-height: var(--tr-lh-tight, 1.25);
  margin: 0 0 var(--tr-s-4, 16px);
  color: var(--uf-ink);
}
.uf-pd-abschnitt__sub{ font-weight: var(--tr-fw-normal, 400); color: var(--uf-mut); }
.uf-pd-abschnitt + .uf-pd-abschnitt{ margin-top: var(--tr-s-6, 32px); }

.tr-vn__raum{ display: grid; gap: var(--tr-s-5, 24px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tr-vn__titel{
  font-size: var(--tr-fs-100, .6875rem); font-weight: var(--tr-fw-medium, 600);
  letter-spacing: var(--tr-ls-caps, .08em); text-transform: uppercase;
  color: var(--uf-mut); margin: 0 0 var(--tr-s-2, 8px);
  padding-bottom: var(--tr-s-1, 4px); border-bottom: 1px solid var(--uf-line);
}
.tr-vn__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tr-s-2, 8px); }
.tr-vn__liste li{ margin: 0; padding-left: 1.3em; position: relative; font-size: var(--tr-fs-400, .9375rem); }
.tr-vn__spalte--pro .tr-vn__liste li::before{ content: "+"; position: absolute; left: 0; color: var(--tr-top-solid, #15803d); font-weight: 700; }
.tr-vn__spalte--con .tr-vn__liste li::before{ content: "\2212"; position: absolute; left: 0; color: var(--tr-mid-solid, #b45309); font-weight: 700; }
.tr-vn__quelle{ margin: var(--tr-s-4, 16px) 0 0; font-size: var(--tr-fs-200, .75rem); color: var(--uf-mut); }

.tr-gal__raster{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--tr-s-3, 12px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tr-gal__bild{ margin: 0; }
.tr-gal__bild a{ display: block; border: 1px solid var(--uf-line); border-radius: var(--tr-r-sm, 8px); overflow: hidden; background: #fff; }
.tr-gal__bild img{ width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--tr-s-2, 8px); }
.tr-gal__bild a:hover{ border-color: var(--uf-link); }

.uf-pd-alttext img{ max-width: 100%; height: auto; }
.uf-pd-alttext table{ font-size: var(--tr-fs-400, .9375rem); }