/* technik-gebraucht.de · Typenschild
   Ein Stylesheet für alle Seiten. Farben, Größen und Abstände als Variablen. */

@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("/assets/fonts/barlow-semi-condensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens: Dunkel (Standard) ---------- */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121417;
  --surface:#1A1D21;
  --surface-2:#202429;
  --line:#2C3138;
  --line-strong:#3A4048;
  --ink:#F2F4F7;
  --ink-soft:#C9CED6;
  --ink-muted:#A9B0B9;
  --plate:#D7DBE0;
  --plate-2:#E4E7EA;
  --plate-ink:#15181C;
  --plate-muted:#454C55;
  --plate-line:#A9AFB7;
  --plate-blue:#13529F;
  --blue:#1B6DD0;
  --blue-hover:#155FB8;
  --blue-text:#7DB0F2;
  --blue-wash:rgba(27,109,208,.16);
  --ok:#2FA36B;--ok-text:#86D9AE;
  --warn:#D9A23A;--warn-text:#F0C77E;
  --bad:#D9534F;--bad-text:#FFB4B0;--bad-wash:rgba(217,83,79,.12);
  --mark-ink:#F0F2F4;--mark-arc:#1B6DD0;
  --focus:0 0 0 3px rgba(125,176,242,.55);
  --shadow-lift:0 10px 28px -12px rgba(0,0,0,.55);
}

/* ---------- Tokens: Hell ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F4F6;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --line:#E1E4E8;
  --line-strong:#C9CED4;
  --ink:#15181C;
  --ink-soft:#363C44;
  --ink-muted:#58606A;
  --plate:#1F242B;
  --plate-2:#272D35;
  --plate-ink:#F2F4F7;
  --plate-muted:#B9C0C9;
  --plate-line:#46505B;
  --plate-blue:#8CBBF5;
  --blue:#1B6DD0;
  --blue-hover:#155FB8;
  --blue-text:#155AB0;
  --blue-wash:rgba(27,109,208,.10);
  --ok:#2FA36B;--ok-text:#17683F;
  --warn:#C98A1B;--warn-text:#7A4E00;
  --bad:#C9302C;--bad-text:#A61B17;--bad-wash:rgba(201,48,44,.08);
  --mark-ink:#1F242B;--mark-arc:#1B6DD0;
  --focus:0 0 0 3px rgba(27,109,208,.40);
  --shadow-lift:0 10px 28px -14px rgba(20,24,28,.28);
}

:root{
  --font:"Barlow",system-ui,"Segoe UI",sans-serif;
  --font-label:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --fs-label:11.5px;
  --fs-small:13.5px;
  --fs-body:15.5px;
  --fs-h3:17px;
  --fs-h2:21px;
  --fs-h1:30px;
  --fs-plate:clamp(28px,3.4vw,38px);
  --fs-price:21px;
  --fs-price-big:clamp(24px,2.6vw,30px);
  --radius:10px;
  --radius-sm:6px;
  --gutter:clamp(16px,3vw,40px);
  --maxw:1240px;
  --header-h:64px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.5 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue-text)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
input,textarea{caret-color:var(--blue-text)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:2px solid var(--bg)}
[hidden]{display:none!important}
.tg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tg-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:10px 14px;border-radius:var(--radius-sm);text-decoration:none;font-weight:600}
.tg-skip:focus,.tg-skip:hover{top:10px;color:#fff}
.tg-label{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.tg-muted{color:var(--ink-muted)}
.tg-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Logo ---------- */
.tg-mark{flex:none;display:block}
.tg-mark-ink{fill:var(--mark-ink)}
.tg-mark-arc{fill:var(--mark-arc)}
.tg-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none}
.tg-brand:hover{color:var(--ink)}
.tg-wordmark{font:700 18px/1 var(--font);letter-spacing:-.015em;white-space:nowrap}
.tg-wordmark-dash{color:var(--blue-text)}

