/*
 * testranking.de — Chrome-Stylesheet (Header, Mega-Menue, Suche, Vergleich, Konto,
 * Footer, Startseite). Namensraum trc-. Bestehende tr-Klassen des Uebersichtsmoduls
 * werden NICHT umdefiniert. Der Basis-Layer steht zuerst, alle Bauteile nutzen nur
 * seine Tokens.
 * Erzeugt von scripts/_tr_chrome_assemble.mjs — nicht von Hand aendern.
 */

/* ========================================================================== */
/* Basis-Layer: Tokens und geteilte Bauteile — nicht veraendern           */
/* ========================================================================== */
/* chrome-base.css — Tokens und geteilte Bauteile. Nicht verändern. */
/* --------------------------------------------------------------------------
   FARBWECHSEL 12.09.2026 — Marke von Blau auf Tannengruen #0F3D2F.

   Auftrag des Betreibers: der Kopf traegt die Marke vollflaechig, Schrift Weiss.
   Warum genau dieser Gruenwert: #0F3D2F misst 12,15:1 auf Weiss, das Altblau
   (der bisherige Wert von --tr-blue) misst 12,14:1. Der Tausch findet bei
   praktisch gleicher Helligkeit statt. Daraus folgen zwei Dinge, die weiter
   unten nicht mehr begruendet werden: jeder bestehende Nachweis, in dem
   --tr-blue vorkam, bleibt auf die zweite Nachkommastelle gueltig, und die
   Schatten behalten ihre Deckkraft, weil gleiche Luminanz gleich stark
   abdunkelt.

   Die alten Hexwerte stehen in dieser Datei bewusst NIRGENDS — auch nicht im
   Kommentar. Die Gegenprobe (scripts/_tr_farbfundstellen.mjs --gegenprobe)
   durchsucht den Dateitext, nicht die Regeln, und meldet jeden Altblau-Wert
   als offene Markenfundstelle. Ein Wert, der nur zur Erklaerung dasteht,
   wuerde das Tor dauerhaft rot halten. Nachzulesen sind sie in
   output/chrome/gruen/fundstellen.md §2.

   Diese Datei faerbt Tokens und die geteilten Bauteile. Sie faerbt NICHT den
   Kopf selbst: der Kopfgrund steht in bauteile/header.php Z. 211 (kritisches
   Inline-CSS an wp_head 999) und gewinnt die Kaskade gegen jedes Stylesheet.
   Bleibt diese Zeile weiss, bleibt der Kopf weiss.

   Alle Zahlen hier sind Ausgabe von scripts/_tr_kontrast.mjs, gerechnet aus
   genau den Werten, die daneben stehen; Deckkraftfarben wurden VORHER auf
   ihren Grund gemalt. Die vollstaendige Tabelle (53 Paare, 0 verfehlt) steht
   am Dateiende. Bestandsaufnahme: output/chrome/gruen/fundstellen.md
   -------------------------------------------------------------------------- */
:root{
  /* --- Marke (Designsystem 2.1) ------------------------------------------
     Bedienung und Marke, nie Bewertung. Der Kopf, der Primaerknopf, der
     Marker und der Fokusring ziehen alle aus --tr-brand.                    */
  --tr-brand:       #0F3D2F;   /* Links, Primaerbutton, Fokusring, Marker, Logo, Kopfgrund */
  --tr-brand-hover: #0A2B21;   /* Hover/Active auf der Marke */
  --tr-brand-tint:  rgba(15,61,47,.08);  /* Flaechen: aktive Zeile, Chip, Badge */
  /* Der Unterstrich stand bisher auf Deckkraft .28 und mass damit 1,71:1
     (Altwert blau: 1,73:1) — unterhalb jeder Schwelle. .55 hebt ihn auf
     3,24:1 auf Weiss und 3,18:1 auf --tr-bg und bleibt trotzdem deutlich
     leichter als die Linkschrift darueber (12,15:1). Das ist der einzige
     Wert dieser Palette, der nicht 1:1 aus dem Altbestand uebersetzt ist.  */
  --tr-brand-rule:  rgba(15,61,47,.55);  /* Link-Unterstrich im Fliesstext */
  --tr-brand-inv:   #8FD3B8;   /* NUR auf dunklem Grund (Footer) */

  /* --- Altnamen: Uebergang, kein Dauerzustand -----------------------------
     --tr-blue steht ausserhalb dieser Datei noch an 123 Stellen (neun
     Bauteile plus das Modul bau/uebersicht.css, gezaehlt 12.09.2026).
     Umbenennen waere eine eigene, rein mechanische Welle; bis dahin zeigt der
     Altname auf den richtigen. In DIESER Datei wird der Altname nicht mehr
     benutzt — alle geteilten Bauteile unten ziehen direkt aus --tr-brand.

     OFFENE AUFGABE (Ausschleichung): --tr-blue* in den Bauteilen durch
     --tr-brand* ersetzen, danach diese fuenf Zeilen loeschen. Fertig ist das
     erst, wenn  grep -rn -- "--tr-blue" output/chrome/  leer bleibt.

     ZWEI GRENZEN DES ALIAS, die er nicht ueberwinden kann:
     1. bau/uebersicht.css Z. 2 definiert --tr-blue am .tr-ueb selbst neu.
        Die naehere Deklaration gewinnt; dort hilft nur eine Aenderung vor Ort.
     2. Er faerbt auch die Stellen mit, die BEDEUTUNG tragen statt Marke
        (Bestwert-Zelle, Erfolgsmeldung, Empfehlungs-Badge). Die duerfen nicht
        gruen werden — dafuer gibt es --tr-mark direkt darunter.             */
  --tr-blue:        var(--tr-brand);
  --tr-blue-hover:  var(--tr-brand-hover);
  --tr-blue-tint:   var(--tr-brand-tint);
  --tr-blue-rule:   var(--tr-brand-rule);
  --tr-blue-inv:    var(--tr-brand-inv);

  /* --- Neutrale Hervorhebung: weder Marke noch Note -----------------------
     Solange Blau die Marke war, konnte es auch den besten Wert markieren —
     der Kommentar in vergleich.css Z. 150-152 waehlte es ausdruecklich WEIL
     es keine Bewertung bedeutet. Genau diese Eigenschaft verliert die Farbe
     mit dem Wechsel: eine gruen markierte Bestwert-Zelle liest sich als Note.
     Designsystem Z. 141 verbietet den gruenen Erfolgshinweis woertlich.

     Deshalb eine eigene Stufe ohne Farbton. Sie ist bewusst unbunt: was keine
     Wertung sein soll, darf keine der fuenf Bedeutungsfarben streifen. Getragen
     wird die Markierung von Flaeche und Zeichen (Haekchen), nicht vom Ton.

     Warum .10 und nicht .06 wie im Vorschlag: rgba(28,36,48,.06) ergibt
     #f1f2f3 und liegt dE76 2,3 neben --tr-bg #f6f8fb — die Bestwert-Zelle
     waere in derselben Tabelle von der Hover-Zeile nicht zu trennen gewesen.
     .10 ergibt #e8e9ea: dE76 5,3 zu --tr-bg und 4,4 zum Tabellenkopf. Zum
     Vergleich der heutige blaue Tint an derselben Stelle: 3,7 bzw. 2,1.

     --tr-mark zeigt auf --tr-ink, das erst weiter unten deklariert wird. Das
     ist zulaessig: var() wird bei der BENUTZUNG aufgeloest, nicht bei der
     Deklaration. Der Verweis statt einer zweiten Kopie von #1c2430 ist
     Absicht — es soll genau eine unbunte Dunkelstufe im Haus geben.         */
  --tr-mark:        var(--tr-ink);        /* Schrift, Haekchen, Rand der Markierung */
  --tr-mark-tint:   rgba(28,36,48,.10);   /* gemalt auf Weiss: #e8e9ea */
  --trc-best-tint:  var(--tr-mark-tint);  /* Altname aus fundstellen.md §5 */

  --tr-ink:         #1c2430;   /* Ueberschriften, Zahlen, Footer-Grund */
  --tr-body:        #374151;   /* Fliesstext */
  --tr-mut:         #5d6879;   /* Meta, Einheiten, Quellen */

  --tr-surface:     #ffffff;   /* Panel, Karte, Tabelle, Suchblatt */
  --tr-bg:          #f6f8fb;   /* eingelassene Flaeche, Chip, Hover-Grund */
  --tr-bg-head:     #f1f4f9;   /* Tabellenkopf */

  --tr-line:        #e6e9ef;   /* dekorativer Trenner */
  --tr-line-strong: #d6ddea;   /* Hover-Rand auf Karten */
  --tr-line-ui:     #7c8798;   /* Rand von Eingabefeld, Umriss-Button, Checkbox */

  --tr-top-solid:   #15803d;   /* Note <= 1,5 */
  --tr-good-solid:  #4d7c0f;   /* Note <= 2,5 */
  --tr-mid-solid:   #b45309;   /* Note <= 3,5 */
  --tr-low-solid:   #dc2626;   /* Note >  3,5 */

  /* Footer (unveraendert, Designsystem 2.1). Seit dem Farbwechsel ist er
     nicht mehr der einzige dunkle Bereich — der Kopf ist der zweite. Beide
     kehren den Fokusring lokal um, siehe Abschnitt "Gruener Kopf" unten. */
  --trc-footer-bg:  #1c2430;
  --trc-footer-fg:  #cfd6e2;   /* 10,69:1 auf dem Footergrund */
  --trc-footer-mut: #9aa7b8;   /*  6,39:1 */
  --trc-footer-link:#ffffff;   /* 15,62:1 */

  /* --- Kopfgrund ----------------------------------------------------------
     Der zweite grossflaechig farbige Bereich. Die Werte stehen hier und nicht
     im Kopf-Bauteil, damit jedes Bedienelement IM Kopf (Logo, Menue, Suche,
     Aktionen) aus derselben Quelle zieht; das Bauteil darf sie lokal
     ueberschreiben. Gemessen gegen #0F3D2F.                                 */
  --trc-kopf-bg:      var(--tr-brand);
  --trc-kopf-fg:      #ffffff;              /* 12,15:1 — Schrift und Symbole */
  --trc-kopf-fg-mut:  #9fb8ae;              /*  5,75:1 — Meta, Geraetezahlen.
                                               Trifft die Rolle von --tr-mut,
                                               das auf Weiss 5,64:1 misst.   */
  --trc-kopf-flaeche: rgba(255,255,255,.10);/* Hoverflaeche, gemalt #275044,
                                               Weiss darauf 9,06:1           */
  --trc-kopf-linie:   rgba(255,255,255,.45);/* Rand/Trenner, gemalt #7b948d,
                                               3,75:1 gegen den Grund        */

  /* --- Fokus: Ring innen, Halo aussen (Designsystem 5.4) ------------------
     Der Ring folgt der Marke und misst auf allen hellen Gruenden ueber 10:1
     (Weiss 12,15, --tr-bg 11,42, Markentint 10,50). Auf den beiden dunklen
     Flaechen der Seite kehrt er sich lokal um — Footer wie Kopf, siehe unten. */
  --trc-focus-ring: var(--tr-brand);
  --trc-focus-halo: rgba(255,255,255,.92);

  --tr-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --tr-fs-100:.6875rem; --tr-fs-200:.75rem;   --tr-fs-300:.8125rem;
  --tr-fs-400:.9375rem; --tr-fs-500:1.0625rem;--tr-fs-600:1.25rem;
  --tr-fs-700:1.5rem;   --tr-fs-800:1.875rem;

  --tr-lh-flat:1.15; --tr-lh-tight:1.25; --tr-lh-ui:1.5; --tr-lh-read:1.7;
  --tr-fw-normal:400; --tr-fw-medium:600; --tr-fw-bold:700; --tr-fw-black:800;
  --tr-ls-tight:-.015em; --tr-ls-none:0; --tr-ls-caps:.08em; --tr-ls-num:-.01em;

  --tr-s-1:4px; --tr-s-2:8px; --tr-s-3:12px; --tr-s-4:16px;
  --tr-s-5:24px; --tr-s-6:32px; --tr-s-7:40px; --tr-s-8:56px;

  --tr-maxw:1240px; --tr-maxw-text:660px; --tr-pad-x:20px; --tr-pad-x-sm:16px;

  --tr-r-xs:4px; --tr-r-sm:8px; --tr-r-md:10px; --tr-r-lg:12px;
  --tr-r-xl:14px; --tr-r-pill:999px;
  --tr-bw:1px; --tr-bw-marker:3px; --tr-touch:44px;

  /* Traegerfarbe folgt der Marke. Deckkraft unveraendert: Alt- und Neumarke
     haben dieselbe Luminanz (12,14 zu 12,15 auf Weiss), der Schatten faellt
     also gleich stark aus wie bisher. */
  --tr-sh-1:0 1px 2px rgba(15,61,47,.06), 0 2px 8px rgba(15,61,47,.06);
  --tr-sh-4:0 12px 32px rgba(15,61,47,.14), 0 2px 8px rgba(15,61,47,.08);

  --tr-dur-1:120ms; --tr-dur-2:200ms;
  --tr-ease-out:cubic-bezier(.2,.7,.3,1);
  --tr-ease-in-out:cubic-bezier(.4,0,.2,1);

  --trc-header-h:64px; --trc-header-h-dicht:52px;
  --trc-header-z:100; --trc-panel-z:110; --trc-bar-z:90;
}

html{ font-family:var(--tr-font); font-size:100%;
      scroll-padding-top:calc(var(--trc-header-h) + 8px); }

/* visuell versteckt, für Screenreader vorhanden */
.trc-vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Zahlen */
.trc-num{ font-variant-numeric:tabular-nums lining-nums;
          font-feature-settings:"tnum" 1,"lnum" 1; }

/* Versalien-Label */
.trc-eyebrow,.trc-colhead{
  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);
  padding-bottom:var(--tr-s-1); border-bottom:1px solid var(--tr-line);
  margin:0 0 var(--tr-s-3);
}

/* Marker — das einzige Hervorhebungszeichen. Höchstens einer je Bildschirmbereich,
   im Mega-Panel höchstens einer je Spalte.
   Er faellt auf jedem Grund anders aus: auf hellem Grund die Marke, im Footer
   die aufgehellte Marke, auf dem Kopfgrund Weiss (Abschnitt "Gruener Kopf"). */
.trc-marker{ position:relative; }
.trc-marker::after{ content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:var(--tr-bw-marker); background:var(--tr-brand); }
.trc-footer .trc-marker::after{ background:var(--tr-brand-inv); }

/* Buttons */
.trc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--tr-s-2);
  min-height:var(--tr-touch); padding:0 var(--tr-s-4);
  font:var(--tr-fw-medium) var(--tr-fs-400)/var(--tr-lh-ui) var(--tr-font);
  border-radius:var(--tr-r-md); border:1px solid transparent;
  background:var(--tr-brand); color:#fff; text-decoration:none; cursor:pointer;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out),
             border-color var(--tr-dur-1) var(--tr-ease-out); }
.trc-btn:hover{ background:var(--tr-brand-hover); }
.trc-btn--umriss{ background:transparent; color:var(--tr-brand);
  border-color:var(--tr-line-ui); }
.trc-btn--umriss:hover{ background:var(--tr-bg); border-color:var(--tr-brand); }
.trc-btn[aria-pressed="true"]{ background:var(--tr-brand); color:#fff;
  border-color:var(--tr-brand); }

/* Notenpille — weisser Text ausschliesslich auf den -solid-Werten */
.trc-note{ display:inline-flex; align-items:center; gap:var(--tr-s-1);
  min-height:24px; padding:0 var(--tr-s-2); border-radius:var(--tr-r-pill);
  font-size:var(--tr-fs-300); font-weight:var(--tr-fw-black); color:#fff;
  font-variant-numeric:tabular-nums lining-nums; }
.trc-note--top { background:var(--tr-top-solid); }
.trc-note--good{ background:var(--tr-good-solid); }
.trc-note--mid { background:var(--tr-mid-solid); }
.trc-note--low { background:var(--tr-low-solid); }
.trc-note--keine{ background:var(--tr-bg); color:var(--tr-mut);
  border:1px solid var(--tr-line-ui); font-weight:var(--tr-fw-medium); }

/* Fokus: zweilagiger Ring, siehe §5.4 — beide Regelblöcke übernehmen */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* --------------------------------------------------------------------------
   Fokus (Designsystem 5.4). Zwei Lagen, damit der Fokus auch auf dem
   Primaerbutton, der Notenpille und dem dunklen Footer sichtbar bleibt.
   Die Regel steht bewusst ZWEIMAL: einmal mit :where() (Spezifitaet 0, leicht
   zu ueberschreiben, falls ein Bauteil es braucht) und einmal mit normaler
   Spezifitaet. Die zweite Fassung ist Pflicht, solange RehUb- und
   Elementor-CSS mitlaufen - deren outline:none-Regeln gewinnen sonst.

   outline-offset:2px ist hier mehr als Kosmetik: der Ring liegt dadurch nicht
   auf dem Element, sondern auf dem Grund dahinter. Deshalb misst er auch am
   Rand einer Notenpille gegen den Seitengrund (12,15:1) und nicht gegen die
   Notenfarbe - die Marke muss sich von der Note nicht freistellen.
   -------------------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--trc-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--trc-focus-halo);
  border-radius: inherit;
}

.trc-header a:focus-visible, .trc-header button:focus-visible,
.trc-nav a:focus-visible, .trc-nav button:focus-visible, .trc-nav summary:focus-visible,
.trc-footer a:focus-visible, .trc-footer button:focus-visible,
.trc-suche input:focus-visible, .trc-suche button:focus-visible,
.trc-vgl a:focus-visible, .trc-vgl button:focus-visible,
.trc-merk a:focus-visible, .trc-merk button:focus-visible,
.trc-konto a:focus-visible, .trc-konto button:focus-visible,
.trc-home a:focus-visible, .trc-home button:focus-visible{
  outline: 2px solid var(--trc-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--trc-focus-halo);
}

