:root{ --uf-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--uf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--uf-fs-base: 16px; --uf-lh-base: 1.6;
--uf-ink:   #1c2430; --uf-body:  #374151; --uf-mut:   #5d6879; --uf-bg:    #ffffff;
--uf-line:  #e6e9ef;
--uf-line-ui: #7c8798;
--uf-link:       #0F3D2F; --uf-link-hover: #0A2B21;
--uf-link-rule:  rgba(15,61,47,.55);
--uf-focus: #0F3D2F;
--uf-focus-halo: rgba(255,255,255,.92);
--uf-maxw: 1240px;
--uf-pad-x: 20px;
--uf-pad-x-sm: 16px;
--uf-touch: 44px;
--uf-radius: 10px;
} *, *::before, *::after{ box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre,
fieldset, legend, table, caption{
margin: 0;
padding: 0;
} [hidden]{ display: none !important; } html{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: var(--uf-font);
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: var(--uf-font);
font-size: var(--uf-fs-base);
line-height: var(--uf-lh-base);
color: var(--uf-body);
background-color: var(--uf-bg);
margin: 0;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
h1, h2, h3, h4, h5, h6{
color: var(--uf-ink);
font-weight: 700;
line-height: 1.25;
text-wrap: balance;
}
h1{ font-size: 1.875rem; margin: 0 0 1rem; } h2{ font-size: 1.5rem;   margin: 2rem 0 .75rem; } h3{ font-size: 1.25rem;  margin: 1.5rem 0 .5rem; } h4{ font-size: 1.125rem; margin: 1.25rem 0 .5rem; }
h5{ font-size: 1rem;     margin: 1rem 0 .5rem; }
h6{ font-size: .875rem;  margin: 1rem 0 .5rem; }
h1:first-child, h2:first-child, h3:first-child{ margin-top: 0; }
p{ margin: 0 0 1rem; }
p:last-child{ margin-bottom: 0; }
b, strong{ font-weight: 700; }
i, em{ font-style: italic; }
small{ font-size: .875em; }
sub, sup{ font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; }
sup{ top: -.5em; }
sub{ bottom: -.25em; }
mark{ background: #fff3bf; color: inherit; padding: 0 .15em; }
abbr[title]{ text-decoration: underline dotted; cursor: help; }
code, kbd, samp, pre{ font-family: var(--uf-font-mono); font-size: .9375em; }
pre{ overflow-x: auto; padding: 1rem; background: #f6f8fb; border-radius: var(--uf-radius); }
blockquote{ margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--uf-line); color: var(--uf-mut); }
hr{ border: 0; height: 1px; background: var(--uf-line); margin: 2rem 0; } ul, ol{ margin: 0 0 1rem; padding-left: 1.5rem; }
li{ margin: 0 0 .25rem; }
li > ul, li > ol{ margin-top: .25rem; margin-bottom: 0; }
nav ul, nav ol,
.uf-liste-blank{ list-style: none; margin: 0; padding: 0; }
.uf-liste-blank > li{ margin: 0; }
dl{ margin: 0 0 1rem; }
dt{ font-weight: 700; }
dd{ margin: 0 0 .5rem 1rem; } a{
color: var(--uf-link);
text-decoration: underline;
text-decoration-color: var(--uf-link-rule);
text-underline-offset: .15em;
text-decoration-thickness: from-font;
}
a:hover, a:focus-visible{ color: var(--uf-link-hover); text-decoration-color: currentColor; }
a:not([href]){ color: inherit; text-decoration: none; } :focus-visible{
outline: 2px solid var(--uf-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--uf-focus-halo);
border-radius: 2px;
}  img, svg, video, canvas, audio, iframe, embed, object{
display: block;
max-width: 100%;
}
img, video{ height: auto; }
img{ border: 0; }
svg{ fill: currentColor; }
figure{ margin: 0 0 1rem; }
figcaption{ font-size: .875rem; color: var(--uf-mut); margin-top: .5rem; } table{
border-collapse: collapse;
width: 100%;
font-size: .9375rem;
margin: 0 0 1rem;
}
th, td{ padding: 6px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--uf-line); }
th{ font-weight: 700; color: var(--uf-ink); }
caption{ text-align: left; color: var(--uf-mut); font-size: .875rem; padding-bottom: .5rem; }
.uf-tabelle-rolle{ overflow-x: auto; -webkit-overflow-scrolling: touch; } input, select, textarea, button{
font: inherit; color: inherit;
margin: 0;
}
input, select, textarea{
max-width: 100%;
padding: .5rem .75rem;
background: #fff;
border: 1px solid var(--uf-line-ui);
border-radius: var(--uf-radius);
}
input[type="checkbox"], input[type="radio"]{
width: auto; padding: 0; accent-color: var(--uf-link);
min-width: 1rem; min-height: 1rem;
}
input[type="search"]{ -webkit-appearance: none; appearance: none; }
textarea{ resize: vertical; min-height: 6rem; }
select{ cursor: pointer; }
button, input[type="submit"], input[type="button"]{
cursor: pointer;
min-height: var(--uf-touch);
padding: 0 1rem;
border: 1px solid transparent;
border-radius: var(--uf-radius);
background: var(--uf-link);
color: #fff;
line-height: 1.2;
}
button:hover, input[type="submit"]:hover{ background: var(--uf-link-hover); }
button[disabled], input[disabled]{ opacity: .55; cursor: not-allowed; }
label{ display: inline-block; }
fieldset{ border: 1px solid var(--uf-line); border-radius: var(--uf-radius); padding: 1rem; margin: 0 0 1rem; }
legend{ padding: 0 .5rem; font-weight: 700; }
::placeholder{ color: var(--uf-mut); opacity: 1; } .uf-outer{ position: relative; }
.uf-wrap{
width: 100%;
max-width: var(--uf-maxw);
margin-inline: auto;
padding-inline: var(--uf-pad-x);
}
.uf-wrap--voll{ max-width: none; padding-inline: 0; }
.uf-wrap--text{ max-width: 720px; }
@media (max-width: 767px){
.uf-wrap{ padding-inline: var(--uf-pad-x-sm); }
}
.uf-inhalt{ min-height: 40vh; padding-block: 1.5rem 3rem; } .uf-skip{
position: absolute; left: 16px; top: -100px; z-index: 1000;
display: inline-flex; align-items: center;
min-height: var(--uf-touch); padding: 0 1rem;
background: var(--uf-link); color: #fff; text-decoration: none;
border-radius: var(--uf-radius);
}
.uf-skip:focus{ top: 16px; color: #fff; } .uf-vh, .screen-reader-text{
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;
}
.screen-reader-text:focus{
position: static !important;
width: auto; height: auto; margin: 0; clip: auto; clip-path: none;
padding: .75rem 1rem; background: #fff; color: var(--uf-ink);
} .uf-krume{ font-size: .875rem; color: var(--uf-mut); margin: 0 0 .75rem; }
.uf-krume-liste{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.uf-krume-teil{ margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.uf-krume-trenner{ color: var(--uf-line-ui); }
.uf-krume a{ color: inherit; text-decoration: none; }
.uf-krume a:hover{ color: var(--uf-link); text-decoration: underline; } .uf-meta{
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
font-size: .875rem; color: var(--uf-mut); margin: 0 0 1rem;
}
.uf-autor{
display: flex; gap: 1rem; align-items: flex-start;
padding: 1rem; margin: 2rem 0 1rem;
border: 1px solid var(--uf-line); border-radius: var(--uf-radius);
background: #f6f8fb;
}
.uf-autor__bild{ flex: 0 0 auto; border-radius: 999px; }
.uf-autor__name{ font-weight: 700; color: var(--uf-ink); margin: 0 0 .25rem; font-size: 1rem; }
.uf-autor__text{ margin: 0; font-size: .9375rem; }
@media (max-width: 560px){ .uf-autor{ flex-direction: column; } } .alignleft{ float: left; margin: 0 1.5rem 1rem 0; }
.alignright{ float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter{ margin-inline: auto; }
.alignwide, .alignfull{ max-width: none; }
.wp-block-image img{ margin-inline: auto; }
.wp-caption{ max-width: 100%; }
.wp-caption-text{ font-size: .875rem; color: var(--uf-mut); }
.clearfix::after{ content: ""; display: table; clear: both; } .woocommerce-message, .woocommerce-info, .woocommerce-error{
list-style: none; margin: 0 0 1rem; padding: .75rem 1rem;
border-left: 3px solid var(--uf-link); background: #f6f8fb; border-radius: var(--uf-radius);
}
.woocommerce-error{ border-left-color: #dc2626; }
.woocommerce ul.products{
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.woocommerce ul.products li.product{ margin: 0; }
.woocommerce ul.products li.product a{ text-decoration: none; }
.woocommerce ul.products li.product h2{ font-size: 1rem; margin: .5rem 0 .25rem; }
.screen-reader-text + .woocommerce-ordering{ margin: 0 0 1rem; } @media print{
.uf-skip, nav, form{ display: none !important; } body{ font-size: 11pt; color: #000; background: #fff; }
a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}:root{
--uf-link:       var(--tr-brand, #0F3D2F);
--uf-link-hover: var(--tr-brand-hover, #0A2B21);
--uf-link-rule:  var(--tr-brand-rule, rgba(15,61,47,.55));
--uf-focus:      var(--tr-brand, #0F3D2F);
--uf-ink:   var(--tr-ink,  #1c2430);
--uf-body:  var(--tr-body, #374151);
--uf-mut:   var(--tr-mut,  #5d6879);
--uf-line:  var(--tr-line, #e6e9ef);
--uf-line-ui: var(--tr-line-ui, #7c8798);
--uf-maxw:     var(--tr-maxw, 1240px);
--uf-pad-x:    var(--tr-pad-x, 20px);
--uf-pad-x-sm: var(--tr-pad-x-sm, 16px);
--uf-radius:   var(--tr-r-md, 10px);
--uf-touch:    var(--tr-touch, 44px);
} .uf-inhalt{ padding-block: 0 0; } .uf-inhalt--produkt,
.uf-inhalt--kategorie{ padding-block: 0; }
.uf-inhalt--seite,
.uf-inhalt--beitrag,
.uf-inhalt--suche,
.uf-inhalt--archiv,
.uf-inhalt--404{ padding-block: var(--tr-s-5, 24px) var(--tr-s-8, 56px); } .uf-produkt-kopf{
background: var(--tr-surface, #fff);
border-bottom: 1px solid var(--uf-line);
padding-block: var(--tr-s-3, 12px) var(--tr-s-4, 16px);
}
.uf-produkt-kopf .product_title,
.uf-produkt-kopf .uf-titel{
font-size: var(--tr-fs-700, 1.5rem);
line-height: var(--tr-lh-tight, 1.25);
margin: 0;
}
.uf-produkt-rumpf{ padding-block: var(--tr-s-5, 24px) var(--tr-s-7, 40px); } .uf-kat-kopf{ padding-block: var(--tr-s-5, 24px) 0; }
.uf-kat-kopf .uf-titel{
font-size: var(--tr-fs-800, 1.875rem);
line-height: var(--tr-lh-tight, 1.25);
letter-spacing: var(--tr-ls-tight, -.015em);
}
.uf-kat-rumpf{ padding-block: var(--tr-s-4, 16px) var(--tr-s-6, 32px); }
.uf-kat-fuss{ padding-block: 0 var(--tr-s-8, 56px); } .uf-redaktion{
display: flex; flex-wrap: wrap; gap: var(--tr-s-3, 12px);
align-items: center;
font-size: var(--tr-fs-300, .8125rem);
color: var(--uf-mut);
margin: 0 0 var(--tr-s-3, 12px);
}
.uf-redaktion__name{ font-weight: var(--tr-fw-medium, 600); }
.uf-autor{
background: var(--tr-bg, #f6f8fb);
border-color: var(--uf-line);
border-radius: var(--tr-r-lg, 12px);
}
.uf-autor__bild{ border-radius: var(--tr-r-pill, 999px); } .uf-krume{ font-size: var(--tr-fs-300, .8125rem); }
.uf-krume-teil:last-child{ color: var(--uf-mut); }
.uf-kat-fuss .uf-krume{ margin-top: var(--tr-s-4, 16px); } .uf-trefferliste{ display: grid; gap: var(--tr-s-2, 8px); }
.uf-treffer{
display: flex; flex-wrap: wrap; gap: var(--tr-s-2, 8px);
align-items: baseline; justify-content: space-between;
padding: var(--tr-s-3, 12px);
background: var(--tr-surface, #fff);
border: 1px solid var(--uf-line);
border-radius: var(--tr-r-md, 10px);
}
.uf-treffer__link{ font-weight: var(--tr-fw-medium, 600); text-decoration: none; }
.uf-treffer__link:hover{ text-decoration: underline; }
.uf-suchform{ display: flex; gap: var(--tr-s-2, 8px); margin: 0 0 var(--tr-s-5, 24px); flex-wrap: wrap; }
.uf-suchform input[type="search"]{ flex: 1 1 260px; min-height: var(--uf-touch); }
.uf-404-kats{ display: grid; gap: var(--tr-s-2, 8px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .tr-ebay-zeile{ margin: var(--tr-s-4, 16px) 0 0; }
.tr-ebay-knopf{
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--uf-touch); padding: 0 var(--tr-s-4, 16px);
font-size: var(--tr-fs-400, .9375rem); font-weight: var(--tr-fw-medium, 600);
border: 1px solid var(--uf-line-ui); border-radius: var(--tr-r-md, 10px);
background: var(--tr-surface, #fff); color: var(--uf-link);
text-decoration: none;
}
.tr-ebay-knopf:hover{ border-color: var(--uf-link); background: var(--tr-bg, #f6f8fb); } .nv-box{
background: #fff8e5; padding: var(--tr-s-3, 12px);
border-radius: var(--tr-r-sm, 8px); margin: 0 auto; clear: both;
}
.nvt, .altt{ color: #8a6100; font-size: var(--tr-fs-500, 1.0625rem); font-weight: var(--tr-fw-medium, 600); }
a.gebrauchta{ font-weight: var(--tr-fw-medium, 600); text-decoration: underline; } @media (max-width: 767px){
.uf-produkt-kopf{ padding-block: var(--tr-s-2, 8px) var(--tr-s-3, 12px); }
.uf-produkt-kopf .product_title{ font-size: var(--tr-fs-600, 1.25rem); }
.uf-kat-kopf .uf-titel{ font-size: var(--tr-fs-700, 1.5rem); }
.uf-treffer{ flex-direction: column; align-items: flex-start; }
} .uf-kat-kinder{ margin: var(--tr-s-3, 12px) 0 0; }
.uf-kat-kinder ul{ display: flex; flex-wrap: wrap; gap: var(--tr-s-2, 8px); }
.uf-kat-kinder li{ margin: 0; }
.uf-kat-kinder a{
display: inline-flex; align-items: center; gap: var(--tr-s-1, 4px);
min-height: 32px; padding: 0 var(--tr-s-3, 12px);
font-size: var(--tr-fs-300, .8125rem); font-weight: var(--tr-fw-medium, 600);
color: var(--uf-ink); text-decoration: none;
background: var(--tr-bg, #f6f8fb);
border: 1px solid var(--uf-line); border-radius: var(--tr-r-pill, 999px);
}
.uf-kat-kinder a:hover{ border-color: var(--uf-link); color: var(--uf-link); }
.uf-kat-kinder__n{ color: var(--uf-mut); font-weight: var(--tr-fw-normal, 400); } .tr-vn, .tr-gal, .uf-pd-alttext{
max-width: var(--tr-maxw, 1240px);
margin: var(--tr-s-5, 24px) auto 0;
padding: var(--tr-s-5, 24px);
background: var(--tr-surface, #fff);
border: 1px solid var(--uf-line);
border-radius: var(--tr-r-lg, 12px);
}
.tr-vn__kopf, .tr-gal__kopf,
.uf-pd-abschnitt__titel{
font-size: var(--tr-fs-600, 1.25rem);
line-height: var(--tr-lh-tight, 1.25);
margin: 0 0 var(--tr-s-4, 16px);
color: var(--uf-ink);
}
.uf-pd-abschnitt__sub{ font-weight: var(--tr-fw-normal, 400); color: var(--uf-mut); }
.uf-pd-abschnitt + .uf-pd-abschnitt{ margin-top: var(--tr-s-6, 32px); }
.tr-vn__raum{ display: grid; gap: var(--tr-s-5, 24px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tr-vn__titel{
font-size: var(--tr-fs-100, .6875rem); font-weight: var(--tr-fw-medium, 600);
letter-spacing: var(--tr-ls-caps, .08em); text-transform: uppercase;
color: var(--uf-mut); margin: 0 0 var(--tr-s-2, 8px);
padding-bottom: var(--tr-s-1, 4px); border-bottom: 1px solid var(--uf-line);
}
.tr-vn__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tr-s-2, 8px); }
.tr-vn__liste li{ margin: 0; padding-left: 1.3em; position: relative; font-size: var(--tr-fs-400, .9375rem); }
.tr-vn__spalte--pro .tr-vn__liste li::before{ content: "+"; position: absolute; left: 0; color: var(--tr-top-solid, #15803d); font-weight: 700; }
.tr-vn__spalte--con .tr-vn__liste li::before{ content: "\2212"; position: absolute; left: 0; color: var(--tr-mid-solid, #b45309); font-weight: 700; }
.tr-vn__quelle{ margin: var(--tr-s-4, 16px) 0 0; font-size: var(--tr-fs-200, .75rem); color: var(--uf-mut); }
.tr-gal__raster{
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--tr-s-3, 12px);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tr-gal__bild{ margin: 0; }
.tr-gal__bild a{ display: block; border: 1px solid var(--uf-line); border-radius: var(--tr-r-sm, 8px); overflow: hidden; background: #fff; }
.tr-gal__bild img{ width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--tr-s-2, 8px); }
.tr-gal__bild a:hover{ border-color: var(--uf-link); }
.uf-pd-alttext img{ max-width: 100%; height: auto; }
.uf-pd-alttext table{ font-size: var(--tr-fs-400, .9375rem); }:root{ --tr-brand:       #0F3D2F; --tr-brand-hover: #0A2B21; --tr-brand-tint:  rgba(15,61,47,.08);  --tr-brand-rule:  rgba(15,61,47,.55); --tr-brand-inv:   #8FD3B8;  --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); --tr-mark:        var(--tr-ink); --tr-mark-tint:   rgba(28,36,48,.10); --trc-best-tint:  var(--tr-mark-tint); --tr-ink:         #1c2430; --tr-body:        #374151; --tr-mut:         #5d6879; --tr-surface:     #ffffff; --tr-bg:          #f6f8fb; --tr-bg-head:     #f1f4f9; --tr-line:        #e6e9ef; --tr-line-strong: #d6ddea; --tr-line-ui:     #7c8798; --tr-top-solid:   #15803d; --tr-good-solid:  #4d7c0f; --tr-mid-solid:   #b45309; --tr-low-solid:   #dc2626;  --trc-footer-bg:  #1c2430;
--trc-footer-fg:  #cfd6e2; --trc-footer-mut: #9aa7b8; --trc-footer-link:#ffffff;  --trc-kopf-bg:      var(--tr-brand);
--trc-kopf-fg:      #ffffff; --trc-kopf-fg-mut:  #9fb8ae; --trc-kopf-flaeche: rgba(255,255,255,.10); --trc-kopf-linie:   rgba(255,255,255,.45);  --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; --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); } .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; } .trc-num{ font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:"tnum" 1,"lnum" 1; } .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);
} .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); } .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); } .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); } @media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms!important; animation-iteration-count:1!important;
transition-duration:.01ms!important; scroll-behavior:auto!important; }
} :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);
} .trc-footer{ --trc-focus-ring:#ffffff; --trc-focus-halo:rgba(28,36,48,.92); } .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); } .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);
} .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]{ display:none !important; }     .trc-logo{
--trc-logo-fs:23px;  --trc-logo-akzent:var(--tr-brand-inv,#8FD3B8);
box-sizing:border-box; display:inline-flex;
align-items:flex-end;
min-height:var(--tr-touch,44px);
padding:var(--tr-s-2,8px) 0 5px;  color:var(--trc-kopf-fg,#fff);
text-decoration:none;
background:none;
border:0; border-bottom:var(--tr-bw,1px) solid rgba(255,255,255,.18);
box-shadow:none;
} .trc-logo__svg{
display:block;
height:calc(var(--trc-logo-fs) * .94);
width:auto;
fill:currentColor;
}  @media (min-width:768px){
.trc-logo{ --trc-logo-fs:28px; }
} .trc-header--dicht .trc-logo{ --trc-logo-fs:24px; } .trc-logo--footer,
.trc-footer .trc-logo{
--trc-logo-fs:34px;
color:#fff;
border-bottom-color:rgba(255,255,255,.16);
} .trc-logo--inline{ min-height:0; padding-top:0; } @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; }
}    .trc-suche{
--trc-suche-halo:var(--trc-focus-halo,#fff);
position:relative;
display:flex; align-items:center; gap:var(--tr-s-2); flex-wrap:wrap;
width:100%; margin:0;
} .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); 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);
} .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; } .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); } .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); }
} .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;
} .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); 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);
} .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); } .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); } .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);
} .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;
} .trc-suche__treffer--geraet .trc-suche__titel{
white-space:normal;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
} .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); } .trc-suche__liste[aria-busy="true"] .trc-suche__gruppe--geraete .trc-suche__treffer{ opacity:.55; }  .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; } .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 } }  .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); } .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); } .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%; } .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); } .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;
} .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; }
} @media (prefers-reduced-motion: reduce){
.trc-suche__treffer, .trc-suche__eingabe{ transition:none; }
.trc-suche__skelett-bild, .trc-suche__skelett-balken{ animation:none; }
}     .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));
} .trc-nav__liste{ list-style:none; margin:0; padding:0; }
.trc-nav__punkt{ margin:0; } .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;
} .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); } .trc-nav__ico{
display:block; flex:none; fill:none;
transition:transform var(--tr-dur-1) var(--tr-ease-out);
} .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);
}  .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;
} .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); 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); } .trc-nav__label .trc-marker::after{ background:var(--tr-brand-inv,#8FD3B8); } .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);
} .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;
} .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; }
.trc-drawer-scrim[data-an]{ opacity:1; } 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); } .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);
} @media (min-width:560px){
.trc-drawer__inhalt{ padding:var(--tr-s-2) var(--tr-s-4) var(--tr-s-5); }
} @media (min-width:601px){
body.admin-bar .trc-drawer{ top:46px; }
}
@media (min-width:783px){
body.admin-bar .trc-drawer{ top:32px; }
} @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;
} .trc-nav__eintrag[open] .trc-panel__innen{
animation:trc-nav-ein var(--tr-dur-1) var(--tr-ease-out);
} .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);
} .trc-panel__spalten{
grid-template-columns:repeat(var(--trc-nav-spalten,4), minmax(0,1fr));
column-gap:var(--tr-s-4);
align-items:start;
}
} @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 } } @media (prefers-reduced-motion: reduce){
.trc-drawer,
.trc-drawer:not([data-trc-js]):target,
.trc-drawer[data-offen="ja"],
.trc-drawer-scrim{ transition:none; }
}     .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;
} .trc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .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); 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);
} .trc-merk-einstieg:hover,
.trc-konto-einstieg:hover{
background:var(--trc-kopf-flaeche,rgba(255,255,255,.10));
color:var(--trc-kopf-fg,#fff);
} .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);
} @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); }
} .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); } .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); } .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; } .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; }
} .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); } .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); }
.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); } .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; } .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);
} .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); } .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);
} .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); } .trc-konto-meldung--ok{ border-left-color:var(--tr-mark,#1c2430); } .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); } .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);
}     .trc-vgl-toggle{ width:100%; }
.trc-vgl-toggle[aria-pressed="true"] .trc-ico{ opacity:.9; }
.trc-vgl-toggle--gross{ width:auto; min-width:200px; } .trc-vgl-toggle[aria-pressed="true"] .trc-ico path{ d:path("M4 10.5l4 4 8-9"); }
.trc-ico{ flex:0 0 auto; } .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; } .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; } } .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); } .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); } .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);
} .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); } .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); } .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); } .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); } .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); } .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); }
.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);
} .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; }
}    .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); } .trc-karte-aktionen > *{
flex:1 1 0;
min-width:0;
min-height:var(--tr-touch);
font-size:var(--tr-fs-300);
white-space:nowrap;
} .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);
} .trc-karte-aktionen .trc-merk-btn[aria-pressed="true"]{
background:var(--tr-blue);
color:#fff;
border-color:var(--tr-blue);
}      :root{ --trc-header-h:56px; } .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); } .trc-sentinel{ position:relative; height:0; }
.trc-sentinel > i{ position:absolute; top:120px; left:0; width:1px; height:1px; } .trc-header{
position:sticky; top:0; z-index:var(--trc-header-z);
background:var(--tr-brand,#0F3D2F); color:var(--trc-kopf-fg,#fff); border-bottom:var(--tr-bw) solid rgba(255,255,255,.14);
} .trc-header--dicht{ box-shadow:var(--tr-sh-1); } .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; }  .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); 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);
} .trc-header__menue:hover{ background:var(--trc-kopf-flaeche,rgba(255,255,255,.10)); } .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;
} .trc-ico{ display:block; flex:none; fill:none; } .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)); } .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; } .trc-header--dicht .trc-header__zeile--suche{ display:none; }
.trc-header--dicht .trc-header__zeile--suche:target{ display:flex; } .trc-header--dicht .trc-header__zeile--suche:focus-within{ display:flex; } body.admin-bar .trc-header{ top:0; } @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; } } @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); } .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; } }
@media (min-width:783px){
body.admin-bar .trc-header{ top:32px; }
} @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); }
} @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); }
} .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);
} .trc-aktion:hover{
background:var(--trc-kopf-flaeche,rgba(255,255,255,.10));
color:var(--trc-kopf-fg,#fff);
} .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;
} @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;
}
}     .trc-footer{ --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); }
} .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)); }
} .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;
} .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); } @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); 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;
} .trc-footer__liste a[aria-current="page"]{
color: var(--tr-brand-inv,#8FD3B8);
font-weight: var(--tr-fw-medium);
} .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);
} .trc-footer__pfeil{ fill: none; }    .trc-start{
--trc-start-mint:#eef4f1; --trc-start-sand:#f7f4ee; --trc-start-flaeche:#f3f6f4; --trc-start-salbei:#dfeae4; --trc-start-dunkel-text:#d7e5de; --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; 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; } } .trc-start [class*="trc-start__"], .trc-start [class*="trc-start__"]::before, .trc-start [class*="trc-start__"]::after{ box-sizing:border-box; } .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); --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); } .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); } .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); } .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; } .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); } .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); } .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); } .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); }
} .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; 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; }
} .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; }
} .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%; } .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; } .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; }
} @media (min-width:768px){ .trc-start__welten{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px){ .trc-start__welten{ gap:24px; } } .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; } @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; } } .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; } } .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; } .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); } .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)); } } .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; } } .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); }
} .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); } .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; }
}    @media (min-width:1024px){ body.trc-breit .rh-container:not(.full_post_area){
width:auto;
max-width:var(--tr-maxw);
} body.trc-breit .main-side{
width:auto;
float:none;
} body.trc-on.trc-breit .rh-post-wrapper{
padding:0;
background:none;
border:0;
box-shadow:none;
} body.trc-breit .sidebar{
display:none;
}  body.trc-breit--merkliste .trc-merk-liste{
max-width:960px;
}
}      @media (max-width:359px){ .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; } .trc-header .trc-vgl-einstieg{ display:none; }
} @media (max-width:359px){
.trc-home__kacheln{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
} @media (max-width:767px){ .trc-home .trc-suche--gross{ display:none; }
} @media (max-width:767px){ .trc-on .rh-container{
padding-left:var(--tr-pad-x-sm);
padding-right:var(--tr-pad-x-sm);
} .trc-on .rh-content-wrap .rh-post-wrapper{ padding-left:0; padding-right:0; } .trc-on .rh-container:has(.trc-home, .trc-merk, .trc-vgl, .trc-konto){
padding-left:0;
padding-right:0;
} .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);
} .trc-on .elementor-inner-section .elementor-widget{
padding-left:0;
padding-right:0;
} .trc-on .elementor-location-archive .elementor-widget-shortcode{
padding-left:0;
padding-right:0;
}
}