/* ---------- Buttons ---------- */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid transparent;font:600 14.5px/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.tg-btn--sm{min-height:34px;padding:0 12px;font-size:14px}
.tg-btn--primary{background:var(--ink);color:var(--bg)}
.tg-btn--primary:hover{background:var(--ink-soft);color:var(--bg)}
.tg-btn--blue{background:var(--blue);color:#fff}
.tg-btn--blue:hover{background:var(--blue-hover);color:#fff}
.tg-btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.tg-btn--ghost:hover{border-color:var(--ink-muted);color:var(--ink)}
.tg-btn--plain{color:var(--ink-soft);background:transparent}
.tg-btn--plain:hover{color:var(--ink)}
.tg-btn--danger{border-color:var(--bad);color:var(--bad-text);background:transparent}
.tg-btn[disabled],.tg-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Kopfzeile ---------- */
.tg-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.tg-header-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);min-height:var(--header-h);display:flex;align-items:center;gap:22px}
.tg-search{flex:1;max-width:600px;display:flex;height:40px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);overflow:hidden;transition:border-color .15s ease}
.tg-search:focus-within{border-color:var(--blue);box-shadow:var(--focus)}
.tg-search-input{flex:1;min-width:0;border:0;background:transparent;padding:0 14px;outline:none}
.tg-search-input::placeholder{color:var(--ink-muted)}
.tg-search-button{border:0;background:var(--blue);color:#fff;font-weight:600;padding:0 18px;cursor:pointer}
.tg-search-button:hover{background:var(--blue-hover)}
.tg-nav{display:flex;gap:4px;margin-left:auto}
.tg-nav-link{padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-soft);font-weight:500}
.tg-nav-link:hover{color:var(--ink);background:var(--surface)}
.tg-nav-link.is-active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.tg-account{display:flex;align-items:center;gap:8px}
.tg-theme-slot{display:contents}
.tg-menu{position:relative}
.tg-menu summary{list-style:none}
.tg-menu summary::-webkit-details-marker{display:none}
.tg-menu-name{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.tg-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:6px;box-shadow:var(--shadow-lift);display:grid}
.tg-menu-panel a,.tg-menu-panel button{display:block;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;background:none;border:0;cursor:pointer;color:var(--ink)}
.tg-menu-panel a:hover,.tg-menu-panel button:hover{background:var(--surface-2);color:var(--ink)}
.tg-menu-panel form{margin:0;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}

/* Theme-Schalter (von theme.js erzeugt) */
.tg-theme-toggle{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--ink-soft);cursor:pointer;padding:0}
.tg-theme-toggle:hover{color:var(--ink);border-color:var(--ink-muted)}
.tg-theme-toggle svg{width:17px;height:17px}
html[data-theme="dark"] .tg-icon-sun{display:none}
html[data-theme="light"] .tg-icon-moon{display:none}
body>.tg-theme-toggle{position:fixed;right:18px;bottom:76px;z-index:45;background:var(--surface)}

/* ---------- Fußzeile ---------- */
.tg-footer{margin-top:var(--space-8);border-top:1px solid var(--line);background:var(--surface)}
.tg-footer-inner{max-width:var(--maxw);margin:0 auto;padding:var(--space-7) var(--gutter) var(--space-5);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:var(--space-7)}
.tg-footer-brand p{margin-top:14px;color:var(--ink-soft);max-width:46ch;font-size:var(--fs-small)}
.tg-footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.tg-footer-cols h2{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.tg-footer-cols a{display:block;padding:4px 0;text-decoration:none;color:var(--ink-soft)}
.tg-footer-cols a:hover{color:var(--ink)}
.tg-footer-note{max-width:var(--maxw);margin:0 auto;padding:var(--space-4) var(--gutter) var(--space-6);font-size:12.5px;color:var(--ink-muted);border-top:1px solid var(--line)}

/* ---------- Typenschild ---------- */
.tg-plate{background:var(--plate);color:var(--plate-ink);border-radius:var(--radius);padding:var(--plate-pad,22px) calc(var(--plate-pad,22px) + 2px) calc(var(--plate-pad,22px) - 4px);position:relative;
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.03))}
.tg-plate .tg-label{color:var(--plate-muted)}
.tg-plate-title{font-size:var(--fs-plate);letter-spacing:-.02em;margin:0 0 16px}
.tg-plate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--plate-line)}
.tg-plate-field{padding:10px 12px 10px 0;min-width:0}
.tg-plate-field+.tg-plate-field{padding-left:12px;border-left:1px solid var(--plate-line)}
.tg-plate-field strong{display:block;font-size:17px;font-weight:600;margin-top:3px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.tg-plate-figures{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-top:1.5px solid var(--plate-ink)}
.tg-plate-figures .tg-plate-field{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.tg-plate-figures .tg-plate-field strong{font-size:var(--fs-price-big);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.tg-plate-figures .is-low strong{color:var(--plate-blue)}
.tg-plate-foot{margin-top:12px;font-size:13px;color:var(--plate-muted)}
.tg-plate-foot strong{color:var(--plate-ink);font-weight:600}
.tg-scale{position:relative;height:30px;margin:14px 0 2px}
.tg-scale-track{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--plate-ink) 14%,transparent)}
.tg-scale-fair{position:absolute;top:8px;height:14px;border:1.5px dashed var(--plate-muted);border-radius:3px}
.tg-scale-fair.is-open-right{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.tg-scale-fair.is-open-left{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.tg-plate-basis>summary{display:none}
.tg-plate-basis>summary::-webkit-details-marker{display:none}
.tg-scale-half{position:absolute;top:11px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--plate-ink) 38%,transparent)}
.tg-scale-low{position:absolute;top:6px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--plate-blue)}
.tg-scale-probe{position:absolute;top:2px;width:2px;height:26px;margin-left:-1px;background:var(--plate-ink);opacity:0;transition:opacity .12s ease,left .18s cubic-bezier(.2,.8,.2,1)}
.tg-scale-probe.is-on{opacity:1}
.tg-scale-probe span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:600 11.5px/1 var(--font);white-space:nowrap;background:var(--plate-ink);color:var(--plate);padding:3px 5px;border-radius:3px;margin-bottom:3px}
.tg-scale-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--plate-muted)}
.tg-scale-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12.5px;color:var(--plate-muted)}
.tg-scale-legend i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.tg-scale-legend .k-low{background:var(--plate-blue);width:4px;height:12px}
.tg-scale-legend .k-half{background:color-mix(in srgb,var(--plate-ink) 38%,transparent)}
.tg-scale-legend .k-fair{border:1.5px dashed var(--plate-muted)}