/* Dunkler Bereich: der Ring kehrt um, sonst verschwaende er im Footergrund. */
.trc-footer{ --trc-focus-ring:#ffffff; --trc-focus-halo:rgba(28,36,48,.92); }

/* ==========================================================================
   GRUENER KOPF — was die geteilten Bauteile auf dem Markengrund brauchen

   Alles, was vom dunklen Kopfgrund abhaengt, steht hier an einer Stelle,
   damit es beim naechsten Farbwechsel nicht wieder ueber die Datei verstreut
   gesucht werden muss. Drei Faelle, alle drei gemessen:

   1. Der Fokusring kehrt um wie im Footer. Ohne diese Zeile zoege er aus
      --tr-brand und laege mit 1,00:1 unsichtbar auf dem eigenen Kopfgrund —
      und zwar in ALLEN Bauteilen gleichzeitig, auch in denen, die sauber
      var(--trc-focus-ring) benutzen.
   2. Der Kopf ist NICHT durchgehend dunkel. Im DOM haengen zwei weisse Inseln
      unter .trc-header: das aufgeklappte Mega-Panel (.trc-panel__innen,
      megamenue.css Z. 127) und das Suchblatt (.trc-suche__blatt, suche.css
      Z. 118). Beide holen den dunklen Ring zurueck, sonst waere er dort weiss
      auf weiss. Das Suchfeld selbst braucht das NICHT: es steht auf dem Band,
      der Ring liegt durch outline-offset 2px neben dem Feld auf dem Gruen.
   3. Marker und Primaerknopf tragen die Marke als FLAECHE. Auf dem
      gleichfarbigen Kopf waeren beide 1,00:1 — der Knopf ein unsichtbares
      Rechteck mit weisser Schrift. Sie kehren sich deshalb um: Weiss traegt,
      die Marke schreibt.

   Betroffen ist heute genau ein Knopf, der Absender der Suche (suche.php
   Z. 557 traegt .trc-btn und liegt in header.php Z. 184 im Band); die
   Aktionen rechts sind .trc-aktion, kein .trc-btn. Die Umriss-Fassung steht
   trotzdem mit hier, damit der naechste Knopf im Kopf nicht neu bricht.
   ========================================================================== */
.trc-header{ --trc-focus-ring:#ffffff; --trc-focus-halo:rgba(15,61,47,.92); }

.trc-header .trc-panel__innen, .trc-header .trc-suche__blatt{
  --trc-focus-ring:var(--tr-brand); --trc-focus-halo:rgba(255,255,255,.92);
}

.trc-header .trc-marker::after{ background:var(--trc-kopf-fg); }
/* Im aufgeklappten Panel steht heute kein Marker. Kaeme einer dorthin,
   braeuchte er hier die Gegenregel auf var(--tr-brand). */

.trc-header .trc-btn,
.trc-header .trc-btn[aria-pressed="true"]{
  background:var(--trc-kopf-fg); color:var(--tr-brand);
  border-color:var(--trc-kopf-fg);
}
/* Deckkraft statt zweiter Hexwert: die weisse Flaeche laesst 14 Prozent des
   Bandes durch und liegt damit immer auf dem Kopfgrund, egal wie er getoent
   wird. Gemalt auf #0F3D2F ergibt das #dde4e2 — Marke darauf 9,41:1, die
   Flaeche gegen das Band ebenfalls 9,41:1. */
.trc-header .trc-btn:hover{ background:rgba(255,255,255,.86); }

.trc-header .trc-btn--umriss{
  background:transparent; color:var(--trc-kopf-fg);
  border-color:var(--trc-kopf-linie);
}
.trc-header .trc-btn--umriss:hover{
  background:var(--trc-kopf-flaeche); border-color:var(--trc-kopf-fg);
}

/* --------------------------------------------------------------------------
   hidden muss hidden bedeuten.

   Die einzige Stelle im gesamten Chrome mit !important, und sie ist noetig:
   Das Regelwerk liefert alle Zusatzfunktionen mit dem Attribut `hidden` aus und
   laesst sie erst von JavaScript sichtbar machen. Das Attribut zieht seine
   Wirkung aber nur aus der Browser-Grundregel [hidden]{display:none} — und die
   verliert gegen JEDE Regel eines Stylesheets, auch gegen eine einzelne Klasse.

   Live beobachtet: .trc-konto-dialog{position:fixed;inset:0;display:flex} hat
   die Grundregel ausgehebelt. Der Anmeldedialog lag damit unsichtbar ueber der
   gesamten Seite und fing jeden Klick ab — Vergleichen und Merken waren auf
   allen Kategorieseiten nicht bedienbar, ohne dass irgendetwas kaputt aussah.

   Kein Bauteil macht ein Element ueber CSS sichtbar; alle schalten `el.hidden`
   um und entfernen damit das Attribut. Diese Regel kann deshalb nichts
   blockieren, was gezeigt werden soll.
   -------------------------------------------------------------------------- */
[hidden]{ display:none !important; }

/* ==========================================================================
   KONTRASTTABELLE — 53 Paare, 0 verfehlt.

   Gerechnet mit scripts/_tr_kontrast.mjs am 12.09.2026, WCAG 2.1 §1.4.3 und
   §1.4.11. Pflicht: 4,5:1 fuer Text, 3:1 fuer Grossschrift (>=18,66px fett
   bzw. >=24px) und fuer Raender von Bedienelementen. Geprueft wird auf dem
   UNGERUNDETEN Wert — 4,4974 ist kein AA. Deckkraftfarben sind vor der
   Messung auf ihren Grund gemalt; der gemalte Hexwert steht dabei.

   AUF WEISS #ffffff
   #0F3D2F  --tr-brand              12,15:1  AAA
   #0A2B21  --tr-brand-hover        15,21:1  AAA
   #1c2430  --tr-ink / --tr-mark    15,62:1  AAA
   #374151  --tr-body               10,31:1  AAA
   #5d6879  --tr-mut                 5,64:1  AA
   #7c8798  --tr-line-ui             3,64:1  Pflicht 3:1 erfuellt
   #15803d  Note 1                   5,02:1  AA
   #4d7c0f  Note 2                   4,99:1  AA
   #b45309  Note 3                   5,02:1  AA
   #dc2626  Note 4                   4,83:1  AA
   rgba(15,61,47,.55) = #7b948d  --tr-brand-rule   3,24:1  Pflicht 3:1 erfuellt

   AUF SEITENGRUND #f6f8fb (--tr-bg)
   #0F3D2F  11,42:1 AAA | #1c2430  14,68:1 AAA | #374151   9,69:1 AAA
   #5d6879   5,30:1 AA  | #7c8798   3,42:1 Pflicht 3:1 | #dc2626  4,54:1 AA
   rgba(15,61,47,.55) = #77918b   3,18:1  Pflicht 3:1 erfuellt

   AUF MARKENTINT rgba(15,61,47,.08), gemalt auf Weiss = #ecefee
   #0F3D2F  10,50:1 AAA (Altwert an derselben Stelle: 10,47:1)
   #1c2430  13,50:1 AAA | #374151   8,91:1 AAA | #5d6879   4,88:1 AA

   AUF MARKIERUNGSTINT rgba(28,36,48,.10)
   gemalt auf Weiss = #e8e9ea:  #1c2430  12,85:1 AAA | #374151  8,48:1 AAA
                                #5d6879   4,64:1 AA
   gemalt auf --tr-bg = #e0e3e7: #1c2430 12,13:1 AAA
   Flaechentrennung (dE76): zu --tr-bg 5,3 | zum Tabellenkopf 4,4 | zu Weiss 7,7.
   Der heutige blaue Tint an derselben Stelle trennt sich um 3,7 bzw. 2,1 —
   die neutrale Markierung steht also staerker als die, die sie ersetzt.

   WEISSE SCHRIFT AUF FARBFLAECHE
   #0F3D2F  12,15:1 AAA  Kopfgrund, Primaerknopf, Zaehler-Badge
   #0A2B21  15,21:1 AAA  Primaerknopf Hover
   #15803d   5,02:1 AA   Notenpille 1     | #4d7c0f  4,99:1 AA  Notenpille 2
   #b45309   5,02:1 AA   Notenpille 3     | #dc2626  4,83:1 AA  Notenpille 4

   AUF DEM KOPFGRUND #0F3D2F
   #ffffff  --trc-kopf-fg                          12,15:1  AAA
   #9fb8ae  --trc-kopf-fg-mut                       5,75:1  AA
   rgba(255,255,255,.45) = #7b948d  --trc-kopf-linie  3,75:1  Pflicht 3:1
   #7c8798  --tr-line-ui als Feldrand               3,34:1  Pflicht 3:1
   #ffffff  weisse Flaeche (Suchfeld, Kopfknopf)   12,15:1  Pflicht 3:1
   rgba(255,255,255,.86) = #dde4e2  Kopfknopf Hover  9,41:1  Pflicht 3:1
   #0F3D2F  Marke auf dieser Hoverflaeche            9,41:1  AAA
   rgba(255,255,255,.10) = #275044  --trc-kopf-flaeche  1,35:1  dekorativ,
            reine Hover-Rueckmeldung (heute .trc-header__menue:hover mit
            --tr-bg auf Weiss: 1,05:1 — also staerker als bisher);
            Weiss darauf misst 9,06:1 AAA.
   #ffffff  Marker im Kopf                         12,15:1  Pflicht 3:1

   FOKUS
   #0F3D2F  Ring auf Weiss                12,15:1  Pflicht 3:1
   #0F3D2F  Ring auf --tr-bg              11,42:1  Pflicht 3:1
   #0F3D2F  Ring auf --tr-brand-tint      10,50:1  Pflicht 3:1
   #ffffff  Ring im Kopf gegen den Kopf   12,15:1  Pflicht 3:1
   rgba(15,61,47,.92) = #224d40  Kopf-Halo gegen ein weisses Feld  9,59:1
   #ffffff  Ring gegen den Kopf-Halo       9,53:1  Pflicht 3:1
   #ffffff  Ring im Footer                15,62:1  Pflicht 3:1
   rgba(28,36,48,.92) = #2e3641  Footer-Halo gegen Weiss          12,27:1

   AUF FOOTERGRUND #1c2430
   #8FD3B8  --tr-brand-inv  9,06:1  Pflicht 3:1 (Altwert des Tokens: 8,52:1)
   #cfd6e2  --trc-footer-fg   10,69:1 AAA
   #9aa7b8  --trc-footer-mut   6,39:1 AA
   #ffffff  --trc-footer-link 15,62:1 AAA

   ==========================================================================
   WAS AUF DEM KOPFGRUND ZERBRICHT — gemessen, damit es niemand dort benutzt
   ==========================================================================
   Altblau  Altmarke (Zaehler-Badge)        1,00:1  vollstaendig unsichtbar
   #0F3D2F  Marke auf Marke                 1,00:1  vollstaendig unsichtbar
   #374151  --tr-body                       1,18:1  unlesbar
   #1c2430  --tr-ink                        1,29:1  unlesbar
   #5d6879  --tr-mut                        2,15:1  unlesbar
   #15803d  Note 1                          2,42:1  Marke und Note nicht trennbar
   Jedes Bedienelement im Kopf, das seine Farbe SELBST setzt, schlaegt die
   Vererbung von .trc-header und landet in dieser Liste. Die Fundstellen dazu
   stehen in output/chrome/gruen/fundstellen.md §5.

   ==========================================================================
   DER PREIS DES WECHSELS — er ist nicht wegzurechnen
   ==========================================================================
   Marke gegen die beste Note, heute und neu:
     heute  Altblau / #15803d   2,42:1 Helligkeit, dE76 100,1 (deutan 82,6)
     neu    #0F3D2F / #15803d   2,42:1 Helligkeit, dE76  42,3 (deutan 33,5)
     neu    #0F3D2F / #16a34a   3,69:1 Helligkeit, dE76  59,7 (deutan 47,2)
   Der Helligkeitsabstand bleibt, der Wahrnehmungsabstand faellt um knapp 60
   Prozent: Marke und Note teilen jetzt eine Farbfamilie. Aufgefangen wird das
   nicht von Farbe, sondern von Form — die Notenpille traegt immer die Ziffer
   und ist immer rund und gefuellt, der Marker ist immer 3 px hoch und nie
   gefuellt, und die neutrale Markierung (--tr-mark) traegt gar keinen Ton.
   ========================================================================== */


/* ========================================================================== */
/* Wortmarke / Logo (trc-logo)  [logo]                                    */
/* ========================================================================== */
/* ==========================================================================
   trc-logo v2 - Marke "testranking"
   Eine Zeichnung: das Bildzeichen als erstes "t", danach die Wortmarke in
   Pfaden (Archivo 400/800). Kein Text, keine Schriftdatei, kein Request.

   WAS HIER NOCH ZU STEUERN IST, ist deshalb wenig: Hoehe, Farbe, Polster und
   die Skalenlinie. Alles andere steckt im SVG.

   GROESSE ausschliesslich ueber --trc-logo-fs. Der Wert behaelt seine Bedeutung
   aus v1 (er entsprach dort der Schriftgroesse); die Hoehe des SVG wird daraus
   gerechnet. Der Faktor 0,94 ist das Verhaeltnis Kastenhoehe zu em der
   Entwurfsgroesse (94 zu 100) - er bringt die Marke optisch auf dieselbe
   Groesse, die v1 bei gleichem --trc-logo-fs hatte.
   ========================================================================== */
.trc-logo{
  --trc-logo-fs:23px;          /* Basis = mobil */
  /* Die Akzentfarbe MUSS eine Custom Property sein und darf keine Klasse im SVG
     ansprechen: Das Zeichen wird ueber <use> eingebunden, und Selektoren aus dem
     Dokument treffen den Shadow-Tree nicht. Custom Properties werden vererbt und
     kommen dort an. Im SVG steht zusaetzlich ein harter Rueckfall. */
  --trc-logo-akzent:var(--tr-brand-inv,#8FD3B8);

  box-sizing:border-box;
  /* inline-flex + flex-end statt inline-block: mit min-height:44px auf einem
     inline-block wandert die Skalenlinie rund 6px von der Marke weg. */
  display:inline-flex;
  align-items:flex-end;
  min-height:var(--tr-touch,44px);
  padding:var(--tr-s-2,8px) 0 5px;   /* 5px: optische Korrektur, nicht im 4er-Raster */

  /* Die Marke steht ausschliesslich auf dunklem Grund - im Markenband des Kopfes
     (#0F3D2F) und im Footer (#1c2430). Deshalb helle Zeichnung: Ink auf dem
     Kopfgrund misst 1,29:1, Weiss misst 12,15:1.
     ACHTUNG: Wer --trc-logo-fs auf einer hellen Flaeche setzt, muss auch color
     und --trc-logo-akzent umstellen; ohne dunklen Grund ist die Marke unsichtbar. */
  color:var(--trc-kopf-fg,#fff);

  text-decoration:none;
  background:none;
  border:0;
  /* Die Skalenlinie ist Zierde, kein Bedienzeichen. Als heller Hauch auf dem Band
     traegt sie 1,72:1 - --tr-line-strong waere hier ein greller Strich. */
  border-bottom:var(--tr-bw,1px) solid rgba(255,255,255,.18);
  box-shadow:none;
}

/* Die Zeichnung. width:auto laesst das Seitenverhaeltnis aus dem viewBox kommen
   (6,0181), damit nichts verzerrt. fill:currentColor bindet Buchstaben und
   Zeichenstriche an color - eine Farbe, eine Stelle. */
.trc-logo__svg{
  display:block;
  height:calc(var(--trc-logo-fs) * .94);
  width:auto;
  fill:currentColor;
}

/* Groessenstufen. Bewusst als min-width; rechnerisch identisch mit v1. */
/* Die Stufen sind gegen die Navigation GEMESSEN, nicht gesetzt: Bei --trc-logo-fs:22px
   waren die Buchstaben der Marke 15,1px hoch - und die Menuepunkte daneben 15px. Eine
   Wortmarke, die genauso gross ist wie die Navigation, liest sich als Menuepunkt. Die
   Werte hier bringen sie auf rund 19px Buchstabenhoehe, also gut ein Viertel ueber der
   Navigation. Archivo baut ausserdem kompakter als die frueher benutzte Systemschrift;
   ein Teil des Zuwachses holt nur diesen Unterschied auf. */
@media (min-width:768px){
  .trc-logo{ --trc-logo-fs:28px; }
}
/* Klasse setzt das Header-Bauteil beim Scrollen; gewinnt bewusst gegen die
   Media Query, damit der verdichtete Zustand auf jeder Breite 20px misst. */
.trc-header--dicht .trc-logo{ --trc-logo-fs:24px; }

/* Footer: dunkler Grund, dieselbe Zeichnung, nur groesser. Beide Selektoren,
   damit die Marke auch ohne Modifier-Klasse richtig sitzt. */
.trc-logo--footer,
.trc-footer .trc-logo{
  --trc-logo-fs:34px;
  color:#fff;
  border-bottom-color:rgba(255,255,255,.16);
}

/* Startseitenkopf: kein Link, also kein Trefferfeld und kein oberer Innenabstand. */
.trc-logo--inline{ min-height:0; padding-top:0; }

/* Windows-Kontrastmodus: Farben werden verworfen. Ohne diesen Block faellt der
   Haken aus (er ist das Einzige, was nicht currentColor traegt) und uebrig bliebe
   ein blosses "t". forced-color-adjust:none haelt die eigene Farbgebung. */
@media (forced-colors: active){
  .trc-logo{ border-bottom-color:CanvasText; --trc-logo-akzent:CanvasText; }
  .trc-logo__svg{ forced-color-adjust:none; fill:CanvasText; color:CanvasText; }
}


/* ========================================================================== */
/* Suche 0.2.1 (trc-suche, trc-treffer) + gemeinsame Preisregel und Anzeigename (Abschnitt 3b)  [suche] */
/* ========================================================================== */
/* ==========================================================================
   chrome.css - Bauteil: SUCHE (Fassung 0.2.0)
   Eigentuemer dieser Klassen: trc-suche* (Feld, Vorschlagsblatt) und
   trc-treffer* (Ergebnisseite), Spez. 9.2. Nutzt (und aendert nicht): die
   Tokens des Basis-Layers, .trc-btn, .trc-note, .trc-num, .trc-vh.
   Mobile first, nur min-width-Breakpoints. Kein !important, keine IDs,
   kein Selektor auf eine tr-*-Klasse des Uebersichtsmoduls.
   ========================================================================== */

.trc-suche{
  --trc-suche-halo:var(--trc-focus-halo,#fff);
  position:relative;
  display:flex; align-items:center; gap:var(--tr-s-2);
  /* Umbruch statt Breakpoint: faellt das Feld unter 180px (320px Sichtfeld bei
     200 % Zoom), rutscht die Absende-Taste in die zweite Zeile (Spez. 4.4). */
  flex-wrap:wrap;
  width:100%; margin:0;
}

/* --- Eingabefeld: weisse Insel, auch im Markenband (Kante 12,15:1) --------- */
.trc-suche__feld{
  position:relative; flex:1 1 180px; min-width:0;
  display:flex; align-items:center;
}
.trc-suche__lupe{
  position:absolute; left:var(--tr-s-3); top:50%;
  transform:translateY(-50%);
  display:inline-flex; color:var(--tr-mut); pointer-events:none;
}
.trc-suche__eingabe{
  width:100%; min-width:0; box-sizing:border-box;
  height:var(--tr-touch);
  padding:0 var(--tr-s-3) 0 var(--tr-s-7);
  font-family:var(--tr-font);
  font-size:var(--tr-fs-500);   /* 17px: iOS zoomt in Felder unter 16px */
  line-height:var(--tr-lh-ui);
  color:var(--tr-ink);
  background:var(--tr-surface);
  border:var(--tr-bw) solid var(--tr-line-ui);
  border-radius:var(--tr-r-md);
  appearance:none; -webkit-appearance:none;
  transition:border-color var(--tr-dur-1) var(--tr-ease-out);
}
/* Rechts Platz fuer die Loeschtaste - nur wenn Text drinsteht. Leer bleibt der
   Platzhalter so lang wie bisher (im 280px-Kopffeld zaehlt jeder Pixel). */
.trc-suche__eingabe:not(:placeholder-shown){ padding-right:var(--tr-s-7); }
.trc-suche__eingabe::placeholder{ color:var(--tr-mut); opacity:1; }
.trc-suche__eingabe:hover{ border-color:var(--tr-brand); }
.trc-suche__eingabe::-webkit-search-decoration,
.trc-suche__eingabe::-webkit-search-cancel-button{ appearance:none; -webkit-appearance:none; }

/* Eigene Loeschtaste statt der nativen (14px, auf dem Rand, nicht bedienbar). */
.trc-suche__leeren{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tr-s-7); height:var(--tr-s-7);
  padding:0; margin:0; border:0; border-radius:var(--tr-r-sm);
  background:transparent; color:var(--tr-mut); cursor:pointer;
}
.trc-suche__leeren:hover{ color:var(--tr-ink); background:var(--tr-bg); }

/* --- Absende-Taste -------------------------------------------------------- */
.trc-suche__senden{ flex:0 0 auto; padding:0 var(--tr-s-3); }
@media (min-width:560px){
  .trc-suche__senden{ padding:0 var(--tr-s-4); }
}
/* Im Markenband kehrt der Knopf um (Marke auf Marke waere 1,00:1). */
.trc-header .trc-suche__senden{
  background:var(--trc-kopf-fg,#fff);
  color:var(--tr-brand,#0F3D2F);
  border-color:var(--trc-kopf-fg,#fff);
}
.trc-header .trc-suche__senden:hover{
  background:#ecefee;
  color:var(--tr-brand-hover,#0A2B21);
  border-color:#ecefee;
}

/* ==========================================================================
   VORSCHLAGSBLATT
   Rechtsbuendig am Formular und mindestens 460px breit: im Kopf ist das Feld
   nur 280-340px schmal, darin waren Geraetenamen nach ~30 Zeichen abgeschnitten
   (Befund: "Kaiser Kuechengeraete Side-by-Sid…"). Nie breiter als das Sichtfeld.
   Die Hoehe rechnet suche.js aus dem sichtbaren Platz (Bildschirmtastatur).
   ========================================================================== */
.trc-suche__blatt{
  position:absolute; z-index:var(--trc-panel-z);
  top:calc(100% + var(--tr-s-2)); right:0; left:auto;
  width:max(100%, min(460px, calc(100vw - 32px)));
  max-height:var(--trc-suche-blatt-max, min(72vh, 480px));
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  color:var(--tr-ink);   /* haengt im Markenband und erbt sonst weisse Schrift */
  background:var(--tr-surface);
  border:var(--tr-bw) solid var(--tr-line);
  border-radius:var(--tr-r-xl);
  box-shadow:var(--tr-sh-4);
  padding:var(--tr-s-2);
  text-align:left;
}
.trc-suche__liste{ display:flex; flex-direction:column; }

.trc-suche__gruppe{ padding:var(--tr-s-1) 0 0; }
.trc-suche__gruppe + .trc-suche__gruppe{
  margin-top:var(--tr-s-2);
  border-top:var(--tr-bw) solid var(--tr-line);
  padding-top:var(--tr-s-2);
}
.trc-suche__kopf{
  padding:var(--tr-s-1) var(--tr-s-2);
  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);
}

/* --- Einzeltreffer: [Symbol|Bild] [Text] [Zahl|Note] ----------------------- */
.trc-suche__treffer{
  display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:0 var(--tr-s-3);
  min-height:var(--tr-touch);
  padding:var(--tr-s-2);
  border-radius:var(--tr-r-md);
  color:var(--tr-ink); text-decoration:none;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-suche__treffer:hover{ background:var(--tr-bg); }
/* Eingebettet in Bereiche mit eigener Linkregel: die Startseite setzt
   .trc-home a{text-decoration:underline;color:…} (0,1,1) - das Vorschlagsblatt
   der grossen Suche stand dadurch komplett unterstrichen da (gemessen 26.09.2026).
   Eine Stufe spezifischer, nur im eigenen Namensraum. */
.trc-suche a.trc-suche__treffer,
.trc-suche a.trc-suche__treffer:hover,
.trc-suche a.trc-suche__alle,
.trc-suche a.trc-suche__alle:hover{ text-decoration:none; }
.trc-suche a.trc-suche__treffer,
.trc-suche a.trc-suche__treffer:hover{ color:var(--tr-ink); }
.trc-suche a.trc-suche__alle,
.trc-suche a.trc-suche__alle:hover{ color:var(--tr-brand); }
/* Tastaturauswahl IST aria-selected (Spez. 9.1). Flaeche plus Kante links -
   die Auswahl haengt nicht an der Farbe allein. */
.trc-suche__treffer[aria-selected="true"]{
  background:var(--tr-brand-tint);
  box-shadow:inset 3px 0 0 var(--tr-brand);
}
.trc-suche__symbol{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--tr-r-sm);
  background:var(--tr-bg); color:var(--tr-brand);
}
/* Umrisssymbole: uf-basis setzt svg{fill:currentColor} (basis.css Z. 248). */
.trc-suche__symbol svg,
.trc-suche__leeren svg{ fill:none; }
.trc-suche__bild{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; overflow:hidden;
  border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-sm);
  background:var(--tr-surface);
}
.trc-suche__bild img{ display:block; width:100%; height:100%; object-fit:contain; }
.trc-suche__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.trc-suche__titel{
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-tight); color:var(--tr-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Geraetenamen duerfen zweizeilig laufen - das Modell steht meist am Ende. */
.trc-suche__treffer--geraet .trc-suche__titel{
  white-space:normal;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
/* Treffer im Namen: nur Gewicht. padding/margin ausdruecklich 0 - die Grundschicht
   des Themes gibt <mark> Innenabstand, dann stand "Kühl schrank" getrennt da. */
.trc-suche__mark{
  padding:0; margin:0; border-radius:0;
  background:transparent; color:inherit;
  font-weight:var(--tr-fw-black);
}
.trc-suche__meta{
  font-size:var(--tr-fs-300); color:var(--tr-mut); line-height:var(--tr-lh-tight);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trc-suche__preis{ color:var(--tr-ink); font-weight:var(--tr-fw-bold); }
.trc-suche__anzahl{
  font-size:var(--tr-fs-300); color:var(--tr-mut); white-space:nowrap; text-align:right;
}
.trc-suche__note{ display:flex; justify-content:flex-end; min-width:var(--tr-s-7); }
.trc-suche__treffer--kombi .trc-suche__symbol{ background:transparent; color:var(--tr-mut); }

/* Laufende Anfrage: alte Geraete bleiben stehen (kein Zusammenklappen), gedimmt. */
.trc-suche__liste[aria-busy="true"] .trc-suche__gruppe--geraete .trc-suche__treffer{ opacity:.55; }

/* --- "Alle Ergebnisse" ---------------------------------------------------- */
/* Klebt am unteren Rand des Blatts: der Weg zu allen Ergebnissen ist immer
   sichtbar, auch wenn die Liste im Blatt scrollt. bottom:-8px gleicht den
   Innenabstand des Blatts aus. */
.trc-suche__alle{
  position:sticky; bottom:calc(-1 * var(--tr-s-2)); z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:var(--tr-s-3);
  min-height:var(--tr-touch);
  margin:var(--tr-s-2) calc(-1 * var(--tr-s-2)) calc(-1 * var(--tr-s-2));
  padding:var(--tr-s-2) var(--tr-s-4);
  border-top:var(--tr-bw) solid var(--tr-line);
  border-radius:0 0 var(--tr-r-xl) var(--tr-r-xl);
  background:var(--tr-surface);
  color:var(--tr-brand); text-decoration:none;
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold);
}
.trc-suche__alle:hover{ background:var(--tr-bg); }
.trc-suche__alle[aria-selected="true"]{ background:var(--tr-brand-tint); box-shadow:inset 3px 0 0 var(--tr-brand); }
.trc-suche__alle .trc-suche__symbol{ background:transparent; width:auto; height:auto; }
.trc-suche__alle-zahl{ margin-left:var(--tr-s-2); font-weight:var(--tr-fw-normal); color:var(--tr-mut); }
.trc-suche__alle-zahl .trc-num{ margin-right:2px; }

/* --- Platzhalter waehrend der ersten Anfrage (feste Hoehe: kein Springen) -- */
.trc-suche__skelett-zeile{
  display:flex; align-items:center; gap:var(--tr-s-3);
  min-height:var(--tr-touch); padding:var(--tr-s-2);
}
.trc-suche__skelett-bild{ width:48px; height:48px; border-radius:var(--tr-r-sm); background:var(--tr-bg); flex:none; }
.trc-suche__skelett-text{ display:flex; flex-direction:column; gap:var(--tr-s-2); flex:1 1 auto; }
.trc-suche__skelett-balken{ display:block; height:10px; width:78%; border-radius:var(--tr-r-xs); background:var(--tr-bg); }
.trc-suche__skelett-balken--kurz{ width:42%; }
.trc-suche__skelett-bild,
.trc-suche__skelett-balken{ animation:trc-suche-puls 1.2s var(--tr-ease-in-out) infinite alternate; }
@keyframes trc-suche-puls{ from{ opacity:1 } to{ opacity:.45 } }

/* --- Hinweiszeile (Korrektur, null Treffer, Fehler). Kein Rot (Spez. 2.3). -- */
/* Steht immer UEBER der Liste: er erklaert, was darunter kommt ("Keine Treffer -
   hier sind Einstiege", "Treffer fuer die korrigierte Schreibweise"). */
.trc-suche__hinweis{
  order:-1;
  margin:0; padding:var(--tr-s-2) var(--tr-s-2) var(--tr-s-1);
  font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui); color:var(--tr-body);
}
.trc-suche__hinweis:empty{ display:none; }
.trc-suche__hinweis--oben{ font-size:var(--tr-fs-300); color:var(--tr-mut); }

/* --- Fokus (Spez. 5.4) ---------------------------------------------------- */
.trc-suche input:focus-visible,
.trc-suche button:focus-visible,
.trc-suche a:focus-visible{
  outline:2px solid var(--trc-focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--trc-suche-halo);
}
.trc-suche__eingabe:focus-visible{ border-color:var(--tr-brand); }

/* --- Grossform (Startseite, Ergebnisseite) -------------------------------- */
.trc-suche--gross{ max-width:var(--tr-maxw-text); }
.trc-suche--gross .trc-suche__eingabe{
  height:var(--tr-s-8); font-size:var(--tr-fs-600);
  padding-left:var(--tr-s-8);
}
.trc-suche--gross .trc-suche__lupe{ left:var(--tr-s-4); }
.trc-suche--gross .trc-suche__senden{ min-height:var(--tr-s-8); }
.trc-suche--gross .trc-suche__leeren{ width:var(--tr-s-8); height:var(--tr-s-8); }
.trc-suche--gross .trc-suche__eingabe:not(:placeholder-shown){ padding-right:var(--tr-s-8); }
.trc-suche--gross .trc-suche__blatt{ left:0; right:auto; width:100%; }

/* ==========================================================================
   ERGEBNISSEITE (trc-treffer)
   Kategorie vor Geraet (Spez. 8.3), ruhige Liste statt Kachelwand, Preise nur
   aktuell und mit Datum, nie ein Platzhalterbild.
   ========================================================================== */
.trc-treffer{ padding:var(--tr-s-5) 0 var(--tr-s-7); color:var(--tr-body); }
.trc-treffer__kopf{ display:flex; flex-direction:column; gap:var(--tr-s-3); margin-bottom:var(--tr-s-6); }
/* Gleiche Stufe wie die Startseite (.trc-home__h1): 24/30px, 700. */
.trc-treffer__h1{
  margin:0; font-size:var(--tr-fs-700); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight); color:var(--tr-ink); letter-spacing:var(--tr-ls-tight);
  overflow-wrap:anywhere;
}
/* Mobil steht das vorbelegte Kopf-Suchfeld direkt darueber - ein zweites
   Feld mit demselben Begriff waere doppelt (vgl. mobil.css Abschnitt 3). */
.trc-treffer__kopf .trc-suche--gross{ display:none; }
@media (min-width:768px){
  .trc-treffer__kopf .trc-suche--gross{ display:flex; }
}
.trc-treffer__bilanz,
.trc-treffer__korrektur{ margin:0; font-size:var(--tr-fs-400); color:var(--tr-mut); }
.trc-treffer__bilanz .trc-num{ color:var(--tr-ink); font-weight:var(--tr-fw-bold); }
.trc-treffer__abschnitt{ margin-top:var(--tr-s-6); }
.trc-treffer__h2{
  margin:0 0 var(--tr-s-3); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold);
  color:var(--tr-ink); line-height:var(--tr-lh-tight);
}
.trc-treffer__kacheln,
.trc-treffer__marken,
.trc-treffer__rechner,
.trc-treffer__liste,
.trc-treffer__facetten ul{ list-style:none; margin:0; padding:0; }

.trc-treffer__kacheln,
.trc-treffer__rechner{
  display:grid; gap:var(--tr-s-2);
  grid-template-columns:repeat(auto-fill, minmax(212px, 1fr));
}
.trc-treffer__kachel,
.trc-treffer__werkzeug,
.trc-treffer__marke{
  display:flex; flex-direction:column; gap:2px; height:100%; box-sizing:border-box;
  padding:var(--tr-s-3) var(--tr-s-4);
  border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-lg);
  background:var(--tr-surface); color:var(--tr-ink); text-decoration:none;
  transition:border-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-treffer__kachel:hover,
.trc-treffer__werkzeug:hover,
.trc-treffer__marke:hover{ border-color:var(--tr-brand); }
.trc-treffer__kachel-name,
.trc-treffer__werkzeug-name,
.trc-treffer__marke-name{ font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold); line-height:var(--tr-lh-tight); }
.trc-treffer__kachel-meta,
.trc-treffer__werkzeug-frage,
.trc-treffer__marke-meta{ font-size:var(--tr-fs-300); color:var(--tr-mut); line-height:var(--tr-lh-ui); }
.trc-treffer__kachel-meta .trc-num,
.trc-treffer__marke-meta .trc-num{ color:var(--tr-ink); font-weight:var(--tr-fw-bold); }
.trc-treffer__kachel-ort{ font-size:var(--tr-fs-200); color:var(--tr-mut); }
.trc-treffer__marken{ display:flex; flex-wrap:wrap; gap:var(--tr-s-2); }

.trc-treffer__facetten{ margin:0 0 var(--tr-s-3); }
.trc-treffer__facetten ul{ display:flex; flex-wrap:wrap; gap:var(--tr-s-2); }
.trc-treffer__chip{
  display:inline-flex; align-items:center; gap:var(--tr-s-1);
  min-height:var(--tr-touch); padding:0 var(--tr-s-3); box-sizing:border-box;
  border:var(--tr-bw) solid var(--tr-line-ui); border-radius:var(--tr-r-pill);
  color:var(--tr-ink); text-decoration:none; font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium);
}
.trc-treffer__chip .trc-num{ color:var(--tr-mut); }
.trc-treffer__chip:hover{ border-color:var(--tr-brand); }
.trc-treffer__chip[aria-current]{ background:var(--tr-brand); border-color:var(--tr-brand); color:#fff; }
.trc-treffer__chip[aria-current] .trc-num{ color:#fff; }

.trc-treffer__liste{ border-top:var(--tr-bw) solid var(--tr-line); }
.trc-treffer__zeile{ border-bottom:var(--tr-bw) solid var(--tr-line); }
.trc-treffer__geraet{
  display:grid; align-items:center; gap:var(--tr-s-3);
  grid-template-columns:64px minmax(0,1fr);
  padding:var(--tr-s-3) var(--tr-s-2);
  color:var(--tr-ink); text-decoration:none;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-treffer__geraet:hover{ background:var(--tr-bg); }
.trc-treffer__bild{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-sm); background:var(--tr-surface);
}
.trc-treffer__bild img{ width:100%; height:100%; object-fit:contain; display:block; }
.trc-treffer__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.trc-treffer__name{ font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold); line-height:var(--tr-lh-tight); }
.trc-treffer__geraet:hover .trc-treffer__name{ color:var(--tr-brand); }
.trc-treffer__meta{ font-size:var(--tr-fs-300); color:var(--tr-mut); }
.trc-treffer__werte{
  grid-column:2; display:flex; align-items:center; flex-wrap:wrap; gap:var(--tr-s-2) var(--tr-s-3);
}
.trc-treffer__preis{ display:flex; flex-direction:column; }
.trc-treffer__preis .trc-num{ font-size:var(--tr-fs-400); font-weight:var(--tr-fw-black); color:var(--tr-ink); }
.trc-treffer__stand{ font-size:var(--tr-fs-200); color:var(--tr-mut); }

.trc-treffer__blaettern{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--tr-s-3);
  margin-top:var(--tr-s-5);
}
.trc-treffer__seite{ font-size:var(--tr-fs-300); color:var(--tr-mut); }
.trc-treffer__vorbehalt{ margin:var(--tr-s-4) 0 0; font-size:var(--tr-fs-200); color:var(--tr-mut); line-height:var(--tr-lh-ui); }
.trc-treffer__leer{ margin-top:var(--tr-s-5); }
.trc-treffer__leer-text{ margin:0 0 var(--tr-s-5); font-size:var(--tr-fs-500); color:var(--tr-body); }
.trc-treffer__leer .trc-treffer__h2{ margin-top:var(--tr-s-5); }

@media (min-width:768px){
  .trc-treffer__h1{ font-size:var(--tr-fs-800); }
  .trc-treffer__geraet{ grid-template-columns:64px minmax(0,1fr) auto; }
  .trc-treffer__werte{ grid-column:3; justify-content:flex-end; flex-wrap:nowrap; }
  .trc-treffer__preis{ align-items:flex-end; min-width:120px; }
}

/* --- Bewegung ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .trc-suche__treffer, .trc-suche__eingabe{ transition:none; }
  .trc-suche__skelett-bild, .trc-suche__skelett-balken{ animation:none; }
}


/* ========================================================================== */
/* Mega-Menue 0.2.0 (trc-nav, trc-panel, trc-drawer)  [megamenue]         */
/* ========================================================================== */
/* ==========================================================================
   chrome.css - Bauteil: MEGA-MENUE (Fassung 0.2.0)
   Eigentuemer dieser Klassen: trc-nav*, trc-panel*, trc-drawer*.
   Nutzt (und aendert nicht): Basis-Layer-Tokens, .trc-colhead, .trc-num,
   .trc-marker, .trc-vh. Kein !important, keine ID-Selektoren, hoechstens
   drei Ebenen tief, kein Selektor auf eine tr-*-Klasse des Uebersichtsmoduls.
   Mobile first, nur min-width-Breakpoints (Spez. 4.3; 1240 nur fuer die in
   Spez. 8.2 ausdruecklich genannte breitere Kontextspalte).

   BEHOBEN 26.09.2026 (Befund output/chrome-v3/a/befund-vorher.txt):
   - Name und Geraetezahl liefen ineinander ("Dunstabzugshauben60",
     "Kaffeevollautomaten97"), gemessen 10-15 Zeilen je Breite. Ursache: ein
     einziges langes Wort kann nicht umbrechen, die Zahl steht daneben ohne
     Mindestabstand, und die "breite" Gruppe lief in CSS-Spalten mit halber
     Breite. Jetzt: keine CSS-Spalten mehr, Silbentrennung statt Ueberlauf,
     fester Abstand zur Zahl.
   - Die Kontextspalte lief bei 1120px aus dem Panel ("Rechner & Werkzeuge"
     an der Kante abgeschnitten): feste 240px plus Innenabstand ueberstiegen
     den Rest. Jetzt minmax(0,1fr) fuer die Spalten und 220/240px Kontext.
   - Die Schublade hatte weder Abdunklung noch Scroll-Sperre: die Seite
     scrollte hinter dem Menue, halbe Textzeilen standen links daneben.
   ========================================================================== */

/* --- Fokusring, zweite Ausgabe mit normaler Spezifitaet (Spez. 5.4) -------- */
.trc-nav a:focus-visible,
.trc-nav summary:focus-visible,
.trc-drawer a:focus-visible,
.trc-drawer summary:focus-visible{
  outline:2px solid var(--trc-focus-ring, var(--tr-brand));
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--trc-focus-halo, rgba(255,255,255,.92));
}

/* ==========================================================================
   1. GEMEINSAME ZEILEN (Panel und Schublade)
   ========================================================================== */
.trc-nav__liste{ list-style:none; margin:0; padding:0; }
.trc-nav__punkt{ margin:0; }

/* Name links, Zahl rechts. Der Name darf UMBRECHEN (Silbentrennung ueber
   lang="de-DE" am Dokument) - er darf nie unter die Zahl laufen. */
.trc-nav__zeile{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--tr-s-2);
  min-height:var(--tr-touch);
  padding:var(--tr-s-1) var(--tr-s-2);
  border-radius:var(--tr-r-md);
  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),
             color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-nav__zeile:hover{ background:var(--tr-bg); color:var(--tr-brand); }
.trc-nav__zeile[aria-current]{
  background:var(--tr-brand-tint); color:var(--tr-brand); font-weight:var(--tr-fw-bold);
}
.trc-nav__name{
  min-width:0; flex:1 1 auto;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;
}
/* Feste Mindestbreite: das Raster haengt nicht davon ab, ob tabular-nums
   verfuegbar ist (Arial und aeltere Android-Stapel liefern es nicht). */
.trc-nav__zahl{
  flex:none; min-width:24px; text-align:right;
  font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium);
  color:var(--tr-mut);
}
.trc-nav__zeile:hover .trc-nav__zahl{ color:var(--tr-brand); }