/* Startseite: leeres Schild als Suche */
.tg-plate--search{padding:28px 28px 24px}
.tg-plate--search .tg-plate-title{font-size:clamp(30px,4.4vw,48px);max-width:18ch;margin-bottom:18px}
.tg-plate-search{display:flex;gap:0;height:56px;border:1.5px solid var(--plate-ink);border-radius:8px;overflow:hidden;background:color-mix(in srgb,#fff 55%,var(--plate))}
html[data-theme="light"] .tg-plate-search{background:var(--plate-2)}
.tg-plate-search input{flex:1;min-width:0;border:0;background:transparent;padding:0 18px;font-size:18px;color:var(--plate-ink);outline:none}
.tg-plate-search input::placeholder{color:var(--plate-muted)}
.tg-plate-search button{border:0;background:var(--blue);color:#fff;font:600 16px var(--font);padding:0 24px;cursor:pointer}
.tg-plate-search button:hover{background:var(--blue-hover)}
.tg-plate-search:focus-within{box-shadow:0 0 0 3px rgba(27,109,208,.45)}
.tg-plate-examples{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:14px;color:var(--plate-muted)}
.tg-plate-examples a{color:var(--plate-ink);font-weight:600}
.tg-plate-examples a:hover{color:var(--plate-blue)}
.tg-plate-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--plate-line)}
.tg-plate-specs div{padding:10px 12px 0 0;font-weight:600}
.tg-plate-specs div+div{padding-left:12px;border-left:1px solid var(--plate-line)}

/* ---------- Seitenaufbau ---------- */
.tg-page{padding-top:var(--space-5)}
.tg-crumb{font-size:13px;color:var(--ink-muted);margin-bottom:var(--space-4)}
.tg-crumb a{color:var(--ink-muted);text-decoration:none}
.tg-crumb a:hover{color:var(--ink)}
.tg-crumb span[aria-hidden]{margin:0 6px}
.tg-model-head{display:grid;grid-template-columns:minmax(0,var(--plate-w,560px)) minmax(0,1fr);gap:24px;align-items:stretch}
.tg-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.tg-panel h2{font-size:var(--fs-h3);margin-bottom:4px}
.tg-panel-sub{color:var(--ink-muted);font-size:var(--fs-small)}
.tg-section{margin-top:var(--space-7)}
.tg-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:var(--space-4)}
.tg-section-head h2{font-size:var(--fs-h2)}
.tg-section-head p{color:var(--ink-muted);font-size:var(--fs-small)}
.tg-h1{font-size:var(--fs-h1);letter-spacing:-.02em}
.tg-lead{color:var(--ink-soft);font-size:17px;max-width:62ch;margin-top:10px}

/* Preisverlauf */
.tg-chart{width:100%;height:auto;max-height:340px;display:block;margin-top:auto;padding-top:14px;overflow:visible}
.tg-model-head>.tg-panel{display:flex;flex-direction:column}
.tg-chart .grid{stroke:var(--line)}
.tg-chart .axis{fill:var(--ink-muted);font:500 13px var(--font)}
.tg-chart .line{fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.tg-chart .band-half{fill:color-mix(in srgb,var(--ink) 13%,transparent)}
.tg-chart .band-fair{fill:none;stroke:var(--ink-muted);stroke-width:1.5;stroke-dasharray:5 4}
.tg-chart .dot{fill:var(--blue);stroke:var(--surface);stroke-width:3}
.tg-chart .pt{fill:var(--ink)}
.tg-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12.5px;color:var(--ink-muted)}
.tg-chart-legend i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.tg-chart-legend .k-line{height:2.5px;background:var(--ink)}
.tg-chart-legend .k-half{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.tg-chart-legend .k-fair{border:1.5px dashed var(--ink-muted)}
.tg-history.is-empty{align-self:start}
.tg-chart-empty{margin-top:14px;padding:18px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-muted);font-size:var(--fs-small)}

/* ---------- Filterleiste ---------- */
.tg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--line);margin-top:var(--space-6)}
.tg-toolbar form{display:contents}
.tg-pill{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;color:var(--ink-soft);cursor:pointer;user-select:none;background:transparent;text-decoration:none}
.tg-pill:hover{border-color:var(--ink-muted);color:var(--ink)}
.tg-pill input{position:absolute;opacity:0;pointer-events:none}
.tg-pill:has(input:checked),.tg-pill.is-on{border-color:var(--blue);background:var(--blue-wash);color:var(--ink)}
.tg-pill:has(input:focus-visible){box-shadow:var(--focus)}
.tg-pill-check{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;display:grid;place-items:center}
.tg-pill:has(input:checked) .tg-pill-check{background:var(--blue);border-color:var(--blue)}
.tg-pill:has(input:checked) .tg-pill-check::after{content:"";width:7px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.tg-toolbar-sep{width:1px;height:22px;background:var(--line-strong);margin:0 4px}
.tg-toolbar-end{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:var(--fs-small)}
.tg-select{appearance:none;min-height:34px;padding:0 32px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A9B0B9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer}
.tg-range{position:relative}
.tg-range>summary{list-style:none}
.tg-range>summary::-webkit-details-marker{display:none}
.tg-range-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:300px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-lift)}
.tg-range-panel p{font-size:var(--fs-small);color:var(--ink-muted);margin-bottom:12px}
.tg-range-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tg-range-reset{display:block;margin-top:10px;text-align:center;font-size:var(--fs-small);color:var(--ink-muted)}

/* ---------- Formularfelder ---------- */
.tg-field{display:grid;gap:6px;margin-bottom:var(--space-4)}
.tg-field label{font-weight:600;font-size:14.5px}
.tg-field small{color:var(--ink-muted);font-size:13px}
.tg-input,.tg-textarea,.tg-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.tg-field select,.tg-field textarea{width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s ease}
.tg-field textarea,.tg-textarea{min-height:140px;resize:vertical;line-height:1.5}
.tg-input:focus,.tg-field input:focus,.tg-field select:focus,.tg-field textarea:focus{border-color:var(--blue);box-shadow:var(--focus)}
.tg-input::placeholder,.tg-field ::placeholder{color:var(--ink-muted)}
.tg-input[readonly],.tg-field input[readonly]{background:var(--surface-2);color:var(--ink-soft)}

/* ---------- Hinweise ---------- */
.tg-alert{padding:13px 16px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-small);margin-bottom:var(--space-4)}
.tg-alert strong{display:block;font-size:15px;margin-bottom:2px}
.tg-alert--error{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:var(--bad-wash);color:var(--bad-text)}
.tg-alert--error strong{color:var(--ink)}
.tg-alert--ok{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok-text)}
.tg-alert pre{white-space:pre-wrap;font-size:12.5px;margin:10px 0 0;color:var(--ink-muted)}
.tg-empty{padding:28px 22px;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--ink-soft)}
.tg-empty strong{display:block;color:var(--ink);font-size:var(--fs-h3);margin-bottom:6px}
.tg-empty .tg-btn{margin-top:14px}

/* ---------- Angebotsliste ---------- */
.tg-offers{list-style:none;margin:0;padding:0}
.tg-offer{display:grid;grid-template-columns:64px minmax(0,1fr) 168px 150px 112px 104px;align-items:center;gap:18px;padding:var(--offer-pad,12px) 8px;border-bottom:1px solid var(--line);transition:background-color .15s ease}
.tg-offer:hover,.tg-offer:focus-within{background:var(--surface)}
.tg-offers:hover .tg-offer:not(:hover):not(:focus-within) .tg-offer-title{color:var(--ink-soft)}
.tg-offer-img{width:64px;height:48px;border-radius:var(--radius-sm);background:var(--surface-2);overflow:hidden;display:grid;place-items:center;color:var(--ink-muted);font-size:11.5px}
.tg-offer-img img{width:100%;height:100%;object-fit:cover}
.tg-offer-title{font-weight:500;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.tg-offer-title a{text-decoration:none}
.tg-offer-meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;font-size:12.5px;color:var(--ink-muted)}
.tg-offer-desc{margin-top:6px;font-size:13px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tg-offer.is-seen .tg-offer-title{color:var(--ink-soft)}
.tg-offer-seen{display:none}
.tg-offer.is-seen .tg-offer-seen{display:inline}
.tg-check{display:inline-flex;align-items:center;gap:7px;font:600 12px/1.2 var(--font-label);letter-spacing:.06em;text-transform:uppercase}
.tg-check i{width:8px;height:8px;border-radius:2px;flex:none}
.tg-check--ok{color:var(--ok-text)}.tg-check--ok i{background:var(--ok)}
.tg-check--warn{color:var(--warn-text)}.tg-check--warn i{background:var(--warn)}
.tg-offer-ship{font-size:13px;color:var(--ink-muted)}
.tg-offer-price{text-align:right;font:700 var(--fs-price)/1.05 var(--font);letter-spacing:-.01em;white-space:nowrap}
.tg-offer-price small{display:block;font:500 11.5px/1.3 var(--font);color:var(--ink-muted);letter-spacing:0;margin-top:3px}
.tg-offer-price.is-low{color:var(--blue-text)}
.tg-offer-act{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tg-offer-score{font-size:12px;color:var(--ink-muted);text-align:right;margin-top:2px}
.tg-star{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--ink-muted);cursor:pointer;text-decoration:none;flex:none;padding:0}
.tg-star:hover{color:var(--ink);border-color:var(--line-strong)}
.tg-star svg{width:18px;height:18px}
.tg-star .on{display:none}
.tg-star.is-saved{color:var(--blue-text)}
.tg-star.is-saved .on{display:block}.tg-star.is-saved .off{display:none}
.tg-more{display:flex;justify-content:center;margin-top:var(--space-5)}

/* ---------- Bestes Angebot / Tipps / FAQ ---------- */
.tg-offer-best{font:600 var(--fs-label)/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)!important;border:1px solid var(--line-strong);border-radius:3px;padding:0 5px}
.tg-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--line);counter-reset:tip}
.tg-tip{padding:16px 18px 16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:6px}
.tg-tip::before{counter-increment:tip;content:counter(tip);font:700 13px/1.6 var(--font);color:var(--ink-muted)}
.tg-faq{border-top:1px solid var(--line)}
.tg-faq details{border-bottom:1px solid var(--line)}
.tg-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:600;font-size:16px;position:relative}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.tg-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.tg-faq details p{padding:0 0 18px;color:var(--ink-soft);max-width:70ch}
.tg-note{font-size:13px;color:var(--ink-muted);margin-top:10px;max-width:72ch}