/* fill:none: uf-basis setzt svg{fill:currentColor} - der Pfeil (ein offener Pfad)
   stand dadurch als gefuelltes Dreieck da statt als Winkel. */
.trc-nav__ico{
  display:block; flex:none; fill:none;
  transition:transform var(--tr-dur-1) var(--tr-ease-out);
}

/* --- Kontext: Guter Einstieg und Werkzeuge -------------------------------- */
.trc-panel__block + .trc-panel__block{ margin-top:var(--tr-s-5); }
.trc-nav__tipp,
.trc-nav__werkzeug{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  min-height:var(--tr-touch);
  padding:var(--tr-s-2);
  border-radius:var(--tr-r-md);
  color:var(--tr-ink); text-decoration:none;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-nav__tipp:hover,
.trc-nav__werkzeug:hover{ background:var(--tr-bg); }
.trc-nav__tipp[aria-current],
.trc-nav__werkzeug[aria-current]{ background:var(--tr-brand-tint); }
.trc-nav__tipp-name,
.trc-nav__werkzeug-name{
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight); color:var(--tr-ink);
}
.trc-nav__tipp:hover .trc-nav__tipp-name,
.trc-nav__werkzeug:hover .trc-nav__werkzeug-name{ color:var(--tr-brand); }
.trc-nav__tipp-meta,
.trc-nav__werkzeug-frage{
  font-size:var(--tr-fs-300); line-height:var(--tr-lh-tight); color:var(--tr-mut);
}
.trc-nav__alle{
  display:inline-flex; align-items:center; gap:var(--tr-s-1);
  min-height:var(--tr-touch); padding:0 var(--tr-s-2);
  color:var(--tr-brand); text-decoration:none;
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium);
  border-radius:var(--tr-r-md);
}
.trc-nav__alle:hover{ text-decoration:underline; text-underline-offset:3px; }
.trc-nav__alle[aria-current]{ font-weight:var(--tr-fw-bold); }
.trc-panel__erklaerung{
  margin:var(--tr-s-1) 0 0; padding:0 var(--tr-s-2);
  font-size:var(--tr-fs-200); line-height:var(--tr-lh-ui); color:var(--tr-mut);
}

/* ==========================================================================
   2. LEISTE (Header-Slot, erst ab 1120px sichtbar)
   ========================================================================== */
/* Die Leiste darf nicht unter ihren Inhalt gedrueckt werden (PROC-THEME 6a). */
.trc-nav{ min-width:max-content; }

.trc-nav__bar{
  display:flex; align-items:center; gap:var(--tr-s-1);
  list-style:none; margin:0; padding:0;
}

/* Kleinerer Pfeil (16 statt 20px) und 2px Luft: die Leiste hat bei 1120px genau
   die Breite, die das Kopfraster ihr laesst. Jeder Pixel hier geht an die
   Wortmarke zurueck, die bei 1120px als einzige nachgibt. */
.trc-nav__label{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  min-height:var(--tr-touch); min-width:var(--tr-touch);
  padding:0 var(--tr-s-2);
  border-radius:var(--tr-r-md);
  /* Das Label sitzt IM Markenband und erbt dessen weisse Schrift. */
  color:inherit; text-decoration:none;
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-ui);
  cursor:pointer; list-style:none; white-space:nowrap;
  -webkit-user-select:none; user-select:none;
}
.trc-nav__label::-webkit-details-marker{ display:none; }
.trc-nav__label:hover{ background:var(--trc-kopf-flaeche,rgba(255,255,255,.10)); color:var(--trc-kopf-fg,#fff); }
.trc-nav__text{ display:inline-block; }
.trc-nav__eintrag[open] .trc-nav__label{
  background:var(--trc-kopf-flaeche,rgba(255,255,255,.10));
  color:var(--trc-kopf-fg,#fff);
}
.trc-nav__eintrag[open] .trc-nav__label .trc-nav__ico{ transform:rotate(180deg); }
/* Marker unter dem aktiven Bereich: auf dem Markenband die aufgehellte Marke
   (#8FD3B8 auf #0F3D2F = 7,04:1), nie Marke auf Marke. */
.trc-nav__label .trc-marker::after{ background:var(--tr-brand-inv,#8FD3B8); }

/* Panel und Schublade sind im HTML Kinder des Markenbands und erben dessen
   weisse Schrift - auf ihrer weissen Flaeche waere das unsichtbar. */
.trc-panel__innen{
  color:var(--tr-ink);
  background:var(--tr-surface);
  border:var(--tr-bw) solid var(--tr-line);
  border-top:0;
  border-radius:0 0 var(--tr-r-xl) var(--tr-r-xl);
  padding:var(--tr-s-4) 0;
}
.trc-panel__raster{ display:grid; gap:var(--tr-s-5); }
.trc-panel__spalten{ display:grid; gap:var(--tr-s-5); }
.trc-panel__gruppe{ min-width:0; }
.trc-panel__kontext{ min-width:0; }

.trc-panel__fuss{
  margin-top:var(--tr-s-4); padding-top:var(--tr-s-3);
  border-top:var(--tr-bw) solid var(--tr-line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--tr-s-1) var(--tr-s-5);
}
.trc-panel__bilanz{
  margin:0; font-size:var(--tr-fs-300); color:var(--tr-body); line-height:var(--tr-lh-ui);
}
.trc-panel__bilanz .trc-num{ font-weight:var(--tr-fw-bold); color:var(--tr-ink); }
.trc-panel__wege{ margin:0; display:flex; flex-wrap:wrap; gap:var(--tr-s-4); }
.trc-nav__fusslink{
  display:inline-flex; align-items:center; min-height:var(--tr-touch);
  color:var(--tr-brand); text-decoration:none;
  font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium);
}
.trc-nav__fusslink:hover{ color:var(--tr-brand-hover); text-decoration:underline; }
.trc-panel__hinweis{
  flex:1 1 100%; margin:0;
  font-size:var(--tr-fs-200); color:var(--tr-mut); line-height:var(--tr-lh-ui);
}

/* ==========================================================================
   3. SCHUBLADE (unter 1120px; Grundzustand geschlossen)
   Ohne JavaScript oeffnet #trc-nav:target. Mit JavaScript uebernimmt
   data-offen, und die :target-Regel tritt zurueck (data-trc-js) - sonst
   bliebe die Schublade nach dem Schliessen am Anker haengen.
   visibility:hidden nimmt im geschlossenen Zustand jeden Link aus dem
   Tastaturfluss.
   ========================================================================== */
.trc-drawer{
  position:fixed; top:0; right:0; bottom:0;
  z-index:var(--trc-panel-z);
  width:min(88vw, 420px);
  display:flex; flex-direction:column;
  color:var(--tr-ink);
  background:var(--tr-surface);
  box-shadow:var(--tr-sh-4);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--tr-dur-2) var(--tr-ease-in-out),
             visibility 0s linear var(--tr-dur-2);
}
.trc-drawer:not([data-trc-js]):target,
.trc-drawer[data-offen="ja"]{
  transform:translateX(0);
  visibility:visible;
  transition:transform var(--tr-dur-2) var(--tr-ease-in-out), visibility 0s;
}

/* Abdunklung: zeigt, dass die Seite dahinter gerade nicht bedienbar ist
   (inert). Ein Klick darauf schliesst. Ohne Skript bleibt sie hidden. */
.trc-drawer-scrim{
  position:fixed; inset:0;
  z-index:calc(var(--trc-panel-z) - 1);
  background:rgba(28,36,48,.48);
  opacity:0;
  transition:opacity var(--tr-dur-2) var(--tr-ease-out);
  -webkit-tap-highlight-color:transparent;
  touch-action:none;   /* kein Mitscrollen der Seite unter dem Finger */
}
.trc-drawer-scrim[data-an]{ opacity:1; }

/* Scroll-Sperre bei offener Schublade. scrollbar-gutter haelt die Breite der
   Bildlaufleiste frei, damit die Seite beim Sperren nicht seitlich springt;
   die Scrollposition bleibt erhalten, weil nichts verschoben wird. */
html.trc-nav-offen{ overflow:hidden; scrollbar-gutter:stable; }

.trc-drawer__kopf{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--tr-s-3);
  min-height:56px; padding:0 var(--tr-s-2) 0 var(--tr-s-4);
  border-bottom:var(--tr-bw) solid var(--tr-line);
}
.trc-drawer__titel{
  font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold);
  color:var(--tr-ink); line-height:var(--tr-lh-tight);
}
.trc-drawer__zu{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tr-touch); height:var(--tr-touch);
  color:var(--tr-ink); border-radius:var(--tr-r-md); text-decoration:none;
}
.trc-drawer__zu:hover{ background:var(--tr-bg); }

.trc-drawer__inhalt{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--tr-s-1) var(--tr-s-3) var(--tr-s-4);
}
.trc-drawer__bereich{ border-bottom:var(--tr-bw) solid var(--tr-line); }
.trc-drawer__label{
  display:flex; align-items:center; gap:var(--tr-s-3);
  min-height:56px; padding:0 var(--tr-s-2);
  color:var(--tr-ink);
  cursor:pointer; list-style:none;
}
.trc-drawer__label::-webkit-details-marker{ display:none; }
.trc-drawer__text{
  display:inline-block;
  font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight);
}
.trc-drawer__meta{
  margin-left:auto;
  font-size:var(--tr-fs-300); color:var(--tr-mut); line-height:var(--tr-lh-ui);
  white-space:nowrap;
}
.trc-drawer__bereich[open] > .trc-drawer__label .trc-nav__ico{ transform:rotate(180deg); }
.trc-drawer__auszug{ padding:0 0 var(--tr-s-3); }
.trc-drawer__gruppe{ margin-top:var(--tr-s-3); }
.trc-drawer__gruppe .trc-colhead{ margin-left:var(--tr-s-2); margin-right:var(--tr-s-2); }
/* Zeilen in der Schublade sind 48px hoch (Spez. 5.5) - Daumenbedienung. */
.trc-drawer .trc-nav__zeile{ min-height:48px; }
.trc-drawer .trc-nav__tipp,
.trc-drawer .trc-nav__werkzeug{ min-height:48px; }
.trc-drawer__auszug .trc-panel__block{ margin-top:var(--tr-s-3); }
.trc-drawer__auszug .trc-colhead{ margin-left:var(--tr-s-2); margin-right:var(--tr-s-2); }

.trc-drawer__extra{ margin-top:var(--tr-s-3); }
.trc-drawer__extra-link{ font-weight:var(--tr-fw-bold); }
.trc-drawer__extra-link .trc-nav__ico{ color:var(--tr-mut); }