/* ---------- Startseite ---------- */
.tg-home-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:end;padding-top:var(--space-6)}
.tg-home-side h2{font-size:var(--fs-h2);margin-bottom:12px}
.tg-home-side ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.tg-home-side li{display:grid;grid-template-columns:30px 1fr;gap:4px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.tg-home-side li b{color:var(--ink);font-weight:600;display:block}
.tg-home-side li::before{content:counter(list-item);font:700 13px/1.6 var(--font);color:var(--ink-muted)}
.tg-popular{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tg-mini-plate{display:grid;grid-template-rows:auto 1fr auto;padding:12px 14px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.tg-mini-plate:hover{border-color:var(--ink-muted);color:var(--ink);transform:translateY(-2px)}
.tg-mini-plate h3{font-size:16px;font-weight:600;line-height:1.25;margin:3px 0 10px}
.tg-mini-plate h3 .tg-label{display:block;margin-bottom:3px}
.tg-mini-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--line-strong);margin:0}
.tg-mini-grid>div{padding:8px 0 0;min-width:0}
.tg-mini-grid>div:only-child{grid-column:1/-1;text-align:right}
.tg-mini-grid>div+div{padding-left:12px;margin-left:12px;border-left:1px solid var(--line-strong);text-align:right}
.tg-mini-grid dt{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.tg-mini-grid dd{margin:4px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.tg-mini-grid .is-price{font:700 20px/1.1 var(--font);font-variant-numeric:tabular-nums}
.tg-mini-foot{font-size:12.5px;color:var(--ink-muted);margin-top:10px}
.tg-mini-plate[hidden]{display:none}
.tg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tg-tab{padding:12px 14px;border:0;background:none;color:var(--ink-soft);font-weight:600;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.tg-tab:hover{color:var(--ink)}
.tg-tab.is-active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.tg-tabpanel{display:none;padding-top:var(--space-5)}
.tg-tabpanel.is-open{display:block}
.tg-tabpanel>p{color:var(--ink-muted);font-size:var(--fs-small);margin-bottom:var(--space-4)}
.tg-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.tg-row-title{font-weight:500;text-decoration:none}
.tg-row-sub{font-size:12.5px;color:var(--ink-muted)}
.tg-row-price{font-weight:700;white-space:nowrap}
.tg-row-thumb{width:52px;height:40px;border-radius:var(--radius-sm);background:var(--surface-2);overflow:hidden}
.tg-row-thumb img{width:100%;height:100%;object-fit:cover}
.tg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tg-kpi{padding:16px 18px}
.tg-kpi+.tg-kpi{border-left:1px solid var(--line)}
.tg-kpi strong{display:block;font:700 26px/1.1 var(--font);margin:6px 0 2px;overflow-wrap:anywhere}
.tg-kpi span{font-size:12.5px;color:var(--ink-muted)}
.tg-bars-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.tg-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:150px;margin-top:14px}
.tg-bar{display:grid;grid-template-rows:auto 1fr auto;height:100%;text-align:center;font-size:11.5px;color:var(--ink-muted)}
.tg-bar-track{position:relative;background:var(--surface-2);border-radius:3px;overflow:hidden}
.tg-bar-fill{position:absolute;left:0;right:0;bottom:0;background:var(--ink-soft);border-radius:3px 3px 0 0}
.tg-bar:last-child .tg-bar-fill{background:var(--blue)}

/* ---------- Preisduell (Markup kommt aus dem Skript) ---------- */
.price-game-section{margin-top:var(--space-7)}
.price-game-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--space-4)}
.price-game-head h2{font-size:var(--fs-h2)}
.price-game-head p{color:var(--ink-muted);font-size:var(--fs-small);margin-top:4px;max-width:60ch}
.price-game-streak{font:600 14px var(--font);padding:7px 12px;border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap}
.price-game-streak b{color:var(--ink)}
.price-game-board-wrap{position:relative}
.price-game-board{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.price-game-card{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px 18px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:6px}
.price-game-image{height:150px;border-radius:var(--radius-sm);background:var(--surface-2);display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
html[data-theme="light"] .price-game-image{background:var(--surface-2)}
.price-game-image img{max-height:100%;width:auto;object-fit:contain}
.price-game-image-placeholder{font-size:13px;color:var(--ink-muted)}
.price-game-name{font-size:18px;line-height:1.2}
.price-game-name a{text-decoration:none}
.price-game-name a:hover{color:var(--ink-soft)}
.price-game-summary{font-size:13px;color:var(--ink-muted)}
.price-game-price-label{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);align-self:end;border-top:1px solid var(--line-strong);padding-top:10px}
.price-game-price{font:700 30px/1 var(--font);letter-spacing:-.01em}
.price-game-vs{position:absolute;left:50%;top:75px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font:700 13px var(--font-label);letter-spacing:.06em;border:1px solid var(--line-strong)}
.price-game-controls{display:grid;justify-items:center;gap:12px;margin-top:var(--space-4)}
.price-game-question{font-weight:600}
.price-game-actions{display:flex;gap:10px}
.price-game-choice,.price-game-restart{min-height:44px;padding:0 22px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 15px var(--font);cursor:pointer}
.price-game-choice:hover{border-color:var(--ink-muted);color:var(--ink)}
.price-game-choice:disabled{opacity:.55;cursor:wait}
.price-game-restart{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.price-game-restart:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--bg)}
.price-game-result{min-height:22px;font-weight:600}
.price-game-result.is-correct{color:var(--ok-text)}
.price-game-result.is-wrong{color:var(--warn-text)}
.price-game-loading,.price-game-error{padding:40px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--ink-soft)}
.price-game-error strong{display:block;color:var(--ink);margin-bottom:6px}
.reveal-pop .price-game-price{animation:tg-stamp .45s cubic-bezier(.2,.8,.2,1)}
.price-game-ranking{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;align-items:end;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.price-game-personal-record{color:var(--ink-soft);font-size:var(--fs-small)}
.price-game-personal-record strong{color:var(--ink)}
.price-game-podium-title{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);grid-column:2;grid-row:1;margin-bottom:-4px}
.price-game-podium{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end}
.price-game-podium-place{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;background:var(--surface);text-align:center}
.price-game-podium-place.place-1{padding-top:16px;border-color:var(--ink-muted)}
.price-game-podium-rank{font:700 13px var(--font);color:var(--ink)}
.price-game-podium-user{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price-game-podium-score{font-size:12.5px;color:var(--ink-muted)}
@keyframes tg-stamp{0%{transform:scale(1.18);opacity:.2}60%{transform:scale(.98);opacity:1}100%{transform:scale(1)}}

/* ---------- Kontaktfenster (von theme.js erzeugt) ---------- */
.tg-contact-toggle{position:fixed;right:18px;bottom:22px;z-index:45;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-lift)}
.tg-contact-toggle:hover{border-color:var(--ink-muted);color:var(--ink)}
.tg-contact-toggle svg{width:20px;height:20px}
.tg-contact-backdrop{position:fixed;inset:0;z-index:80;background:rgba(8,10,12,.62);display:none;align-items:center;justify-content:center;padding:16px}
.tg-contact-backdrop.is-open{display:flex}
.tg-contact-modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:22px 22px 20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tg-contact-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.tg-contact-head h2{font-size:var(--fs-h2)}
.tg-contact-head p{color:var(--ink-muted);font-size:var(--fs-small);margin-top:4px}
.tg-contact-close{width:34px;height:34px;flex:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:none;color:var(--ink-soft);font-size:20px;line-height:1;cursor:pointer}
.tg-contact-close:hover{color:var(--ink)}
.tg-contact-error{display:none}
.tg-contact-error.is-visible{display:block;padding:11px 14px;border-radius:8px;border:1px solid color-mix(in srgb,var(--bad) 55%,transparent);background:var(--bad-wash);color:var(--bad-text);font-size:var(--fs-small);margin-bottom:12px}
.tg-contact-field{display:grid;gap:6px;margin-bottom:14px}
.tg-contact-field label{font-weight:600;font-size:14.5px}
.tg-contact-field input,.tg-contact-field textarea{width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);color:var(--ink);outline:none}
.tg-contact-field textarea{min-height:150px;resize:vertical}
.tg-contact-field input:focus,.tg-contact-field textarea:focus{border-color:var(--blue);box-shadow:var(--focus)}
.tg-contact-field input[readonly]{color:var(--ink-soft);background:var(--surface-2)}
.tg-contact-hint{font-size:12.5px;color:var(--ink-muted)}
.tg-contact-submit{width:100%;min-height:44px;border:0;border-radius:var(--radius-sm);background:var(--ink);color:var(--bg);font:600 15px var(--font);cursor:pointer}
.tg-contact-submit:hover{background:var(--ink-soft)}
.tg-footer-contact{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:none;color:var(--ink);font:600 14px var(--font);cursor:pointer}
.tg-footer-contact:hover{border-color:var(--ink-muted)}
.tg-footer-contact svg{width:16px;height:16px}
.tg-contact-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:90;padding:12px 18px;border-radius:8px;background:var(--plate);color:var(--plate-ink);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.tg-contact-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Konto-Seiten ---------- */
.tg-auth{display:grid;place-items:start center;padding:var(--space-7) var(--gutter) 0}
.tg-auth-card{width:min(440px,100%)}
.tg-auth-card .tg-plate{padding:22px 24px;border-radius:var(--radius) var(--radius) 0 0}
.tg-auth-card h1{font-size:28px;margin-bottom:6px}
.tg-auth-card .tg-auth-intro{color:var(--plate-muted);font-size:14.5px}
.tg-auth-body{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:22px 24px}
.tg-auth-body .tg-btn--primary{width:100%;min-height:46px}
.tg-auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-muted);font-size:13px}
.tg-auth-or::before,.tg-auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.tg-auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--ink-muted)}
.tg-auth-links a{color:var(--ink)}
.tg-code{letter-spacing:.5em;font:700 26px/1 var(--font)!important;text-align:center}
.tg-google{display:flex;justify-content:center;min-height:44px}