.trc-drawer__fuss{
  flex:none;
  padding:var(--tr-s-3) var(--tr-s-4) calc(var(--tr-s-3) + env(safe-area-inset-bottom));
  border-top:var(--tr-bw) solid var(--tr-line);
}

/* ==========================================================================
   4. AB 560px: mehr Luft in der Schublade
   ========================================================================== */
@media (min-width:560px){
  .trc-drawer__inhalt{ padding:var(--tr-s-2) var(--tr-s-4) var(--tr-s-5); }
}

/* Unter der WP-Admin-Leiste (nur angemeldet): dieselben Schwellen wie header.css -
   erst ab 601px ist die Leiste fixiert, darunter scrollt sie weg. */
@media (min-width:601px){
  body.admin-bar .trc-drawer{ top:46px; }
}
@media (min-width:783px){
  body.admin-bar .trc-drawer{ top:32px; }
}

/* ==========================================================================
   5. AB 1120px: die Leiste fuehrt, das Panel schwebt
   Positioniert gegen .trc-header (position:sticky ist ein positionierter
   Vorfahre). Der volle-Breite-Wrapper laesst Klicks durch.
   ========================================================================== */
@media (min-width:1120px){
  .trc-drawer,
  .trc-drawer-scrim{ display:none; }

  .trc-panel{
    position:absolute; left:0; right:0; top:100%;
    z-index:var(--trc-panel-z);
    padding:0 var(--tr-pad-x);
    pointer-events:none;
  }
  .trc-panel__innen{
    pointer-events:auto;
    max-width:var(--tr-maxw); margin:0 auto;
    padding:var(--tr-s-5) var(--tr-s-5) var(--tr-s-4);
    box-shadow:var(--tr-sh-4);
    max-height:calc(100vh - var(--trc-header-h) - 24px);
    max-height:calc(100dvh - var(--trc-header-h) - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* Einblenden nur ueber Deckkraft (Spez. 6). */
  .trc-nav__eintrag[open] .trc-panel__innen{
    animation:trc-nav-ein var(--tr-dur-1) var(--tr-ease-out);
  }

  /* 1120-1239px: die Kontextspalte steht UNTER den Gruppen, als Band ueber die
     volle Breite. Rechts daneben blieben den vier Kuechengruppen je ~160px -
     gemessen trennte das "Kaffeevollautoma-ten" und "Filterkaffeema-schine".
     Unten liegend bekommt jede Gruppe ~240px und kein Name bricht. */
  .trc-panel__raster--kontext{ grid-template-columns:minmax(0,1fr); }
  .trc-panel__kontext{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--tr-s-5);
    border-top:var(--tr-bw) solid var(--tr-line);
    padding-top:var(--tr-s-4);
  }
  .trc-panel__kontext .trc-panel__block + .trc-panel__block{ margin-top:0; }
  .trc-panel__kontext .trc-nav__liste{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0 var(--tr-s-2);
  }
  /* 16px statt 24px zwischen den Gruppen: jede Gruppe gewinnt 6px - genau die
     Breite, die "Waermepumpentrockner" samt Zahl auf einer Zeile braucht. */
  .trc-panel__spalten{
    grid-template-columns:repeat(var(--trc-nav-spalten,4), minmax(0,1fr));
    column-gap:var(--tr-s-4);
    align-items:start;
  }
}

/* Spez. 8.2: ab 1240px steht der Kontext als eigene Spalte rechts (240px),
   durch eine senkrechte Haarlinie abgesetzt. Die Gruppen haben dann je ~214px -
   genug fuer "Filterkaffeemaschine" (gemessen ~150px) samt Zahl. */
@media (min-width:1240px){
  .trc-panel__raster--kontext{ grid-template-columns:minmax(0,1fr) 220px; }
  .trc-panel__kontext{
    display:block;
    border-top:0; padding-top:0;
    border-left:var(--tr-bw) solid var(--tr-line);
    padding-left:var(--tr-s-5);
  }
  .trc-panel__kontext .trc-panel__block + .trc-panel__block{ margin-top:var(--tr-s-5); }
  .trc-panel__kontext .trc-nav__liste{ display:block; }
}

@keyframes trc-nav-ein{ from{ opacity:0 } to{ opacity:1 } }

/* Reduzierte Bewegung: Schublade und Abdunklung stehen sofort. Die verzoegerte
   Sichtbarkeit muss ausdruecklich entfallen. */
@media (prefers-reduced-motion: reduce){
  .trc-drawer,
  .trc-drawer:not([data-trc-js]):target,
  .trc-drawer[data-offen="ja"],
  .trc-drawer-scrim{ transition:none; }
}


/* ========================================================================== */
/* konto                                                                  */
/* ========================================================================== */
/* ============================================================
   BAUTEIL: Konto & Merkliste (trc-merk*, trc-konto*)
   Eigentuemer dieses Abschnitts. Verwendet nur Tokens und geteilte
   Bauteile aus chrome-base.css (trc-btn, trc-note, trc-num, trc-vh).
   Kein !important, keine ID-Selektoren, hoechstens drei Ebenen tief,
   und kein trc-Selektor zielt je auf eine tr-Klasse.
   ============================================================ */

/* --- gemeinsame Kleinteile dieses Bauteils --- */

.trc-ico{ flex:none; }

.trc-feld{
  width:100%; min-height:var(--tr-touch);
  padding:0 var(--tr-s-3);
  font:var(--tr-fw-normal) var(--tr-fs-500)/var(--tr-lh-ui) var(--tr-font);
  color:var(--tr-ink); background:var(--tr-surface);
  border:var(--tr-bw) solid var(--tr-line-ui); border-radius:var(--tr-r-md);
}

.trc-btn-klein{
  min-height:var(--tr-touch); padding:0 var(--tr-s-2);
  font:var(--tr-fw-medium) var(--tr-fs-300)/var(--tr-lh-ui) var(--tr-font);
  color:var(--tr-blue); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.trc-link{
  font:var(--tr-fw-medium) var(--tr-fs-400)/var(--tr-lh-ui) var(--tr-font);
  color:var(--tr-blue); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* Honeypot: fuer Menschen und Screenreader unsichtbar, fuer Bots ausfuellbar.
   Bewusst nicht display:none - manche Bots ueberspringen genau das. */
.trc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Header-Einstiege --- */

.trc-merk-einstieg,
.trc-konto-einstieg{
  display:inline-flex; align-items:center; gap:var(--tr-s-2);
  min-height:var(--tr-touch); min-width:var(--tr-touch);
  padding:0 var(--tr-s-2);
  font:var(--tr-fw-medium) var(--tr-fs-400)/var(--tr-lh-ui) var(--tr-font);
  /* Beide Einstiege stehen in der Aktionsleiste des Kopfes, also im Markenband.
     inherit statt --tr-ink: eine eigene Deklaration schluege die Vererbung und
     setzte dunkles Grau auf Dunkelgruen (1,29:1). */
  color:inherit; text-decoration:none; border-radius:var(--tr-r-md);
  transition:background-color var(--tr-dur-1) var(--tr-ease-out),
             color var(--tr-dur-1) var(--tr-ease-out);
}
/* Hover traegt jetzt die Flaeche, nicht die Farbe: --tr-blue ist die Farbe des
   Bandes geworden (Marke auf Marke = 1,00:1). Gleiche Behandlung wie .trc-aktion
   im Kopf-Bauteil, damit die Leiste einheitlich reagiert - ausgemalt #275044,
   Weiss darauf 9,06:1. */
.trc-merk-einstieg:hover,
.trc-konto-einstieg:hover{
  background:var(--trc-kopf-flaeche,rgba(255,255,255,.10));
  color:var(--trc-kopf-fg,#fff);
}

/* Der Zaehler bekommt eine reservierte Mindestbreite, damit das clientseitige
   Nachtragen keinen Layoutsprung erzeugt.

   Farblich umgekehrt wie der Zaehler der Vergleichsleiste (.trc-aktion__zahl):
   auf dem Markenband waeren Markenschrift auf Markenhauch zwei Nuancen desselben
   Gruens und praktisch unsichtbar. Weisse Pille, Markenzahl - 12,15:1, und die
   Pille selbst hebt sich mit 12,15:1 vom Band ab. Er kommt ausschliesslich im
   Kopf vor (konto.php Z. 278); die Zahl neben der H1 der Merkliste ist
   .trc-merk__zahl und bleibt unangetastet. */
.trc-merk-zahl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 var(--tr-s-1);
  font-size:var(--tr-fs-200); font-weight:var(--tr-fw-black);
  color:var(--tr-brand,#0F3D2F); background:var(--trc-kopf-fg,#fff);
  border-radius:var(--tr-r-pill);
}

/* Unter 768px zaehlt der Platz: Text weg, Symbol und Zahl bleiben. */
@media (max-width:767px){
  .trc-merk-einstieg__text,
  .trc-konto-einstieg__text{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .trc-merk-einstieg, .trc-konto-einstieg{ justify-content:center; padding:0 var(--tr-s-1); }
}

/* --- Merken-Schalter --- */

.trc-merk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tr-s-2);
  min-height:var(--tr-touch); min-width:var(--tr-touch); padding:0 var(--tr-s-3);
  font:var(--tr-fw-medium) var(--tr-fs-400)/var(--tr-lh-ui) var(--tr-font);
  color:var(--tr-blue); background:transparent;
  border:var(--tr-bw) solid var(--tr-line-ui); border-radius:var(--tr-r-md);
  cursor:pointer;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out),
             border-color var(--tr-dur-1) var(--tr-ease-out),
             color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-merk-btn:hover{ background:var(--tr-bg); border-color:var(--tr-blue); }
/* Zustand am Attribut, nicht an einer Klasse - so gibt es nur eine Wahrheit. */
.trc-merk-btn[aria-pressed="true"]{ color:#fff; background:var(--tr-blue); border-color:var(--tr-blue); }
.trc-merk-btn--gross{ min-height:48px; padding:0 var(--tr-s-4); }

/* --- Statuszeile: ruhig, dauerhaft, kein verschwindender Toast --- */

.trc-merk-status{
  margin:var(--tr-s-3) 0 0;
  min-height:1.5em;
  font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui); color:var(--tr-body);
}
.trc-merk-status:empty{ margin:0; min-height:0; }

/* --- Seite /merkliste/ --- */

.trc-merk{ max-width:var(--tr-maxw); margin:0 auto; padding:var(--tr-s-5) var(--tr-pad-x-sm); }
@media (min-width:768px){ .trc-merk{ padding:var(--tr-s-6) var(--tr-pad-x); } }

.trc-merk__h1{
  margin:0 0 var(--tr-s-3);
  font-size:var(--tr-fs-700); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight); letter-spacing:var(--tr-ls-tight); color:var(--tr-ink);
}
@media (min-width:768px){ .trc-merk__h1{ font-size:var(--tr-fs-800); } }
.trc-merk__zahl{ font-weight:var(--tr-fw-black); color:var(--tr-mut); }

.trc-merk__speicherhinweis,
.trc-merk__noscript{
  max-width:var(--tr-maxw-text);
  margin:0 0 var(--tr-s-4);
  padding:var(--tr-s-3) var(--tr-s-4);
  font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui); color:var(--tr-body);
  background:var(--tr-bg); border-radius:var(--tr-r-lg);
}
.trc-merk__kontoweg{ display:flex; flex-wrap:wrap; gap:var(--tr-s-2); margin:0 0 var(--tr-s-5); }

.trc-merk-uebernahme{
  max-width:var(--tr-maxw-text); margin:0 0 var(--tr-s-5);
  padding:var(--tr-s-4); border:var(--tr-bw) solid var(--tr-line-ui);
  border-radius:var(--tr-r-lg); background:var(--tr-surface);
}
.trc-merk-uebernahme p{ margin:0 0 var(--tr-s-3); font-size:var(--tr-fs-400); color:var(--tr-body); }
.trc-merk-uebernahme p:last-child{ display:flex; flex-wrap:wrap; gap:var(--tr-s-2); margin:0; }

.trc-merk-gruppe{ margin:0 0 var(--tr-s-7); }
.trc-merk-gruppe__titel{
  margin:0 0 var(--tr-s-3); padding-bottom:var(--tr-s-2);
  font-size:var(--tr-fs-600); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight); color:var(--tr-ink);
  border-bottom:var(--tr-bw) solid var(--tr-line);
}

.trc-merk-liste{ margin:0; padding:0; list-style:none; }

.trc-merk-zeile{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:var(--tr-s-3);
  padding:var(--tr-s-4) 0;
  border-bottom:var(--tr-bw) solid var(--tr-line);
}
@media (min-width:768px){
  .trc-merk-zeile{ grid-template-columns:72px 1fr auto; gap:var(--tr-s-4); align-items:start; }
}
/* Nicht lieferbar ist keine Warnung, sondern eine Tatsache: gedaempft, nicht rot. */
.trc-merk-zeile--tot .trc-merk-zeile__bild{ opacity:.6; }

.trc-merk-zeile__bild{ display:block; width:72px; }
.trc-merk-zeile__bild img{ display:block; width:72px; height:72px; object-fit:contain; }

.trc-merk-zeile__titel{
  margin:0 0 var(--tr-s-2);
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight);
}
.trc-merk-zeile__titel a{ color:var(--tr-ink); text-decoration:none; }
.trc-merk-zeile__titel a:hover{ color:var(--tr-blue); }

.trc-merk-zeile__note{ margin:0 0 var(--tr-s-2); }

.trc-merk-zeile__preis{
  margin:0 0 var(--tr-s-1);
  font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui); color:var(--tr-body);
}
.trc-merk-zeile__preis b{ font-size:var(--tr-fs-600); font-weight:var(--tr-fw-black); color:var(--tr-ink); letter-spacing:var(--tr-ls-num); }
.trc-merk-zeile__stand{ display:block; font-size:var(--tr-fs-200); color:var(--tr-mut); }

/* Preisveraenderung ist typografisch geloest, nie farbig: ein gefallener Preis ist
   eine Tatsache, kein Qualitaetsurteil. Gruen und Rot bleiben der Note vorbehalten. */
.trc-merk-zeile__delta{
  display:flex; align-items:center; gap:var(--tr-s-1);
  margin:0 0 var(--tr-s-2);
  font-size:var(--tr-fs-300); line-height:var(--tr-lh-ui); color:var(--tr-ink);
}
.trc-merk-zeile__delta b{ font-weight:var(--tr-fw-black); }
.trc-merk-zeile__delta .trc-ico{ width:16px; height:16px; }

.trc-merk-zeile__hinweis{
  margin:0 0 var(--tr-s-2);
  font-size:var(--tr-fs-300); line-height:var(--tr-lh-ui); color:var(--tr-mut);
}
.trc-merk-zeile__hinweis a{ color:var(--tr-blue); }

/* Pflichthinweis der Amazon-Lizenz 2(c)(ix) unter der Liste (nur wenn eine Zeile einen
   Amazon-Preis zeigt). Ruhig gesetzt wie die Quellenzeilen, aber vollstaendig lesbar. */
.trc-merk-hinweis{
  max-width:var(--tr-maxw-text); margin:var(--tr-s-4) 0 0;
  font-size:var(--tr-fs-200); line-height:var(--tr-lh-ui); color:var(--tr-mut);
}

.trc-merk-zeile__aktionen{ display:flex; align-items:center; gap:var(--tr-s-2); grid-column:1 / -1; }
@media (min-width:768px){ .trc-merk-zeile__aktionen{ grid-column:auto; } }

.trc-merk-weg{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tr-touch); height:var(--tr-touch);
  color:var(--tr-mut); background:none;
  border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-md); cursor:pointer;
  transition:color var(--tr-dur-1) var(--tr-ease-out), border-color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-merk-weg:hover{ color:var(--tr-ink); border-color:var(--tr-line-strong); }

/* --- Wunschpreis (vorgemerkt, nicht scharf) --- */

.trc-merk-wunsch{ margin:var(--tr-s-2) 0 0; }
.trc-merk-wunsch__wert{ margin:0; font-size:var(--tr-fs-300); color:var(--tr-body); }
.trc-merk-wunsch__wert b{ font-weight:var(--tr-fw-black); color:var(--tr-ink); }
.trc-merk-wunsch__feld{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--tr-s-2);
  margin:var(--tr-s-2) 0 0; padding:var(--tr-s-3);
  background:var(--tr-bg); border-radius:var(--tr-r-lg);
}
.trc-merk-wunsch__feld .trc-feld{ width:auto; max-width:160px; }
/* Der ehrliche Satz steht immer unter dem Feld, nicht in einem Hilfe-Aufklapper:
   eine Funktion, die noch nichts ausloest, muss das an Ort und Stelle sagen. */
.trc-merk-wunsch__ehrlich{
  flex-basis:100%; margin:0;
  font-size:var(--tr-fs-200); line-height:var(--tr-lh-ui); color:var(--tr-mut);
}

/* --- leerer Zustand --- */

.trc-merk__leer{ max-width:var(--tr-maxw-text); padding:var(--tr-s-6) 0; }
.trc-merk__leer h2{
  margin:0 0 var(--tr-s-3);
  font-size:var(--tr-fs-600); font-weight:var(--tr-fw-bold);
  line-height:var(--tr-lh-tight); color:var(--tr-ink);
}
.trc-merk__leer p{ margin:0 0 var(--tr-s-4); font-size:var(--tr-fs-500); line-height:var(--tr-lh-read); color:var(--tr-body); }

/* --- Konto-Seite --- */

.trc-konto{ max-width:var(--tr-maxw-text); margin:0 auto; padding:var(--tr-s-5) var(--tr-pad-x-sm); }
@media (min-width:768px){ .trc-konto{ padding:var(--tr-s-6) var(--tr-pad-x); } }
.trc-konto h1{ margin:0 0 var(--tr-s-3); font-size:var(--tr-fs-700); font-weight:var(--tr-fw-bold); line-height:var(--tr-lh-tight); color:var(--tr-ink); }
.trc-konto h2{ margin:var(--tr-s-6) 0 var(--tr-s-3); font-size:var(--tr-fs-600); font-weight:var(--tr-fw-bold); line-height:var(--tr-lh-tight); color:var(--tr-ink); }
.trc-konto__intro,
.trc-konto__zu{ margin:0 0 var(--tr-s-5); font-size:var(--tr-fs-500); line-height:var(--tr-lh-read); color:var(--tr-body); }
.trc-konto__datenschutz,
.trc-konto__klein{ margin:var(--tr-s-3) 0 0; font-size:var(--tr-fs-300); line-height:var(--tr-lh-ui); color:var(--tr-mut); }
.trc-konto__nav{ margin:0 0 var(--tr-s-5); padding:0; list-style:none; }
.trc-konto__nav a{
  display:flex; align-items:center; min-height:var(--tr-touch);
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium); color:var(--tr-blue);
  border-bottom:var(--tr-bw) solid var(--tr-line);
}

.trc-konto__form p{ margin:0 0 var(--tr-s-3); }
.trc-konto__form label{
  display:block; margin-bottom:var(--tr-s-1);
  font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium); color:var(--tr-ink);
}

/* Meldungen: Zustand ueber Textfarbe und Klartext, nicht ueber ein Farbfeld.
   Rot und Gruen sind im Chrome der Note vorbehalten. */
.trc-konto-meldung{
  margin:0 0 var(--tr-s-4); padding:var(--tr-s-3) var(--tr-s-4);
  font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui);
  background:var(--tr-bg); border-radius:var(--tr-r-lg);
  border-left:var(--tr-bw-marker) solid var(--tr-line-ui); color:var(--tr-body);
}
.trc-konto-meldung--fehler{ border-left-color:var(--tr-ink); color:var(--tr-ink); font-weight:var(--tr-fw-medium); }
/* BEDEUTUNG, nicht Marke. Die Erfolgsmeldung hing bisher am Markentoken - das
   war richtig, SOLANGE die Marke blau war: Blau bedeutete Bedienung, nie
   Bewertung. Mit der gruenen Marke wuerde aus dem Balken ein gruener
   Erfolgshinweis, und genau den verbietet das Designsystem (Z. 141). Deshalb die
   neutrale Hervorhebung. Der Unterschied zu --fehler traegt weiter die Schrift
   (Ink und mittleres Gewicht) und der Klartext, nicht der Farbton - Farbe ist
   hier ohnehin nie alleiniger Traeger. */
.trc-konto-meldung--ok{ border-left-color:var(--tr-mark,#1c2430); }

/* --- Dialog --- */

.trc-konto-dialog{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:var(--tr-s-4); }
.trc-konto-dialog__grund{ position:absolute; inset:0; background:rgba(28,36,48,.55); }
.trc-konto-dialog__blatt{
  position:relative; width:min(100%, 420px); max-height:calc(100dvh - 2*var(--tr-s-5));
  overflow-y:auto; padding:var(--tr-s-5);
  background:var(--tr-surface); border-radius:var(--tr-r-xl); box-shadow:var(--tr-sh-4);
}
.trc-konto-dialog__titel{ margin:0 var(--tr-s-6) var(--tr-s-4) 0; font-size:var(--tr-fs-600); font-weight:var(--tr-fw-bold); color:var(--tr-ink); }
.trc-konto-dialog__zu{
  position:absolute; top:var(--tr-s-3); right:var(--tr-s-3);
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tr-touch); height:var(--tr-touch);
  color:var(--tr-mut); background:none; border:0; border-radius:var(--tr-r-md); cursor:pointer;
}
.trc-konto-dialog__zu:hover{ color:var(--tr-ink); }

/* --- Fokus: zweite Ausgabe mit normaler Spezifitaet, weil RehUb- und
       Elementor-CSS mitlaufen und sonst outline:none gewinnen wuerde. --- */
.trc-merk a:focus-visible, .trc-merk button:focus-visible,
.trc-merk input:focus-visible,
.trc-konto a:focus-visible, .trc-konto button:focus-visible,
.trc-konto input:focus-visible,
.trc-konto-dialog a:focus-visible, .trc-konto-dialog button:focus-visible,
.trc-konto-dialog input:focus-visible,
.trc-merk-btn:focus-visible, .trc-merk-einstieg:focus-visible,
.trc-konto-einstieg:focus-visible{
  outline:2px solid var(--trc-focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--trc-focus-halo);
}


/* ========================================================================== */
/* vergleich                                                              */
/* ========================================================================== */
/* === Bauteil: Produktvergleich (trc-vgl) =================================
   Setzt chrome-base.css voraus (Tokens, .trc-btn, .trc-note, .trc-num, .trc-vh, Fokusring).
   Definiert ausschliesslich trc-vgl*; kein Selektor zielt je auf eine tr-*-Klasse.
   Keine Farbe ausser den Tokens, kein Verlauf, kein Schatten ausser --tr-sh-4 fuer die
   schwebende Leiste. Bestwert und Gleichheit laufen ueber data-Attribute, nicht ueber
   Zustandsklassen. */

/* --- Schalter auf Karte und Produktseite -------------------------------- */

.trc-vgl-toggle{ width:100%; }
.trc-vgl-toggle[aria-pressed="true"] .trc-ico{ opacity:.9; }
.trc-vgl-toggle--gross{ width:auto; min-width:200px; }
/* Der Haken ersetzt das Plus im aktiven Zustand - ohne zweites SVG im Markup. */
.trc-vgl-toggle[aria-pressed="true"] .trc-ico path{ d:path("M4 10.5l4 4 8-9"); }
.trc-ico{ flex:0 0 auto; }

/* --- Vergleichsleiste ---------------------------------------------------- */

.trc-vgl-bar{
	position:fixed; left:0; right:0; bottom:0; z-index:var(--trc-bar-z,90);
	background:var(--tr-surface); border-top:var(--tr-bw) solid var(--tr-line);
	box-shadow:var(--tr-sh-4);
	padding:var(--tr-s-2) var(--tr-pad-x-sm) calc(var(--tr-s-2) + env(safe-area-inset-bottom));
}
@media (min-width:768px){ .trc-vgl-bar{ padding-left:var(--tr-pad-x); padding-right:var(--tr-pad-x); } }
.trc-vgl-bar__inner{
	max-width:var(--tr-maxw); margin:0 auto;
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--tr-s-2) var(--tr-s-4);
}
.trc-vgl-bar__titel{
	margin:0; flex:1 1 100%; display:flex; gap:var(--tr-s-2); align-items:baseline;
	font-size:var(--tr-fs-300); color:var(--tr-mut); line-height:var(--tr-lh-ui);
}
.trc-vgl-bar__titel > span:first-child{ font-weight:var(--tr-fw-medium); color:var(--tr-ink); }
.trc-vgl-bar__liste{ list-style:none; margin:0; padding:0; display:flex; gap:var(--tr-s-2); flex:1 1 auto; flex-wrap:wrap; }
.trc-vgl-bar__pos{
	display:flex; align-items:center; gap:var(--tr-s-1);
	border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-lg);
	padding-left:var(--tr-s-2); background:var(--tr-bg); max-width:260px;
}
.trc-vgl-bar__pos img{ width:40px; height:40px; object-fit:contain; background:var(--tr-surface); border-radius:var(--tr-r-xs); }
.trc-vgl-bar__name{
	font-size:var(--tr-fs-300); color:var(--tr-body); line-height:var(--tr-lh-tight);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px;
}
.trc-vgl-bar__weg{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:var(--tr-touch); min-height:var(--tr-touch);
	background:none; border:0; color:var(--tr-mut); cursor:pointer; border-radius:var(--tr-r-lg);
}
.trc-vgl-bar__weg:hover{ color:var(--tr-ink); background:var(--tr-bg-head); }
.trc-vgl-bar__quer{ flex:1 1 100%; margin:0; font-size:var(--tr-fs-200); color:var(--tr-mut); }
.trc-vgl-bar__quer a{ color:var(--tr-blue); }
.trc-vgl-bar__aktion{ display:flex; gap:var(--tr-s-2); margin-left:auto; }