/* ---------- Lesen: Blog, Ratgeber ---------- */
.tg-read{max-width:68ch;padding-top:var(--space-5)}
.tg-read h1{font-size:clamp(30px,4vw,42px);letter-spacing:-.02em;margin-bottom:10px}
.tg-read h2{font-size:var(--fs-h2);margin:36px 0 10px}
.tg-read p,.tg-read li{color:var(--ink-soft);font-size:17px;line-height:1.65}
.tg-read p+p{margin-top:14px}
.tg-prose{max-width:70ch}
.tg-prose h2{font-size:var(--fs-h2);margin:32px 0 10px}
.tg-prose h3{font-size:var(--fs-h3);margin:24px 0 8px}
.tg-prose p,.tg-prose li{color:var(--ink-soft);font-size:17px;line-height:1.65}
.tg-prose p{margin:0 0 14px}
.tg-prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.tg-prose img{border-radius:var(--radius);margin:18px 0}
.tg-prose blockquote{margin:18px 0;padding:4px 0 4px 18px;border-left:1px solid var(--line-strong);color:var(--ink-soft)}
.tg-prose code{font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:4px}
.tg-posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tg-post{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.tg-post time{font-size:13px;color:var(--ink-muted);padding-top:3px}
.tg-post h2{font-size:20px}
.tg-post h2 a{text-decoration:none}
.tg-post p{color:var(--ink-soft);margin-top:6px}
.tg-post .tg-more-link{display:inline-block;margin-top:8px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- Forum ---------- */
.tg-forum{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}
.tg-forum-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:var(--space-5) 0 var(--space-4)}
.tg-forum-tools form{display:flex;flex:1;min-width:240px;max-width:460px;height:40px;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--surface)}
.tg-forum-tools input{flex:1;min-width:0;border:0;background:transparent;padding:0 12px;outline:none}
.tg-forum-tools button{border:0;background:var(--surface-2);padding:0 14px;font-weight:600;cursor:pointer;color:var(--ink)}
.tg-topics{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tg-topic{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tg-topic h2,.tg-topic h3{font-size:17px;font-weight:600}
.tg-topic a{text-decoration:none}
.tg-topic-meta{font-size:12.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.tg-topic-excerpt{grid-column:1/-1;color:var(--ink-soft);font-size:14.5px}
.tg-topic-count{text-align:right;font-size:13px;color:var(--ink-muted);white-space:nowrap}
.tg-cats{position:sticky;top:calc(var(--header-h) + 16px)}
.tg-cats h2{font:600 var(--fs-label)/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.tg-cats a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-soft)}
.tg-cats a:hover{background:var(--surface);color:var(--ink)}
.tg-cats a.is-active{background:var(--surface);color:var(--ink);box-shadow:inset 2px 0 0 var(--blue)}
.tg-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line-strong);font-size:12px;color:var(--ink-soft)}
.tg-badge--blue{border-color:var(--blue);color:var(--blue-text)}
.tg-post-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px 20px;margin-bottom:12px}
.tg-post-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tg-avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none;color:var(--ink-soft)}
.tg-avatar img{width:100%;height:100%;object-fit:cover}
.tg-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tg-reaction{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;background:none;cursor:pointer;font-size:13px;color:var(--ink-soft)}
.tg-reaction.is-active,.tg-reaction[aria-pressed="true"]{border-color:var(--blue);color:var(--ink);background:var(--blue-wash)}