/* Platz unter dem Inhalt, damit die Leiste nie den Haendler-CTA verdeckt. */
.trc-vgl-bar-an body,
html.trc-vgl-bar-an body{ padding-bottom:104px; }
@media (min-width:768px){ html.trc-vgl-bar-an body{ padding-bottom:88px; } }

/* --- Tauschdialog beim fuenften Geraet ----------------------------------- */

.trc-vgl-tausch{
	max-width:var(--tr-maxw); margin:var(--tr-s-2) auto 0;
	border-top:var(--tr-bw) solid var(--tr-line); padding-top:var(--tr-s-2);
}
.trc-vgl-tausch__h{ margin:0 0 var(--tr-s-2); font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold); color:var(--tr-ink); }
.trc-vgl-tausch__liste{ list-style:none; margin:0 0 var(--tr-s-2); padding:0; display:flex; flex-wrap:wrap; gap:var(--tr-s-2); }
.trc-vgl-tausch__opt{
	min-height:var(--tr-touch); padding:0 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-body);
	font:var(--tr-fw-medium) var(--tr-fs-400)/var(--tr-lh-ui) var(--tr-font); cursor:pointer;
	max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trc-vgl-tausch__opt:hover{ border-color:var(--tr-blue); background:var(--tr-bg); }

/* --- Vergleichsseite ----------------------------------------------------- */

.trc-vgl{ max-width:var(--tr-maxw); margin:0 auto; padding:0 var(--tr-pad-x-sm) var(--tr-s-7); }
@media (min-width:768px){ .trc-vgl{ padding-left:var(--tr-pad-x); padding-right:var(--tr-pad-x); } }
.trc-vgl__h1{
	margin:var(--tr-s-6) 0 var(--tr-s-3); color:var(--tr-ink);
	font-size:var(--tr-fs-700); font-weight:var(--tr-fw-bold);
	line-height:var(--tr-lh-tight); letter-spacing:var(--tr-ls-tight); text-wrap:balance;
}
@media (min-width:768px){ .trc-vgl__h1{ font-size:var(--tr-fs-800); } }
.trc-vgl__intro,
.trc-vgl-leer{ max-width:var(--tr-maxw-text); margin:0 0 var(--tr-s-5); color:var(--tr-body); font-size:var(--tr-fs-500); line-height:var(--tr-lh-read); }
.trc-vgl-werkzeug{ display:flex; justify-content:flex-end; margin:0 0 var(--tr-s-2); }
.trc-vgl-schalter{
	display:inline-flex; align-items:center; gap:var(--tr-s-2);
	min-height:var(--tr-touch); font-size:var(--tr-fs-400); color:var(--tr-body); cursor:pointer;
}
.trc-vgl-schalter input{ width:20px; height:20px; accent-color:var(--tr-blue); }

/* Breite Inhalte scrollen in ihrem eigenen Container - die Seite selbst nie. */
.trc-vgl-scroll{ overflow-x:auto; overscroll-behavior-x:contain; border:var(--tr-bw) solid var(--tr-line); border-radius:var(--tr-r-lg); background:var(--tr-surface); }
.trc-vgl-tab{ border-collapse:collapse; width:100%; font-size:var(--tr-fs-400); line-height:var(--tr-lh-ui); }

.trc-vgl-tab__ecke,
.trc-vgl-tab__krit{
	position:sticky; left:0; z-index:2;
	background:var(--tr-bg-head); text-align:left; vertical-align:top;
	min-width:132px; max-width:190px;
	padding:var(--tr-s-3); border-bottom:var(--tr-bw) solid var(--tr-line);
	font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium); color:var(--tr-ink);
}
@media (min-width:560px){ .trc-vgl-tab__ecke, .trc-vgl-tab__krit{ min-width:170px; } }
.trc-vgl-tab__hint{ display:block; margin-top:var(--tr-s-1); font-size:var(--tr-fs-200); font-weight:var(--tr-fw-normal); color:var(--tr-mut); }
.trc-vgl-tab thead th{ position:sticky; top:var(--trc-header-h,64px); z-index:3; background:var(--tr-surface); }
.trc-vgl-tab__ecke{ z-index:4; background:var(--tr-bg-head); }
.trc-vgl-tab__prod{ min-width:180px; padding:var(--tr-s-3); border-bottom:var(--tr-bw) solid var(--tr-line); border-left:var(--tr-bw) solid var(--tr-line); text-align:left; vertical-align:top; }
.trc-vgl-tab__zelle{
	min-width:150px; padding:var(--tr-s-3);
	border-bottom:var(--tr-bw) solid var(--tr-line); border-left:var(--tr-bw) solid var(--tr-line);
	vertical-align:top; color:var(--tr-body);
}

/* Produktkopf */
.trc-vgl-kopf{ display:flex; flex-direction:column; gap:var(--tr-s-1); position:relative; }
.trc-vgl-kopf__bild{ display:block; width:96px; height:96px; }
.trc-vgl-kopf__bild img{ width:96px; height:96px; object-fit:contain; }
.trc-vgl-kopf__marke{ font-size:var(--tr-fs-200); color:var(--tr-mut); font-weight:var(--tr-fw-medium); }
.trc-vgl-kopf__titel{
	font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold); color:var(--tr-ink);
	line-height:var(--tr-lh-tight); text-decoration:none;
}
.trc-vgl-kopf__titel:hover{ color:var(--tr-blue); }
.trc-vgl-kopf__weg{
	position:absolute; top:0; right:0;
	display:inline-flex; align-items:center; justify-content:center;
	min-width:var(--tr-touch); min-height:var(--tr-touch);
	color:var(--tr-mut); border-radius:var(--tr-r-md);
}
.trc-vgl-kopf__weg:hover{ color:var(--tr-ink); background:var(--tr-bg); }
.trc-vgl-kopf__cta{ margin-top:var(--tr-s-2); }

/* Werte */
.trc-vgl__preis{ font-size:var(--tr-fs-600); font-weight:var(--tr-fw-black); color:var(--tr-ink); letter-spacing:var(--tr-ls-num); display:block; }
.trc-vgl__einheit{ font-size:.82em; font-weight:var(--tr-fw-medium); color:var(--tr-mut); }
.trc-vgl__stand,
.trc-vgl__conf{ display:block; margin-top:var(--tr-s-1); font-size:var(--tr-fs-200); color:var(--tr-mut); }
.trc-vgl__leer,
.trc-vgl__ohnenote{ color:var(--tr-mut); }
.trc-vgl__ja{ font-weight:var(--tr-fw-medium); color:var(--tr-ink); }
.trc-vgl__nein{ color:var(--tr-mut); }
.trc-vgl-tab__zelle .trc-num{ font-weight:var(--tr-fw-black); color:var(--tr-ink); }

/* Bester Wert: Farbe ist nie alleiniger Traeger - Haekchen und Screenreader-Text stehen
   im Markup, hier kommt nur die ruhige Flaeche dazu.

   Die alte Begruendung lautete: "Blau heisst Bedienung/Marke, nicht Bewertung -
   deshalb traegt die Markierung keine Notenfarbe." Der Satz war richtig und ist
   mit dem Wechsel auf die gruene Marke falsch geworden: die Markenfarbe hat genau
   die Eigenschaft verloren, wegen der sie hier stand. Eine gruene Zelle in einer
   Vergleichstabelle IST eine Notenaussage - und damit der Konflikt Marke/Note, den
   der Farbwechsel gerade aufloesen soll.

   Die Markierung zieht deshalb auf die neutrale Hervorhebung um: ein Grau ohne
   Wertung, das weder Marke noch Note ist. Gemessen: Schrift auf der Flaeche
   13,94:1, das Haekchen auf Weiss 15,62:1 - die Zelle bleibt genauso ruhig
   lesbar wie vorher. */
.trc-vgl-tab__zelle[data-best="1"]{ background:var(--tr-mark-tint,rgba(28,36,48,.06)); }
.trc-vgl-tab__zelle[data-best="1"] .trc-ico{ color:var(--tr-mark,#1c2430); vertical-align:-4px; margin-right:var(--tr-s-1); }

/* Ueberall gleicher Wert: zuruecknehmen, nicht verstecken. */
.trc-vgl-tab tr[data-gleich="1"] .trc-vgl-tab__zelle,
.trc-vgl-tab tr[data-gleich="1"] .trc-vgl-tab__krit{ color:var(--tr-mut); }
.trc-vgl-tab tr[data-gleich="1"] .trc-vgl-tab__zelle .trc-num{ color:var(--tr-mut); font-weight:var(--tr-fw-medium); }

/* Legende, Quellen, Kategorieregel */
.trc-vgl-legende,
.trc-vgl-quelle,
.trc-vgl-regel,
.trc-vgl-quer,
.trc-vgl-hinweis{ max-width:var(--tr-maxw-text); color:var(--tr-mut); line-height:var(--tr-lh-ui); }
.trc-vgl-legende{ margin:var(--tr-s-3) 0 0; font-size:var(--tr-fs-300); }
/* Ueber die Erhebung hinaus, aber zwingend: dieses Symbol IST das Haekchen der
   Bestwert-Markierung - vergleich.php Z. 949-950 setzt es woertlich als
   "= bester Wert in dieser Zeile". Eine Legende, die anders gefaerbt ist als
   das Zeichen, das sie erklaert, erklaert nichts mehr. Es folgt deshalb der
   neutralen Hervorhebung von Z. 153/154, nicht der Marke. Auf Weiss 15,62:1. */
.trc-vgl-legende .trc-ico{ vertical-align:-4px; color:var(--tr-mark,#1c2430); }
.trc-vgl-quelle{ margin:var(--tr-s-2) 0 0; font-size:var(--tr-fs-200); }
/* Aelterer Preis (nur Nicht-Amazon): als solcher erkennbar, nie "bester Wert" (27.09.2026). */
.trc-vgl-tab__zelle .trc-vgl__preis--alt{ font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium); color:var(--tr-mut); }
.trc-vgl-quer{ margin:var(--tr-s-5) 0 0; font-size:var(--tr-fs-300); }
.trc-vgl-quer a{ color:var(--tr-blue); }
.trc-vgl-regel{
	margin:var(--tr-s-6) 0 0; padding-top:var(--tr-s-3);
	border-top:var(--tr-bw) solid var(--tr-line); font-size:var(--tr-fs-300);
}

/* Fokus zweilagig, auch auf den neuen Flaechen (RehUb und Elementor laufen mit). */
.trc-vgl a:focus-visible, .trc-vgl button:focus-visible, .trc-vgl input:focus-visible,
.trc-vgl-bar a:focus-visible, .trc-vgl-bar button:focus-visible,
.trc-vgl-toggle:focus-visible{
	outline:2px solid var(--trc-focus-ring); outline-offset:2px;
	box-shadow:0 0 0 4px var(--trc-focus-halo);
}

@media print{
	.trc-vgl-bar{ display:none; }
	.trc-vgl-scroll{ overflow:visible; }
	.trc-vgl-tab thead th{ position:static; }
	.trc-vgl-tab__ecke, .trc-vgl-tab__krit{ position:static; }
}


/* ========================================================================== */
/* karte                                                                  */
/* ========================================================================== */
/* =============================================================================
   Aktionszeile auf der Produktkarte (trc-karte-aktionen) — Vergleichen und Merken.

   Eigene Zeile am Kartenende statt in .tr-card-foot: dort steht der Preis, und zwei
   weitere Schalter haetten ihn auf schmalen Breiten umgebrochen. Die Zeile uebernimmt
   die Innenabstaende der Karte (16px), damit sie buendig zum Rest sitzt — das ist der
   einzige Wert hier, der aus dem fremden Stylesheet stammt und nicht aus den Tokens.
   Kein Selektor zielt auf eine .tr-Klasse.
   ========================================================================== */

.trc-karte-aktionen{
  display:flex;
  gap:var(--tr-s-2);
  padding:var(--tr-s-3) 16px 16px;
  margin-top:calc(var(--tr-s-2) * -1);   /* die Karte bringt unten schon 16px mit */
}

/* Beide Schalter teilen sich die Breite. Fehlt einer (Geraet nicht lieferbar, Konto
   abgeschaltet), nimmt der verbliebene die ganze Zeile ein — ohne Sonderregel. */
.trc-karte-aktionen > *{
  flex:1 1 0;
  min-width:0;
  min-height:var(--tr-touch);
  font-size:var(--tr-fs-300);
  white-space:nowrap;
}

/* Der Merken-Schalter kommt vom Konto-Bauteil ohne eigene Buttonform - hier bekommt
   er dieselbe Umrissform wie der Vergleichsschalter, damit die Zeile ruhig wirkt. */
.trc-karte-aktionen .trc-merk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--tr-s-1);
  padding:0 var(--tr-s-3);
  background:transparent;
  color:var(--tr-blue);
  border:var(--tr-bw) solid var(--tr-line-ui);
  border-radius:var(--tr-r-md);
  font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-ui);
  cursor:pointer;
}
.trc-karte-aktionen .trc-merk-btn:hover{
  background:var(--tr-bg);
  border-color:var(--tr-blue);
}
/* Bleibt am Markentoken und wird damit gruen - bewusst, nach Designsystem Z. 140:
   Bedienung darf die Markenfarbe tragen, "gemerkt" ist ein Schalterzustand und
   kein Qualitaetsurteil. Die Zeile steht auf der weissen Karte, nicht im Band;
   Weiss auf der Marke misst dort 12,15:1.
   Das gemessene Restrisiko gehoert hierher, wo es jemanden trifft: der Schalter
   sitzt unmittelbar neben den Notenfarben der Karte, und Markengruen gegen das
   Notengruen #16a34a misst 3,69:1 - unterscheidbar, aber beides bleibt Gruen.
   Wer den Konflikt aufloesen will, entfaerbt die Bestwert-Auszeichnungen des
   Moduls, nicht diesen Schalter. */
.trc-karte-aktionen .trc-merk-btn[aria-pressed="true"]{
  background:var(--tr-blue);
  color:#fff;
  border-color:var(--tr-blue);
}

/* Die frueher hier stehende Regel "unter 380px untereinander" ist ersatzlos entfallen.
   Ihre Begruendung - sonst waeren die Beschriftungen abgeschnitten - gilt nicht mehr:
   Auf der Karte sind die Beschriftungen seit dem Mobil-Durchgang ohnehin nur noch fuer
   Screenreader da, die Schalter sind 44x44 Symbolflaechen und passen nebeneinander.
   Die Regel zeigte ausserdem in die falsche Richtung: abgeschnitten wurde ab 380px,
   nicht darunter. Stehengeblieben hat sie die Karte auf 360px um rund 52px HOEHER
   gemacht als auf 390px. */


/* ========================================================================== */
/* Header (trc-header)  [header]                                          */
/* ========================================================================== */
/* ==========================================================================
   chrome.css - Bauteil: HEADER
   Eigentuemer dieser Klassen: trc-header*, trc-skip, trc-aktionen*, trc-sentinel,
   trc-ico. Nutzt (und aendert nicht): Basis-Layer-Tokens, trc-logo*, trc-nav*.
   Mobile first. Nur min-width-Breakpoints (560/768/1024/1120).
   ========================================================================== */

/* Der Basis-Layer setzt --trc-header-h auf den Desktop-Wert 64px. Weil die
   Kopfhoehe pro Breakpoint wechselt und Media Queries keine Custom Properties
   auswerten koennen, wird der Wert hier mobil-first nachgezogen - Panel-Hoehe
   und scroll-padding-top haengen daran. */
:root{ --trc-header-h:56px; }

/* --- Sprunglink: erstes fokussierbares Element jeder Seite ----------------
   Bleibt hell. Er bringt seine EIGENE Flaeche mit (--tr-surface) und klappt
   ueber das Markenband; die Markenfarbe als Schrift darauf misst 12,15:1.
   Deshalb hier kein color:inherit - das waere weiss auf weiss. */
.trc-skip{
  position:absolute; left:var(--tr-s-4); top:var(--tr-s-2);
  z-index:calc(var(--trc-panel-z) + 10);
  transform:translateY(-200%);
  display:inline-flex; align-items:center; min-height:var(--tr-touch);
  padding:0 var(--tr-s-4);
  background:var(--tr-surface); color:var(--tr-blue);
  border:var(--tr-bw) solid var(--tr-line-ui); border-radius:var(--tr-r-md);
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-ui); text-decoration:none;
  transition:transform var(--tr-dur-1) var(--tr-ease-out);
}
.trc-skip:focus-visible{ transform:translateY(0); }

/* --- Messpunkt fuer den verdichteten Zustand -----------------------------
   Null Hoehe, damit er nichts verschiebt; das Kind sitzt 120px unterhalb des
   Dokumentanfangs. Verlaesst es den Sichtbereich, ist mehr als 120px gescrollt.
   Das ist billiger als ein Scroll-Listener und misst dasselbe. */
.trc-sentinel{ position:relative; height:0; }
.trc-sentinel > i{ position:absolute; top:120px; left:0; width:1px; height:1px; }

/* --- Grundgeruest ---------------------------------------------------------
   Das Markenband. Der Kopf traegt die Markenfarbe vollflaechig - das ist der
   Auftrag, nicht eine Einfaerbung. Dieselbe Deklaration steht ein zweites Mal
   im kritischen Inline-CSS von header.php (wp_head, Prioritaet 999); die laeuft
   NACH diesem Stylesheet und gewinnt bei gleicher Spezifitaet. Beide Orte
   muessen gruen sein, sonst bleibt das Band weiss. */
.trc-header{
  position:sticky; top:0; z-index:var(--trc-header-z);
  background:var(--tr-brand,#0F3D2F);
  /* Grundfarbe fuer alles im Band, damit Bedienelemente sie erben koennen,
     statt --tr-ink selbst zu setzen (das misst auf dem Grund 1,29:1).
     Weiss auf #0F3D2F = 12,15:1. */
  color:var(--trc-kopf-fg,#fff);
  /* Die Kante zur weissen Seite leistet das Band selbst (12,15:1); hier bleibt
     nur ein Hauch heller Abschluss, wie ihn der Footer auf dunklem Grund fuehrt.
     Gemessen 1,52:1 - heute traegt --tr-line an derselben Stelle 1,22:1, die
     Kante wird also nicht schwaecher, sondern deutlicher. Rein dekorativ. */
  border-bottom:var(--tr-bw) solid rgba(255,255,255,.14);
}
/* Kein Schatten im Ruhezustand (Spez. 5.3); --tr-sh-1 ist ausschliesslich
   dem verdichteten Kopf vorbehalten. Klassenwechsel ohne Uebergang (Spez. 6). */
.trc-header--dicht{ box-shadow:var(--tr-sh-1); }

/* Mobil: ein umbrechendes Band. Im DOM stehen Suche und Aktionen in der
   Reihenfolge, in der sie ab 768px sichtbar sind (Suche vor Aktionen - so
   laeuft Tab von links nach rechts). Mobil holt order die Aktionen in Zeile 1
   und schiebt die Suche mit flex-basis 100% in Zeile 2. Wortgleich mit dem
   kritischen Inline-CSS in header.php, das NACH diesem Stylesheet steht. */
.trc-header__band{
  max-width:var(--tr-maxw); margin:0 auto;
  padding:0 var(--tr-pad-x-sm);
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--tr-s-3);
}
.trc-header__zeile--haupt{
  display:flex; align-items:center; gap:var(--tr-s-3);
  min-height:56px;
  flex:1 1 0%; min-width:0;
}
.trc-header__marke{ margin-right:auto; min-width:0; }
.trc-header__nav{ display:none; }          /* Hauptnavigation erst ab 1120px */

/* Menue-Schalter: ohne JS ein echter Anker auf #trc-nav, mit JS ein
   Bedienelement mit aria-expanded. Deshalb <a> und nicht <button> -
   ein Button ohne JS waere eine tote Schaltflaeche (Spez. 11.14). */
.trc-header__menue{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--tr-s-2);
  min-width:var(--tr-touch); min-height:var(--tr-touch);
  padding:0 var(--tr-s-2);
  /* inherit statt --tr-ink: das Band gibt seine Schriftfarbe vor. Eine eigene
     Deklaration wuerde die Vererbung schlagen und dunkles Grau auf Dunkelgruen
     setzen (1,29:1). */
  color:inherit; text-decoration:none;
  border-radius:var(--tr-r-md);
  font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium);
  line-height:var(--tr-lh-ui);
}
/* Hoverflaeche als aufgehellter Ausschnitt des Bandes, nicht als helle Kachel:
   --tr-bg waere hier ein grelles Rechteck. Ausgemalt #275044, Weiss darauf
   9,06:1; die Flaeche selbst hebt sich mit 1,34:1 vom Grund ab - heute leistet
   --tr-bg auf dem weissen Kopf nur 1,06:1. */
.trc-header__menue:hover{ background:var(--trc-kopf-flaeche,rgba(255,255,255,.10)); }
/* Label unter 560px nur fuer Screenreader - das Symbol traegt dort allein,
   der Name steckt im Textknoten, nicht in einem aria-label. */
.trc-header__menue-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* fill:none ausdruecklich: uf-basis/assets/basis.css Z. 248 setzt svg{fill:currentColor}
   und schlaegt damit das Attribut fill="none" - die Lupe stand als gefuellte Scheibe da
   (gemessen 26.09.2026). Eine Klasse schlaegt den Elementselektor. */
.trc-ico{ display:block; flex:none; fill:none; }

/* --- Aktionen rechts (Vergleich, Merkliste) ------------------------------
   Nur Platz und Reihenfolge; das Aussehen der Schaltflaechen gehoert den
   Bauteilen trc-vgl* und trc-merk*. */
.trc-aktionen{ display:flex; align-items:center; gap:var(--tr-s-1); flex:none; order:1; }
.trc-aktionen__lupe{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tr-touch); height:var(--tr-touch);
  color:inherit; border-radius:var(--tr-r-md); text-decoration:none;
}
.trc-aktionen__lupe:hover{ background:var(--trc-kopf-flaeche,rgba(255,255,255,.10)); }

/* --- Suchzeile (mobil: eigene, wegscrollende Zeile) ---------------------- */
.trc-header__zeile--suche{
  display:flex; align-items:center;
  min-height:52px; padding-bottom:var(--tr-s-1);
  order:2; flex:1 1 100%;
}
.trc-header__suche{ flex:1 1 auto; min-width:0; }

/* Verdichtet: die Suchzeile weicht, der Lupen-Anker in Zeile 1 tritt an ihre
   Stelle. Der :target-Fall ist der Weg ohne JavaScript - der Anker bleibt
   funktionsfaehig, auch wenn das Skript nach dem Laden ausfaellt. */
.trc-header--dicht .trc-header__zeile--suche{ display:none; }
.trc-header--dicht .trc-header__zeile--suche:target{ display:flex; }
/* Solange jemand darin tippt, bleibt die Suchzeile stehen - auch wenn die Seite
   dabei ueber 120px scrollt. Sonst verschwaende das fokussierte Feld samt
   Vorschlagsblatt mitten in der Eingabe. */
.trc-header--dicht .trc-header__zeile--suche:focus-within{ display:flex; }

/* --- Admin-Leiste: der Kopf klebt darunter, nicht darueber.
   Body-Klasse statt Server-Logik - das Header-HTML bleibt byteidentisch. --- */
body.admin-bar .trc-header{ top:0; }

/* --- ab 560px: Menue-Label sichtbar -------------------------------------- */
@media (min-width:560px){
  .trc-header__menue-text{
    position:static; width:auto; height:auto; padding:0; margin:0;
    overflow:visible; clip:auto; clip-path:none;
  }
  .trc-header__menue{ padding:0 var(--tr-s-3); }
}

@media (min-width:601px){
  body.admin-bar .trc-header{ top:46px; }   /* mobile Admin-Leiste ist fixiert */
}

/* --- ab 768px: eine Zeile ------------------------------------------------
   Die beiden Zeilen-Container werden zu display:contents, damit ihre Kinder
   in EIN Raster fallen. So steht die Suche mobil in der zweiten Zeile und ab
   Tablet in derselben Zeile - ohne das Suchformular zweimal auszuliefern
   (doppelte IDs waeren ein Barrierefreiheitsfehler). */
@media (min-width:768px){
  :root{ --trc-header-h:60px; }
  .trc-header__band{
    display:grid; align-items:center;
    grid-template-columns:auto auto minmax(280px,1fr) auto;
    grid-template-areas:"menue marke suche aktionen";
    column-gap:var(--tr-s-5);
    min-height:60px;
    padding:0 var(--tr-pad-x);
  }
  .trc-header__zeile{ display:contents; }
  .trc-header__menue{ grid-area:menue; }
  .trc-header__marke{ grid-area:marke; margin-right:0; }
  .trc-header__suche{ grid-area:suche; max-width:520px; padding:0; }
  .trc-aktionen{ grid-area:aktionen; gap:var(--tr-s-2); }
  /* Die Suche bleibt ab Tablet immer sichtbar, auch verdichtet. Die
     :focus-within-Fassung muss hier mit: sie ist spezifischer als die Zeile
     darueber und setzte sonst display:flex mitten ins Kopfraster. */
  .trc-header--dicht .trc-header__zeile--suche,
  .trc-header--dicht .trc-header__zeile--suche:target,
  .trc-header--dicht .trc-header__zeile--suche:focus-within{ display:contents; }
  .trc-aktionen__lupe{ display:none; }      /* reine Mobilloesung */
}

@media (min-width:783px){
  body.admin-bar .trc-header{ top:32px; }
}

/* --- ab 1120px: volle Navigation ----------------------------------------

   NACHGEMESSEN 26.09.2026 (Mega-Menue 0.2.0): Die Leiste traegt jetzt vier
   Bereiche plus "Rechner" (Kueche, Haushalt, Garten, TV & Audio, Rechner)
   und misst 449px statt 531px (Pfeil 16 statt 20px, "Rechner" ohne Pfeil).
   Bei 1120px bleiben damit der Wortmarke ihre vollen 158px (vorher auf 101px
   gedrueckt) und der Suche 305px (vorher 280px); ab 1240px 425px statt 343px.
   Mit aktiver Vergleichsleiste (Aktionen 180px) bei 1120px: Suche 280px,
   Navi-Ueberlauf 0 (scripts/_tr_kopf_vergleichsleiste_url.mjs).
   Die Rechnung vom 16.09. unten bleibt als Begruendung der Regeln stehen.

   NACHGEMESSEN 16.09.2026 - die Rechnung darueber war ueberholt und hat die
   Navigation beschnitten. Der alte Kommentar rechnete mit "Wortmarke 120 +
   vier Navigationslabel 560 + Aktionen 100". Tatsaechlich gilt heute:

     Wortmarke        158px   (gewachsen mit dem neuen Logo, 12.09.2026)
     Navigationsleiste 531px   (SECHS Label: Kueche, Waesche, Haushalt,
                                Garten, TV, Weitere - nicht vier)
     Aktionen          200px   (Merkliste und Konto tragen Beschriftung;
                                ohne sie 96px)
     Luecken            72px   (3 x --tr-s-5)
     Seitenrand         40px
     ------------------------------------------------------------
     ohne Suche       1001px   -> von 1240px Bandbreite bleiben 239px

   Die Suche stand auf `minmax(280px,1fr)`. 280 minus 239 = 41 - und genau
   41px hat das Raster der Navigationsspalte weggenommen (gemessen:
   scrollWidth 531 gegen clientWidth 490). Weil `.trc-header__nav` zusaetzlich
   `min-width:0` trug, durfte die Spalte unter ihren Inhalt schrumpfen, und der
   Inhalt lief bei `overflow:visible` unter das Suchfeld. Auf dem Bildschirm:
   "Weitere" halb verdeckt. Eine Pruefung Box-gegen-Box meldete dabei NULL
   Ueberlappungen - die Boxen ueberlappten ja nicht, der Inhalt lief aus seiner
   Box heraus.

   Derselbe Fehler stand schon einmal hier, siehe die Regel zu `.trc-vgl-bar-an`
   weiter unten ("gemessen bei 1440px wurde das letzte Navigationslabel
   beschnitten"). Damals wurde nur der Sonderfall mit dem vierten Eintrag
   behoben, nicht der Normalfall.

   Zwei Aenderungen, die das strukturell schliessen:

   1. Die Navigationsspalte ist `max-content` und traegt `min-width:max-content`.
      Sie kann nie wieder unter ihren Inhalt gedrueckt werden - wer kuenftig ein
      Label hinzufuegt, sieht es sofort am Layout statt an einem abgeschnittenen
      Wort.
   2. Die Suche BEHAELT ihr Mindestmass von 280px. Ein erster Versuch senkte es
      auf 160px - dabei brach die Absende-Taste in eine zweite Zeile um, und der
      Kopf wurde 96px hoch. Das `flex-wrap:wrap` der Suche ist kein Versehen,
      sondern Zugaenglichkeit: Faellt das Feld unter 180px (320px Sichtfeld bei
      200 % Zoom), soll die Taste umbrechen statt die Seite quer zu scrollen
      (suche.css, Spez. 4.4). Wer dieses Mass antastet, bricht den Kopf im Zoom.
      Die fehlenden 41px kommen deshalb aus den Aktionen: Merkliste und Konto
      geben ab 1120px ihre Beschriftung ab und messen dann 96 statt 200px.

   Nachweis ueber alle Breiten: `node scripts/_tr_kopf_ueberlauf.mjs <url> …`   */
@media (min-width:1120px){
  :root{ --trc-header-h:64px; }
  .trc-header__band{
    grid-template-columns:auto max-content minmax(280px,1fr) auto;
    grid-template-areas:"marke nav suche aktionen";
    min-height:64px;
  }
  .trc-header__menue{ display:none; }
  .trc-header__nav{ display:block; grid-area:nav; min-width:max-content; }
  .trc-header--dicht .trc-header__band{ min-height:var(--trc-header-h-dicht); }
}

/* --- ab 1120px: die Aktionen geben ihre Beschriftung ab -------------------
   Die Rechnung bei voller Bandbreite (1240px):

     1240 - 40 Seitenrand - 72 Luecken = 1128px fuer vier Spalten
     Wortmarke 158 + Navigation 531 + Aktionen MIT Text 200 = 889
     -> der Suche blieben 239px, ihr Mindestmass ist 280px. Fehlbetrag 41px.

   Ohne Beschriftung messen die Aktionen 96px. Dann bleiben der Suche 343px -
   ueber ihrem Mindestmass, also ohne Umbruch, mit Luft fuer den vierten
   Eintrag, der beim Vergleichen dazukommt.

   Warum die Beschriftung gibt und nicht etwas anderes: Die Navigation ist die
   Hauptnavigation und darf nicht beschnitten werden. Die Suche darf nicht
   umbrechen (Zoom, s. o.). Die Wortmarke ist die Marke. Bleiben die beiden
   Beschriftungen - und die kosten nichts: Symbol und Zaehler bleiben stehen,
   der Name bleibt im `aria-label` und damit fuer Screenreader vollstaendig
   erhalten. Unter 768px ist genau das seit jeher der Zustand (konto.css).

   `display:none` waere hier falsch - der Name steht teils NUR im Text.

   Diese Regel macht die aeltere `.trc-vgl-bar-an .trc-aktion__text` weiter
   unten ueberfluessig; sie bleibt stehen, weil sie nichts kostet und den
   Sonderfall dokumentiert.                                                  */
@media (min-width:1120px){
  .trc-merk-einstieg__text,
  .trc-konto-einstieg__text,
  .trc-aktion__text{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .trc-merk-einstieg, .trc-konto-einstieg{ justify-content:center; padding:0 var(--tr-s-1); }
}

/* --------------------------------------------------------------------------
   Ein Eintrag der Aktionsleiste (.trc-aktion).

   Vergleich und Konto liefern ihre Einstiege beide mit dieser Klasse aus, aber kein
   Bauteil hat sie je gestaltet — jedes ging davon aus, der Kopf tue es. Folge auf der
   Seite: "Vergleich3" ohne Abstand, keine Antippflaeche, kein Hover. Sie gehoert hierher,
   weil der Kopf den Platz in dieser Leiste vergibt.
   -------------------------------------------------------------------------- */
.trc-aktion{
  display:inline-flex; align-items:center; gap:var(--tr-s-2);
  min-height:var(--tr-touch); padding:0 var(--tr-s-2);
  color:inherit; text-decoration:none; white-space:nowrap;
  font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium); line-height:var(--tr-lh-ui);
  background:none; border:0; border-radius:var(--tr-r-md); cursor:pointer;
  transition:background-color var(--tr-dur-1) var(--tr-ease-out), color var(--tr-dur-1) var(--tr-ease-out);
}
/* Hover traegt jetzt die Flaeche, nicht die Farbe: --tr-blue ist die Farbe des
   Bandes geworden, Marke auf Marke misst 1,00:1. Die Schrift bleibt deshalb
   ausdruecklich weiss (12,15:1 zum Grund, 9,06:1 zur Hoverflaeche). */
.trc-aktion:hover{
  background:var(--trc-kopf-flaeche,rgba(255,255,255,.10));
  color:var(--trc-kopf-fg,#fff);
}

/* Der Zaehler ist eine Zahl, keine Verzierung: tabellarische Ziffern, damit er beim
   Hochzaehlen nicht springt.

   Farblich UMGEKEHRT, nicht neu erfunden: bisher Markenflaeche mit weisser Zahl auf
   weissem Kopf, jetzt weisse Flaeche mit Markenzahl auf dem Markenband. Die alte
   Schreibweise (background:var(--tr-blue)) misst auf dem neuen Grund 1,00:1 - der
   Badge waere ein unsichtbares Rechteck mit weisser Zahl darin. Gemessen bleibt es
   bei 12,15:1, genau wie die alte Fassung (12,14:1) auf Weiss. */
.trc-aktion__zahl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--trc-kopf-fg,#fff); color:var(--tr-brand,#0F3D2F);
  border-radius:var(--tr-r-pill);
  font-size:var(--tr-fs-200); font-weight:var(--tr-fw-medium); line-height:1;
}

/* Sobald Geraete im Vergleich liegen, kommt ein VIERTER Eintrag in die Leiste. Dafuer
   ist im Kopf kein Platz mehr — gemessen bei 1440px wurde das letzte Navigationslabel
   beschnitten. Die Eintraege geben dann ihre Beschriftung ab und behalten Symbol und
   Zahl. Der Name bleibt im aria-label und damit fuer Screenreader vollstaendig
   erhalten; die Klasse setzt das Vergleichs-JS auf <html>, also genau dann, wenn der
   vierte Eintrag da ist, und nie auf Verdacht. */