/* ---------- Tabelle / Moderation ---------- */
.tg-ticket{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px 20px;margin-bottom:12px}
.tg-ticket-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-bottom:10px;font-size:13.5px;color:var(--ink-muted)}
.tg-ticket-head strong{color:var(--ink);font-size:15px}
.tg-ticket-msg{white-space:pre-wrap;color:var(--ink-soft);margin-bottom:14px}
.tg-ticket-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---------- Werbeflächen: eingeplant, bis zum Partner aus ---------- */
.tg-safe-ad{display:none!important}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  .tg-plate-figures strong,.tg-scale-low{animation:tg-stamp .5s cubic-bezier(.2,.8,.2,1) both}
  .tg-plate-figures .tg-plate-field:nth-child(2) strong{animation-delay:.06s}
  .tg-plate-figures .tg-plate-field:nth-child(3) strong{animation-delay:.12s}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Breakpoints ---------- */
@media (max-width:1100px){
  .tg-offer{grid-template-columns:56px minmax(0,1fr) 140px 118px 96px;}
  .tg-offer-ship{display:none}
  .tg-model-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .tg-nav{display:none}
  .tg-home-hero{grid-template-columns:minmax(0,1fr)}
  .tg-forum{grid-template-columns:minmax(0,1fr)}
  .tg-cats{position:static}
  .tg-footer-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  :root{--header-h:auto;--fs-h1:26px}
  .tg-header-inner{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .tg-search{order:3;flex:1 1 100%;max-width:none}
  .tg-account{margin-left:auto}
  .tg-hide-sm{display:none}
  .tg-plate{padding:18px 16px 16px}
  .tg-plate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-plate-grid .tg-plate-field:nth-child(3){padding-left:0;border-left:0}
  .tg-plate-grid .tg-plate-field:nth-child(n+3){border-top:1px solid var(--plate-line)}
  .tg-plate-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-plate-figures .is-low{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between;padding-right:0}
  .tg-plate-figures .tg-plate-field:nth-child(2){padding-left:0;border-left:0;border-top:1px solid var(--plate-line)}
  .tg-plate-figures .tg-plate-field:nth-child(3){border-top:1px solid var(--plate-line)}
  .tg-plate-figures .tg-plate-field:not(.is-low) strong{font-size:20px}
  .tg-plate-basis>summary{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--plate-ink);cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:2px}
  .tg-model{display:flex;flex-direction:column}
  .tg-model .tg-model-head{display:contents}
  .tg-model .tg-history{order:1;margin-top:var(--space-6)}
  .tg-model>.tg-section{order:2}
  .tg-model .tg-toolbar{margin-top:var(--space-4)}
  .tg-chart .axis{font-size:21px}
  .tg-contact-toggle{display:none}
  .tg-plate-specs{grid-template-columns:minmax(0,1fr)}
  .tg-plate-specs div+div{padding-left:0;border-left:0}
  .tg-plate-search{flex-direction:column;height:auto}
  .tg-plate-search input{flex:none;height:52px;width:100%}
  .tg-plate-search button{height:48px;padding:0 16px}
  .tg-section-head,.price-game-head{flex-direction:column;align-items:flex-start;gap:6px}
  .tg-offer{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"img title price" "img check act";gap:6px 12px;padding:12px 0}
  .tg-offer-img{grid-area:img;width:52px;height:52px;align-self:start}
  .tg-offer-main{grid-area:title}
  .tg-offer-checkcell{grid-area:check}
  .tg-offer-pricecell{grid-area:price}
  .tg-offer-act{grid-area:act}
  .tg-offer-price{font-size:18px}
  .tg-toolbar-end{margin-left:0;width:100%;justify-content:space-between}
  .tg-range-panel{position:fixed;left:16px;right:16px;width:auto;top:auto;bottom:16px}
  .price-game-board{grid-template-columns:minmax(0,1fr)}
  .price-game-vs{display:none}
  .price-game-ranking{grid-template-columns:minmax(0,1fr)}
  .price-game-podium-title,.price-game-podium{grid-column:1;grid-row:auto}
  .tg-kpi+.tg-kpi{border-left:0;border-top:1px solid var(--line)}
  .tg-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-post{grid-template-columns:minmax(0,1fr);gap:4px}
  .tg-row{grid-template-columns:minmax(0,1fr) auto auto}
  .tg-row-thumb{display:none}
  body>.tg-theme-toggle{bottom:76px}
}

/* ---------- Forum-Avatare (Markup aus forumAvatar()) ---------- */
.forum-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface-2)}
.forum-avatar-fallback{display:grid;place-items:center;font-weight:700;color:var(--ink-soft);border:1px solid var(--line-strong)}
.tg-plate .forum-avatar{width:64px;height:64px;font-size:24px;background:var(--plate-2);color:var(--plate-ink);border-color:var(--plate-line)}

/* ---------- Gewählte Zeile tritt hervor ---------- */
@media (hover:hover){
  .tg-offer{transition:opacity .15s ease}
  .tg-offers:has(.tg-offer:hover) .tg-offer:not(:hover){opacity:.62}
}
.tg-offers:has(.tg-offer:focus-within) .tg-offer:not(:focus-within){opacity:.62}