@media (min-width:1120px){
  .trc-vgl-bar-an .trc-aktion__text{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}


/* ========================================================================== */
/* Footer (trc-footer)  [footer]                                          */
/* ========================================================================== */
/* =============================================================================
   FOOTER (trc-footer) — Eigentuemer: Bauteil Footer.
   Definiert: .trc-footer*  ·  Verwendet (ohne zu aendern): Basis-Layer chrome-base.css,
   .trc-colhead, .trc-num, .trc-logo (Logo-/Header-Bauteil).
   Kein !important, keine ID-Selektoren, keine Elementselektoren ohne Namensraum,
   Verschachtelung hoechstens drei Ebenen.
   ========================================================================== */

/* Der Footer bleibt dunkel (#1c2430) - er wird NICHT gruen. Er ist damit der
   zweite dunkle Ort neben dem Markenband und braucht dieselbe aufgehellte
   Markenstufe: --tr-brand-inv (#8FD3B8) misst hier 9,06:1, das abgeloeste
   Hellblau lag bei 8,52:1. Der Name --tr-blue-inv bleibt im Basis-Layer als
   Alias bestehen; hier steht bewusst der sprechende neue Name, damit "inv"
   nicht laenger nach Blau klingt. */
.trc-footer{
  /* Der Footer ist der einzige dunkle Bereich der Seite. Statt jede geerbte Regel einzeln
     umzufaerben, werden hier die beiden generischen Rollen-Tokens neu belegt: damit passt
     sich auch das geteilte .trc-colhead an, ohne dass sein Selektor angefasst wird. */
  --tr-mut: var(--trc-footer-mut);
  --tr-line: rgba(255,255,255,.14);

  background: var(--trc-footer-bg);
  color: var(--trc-footer-fg);
  font-size: var(--tr-fs-300);
  line-height: var(--tr-lh-ui);
}

.trc-footer__innen{
  max-width: var(--tr-maxw);
  margin: 0 auto;
  padding: var(--tr-s-8) var(--tr-pad-x-sm);
}
@media (min-width: 768px){
  .trc-footer__innen{ padding-left: var(--tr-pad-x); padding-right: var(--tr-pad-x); }
}

/* --- Spaltenraster ---------------------------------------------------------
   Die Spaltenzahl kommt als --trc-footer-cols aus dem PHP, weil eine Spalte entfallen
   kann, deren Ziele es noch nicht gibt. Custom Properties funktionieren im Wert einer
   Deklaration (nur in der Media-Bedingung nicht) — deshalb ausgeschriebene Breakpoints. */
.trc-footer__spalten{
  display: grid;
  gap: var(--tr-s-5);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 560px){
  .trc-footer__spalten{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .trc-footer__spalten{ grid-template-columns: repeat(var(--trc-footer-cols, 4), minmax(0,1fr)); }
}

/* --- Spalte 1: Marke ------------------------------------------------------- */
.trc-footer__marke{
  grid-column: 1 / -1;
  display: grid;
  gap: var(--tr-s-3);
  align-content: start;
}
@media (min-width: 1024px){
  .trc-footer__marke{ grid-column: auto; }
}
.trc-footer__claim{
  margin: 0;
  max-width: var(--tr-maxw-text);
  color: var(--trc-footer-fg);
  hyphens: auto;
}

/* --- Navigationsspalten ----------------------------------------------------
   <details> ist auf dem Handy die native Aufklapp-Loesung und braucht dort keine Zeile
   JavaScript. Ab 768 px haelt das Skript sie offen; ohne JavaScript bleiben sie offen,
   weil das open-Attribut im Markup steht. */
.trc-footer__block{ min-width: 0; }

.trc-footer__kopf{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tr-s-2);
  min-height: var(--tr-touch);
  cursor: pointer;
  list-style: none;
}
.trc-footer__kopf::-webkit-details-marker{ display: none; }
.trc-footer__kopf .trc-colhead{ margin-bottom: 0; flex: 1 1 auto; }

.trc-footer__pfeil{
  flex: 0 0 auto;
  color: var(--trc-footer-mut);
  transition: transform var(--tr-dur-1) var(--tr-ease-out);
}
.trc-footer__block[open] .trc-footer__pfeil{ transform: rotate(180deg); }

/* Ab Tablet ist die Spalte dauerhaft offen: der Schalter waere dort nur eine Attrappe. */
@media (min-width: 768px){
  .trc-footer__pfeil{ display: none; }
}
.trc-footer__block[data-trc-fix] .trc-footer__kopf{ cursor: default; pointer-events: none; }

.trc-footer__nav{ margin-top: var(--tr-s-3); }

.trc-footer__liste{ list-style: none; margin: 0; padding: 0; }
.trc-footer__liste a{
  display: flex;
  align-items: center;
  min-height: var(--tr-touch);       /* Trefferflaeche auch bei reinen Textlinks */
  padding: var(--tr-s-1) 0;
  color: var(--trc-footer-link);
  text-decoration: none;
  transition: color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-footer__liste a:hover{
  color: var(--tr-brand-inv,#8FD3B8);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Aktuelle Seite: Farbe UND Gewicht — Farbe allein traegt hier keine Bedeutung. */
.trc-footer__liste a[aria-current="page"]{
  color: var(--tr-brand-inv,#8FD3B8);
  font-weight: var(--tr-fw-medium);
}

/* --- Fusszeile: Recht, Affiliate, Vorbehalte, Copyright --------------------
   Bleibt auf jeder Breite offen — Pflichtangaben klappt man nicht weg. */
.trc-footer__fuss{
  margin-top: var(--tr-s-6);
  padding-top: var(--tr-s-5);
  border-top: 1px solid var(--tr-line);
  display: grid;
  gap: var(--tr-s-3);
}

.trc-footer__rechtliste{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--tr-s-5);
}
.trc-footer__rechtliste a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tr-touch);
  color: var(--trc-footer-link);
  font-weight: var(--tr-fw-medium);
  text-decoration: none;
  transition: color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-footer__rechtliste a:hover{
  color: var(--tr-brand-inv,#8FD3B8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trc-footer__affiliate{
  margin: 0;
  max-width: var(--tr-maxw-text);
  font-size: var(--tr-fs-300);
  color: var(--trc-footer-fg);
  hyphens: auto;
}
.trc-footer__hinweis{
  margin: 0;
  max-width: var(--tr-maxw-text);
  font-size: var(--tr-fs-200);
  color: var(--trc-footer-mut);
  hyphens: auto;
}
.trc-footer__copy{
  margin: 0;
  font-size: var(--tr-fs-200);
  color: var(--trc-footer-mut);
}
/* uf-basis/assets/basis.css sets svg{fill:currentColor}; CSS beats the fill="none" attribute, so the stroke arrow
 * rendered as a filled triangle (26.09.2026, same cause as the header icons). */
.trc-footer__pfeil{ fill: none; }


/* ========================================================================== */
/* Startseite v2 [tr_home]  [startseite]                                  */
/* ========================================================================== */
/* ===== Bauteil: Startseite v2 (trc-start) =====================================
   Mobile first, Breakpoints 560 / 768 / 1024 px. Nur Tokens aus base.css (--tr-*) plus
   eigene --trc-start-* auf .trc-start. Kein !important, keine IDs, kein Selektor auf eine
   .tr-*-Klasse des Moduls. Kontraste gerechnet wie in base.css (WCAG 2.1, ungerundet):
     --tr-body #374151 auf Mint #eef4f1        9,25:1   --tr-mut auf Mint      5,07:1
     --tr-mut auf Flaeche #f3f6f4             5,20:1   --tr-mut auf Sand      5,07:1
     Weiss auf Marke #0F3D2F                 12,15:1   #d7e5de auf Marke      9,34:1
     Mint-Akzent #8FD3B8 auf Marke            7,04:1   (auch 13px-Label: AA)
   ============================================================================ */

.trc-start{
  --trc-start-mint:#eef4f1;        /* Hero-Band */
  --trc-start-sand:#f7f4ee;        /* Rechner-Band */
  --trc-start-flaeche:#f3f6f4;     /* Kacheln, Index-Band */
  --trc-start-salbei:#dfeae4;      /* Symbolgruende, Balkenspur, Zaehler */
  --trc-start-dunkel-text:#d7e5de; /* Fliesstext auf dem Markenband */
  --trc-start-akzent:var(--tr-brand-inv);
  --trc-start-r:16px;
  --trc-start-schatten:0 1px 2px rgba(15,61,47,.06), 0 10px 28px -18px rgba(15,61,47,.38);
  --trc-start-schatten-hover:0 2px 6px rgba(15,61,47,.08), 0 20px 40px -20px rgba(15,61,47,.5);
  --trc-start-rand:var(--tr-pad-x-sm);
  --trc-start-luft:48px;

  /* Die Seite bringt ihre Baender selbst mit. Die Huelle (.uf-inhalt--seite) setzt oben
     --tr-s-5 und unten --tr-s-8 Polster (marke.css) — ohne Ausgleich stuende zwischen
     gruenem Kopf und Hero ein weisser Streifen. Gleiche Tokens, damit beides mitwandert. */
  margin:calc(-1 * var(--tr-s-5)) 0 calc(-1 * var(--tr-s-8));
  padding:0;
  color:var(--tr-body);
  font-size:var(--tr-fs-500);
  line-height:var(--tr-lh-read);
}
@media (min-width:768px){ .trc-start{ --trc-start-rand:var(--tr-pad-x); --trc-start-luft:72px; } }
@media (min-width:1024px){ .trc-start{ --trc-start-luft:88px; } }

/* border-box nur fuer eigene Elemente — das Suchformular im Hero gehoert dem Such-Bauteil */
.trc-start [class*="trc-start__"], .trc-start [class*="trc-start__"]::before, .trc-start [class*="trc-start__"]::after{ box-sizing:border-box; }

/* --- Baender und Innenspalte ---------------------------------------------- */
.trc-start__band{ padding:var(--trc-start-luft) 0; }
.trc-start__band--hell{ background:var(--tr-surface); }
.trc-start__band--sand{ background:var(--trc-start-sand); }
.trc-start__band--index{ background:var(--trc-start-flaeche); }
.trc-start__band--dunkel{
  background:var(--tr-brand); color:var(--trc-start-dunkel-text);
  /* Fokusring kehrt um wie im Kopf (base.css): hell auf dunklem Grund */
  --trc-focus-ring:#ffffff; --trc-focus-halo:rgba(15,61,47,.92);
}
.trc-start__innen{ max-width:var(--tr-maxw); margin:0 auto; padding:0 var(--trc-start-rand); }

/* --- Abschnittskopf ------------------------------------------------------- */
.trc-start__kopf{ max-width:760px; margin:0 0 var(--tr-s-6); }
.trc-start__kicker{
  display:flex; align-items:center; gap:10px; margin:0 0 var(--tr-s-3);
  font-size:var(--tr-fs-200); font-weight:var(--tr-fw-black); letter-spacing:var(--tr-ls-caps);
  text-transform:uppercase; line-height:1.4; color:var(--tr-brand);
}
.trc-start__kicker::before{ content:""; width:24px; height:2px; border-radius:2px; background:currentColor; }
.trc-start__h2{
  margin:0; color:var(--tr-ink); font-weight:var(--tr-fw-black);
  font-size:clamp(1.5rem, 1.12rem + 1.6vw, 2.125rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance;
}
.trc-start__h2--klein{ font-size:clamp(1.25rem, 1.08rem + .7vw, 1.5rem); }
.trc-start__intro{ margin:var(--tr-s-3) 0 0; max-width:680px; font-size:var(--tr-fs-500); line-height:1.65; color:var(--tr-body); }
.trc-start__h3{ margin:0 0 var(--tr-s-2); color:var(--tr-ink); font-size:var(--tr-fs-600); font-weight:var(--tr-fw-bold); line-height:1.3; }
.trc-start__mut{ color:var(--tr-mut); font-weight:var(--tr-fw-normal); }
/* uf-basis setzt svg{fill:currentColor} (basis.css) — das fuellt Strichsymbole zu Flaechen. */
.trc-start__ico{ display:block; flex:0 0 auto; width:24px; height:24px; fill:none; stroke:currentColor; }
.trc-start__nw{ white-space:nowrap; }

.trc-start__band--dunkel .trc-start__kicker{ color:var(--trc-start-akzent); }
.trc-start__band--dunkel .trc-start__h2,
.trc-start__band--dunkel .trc-start__h3{ color:#fff; }
.trc-start__band--dunkel .trc-start__intro{ color:var(--trc-start-dunkel-text); }

/* Fliesstext-Links nur in Prosa-Behaeltern — Karten und Listen setzen ihre Links selbst.
   (v1 hatte eine Regel auf .trc-home a und musste jede Karte mit 0,2,0 zurueckholen.) */
.trc-start__prosa a{ color:var(--tr-brand); text-decoration:underline; text-decoration-color:var(--tr-brand-rule); text-underline-offset:2px; }
.trc-start__prosa a:hover{ text-decoration-color:currentColor; }

/* summary gehoert nicht zur Fokusregel von base.css (.trc-home a/button) */
.trc-start summary:focus-visible{ outline:2px solid var(--trc-focus-ring); outline-offset:2px; box-shadow:0 0 0 4px var(--trc-focus-halo); }

/* --- 1. Hero ---------------------------------------------------------------- */
.trc-start__band--hero{
  padding:var(--tr-s-5) 0 var(--trc-start-luft);
  background:
    radial-gradient(900px 360px at 88% -10%, rgba(143,211,184,.30), rgba(143,211,184,0) 65%),
    linear-gradient(180deg, #e9f1ed 0%, #f3f7f5 62%, #ffffff 100%);
}
.trc-start__hero{
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"bild" "text" "zahlen";
  gap:var(--tr-s-5);
}
.trc-start__hero--ohne-bild{ grid-template-areas:"text" "zahlen"; }
.trc-start__hero-text{ grid-area:text; min-width:0; }
.trc-start__hero-bild{
  grid-area:bild; position:relative; overflow:hidden; aspect-ratio:16 / 10;
  border-radius:var(--trc-start-r); background:var(--trc-start-salbei);
  box-shadow:0 28px 56px -30px rgba(15,61,47,.5);
}
.trc-start__zahlen{ grid-area:zahlen; }
@media (min-width:560px) and (max-width:1023px){ .trc-start__hero-bild{ aspect-ratio:2 / 1; } }

.trc-start__h1{
  position:relative; margin:0 0 var(--tr-s-4);
  font-size:clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem); font-weight:var(--tr-fw-black);
  line-height:1.08; letter-spacing:-.025em; color:var(--tr-ink); text-wrap:balance;
}
.trc-start__h1-zusatz{ display:block; margin-top:.12em; color:var(--tr-brand); }
/* Der Gedankenstrich verbindet beide Teile im Text (Suchergebnis, Vorlesen), steht optisch
   aber am Zeilenende allein — deshalb nur visuell versteckt. */
.trc-start__h1-trenner{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.trc-start__lead{ margin:0 0 var(--tr-s-5); max-width:60ch; font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height:1.6; color:var(--tr-body); }

/* Grosses Suchfeld: gehoert dem Such-Bauteil, hier nur Form und Tiefe. Unter 768 px fuehrt
   der Kopf die Suche dauerhaft in einer eigenen Zeile — ein zweites Feld 200 px darunter
   waere eine Dublette (derselbe Grund wie in mobil.css). */
.trc-start__suche{ display:none; }
@media (min-width:768px){
  .trc-start__suche{ display:block; max-width:620px; margin:0 0 var(--tr-s-5); }
  .trc-start__suche .trc-suche{ gap:10px; }
  .trc-start__suche .trc-suche__eingabe{
    height:60px; padding-left:52px; font-size:var(--tr-fs-500);
    border-radius:14px; border-color:var(--tr-line-ui); background:var(--tr-surface);
    box-shadow:0 1px 2px rgba(15,61,47,.06), 0 14px 30px -18px rgba(15,61,47,.45);
  }
  .trc-start__suche .trc-suche__lupe{ left:18px; color:var(--tr-brand); }
  .trc-start__suche .trc-suche__lupe svg{ fill:none; }
  .trc-start__suche .trc-suche__senden{ min-height:60px; padding:0 26px; border-radius:14px; font-size:var(--tr-fs-500); }
}

/* Direkt-Links: mobil eine waagerechte Schiene statt drei Zeilen Chips. Sie laeuft bis an
   den Bildschirmrand (negativer Rand = Innenabstand), die Seite selbst scrollt nie quer. */
.trc-start__direkt{ display:flex; flex-direction:column; gap:var(--tr-s-2); }
.trc-start__direkt-label{ font-size:var(--tr-fs-300); font-weight:var(--tr-fw-medium); color:var(--tr-mut); }
.trc-start__chips{
  display:flex; gap:var(--tr-s-2); list-style:none; margin:0 calc(-1 * var(--trc-start-rand)); padding:2px var(--trc-start-rand) 4px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.trc-start__chips::-webkit-scrollbar{ display:none; }
.trc-start__chips li{ flex:0 0 auto; margin:0; }
.trc-start__chip{
  display:inline-flex; align-items:center; min-height:var(--tr-touch); padding:0 16px;
  /* Rand wie beim Umriss-Knopf (--tr-line-ui, 3,64:1): der Chip ist ein Bedienelement */
  border:1px solid var(--tr-line-ui); border-radius:var(--tr-r-pill); background:var(--tr-surface);
  color:var(--tr-ink); font-size:var(--tr-fs-400); font-weight:var(--tr-fw-medium); line-height:1.2;
  text-decoration:none; white-space:nowrap;
  transition:border-color var(--tr-dur-1) var(--tr-ease-out), background-color var(--tr-dur-1) var(--tr-ease-out), color var(--tr-dur-1) var(--tr-ease-out);
}
.trc-start__chip:hover{ border-color:var(--tr-brand); background:var(--tr-brand-tint); color:var(--tr-brand); }
@media (min-width:768px){
  .trc-start__direkt{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--tr-s-2) var(--tr-s-3); }
  .trc-start__chips{ flex-wrap:wrap; margin:0; padding:0; overflow:visible; }
}

/* Kennzahlen: Haarlinien ueber die 1-px-Luecke, nicht ueber Raender je Zelle */
.trc-start__zahlen{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; margin:0;
  background:var(--tr-line); border:1px solid var(--tr-line); border-radius:var(--trc-start-r); overflow:hidden;
}
.trc-start__zahl{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:2px; padding:14px 16px; background:rgba(255,255,255,.9); }
.trc-start__zahl dd{ margin:0; color:var(--tr-brand); font-size:clamp(1.25rem, 1.08rem + .8vw, 1.625rem); font-weight:var(--tr-fw-black); line-height:1.15; letter-spacing:-.01em; }
.trc-start__zahl dt{ margin:0; color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.35; }
@media (min-width:768px){ .trc-start__zahlen{ grid-template-columns:repeat(3, minmax(0,1fr)) minmax(0,1.3fr); } }

@media (min-width:1024px){
  .trc-start__band--hero{ padding-top:var(--tr-s-7); }
  .trc-start__hero{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    grid-template-areas:"text bild" "zahlen bild";
    column-gap:56px; row-gap:var(--tr-s-6); align-items:center;
  }
  .trc-start__hero--ohne-bild{ grid-template-columns:minmax(0,1fr); grid-template-areas:"text" "zahlen"; }
  .trc-start__hero-bild{ aspect-ratio:5 / 4; border-radius:20px; }
  .trc-start__zahlen{ align-self:start; }
}

/* Bilder allgemein: Rahmen gibt die Form, das Bild fuellt ihn */
.trc-start__bild{ display:block; width:100%; height:100%; }
.trc-start__bild img{ display:block; width:100%; height:100%; object-fit:cover; }
.trc-start__bild--hero img{ object-position:72% 45%; }

/* --- 2. Kategorien: Lebensbereiche ------------------------------------------ */
.trc-start__welten{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.trc-start__welten > li{ margin:0; }
.trc-start__welt{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--tr-surface); border:1px solid var(--tr-line); border-radius:var(--trc-start-r); overflow:hidden;
  box-shadow:var(--trc-start-schatten);
  transition:box-shadow var(--tr-dur-2) var(--tr-ease-out), border-color var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__welt:hover{ box-shadow:var(--trc-start-schatten-hover); border-color:var(--tr-line-strong); }
.trc-start__welt-bild{ aspect-ratio:3 / 2; overflow:hidden; background:var(--trc-start-salbei); }
.trc-start__welt-bild img{ transition:transform .6s var(--tr-ease-out); }
.trc-start__welt:hover .trc-start__welt-bild img{ transform:scale(1.035); }
.trc-start__welt-text{ display:flex; flex:1; flex-direction:column; gap:4px; padding:12px 12px 14px; }
.trc-start__welt-h{ margin:0; font-size:var(--tr-fs-500); font-weight:var(--tr-fw-black); line-height:1.25; letter-spacing:-.01em; }
.trc-start__welt-link{ color:var(--tr-ink); text-decoration:none; }
/* Die ganze Karte ist EIN Ziel: der Titel-Link spannt sich ueber die Karte. Ziel ist die
   Gruppe im Kategorienindex; dort stehen alle Kategorien des Bereichs verlinkt. */
.trc-start__welt-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:var(--trc-start-r); }
.trc-start__welt-link:focus-visible{ outline:none; box-shadow:none; }
.trc-start__welt-link:focus-visible::after{ outline:2px solid var(--trc-focus-ring); outline-offset:-2px; box-shadow:inset 0 0 0 4px var(--trc-focus-halo); }
.trc-start__welt:hover .trc-start__welt-link{ color:var(--tr-brand); }
.trc-start__welt-meta{ margin:0; color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.4; }
.trc-start__welt-bsp{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin:2px 0 0; color:var(--tr-body); font-size:var(--tr-fs-300); line-height:1.45;
}
.trc-start__welt-alle{
  display:none; align-items:center; gap:6px; margin-top:auto; padding-top:10px;
  color:var(--tr-brand); font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold);
}
.trc-start__welt-alle .trc-start__ico{ width:18px; height:18px; transition:transform var(--tr-dur-2) var(--tr-ease-out); }
.trc-start__welt:hover .trc-start__welt-alle .trc-start__ico{ transform:translateX(3px); }

@media (min-width:768px){
  .trc-start__welten{ gap:20px; }
  .trc-start__welt-text{ gap:6px; padding:18px 20px 18px; }
  .trc-start__welt-h{ font-size:var(--tr-fs-600); }
  .trc-start__welt-bsp{ font-size:var(--tr-fs-400); }
  .trc-start__welt-alle{ display:inline-flex; }
}
/* Ab 768 px drei Spalten: zwei Spalten ergaben bei 768 px drei Reihen grosser Karten (2.286 px Abschnitt) */
@media (min-width:768px){ .trc-start__welten{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px){ .trc-start__welten{ gap:24px; } }

/* --- 2b. Besonders gefragt ------------------------------------------------- */
.trc-start__gefragt{ margin-top:var(--tr-s-7); }
.trc-start__gefragt-text{ margin:0 0 var(--tr-s-4); color:var(--tr-mut); font-size:var(--tr-fs-400); line-height:1.5; }
.trc-start__kacheln{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.trc-start__kacheln > li{ margin:0; }
.trc-start__kachel{
  display:flex; flex-direction:column; gap:4px; height:100%; min-height:var(--tr-touch); padding:14px 14px 12px;
  border:1px solid transparent; border-radius:14px; background:var(--trc-start-flaeche); text-decoration:none;
  transition:background-color var(--tr-dur-2) var(--tr-ease-out), border-color var(--tr-dur-2) var(--tr-ease-out), box-shadow var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__kachel:hover{ background:var(--tr-surface); border-color:var(--tr-line-strong); box-shadow:var(--trc-start-schatten); }
.trc-start__kachel-name{ color:var(--tr-ink); font-size:var(--tr-fs-400); font-weight:var(--tr-fw-black); line-height:1.3; hyphens:manual; overflow-wrap:break-word; }
.trc-start__kachel:hover .trc-start__kachel-name{ color:var(--tr-brand); }
.trc-start__kachel-n{ color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.4; }
.trc-start__merkmale{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.trc-start__merkmale:not(:has(*)){ display:none; }
/* Unter 560 px nur Name und Zahl: die Merkmale verdreifachten die Kachelhoehe (gemessen 390 px). */
@media (max-width:559px){ .trc-start__merkmale{ display:none; } }
.trc-start__merkmal{
  display:inline-flex; align-items:center; gap:3px; padding:1px 8px;
  border:1px solid var(--tr-line-strong); border-radius:var(--tr-r-pill); background:var(--tr-surface);
  color:var(--tr-body); font-size:var(--tr-fs-200); font-weight:var(--tr-fw-medium); line-height:1.6; white-space:nowrap;
}
@media (min-width:1024px){ .trc-start__kacheln{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; } }

/* --- 3. Methode (Markenband) ------------------------------------------------ */
.trc-start__schritte{ list-style:none; margin:0 0 var(--tr-s-6); padding:0; display:grid; gap:14px; counter-reset:trc-schritt; }
.trc-start__schritt{
  position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; margin:0; padding:16px; counter-increment:trc-schritt;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--trc-start-r); background:rgba(255,255,255,.06);
}
.trc-start__schritt > .trc-start__h3, .trc-start__schritt > p{ grid-column:2; }
.trc-start__schritt > .trc-start__h3{ margin-top:2px; padding-right:28px; font-size:var(--tr-fs-500); }
.trc-start__schritt::before{
  content:counter(trc-schritt, decimal-leading-zero); position:absolute; top:18px; right:16px;
  color:var(--trc-start-akzent); font-size:var(--tr-fs-300); font-weight:var(--tr-fw-black); letter-spacing:var(--tr-ls-caps);
}
.trc-start__schritt-ico{
  grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:rgba(143,211,184,.16); color:var(--trc-start-akzent);
}
.trc-start__schritt p{ margin:0; color:var(--trc-start-dunkel-text); font-size:var(--tr-fs-400); line-height:1.6; }
@media (min-width:768px){
  .trc-start__schritte{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
  .trc-start__schritt{ display:block; padding:20px; }
  .trc-start__schritt::before{ top:22px; right:20px; }
  .trc-start__schritt-ico{ margin-bottom:14px; }
  .trc-start__schritt > .trc-start__h3{ margin-top:0; padding-right:0; font-size:var(--tr-fs-600); }
}

.trc-start__note-raster{ display:grid; gap:20px; }
@media (min-width:1024px){ .trc-start__note-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; align-items:start; } }

/* Beispiel: weisse Karte auf dem Markenband — der Fokusring kehrt hier zurueck */
.trc-start__beispiel{
  padding:22px; border-radius:var(--trc-start-r); background:var(--tr-surface); color:var(--tr-body);
  --trc-focus-ring:var(--tr-brand); --trc-focus-halo:rgba(255,255,255,.92);
}
.trc-start__band--dunkel .trc-start__beispiel .trc-start__h3{ color:var(--tr-ink); }
.trc-start__beispiel-text{ margin:0 0 var(--tr-s-4); color:var(--tr-mut); font-size:var(--tr-fs-400); line-height:1.5; }
.trc-start__kriterien{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.trc-start__kriterium{ margin:0; }
.trc-start__krit-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.trc-start__krit-name{ color:var(--tr-ink); font-size:var(--tr-fs-400); font-weight:var(--tr-fw-bold); }
.trc-start__krit-w{ color:var(--tr-brand); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-black); white-space:nowrap; }
/* Gewichtsbalken: Laenge, keine Bewertung — deshalb Markenfarbe, nie eine Notenfarbe */
.trc-start__balken{ display:block; height:8px; margin:8px 0; overflow:hidden; border-radius:var(--tr-r-pill); background:var(--trc-start-salbei); }
.trc-start__balken i{ display:block; height:100%; border-radius:var(--tr-r-pill); background:linear-gradient(90deg, #3f8a6c, var(--tr-brand)); }
.trc-start__krit-wie{ display:block; color:var(--tr-body); font-size:var(--tr-fs-300); line-height:1.5; }

.trc-start__grenzen{ padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:var(--trc-start-r); background:rgba(255,255,255,.06); }
.trc-start__grenzen .trc-start__h2{ margin-bottom:var(--tr-s-4); color:#fff; }
.trc-start__liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.trc-start__liste + .trc-start__liste{ margin-top:var(--tr-s-4); padding-top:var(--tr-s-4); border-top:1px solid rgba(255,255,255,.14); }
.trc-start__liste li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; margin:0; color:var(--trc-start-dunkel-text); font-size:var(--tr-fs-400); line-height:1.55; }
.trc-start__liste li > .trc-start__ico{ width:28px; height:28px; padding:5px; border-radius:var(--tr-r-pill); }
.trc-start__liste--ja li > .trc-start__ico{ background:rgba(143,211,184,.18); color:var(--trc-start-akzent); }
.trc-start__liste--nein li > .trc-start__ico{ background:rgba(255,255,255,.10); color:var(--trc-start-dunkel-text); }
.trc-start__liste b{ color:#fff; font-weight:var(--tr-fw-bold); }

.trc-start__mehr{ margin:var(--tr-s-5) 0 0; }
.trc-start__mehr a{ display:inline-flex; align-items:center; gap:8px; min-height:var(--tr-touch); color:var(--tr-brand); font-weight:var(--tr-fw-bold); text-decoration:none; }
.trc-start__mehr a:hover{ text-decoration:underline; text-underline-offset:3px; }
.trc-start__mehr .trc-start__ico{ width:18px; height:18px; }
.trc-start__band--dunkel .trc-start__mehr a{ color:var(--trc-start-akzent); }

/* --- 4. Testergebnisse Dritter --------------------------------------------- */
.trc-start__tests{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.trc-start__tests > li{ margin:0; }
.trc-start__test{
  position:relative; display:flex; flex-direction:column; gap:2px; height:100%; padding:16px 18px;
  border:1px solid var(--tr-line); border-radius:14px; background:var(--tr-surface); text-decoration:none;
  transition:border-color var(--tr-dur-2) var(--tr-ease-out), box-shadow var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__test:hover{ border-color:var(--tr-line-strong); box-shadow:var(--trc-start-schatten); }
.trc-start__test-geraet{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  color:var(--tr-ink); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold); line-height:1.35;
}
.trc-start__test:hover .trc-start__test-geraet{ color:var(--tr-brand); text-decoration:underline; text-underline-offset:2px; }
.trc-start__test-kat{ color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.4; }
.trc-start__test-urteil{ margin-top:10px; color:var(--tr-ink); font-size:var(--tr-fs-600); font-weight:var(--tr-fw-black); line-height:1.2; }
.trc-start__test-quelle{ color:var(--tr-body); font-size:var(--tr-fs-300); line-height:1.5; }
.trc-start__tests-fuss{ margin:var(--tr-s-4) 0 0; max-width:760px; color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.6; }
@media (min-width:768px){ .trc-start__tests{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .trc-start__tests{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* --- 5. Rechner ------------------------------------------------------------- */
.trc-start__rechner{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.trc-start__rechner > li{ margin:0; }
.trc-start__werkzeug{
  display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; row-gap:4px; align-content:start; height:100%;
  padding:18px; border:1px solid rgba(15,61,47,.08); border-radius:var(--trc-start-r); background:var(--tr-surface);
  box-shadow:var(--trc-start-schatten); text-decoration:none;
  transition:box-shadow var(--tr-dur-2) var(--tr-ease-out), border-color var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__werkzeug:hover{ border-color:var(--tr-line-strong); box-shadow:var(--trc-start-schatten-hover); }
.trc-start__werkzeug-ico{
  grid-row:1 / span 3; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--trc-start-salbei); color:var(--tr-brand);
}
.trc-start__werkzeug-name{ color:var(--tr-ink); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-black); line-height:1.3; }
.trc-start__werkzeug:hover .trc-start__werkzeug-name{ color:var(--tr-brand); }
.trc-start__werkzeug-frage{ color:var(--tr-body); font-size:var(--tr-fs-400); line-height:1.5; }
.trc-start__werkzeug-eingabe{ color:var(--tr-mut); font-size:var(--tr-fs-300); line-height:1.5; }
@media (min-width:640px){ .trc-start__rechner{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .trc-start__rechner{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }

/* --- 6. Haeufige Fragen ----------------------------------------------------- */
.trc-start__faq-raster{ display:grid; gap:var(--tr-s-5); }
.trc-start__faq-raster > .trc-start__kopf{ margin:0; }
.trc-start__faq{ border-top:1px solid var(--tr-line); }
.trc-start__frage{ border-bottom:1px solid var(--tr-line); }
.trc-start__frage > summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 0;
  list-style:none; cursor:pointer; color:var(--tr-ink); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-bold); line-height:1.4;
}
.trc-start__frage > summary::-webkit-details-marker{ display:none; }
.trc-start__frage > summary::after{
  content:""; flex:0 0 auto; width:32px; height:32px; border-radius:var(--tr-r-pill);
  background:var(--trc-start-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D2F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition:transform var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__frage[open] > summary::after{ transform:rotate(45deg); }
.trc-start__frage > summary:hover{ color:var(--tr-brand); }
.trc-start__antwort{ max-width:72ch; padding:0 0 18px; }
.trc-start__antwort p{ margin:0; color:var(--tr-body); font-size:var(--tr-fs-500); line-height:1.65; }
@media (min-width:1024px){
  .trc-start__faq-raster{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:64px; align-items:start; }
  .trc-start__faq-raster > .trc-start__kopf{ position:sticky; top:calc(var(--trc-header-h) + 24px); }
}

/* --- 7. Alle Kategorien ----------------------------------------------------- */
.trc-start__index{ display:grid; gap:12px; }
.trc-start__idx{ padding:2px 16px 6px; border:1px solid var(--tr-line); border-radius:14px; background:var(--tr-surface); }
/* Sprungziel der Lebensbereich-Karten: nicht unter dem klebenden Kopf landen (mobil zweizeilig, 109 px) */
.trc-start__idx{ scroll-margin-top:124px; }
@media (min-width:768px){ .trc-start__idx{ scroll-margin-top:88px; } }
.trc-start__idx > summary{
  display:flex; align-items:center; gap:10px; min-height:52px; list-style:none; cursor:pointer;
  color:var(--tr-ink); font-size:var(--tr-fs-500); font-weight:var(--tr-fw-black);
}
.trc-start__idx > summary::-webkit-details-marker{ display:none; }
.trc-start__idx > summary::after{
  content:""; flex:0 0 auto; width:20px; height:20px; margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6879' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition:transform var(--tr-dur-2) var(--tr-ease-out);
}
.trc-start__idx[open] > summary::after{ transform:rotate(180deg); }
.trc-start__idx-n{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:24px; padding:0 8px;
  border-radius:var(--tr-r-pill); background:var(--trc-start-salbei); color:var(--tr-brand); font-size:var(--tr-fs-200); font-weight:var(--tr-fw-black);
}
.trc-start__idx-liste{ list-style:none; margin:0; padding:0 0 4px; }
.trc-start__idx-liste li{ margin:0; break-inside:avoid; }
.trc-start__idx-liste a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--tr-touch);
  border-top:1px solid var(--tr-line); color:var(--tr-body); font-size:var(--tr-fs-400); text-decoration:none;
}
.trc-start__idx-liste a:hover{ color:var(--tr-brand); }
.trc-start__idx-zahl{ color:var(--tr-mut); font-size:var(--tr-fs-300); }
@media (min-width:768px){ .trc-start__index{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 24px; align-items:start; } }
@media (min-width:1024px){
  .trc-start__index{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 20px; }
  .trc-start__idx--gross{ grid-column:span 2; }
  .trc-start__idx--gross .trc-start__idx-liste{ columns:2; column-gap:24px; }
}


/* ========================================================================== */
/* seitenbreite                                                           */
/* ========================================================================== */
/* ==========================================================================
   SEITENBREITE — die Huelle der Werkzeugseiten oeffnen

   Gemessen am 12.09.2026 auf /merkliste/, /vergleich/, /konto/ bei 1440 px
   (scripts/_tr_werkzeug_probe.mjs, bestaetigt bei 1280 und 1024 px):

     div.rh-container         1080 px
      div#content.main-side    755 px   float:left
       div.rh-post-wrapper     755 px   25 px Polster, weisse Karte mit Rahmen
        .trc-vgl               703 px   obwohl das Modul 1240 px anmeldet
      aside.sidebar            300 px   Hoehe 0, null Kindelemente

   RehUb stellt neben den Inhalt 325 px fuer eine Seitenleiste bereit, die auf
   diesen Seiten leer ist. Der Footer darunter laeuft voll breit — der Bruch ist
   deutlich sichtbar.

   Diese Datei oeffnet NUR die Huelle. Sie setzt fuer die Module keine einzige
   Breite, weil die Module ihre richtige Breite bereits selbst anmelden:
   .trc-vgl und .trc-merk max-width:var(--tr-maxw), .trc-konto
   max-width:var(--tr-maxw-text), jeweils mit margin:0 auto. Ein Mechanismus
   liefert dadurch drei verschiedene, jeweils richtige Breiten — die Begruendung
   je Seite steht unten unter "Breite je Seite".

   REICHWEITE ab 1024 px. Darunter loest RehUb seine Spalten selbst auf
   (.sidebar,.main-side,.content{width:100%;float:none} in @media max-width:1023px),
   dort ist die Huelle bereits in Ordnung. Mobil bleibt deshalb unberuehrt, und
   der Randausgleich von mobil.css (unter 768 px) kann nicht kollidieren.

   THEME-SELEKTOREN: vier, jeder unten einzeln begruendet. Sie stehen alle in
   dieser einen Datei und sonst nirgends im Chrome. Beim Themewechsel wird die
   Datei geloescht, nicht durchsucht — das ist der Grund, warum die
   Theme-Abhaengigkeit hier und nicht in chrome.css oder in den Bauteilen liegt.

   SPEZIFITAET ist hier kein Detail: chrome.css laedt VOR dem Eltern-Theme
   (gemessen im head von /vergleich/: trc-chrome-css bei Byte 3755,
   parent-style-css bei 24431). Bei Gleichstand gewinnt immer RehUb, die
   Reihenfolge hilft uns nie. Jede Regel unten muss STRIKT hoeher liegen,
   darum steht an jeder die gerechnete Spezifitaet.

   Die Klassen trc-breit und trc-breit--{art} kommen aus seitenbreite.php und
   haengen am Hauptschalter tr_chrome. Ausschalten nimmt diese Datei mit zurueck.
   ========================================================================== */

@media (min-width:1024px){

	/* 1. Die Huelle selbst.
	   Ueberschreibt .rh-container{width:1080px} aus dem RehUb-Customizer (0,1,0);
	   unsere (0,3,1) gewinnt strikt. width:auto statt eines festen Wertes, damit
	   die Huelle bei 1024 px nicht ueber den Sichtbereich hinauswaechst — das
	   Maximum kommt allein aus dem Designsystem-Token.
	   :not(.full_post_area) ist die Schutzklausel fuer die Startseite: dort hat
	   das Theme die Huelle per Seitenoption bereits geoeffnet (gemessen 1440 px,
	   Polster 0). Ohne die Klausel wuerde diese Regel eine funktionierende Seite
	   von 1440 auf 1240 verengen. Die Klausel wirkt automatisch fuer jede
	   kuenftige Seite, die dieselbe Theme-Option traegt. */
	body.trc-breit .rh-container:not(.full_post_area){
		width:auto;
		max-width:var(--tr-maxw);
	}

	/* 2. Die Inhaltsspalte, die 325 px an die leere Seitenleiste abgibt.
	   Gegner ist .main-side:not(.full_width){width:755px} aus dem Customizer —
	   (0,2,0), weil das Argument von :not() mitzaehlt. Unsere (0,2,1) gewinnt
	   strikt ueber das Element body.
	   width:auto statt 100 %: sollte das Theme an .main-side einen rechten
	   Aussenabstand fuehren, wird der Inhalt damit schmaler statt ueberzulaufen.
	   float:none, weil eine 100 % breite Spalte nichts mehr umfliessen kann. */
	body.trc-breit .main-side{
		width:auto;
		float:none;
	}

	/* 3. Die weisse Karte des Themes.
	   Die Module bringen ihre eigenen Flaechen mit (.trc-vgl-scroll hat Grund,
	   Rahmen und Radius) — die Theme-Karte darum herum ergaebe Karte in Karte
	   mit doppeltem Rahmen, und ihr 25-px-Polster kaeme zum Polster des Moduls
	   hinzu.
	   Drei Klassen sind noetig, nicht zwei: die staerksten bestehenden Regeln
	   sind body:not(.noinnerpadding) .rh-post-wrapper und
	   body:has(.trr-article) .rh-post-wrapper mit je (0,2,1) — Gleichstand
	   verlieren wir wegen der Ladereihenfolge. .trc-on ist keine neue
	   Abhaengigkeit: die Klasse kommt aus header.php und haengt am selben
	   Hauptschalter wie .trc-breit, beide stehen immer gemeinsam am body. */
	body.trc-on.trc-breit .rh-post-wrapper{
		padding:0;
		background:none;
		border:0;
		box-shadow:none;
	}

	/* 4. Die leere Seitenleiste.
	   Gegner .sidebar,.side-twocol{width:300px;float:right} (0,1,0), unsere
	   (0,2,1) gewinnt strikt. Sie wird ausgeblendet und nicht nur verschmaelert,
	   weil ein leerer Float rechts neben einer vollbreiten Spalte sonst unter
	   den Inhalt rutscht und dort als unerklaerliche Luecke sichtbar bleiben
	   kann. Bewusste Folge: Ein Widget, das jemand spaeter in diese
	   Seitenleiste legt, erscheint auf Werkzeugseiten nicht — genau das ist
	   gewollt, diese Seiten sind Werkzeuge und keine Magazinseiten. */
	body.trc-breit .sidebar{
		display:none;
	}

	/* ------------------------------------------------------------------
	   Breite je Seite

	   /vergleich/  1240 px (--tr-maxw), aus .trc-vgl — keine Regel noetig.
	     Der Vergleich ist eine Matrix: die Kriterienspalte klebt links
	     (min-width 170), jede Produktspalte misst min. 180. Aus 703 px
	     nutzbarer Breite werden 2 gleichzeitig sichtbare Geraete, aus 1240 px
	     werden 5. Breiter waere nicht besser: ab etwa sieben Spalten muss der
	     Blick zwischen klebender Kriterienspalte und dem Wert ganz rechts eine
	     ganze Bildschirmbreite ueberbruecken, und mehr als sechs Geraete
	     vergleicht ohnehin niemand.

	   /konto/      660 px (--tr-maxw-text), aus .trc-konto — keine Regel noetig.
	     Ein Anmeldeformular ist eine Lesespalte, keine Flaeche. Die Breite war
	     schon vorher richtig; falsch war die Lage: bei 1440 px sass die Spalte
	     bei x=228 statt x=390, also 162 px links aus der Mitte, weil rechts
	     daneben die leere Seitenleiste stand. Regel 1 und 4 zentrieren sie,
	     ohne dass konto.css etwas davon merkt.

	   /merkliste/  Huelle 1240 px, Liste 960 px — die einzige Regel unten.
	     Die Huelle darf breit bleiben (Ueberschrift, Gruppentitel, kuenftige
	     Kartenraster). Die Zeile selbst ist aber eine Leseeinheit aus Bild,
	     Titel und Aktion (grid 72px 1fr auto): bei 1200 px bekaeme die
	     Titelspalte rund 880 px, Produktname und der zugehoerige Knopf stuenden
	     fast einen Meter auseinander und die Zuordnung "dieser Knopf gehoert zu
	     dieser Zeile" kostet einen Blicksprung. Bei 960 px bleibt die
	     Titelspalte bei rund 650 px — lang genug fuer zweizeilige Produktnamen,
	     kurz genug fuer den Zusammenhang. Das ist der eine Fall, in dem mehr
	     Breite die Seite schlechter macht.
	     Die Liste bleibt linksbuendig unter ihrer Ueberschrift, nicht zentriert.
	   ------------------------------------------------------------------ */

	/* Gehoert fachlich zu konto.css, steht aber hier, weil die Begrenzung erst
	   noetig wird, wenn diese Datei die Huelle oeffnet — und mit ihr wieder
	   verschwindet. Die Seitenklasse macht die Zustaendigkeit eindeutig. */
	body.trc-breit--merkliste .trc-merk-liste{
		max-width:960px;
	}
}


/* ========================================================================== */
/* Mobil [mobil.css / mobil.php]  [mobil]                                 */
/* ========================================================================== */
/* ==========================================================================
   chrome.css - Bauteil: MOBIL

   Dieses Bauteil raeumt mobile Defekte auf, die an den Naehten zwischen den
   Bauteilen und zwischen Chrome, RehUb und Elementor entstehen. Es steht als
   LETZTES im Stylesheet, damit es bei gleicher Spezifitaet gewinnt - das ist
   sein einziges Mittel, denn es darf kein anderes Bauteil aendern.

   Eigene Klassen hat es keine. Damit es trotzdem nicht zur Resterampe wird,
   gelten fuer dieses Bauteil zwei harte Hausregeln:

     1. Nur Regeln in max-width-Media-Queries. Was oberhalb 768px gilt, gehoert
        dem Bauteil, dem die Klasse gehoert. Ausnahmen gibt es keine.
     2. Jeder Selektor auf eine RehUb- oder Elementor-Klasse traegt seine
        Begruendung in der Zeile darueber. Genau deren Seitenrand zu korrigieren
        ist der Auftrag; alles andere bleibt unberuehrt.

   Auf die tr-Klassen des Uebersichtsmoduls zielt hier NICHTS - der Innenrand
   von .tr-ueb gehoert dem Modul. Dieses Bauteil sorgt nur dafuer, dass die
   Huelle um das Modul herum nichts mehr draufrechnet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NICHT geaendert: scroll-padding-top (base.css:69).

   Der Befund verlangt, --trc-header-h mobil von 56px auf 108px zu heben, weil der
   Kopf im Ruhezustand zwei Zeilen hat (gemessen 109px) und scroll-padding-top
   daran haengt. Nachgemessen an einem tief liegenden Ankerziel auf
   /kuehlschrank/ bei 390px:

     scroll-padding-top  64px  ->  Ziel landet  7px unter der Kopfunterkante
     scroll-padding-top 117px  ->  Ziel landet 60px unter der Kopfunterkante

   Der Grund: Wer springt, hat gescrollt, und ab 120px Scrolltiefe ist der Kopf
   verdichtet (57px). Fuer diesen Zustand ist der heutige Wert richtig; der
   vorgeschlagene risse bei jedem Ankersprung einen 60px hohen Spalt auf. Die vom
   Befund beschriebene Luecke betrifft nur Ziele in den obersten ~180px eines
   Dokuments - dort liegt auf diesem Portal kein Ankerziel, auch das neue
   Sprungziel #trc-inhalt nicht: es steht am Dokumentanfang, der Sprung endet
   gemessen bei scrollY 0 und genau an der Kopfunterkante (109px), mit und ohne
   Aenderung. Den Token zu heben haette zusaetzlich den klebenden Tabellenkopf im
   Vergleich (vergleich.css:111) mobil 51px nach unten geschoben.

   Deshalb bleibt hier alles wie es ist - und diese Notiz steht hier, damit die
   Rechnung nicht ein zweites Mal aufgemacht wird.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Kopfleiste bei 320px: Logo und Lupe ueberschnitten sich um 13px.

   Gemessen im verdichteten Zustand bei 320px: Logo 72-177, Lupe 164-208.
   Die Rechnung der Zeile geht bei drei Aktionsknoepfen nicht auf:
   16 Rand + 44 Menue + 12 Luecke + 105 Logo + 12 Luecke + 3x44 Aktionen
   + 16 Rand = 345 statt 320.

   Zwei Stellschrauben, beide ohne Funktionsverlust: die beiden aeusseren
   Luecken (12 -> 4) und die Wortmarke im verdichteten Zustand (20 -> 17px;
   die Breite skaliert mit der Schriftgroesse, 105 -> 89px). Neu:
   16 + 44 + 4 + 89 + 4 + 132 + 16 = 305 bei 320px Sichtfeld, 15px Reserve.

   Warum nicht die Luecke zwischen den Aktionsknoepfen: die drei Knoepfe sind
   44px-Trefferfelder ohne eigenen Rand, ihre 4px sind der einzige sichtbare
   Abstand. Warum nicht die Lupe ausblenden: dann waere die Suche im
   verdichteten Zustand gar nicht mehr erreichbar.
   -------------------------------------------------------------------------- */
@media (max-width:359px){
  /* Zwei Klassen, nicht eine: header.php gibt an wp_head 999 ein kritisches
     Inline-CSS aus, das .trc-header__zeile--haupt{gap:12px} wiederholt. Es steht
     hinter chrome.css, bei Gleichstand verliert das Stylesheet (nachgemessen).
     Seit 26.09.2026 stehen die Aktionen im DOM hinter der Suche (Tab-Reihenfolge)
     und damit NICHT mehr in der Hauptzeile: die Luecke zwischen Marke und Aktionen
     ist jetzt die column-gap des Bandes und muss hier mit schrumpfen. */
  .trc-header .trc-header__zeile--haupt{ gap:var(--tr-s-1); }
  .trc-header .trc-header__band{ column-gap:var(--tr-s-1); }
  .trc-header--dicht .trc-logo{ --trc-logo-fs:17px; }

  /* Die Rechnung oben gilt fuer DREI Aktionsknoepfe. Sobald ein Geraet im
     Vergleich liegt, blendet das Vergleichs-Bauteil einen vierten ein
     (.trc-vgl-einstieg, per JS aus hidden geholt) und die Zeile braucht 349
     statt 305px — Logo und Lupe ueberschnitten sich wieder.

     Der vierte Knopf ist hier der entbehrliche: Sobald er ueberhaupt erscheint,
     steht am unteren Bildschirmrand bereits die Vergleichsleiste mit
     "Vergleich oeffnen" und derselben Zahl. Die Funktion geht also nicht
     verloren, nur ihr zweiter Einstieg. Menue, Suche und Merkliste haben
     keinen solchen Ersatz und bleiben. */
  .trc-header .trc-vgl-einstieg{ display:none; }
}

/* --------------------------------------------------------------------------
   2. Einstiegskacheln der Startseite bei 320px.

   repeat(auto-fill,minmax(158px,1fr)) braucht 2x158 + 8 = 324px; bei 320px
   Sichtfeld bleiben nach dem Rand nur 288px. Die zwoelf Kacheln stapeln sich
   dadurch ausgerechnet auf den kleinsten Geraeten zu einem 937px hohen Block
   (391px mehr Scrollweg als bei 390px Breite).

   136px passt ab 280px nutzbarer Breite zweispaltig. Die 640er-Regel des
   Bauteils (212px) bleibt unberuehrt und uebernimmt frueh genug.
   -------------------------------------------------------------------------- */
@media (max-width:359px){
  .trc-home__kacheln{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
}

/* --------------------------------------------------------------------------
   3. Zwei Suchfelder im selben Bild.

   Mobil fuehrt die Kopfleiste die Suche dauerhaft in einer zweiten Zeile
   (gemessen y=58), die Startseite wiederholt sie 330px darunter in Grossform
   (y=390) - gleicher Platzhalter, gleiches Ziel, beide im ersten Bildschirm.
   Die Grossform weicht deshalb unter 768px; oberhalb stehen die beiden weit
   genug auseinander und sie bleibt.

   Kein hidden-Attribut, sondern display: das Formular bleibt im Markup, die
   Autovervollstaendigung im Kopf arbeitet unveraendert weiter, und ein
   Rueckbau ist eine geloeschte Regel.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  /* Zwei Klassen aus demselben Grund wie oben: suche.php setzt an wp_head 999
     .trc-suche{display:flex} hinter chrome.css. */
  .trc-home .trc-suche--gross{ display:none; }
}

/* --------------------------------------------------------------------------
   4. Mobiler Seitenrand: ein Wert statt fuenf.

   Gemessen bei 390px, Abstand des ersten Inhalts vom linken Rand:
     Kategorie, Ueberschrift (Elementor)   10px
     Kategorie, Modul                      30px  (10 Elementor + 20 Modul)
     Produktseite                          15px
     Impressum                             15px
     Rechner                               35px  (15 + 20 rh-post-wrapper)
     Startseite (trc-home)                 16px
     Merkliste, Vergleich                  31px  (15 + 16 trc-merk/trc-vgl)

   Ziel ist --tr-pad-x-sm (16px) aus dem Designsystem, und zwar genau EINMAL je
   Seite. Das Mittel ist nicht, ueberall 16px draufzulegen, sondern jeder Seite
   genau einen Randgeber zu lassen:

     RehUb-Familie    .rh-container gibt den Rand, alles darin gibt keinen.
     Elementor-Familie das Widget gibt den Rand, die Spalte darum keinen.
     Chrome-Seiten    das Chrome-Bauteil gibt den Rand, die Huelle keinen.

   Diese Regeln greifen nur mit .trc-on am body, also nur bei eingeschaltetem
   Chrome - der Hauptschalter nimmt sie mit zurueck.
   -------------------------------------------------------------------------- */
@media (max-width:767px){

  /* RehUb setzt hier 15px (Produktseite, Impressum, Werkzeugseiten). Der
     einzige Randgeber der RehUb-Familie, deshalb traegt er den Token. */
  .trc-on .rh-container{
    padding-left:var(--tr-pad-x-sm);
    padding-right:var(--tr-pad-x-sm);
  }

  /* RehUb legt auf manchen Seitenvorlagen noch einmal Rand drauf (gemessen auf
     /rechner/: 15 + 20 = 35px), auf anderen 0. Der zweite Rand entfaellt;
     senkrecht bleibt die Regel unangetastet.
     Drei Klassen sind noetig, nicht zwei: die staerkste bestehende Regel ist
     body:has(.trr-article) .rh-post-wrapper mit 0,2,1 (gemessen per CDP), dazu
     body:not(.noinnerpadding) .rh-post-wrapper mit ebenfalls 0,2,1. */
  .trc-on .rh-content-wrap .rh-post-wrapper{ padding-left:0; padding-right:0; }

  /* Startseite, Merkliste, Vergleich und Konto bringen ihren Rand selbst mit
     (16px). Wo eines dieser Bauteile in der Huelle steckt, tritt die Huelle
     zurueck - sonst stuenden dort 31px. :has ist hier richtig, weil die
     Bedingung wirklich der Inhalt ist und es keine Seitenklasse dafuer gibt. */
  .trc-on .rh-container:has(.trc-home, .trc-merk, .trc-vgl, .trc-konto){
    padding-left:0;
    padding-right:0;
  }

  /* Elementor gibt der Spalte 10px. Der Rand wandert von der Spalte auf die
     Widgets, weil nur so das Modul-Widget ausgenommen werden kann, ohne die
     Ueberschrift daneben mitzunehmen - beide sitzen in derselben Spalte.
     Vier Klassen statt zwei, weil Elementor seine 10px als Nachfahrenkette
     schreibt (.elementor-column-gap-default > .elementor-column >
     .elementor-element-populated) und chrome.css VOR dem Theme laedt - bei
     Gleichstand verliert unsere Regel. Diese Fassung gewinnt nachweislich:
     Ueberschrift auf /kuehlschrank/ 10 -> 16px. */
  .trc-on .elementor-column > .elementor-widget-wrap.elementor-element-populated{
    padding-left:0;
    padding-right:0;
  }
  .trc-on .elementor-widget-wrap > .elementor-widget{
    padding-left:var(--tr-pad-x-sm);
    padding-right:var(--tr-pad-x-sm);
  }

  /* Verschachtelte Abschnitte wuerden den Rand sonst ein zweites Mal setzen
     (16 + 16). Die Archivvorlage hat heute keine, andere Seiten koennen welche
     haben - die Regel ist die Versicherung dagegen. */
  .trc-on .elementor-inner-section .elementor-widget{
    padding-left:0;
    padding-right:0;
  }

  /* Das Uebersichtsmodul steckt in einem Shortcode-Widget der Archivvorlage und
     bringt seinen Innenrand selbst mit. Hier also kein Rand - der Rest bleibt
     Sache des Moduls. Eng auf die Archivvorlage begrenzt, damit
     Shortcode-Widgets auf anderen Seiten ihren Rand behalten. */
  .trc-on .elementor-location-archive .elementor-widget-shortcode{
    padding-left:0;
    padding-right:0;
  }
}