/*
 * HWIndex Design-System — Edition "Notizbuch"
 *
 * Vorbild: ruhige, handgemachte Tracker-Seiten (schmale Spalte, viel
 * Weißraum, weiche Karten mit harter Versatzkante, Baloo-Überschriften in
 * gedämpftem Ton, kleine Monospace-Kennzeilen, Pillen-Knöpfe, unterstrichene
 * Links in Akzentfarbe). Farben nach dem Logo: #0065d6 (Grundton), #128cfd
 * und #37c8fd (Abstufungen), #202830 (Tinte).
 *
 * Keine Fremdschriften, keine Fremdabrufe: Baloo 2 liegt lokal, alles andere
 * nutzt die Schriften des Betriebssystems.
 *
 * Hell/Dunkel folgt dem System; der Umschalter setzt data-theme am <html>.
 */

/* --------------------------------------------------------------------------
   0. Schrift (lokal: die CSP erlaubt nur font-src 'self')
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("baloo2-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Logo-Palette (portal/logo.svg) */
  --hw-logo-blue: #0065d6;
  --hw-logo-azure: #128cfd;
  --hw-logo-cyan: #37c8fd;
  --hw-logo-ink: #202830;

  /* Flächen */
  --hw-bg: #fbfcfe;
  --hw-surface: #ffffff;
  --hw-surface-solid: #ffffff;
  --hw-surface-muted: #f3f7fc;
  --hw-surface-high: #e9f1fa;

  /* Text: Überschriften gedämpft, Zahlen kräftig, Fließtext grau */
  --hw-head: #5d6f84;
  --hw-ink: #1c2733;
  --hw-ink-soft: #4a5663;
  --hw-muted: #5f6b78;
  --hw-subtle: #67737f;

  /* Linien und Kante */
  --hw-line: #d9e5f3;
  --hw-line-strong: #bfd1e6;
  --hw-edge: #202830;
  --hw-outline: #7d8a98;

  /* Marke */
  --hw-brand: #0065d6;
  --hw-brand-hover: #0052b0;
  --hw-brand-tint: #eaf3fd;
  --hw-on-brand: #ffffff;
  --hw-on-brand-tint: #00458f;
  --hw-underline: #128cfd;
  --hw-cyan: #37c8fd;
  --hw-focus: #0065d6;

  /* Markt aus Käufersicht: teurer warm, günstiger grün */
  --hw-up: #b42318;
  --hw-down: #0a7342;
  --hw-flat: #5f6b78;

  /* Datenqualität */
  --hw-good: #0a7342;
  --hw-warn: #8a5a00;
  --hw-thin: #9a4a12;
  --hw-bad: #b42318;

  /* Form */
  --hw-radius-sm: 10px;
  --hw-radius: 16px;
  --hw-radius-pill: 999px;
  --hw-kante: 4px 4px 0 var(--hw-edge);
  --hw-kante-klein: 2px 2px 0 var(--hw-edge);
  --hw-ring: 0 0 0 3px rgb(0 101 214 / 0.25);

  /* Gemeinsame Lesebreite der Textseiten: Basis = Standardbreite der Seiten
     (--hw-max-width), ueberschrieben von alten 44rem/70ch-Deckeln. Karten
     (Impressum, Datenschutz, Blog, Methodik) sind so genau so breit wie die
     Karten des Live-Dashboards, der Fliesstext jeder Seite laeuft ueber diese
     einheitliche Breite. */
  --hw-text-width: var(--hw-max-width);

  /* Schrift */
  --hw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --hw-font-head: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", var(--hw-font);
  --hw-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono",
    Menlo, monospace;

  /* Raster */
  --hw-max-width: 62rem;
  --hw-gutter: clamp(1rem, 4vw, 1.75rem);
  --hw-nav-h: 3.75rem;

  --hw-fast: 120ms;
  --hw-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Kompatibilitäts-Aliase */
  --hw-surface-raised: var(--hw-surface);
  --hw-line-soft: var(--hw-line);
  --hw-brand-dark: var(--hw-brand-hover);
  --hw-brand-soft: var(--hw-brand-tint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hw-bg: #0e131a;
    --hw-surface: #141b24;
    --hw-surface-solid: #141b24;
    --hw-surface-muted: #19222d;
    --hw-surface-high: #202b38;
    --hw-head: #9db0c5;
    --hw-ink: #eef3f8;
    --hw-ink-soft: #c3ceda;
    --hw-muted: #9aa8b7;
    --hw-subtle: #93a1b0;
    --hw-line: #283748;
    --hw-line-strong: #36475b;
    --hw-edge: #000000;
    --hw-outline: #7e8d9d;
    --hw-brand: #66b0ff;
    --hw-brand-hover: #92c7ff;
    --hw-brand-tint: #122b47;
    --hw-on-brand: #06182c;
    --hw-on-brand-tint: #d2e7ff;
    --hw-underline: #37c8fd;
    --hw-focus: #92c7ff;
    --hw-up: #ff9d91;
    --hw-down: #5fd598;
    --hw-flat: #a3b0bd;
    --hw-good: #5fd598;
    --hw-warn: #ffd27a;
    --hw-thin: #ffb489;
    --hw-bad: #ff9d91;
    --hw-ring: 0 0 0 3px rgb(102 176 255 / 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hw-bg: #0e131a;
  --hw-surface: #141b24;
  --hw-surface-solid: #141b24;
  --hw-surface-muted: #19222d;
  --hw-surface-high: #202b38;
  --hw-head: #9db0c5;
  --hw-ink: #eef3f8;
  --hw-ink-soft: #c3ceda;
  --hw-muted: #9aa8b7;
  --hw-subtle: #93a1b0;
  --hw-line: #283748;
  --hw-line-strong: #36475b;
  --hw-edge: #000000;
  --hw-outline: #7e8d9d;
  --hw-brand: #66b0ff;
  --hw-brand-hover: #92c7ff;
  --hw-brand-tint: #122b47;
  --hw-on-brand: #06182c;
  --hw-on-brand-tint: #d2e7ff;
  --hw-underline: #37c8fd;
  --hw-focus: #92c7ff;
  --hw-up: #ff9d91;
  --hw-down: #5fd598;
  --hw-flat: #a3b0bd;
  --hw-good: #5fd598;
  --hw-warn: #ffd27a;
  --hw-thin: #ffb489;
  --hw-bad: #ff9d91;
  --hw-ring: 0 0 0 3px rgb(102 176 255 / 0.35);
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hw-nav-h) + 1rem);
  background: var(--hw-bg);
}

body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  background: var(--hw-bg);
  color: var(--hw-ink-soft);
  font-family: var(--hw-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--hw-brand-tint);
  color: var(--hw-on-brand-tint);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6rem;
  color: var(--hw-head);
  font-family: var(--hw-font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem);
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

figure {
  margin: 0;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hw-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--hw-brand);
}

:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

b,
strong {
  color: var(--hw-ink);
  font-weight: 650;
}

.hw-num,
.hw-card__price,
.hw-stat__value,
.hw-config__price,
.hw-config__total strong,
#summe {
  font-variant-numeric: tabular-nums;
}

.hw-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hw-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hw-sr {
  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;
}

.hw-skip {
  position: absolute;
  z-index: 200;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--hw-edge);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--hw-kante-klein);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-140%);
}

.hw-skip:focus {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hw-wrap {
  width: 100%;
  max-width: var(--hw-max-width);
  margin-inline: auto;
  padding-inline: var(--hw-gutter);
}

/* Kennzeile: kleine Monospace-Großbuchstaben (wie "LATEST RESET"). */
.hw-card__category,
.hw-quicknav__label,
.hw-hero__eyebrow,
.hw-table thead th,
.hw-card label,
.hw-dashboard-controls label,
.hw-dealcheck__form label,
.hw-footer__label,
.hw-rechner__head,
.hw-rechner-summary h2,
.hw-config__part,
.hw-config__total > span:first-child {
  font-family: var(--hw-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2b. Grundformen: Karte mit Versatzkante, Pille
   -------------------------------------------------------------------------- */
.hw-card {
  position: relative;
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-card h2 {
  margin-bottom: 1rem;
}

.hw-card > :last-child {
  margin-bottom: 0;
}

.hw-card__meta {
  max-width: 65ch;
  color: var(--hw-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

p.hw-card__meta {
  margin: 0.4rem 0 1rem;
}

/* --------------------------------------------------------------------------
   3. Kopf, Marke, Suche, Aktionen
   -------------------------------------------------------------------------- */
.hw-header {
  position: relative;
  z-index: 25;
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--hw-bg);
}

.hw-topbar {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.hw-brand {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--hw-head);
  text-decoration: none;
}

.hw-brand:hover {
  color: var(--hw-head);
}

.hw-brand__logo {
  display: block;
  width: 3.25rem;
  height: auto;
  flex: 0 0 auto;
  padding: 0.3rem;
  border: 1.5px solid var(--hw-line);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--hw-kante-klein);
  aspect-ratio: 1;
  object-fit: contain;
}

.hw-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}

.hw-brand__name {
  font-family: var(--hw-font-head);
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hw-brand__tag {
  margin-top: 0.2rem;
  color: var(--hw-muted);
  font-size: 0.85rem;
}

.hw-search {
  position: relative;
  /* 19 statt 17 rem: der Platzhalter "Produkt oder Beitrag suchen" wurde am
     Desktop abgeschnitten ("... suche"). */
  flex: 0 1 19rem;
  min-width: 0;
  margin: 0;
}

.hw-search__icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  display: inline-flex;
  color: var(--hw-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.hw-search__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
}

.hw-search__input {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 1rem 0.5rem 2.4rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink);
  font-size: 0.92rem;
  box-shadow: var(--hw-kante-klein);
  -webkit-appearance: none;
  appearance: none;
}

.hw-search__input::placeholder {
  color: var(--hw-subtle);
  opacity: 1;
}

.hw-search__input:focus,
.hw-search__input:focus-visible {
  outline: none;
  border-color: var(--hw-brand);
}

.hw-search__results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(24rem, 90vw);
  max-height: min(70vh, 28rem);
  margin: 0;
  padding: 0.4rem;
  overflow: auto;
  list-style: none;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-search__hit a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: var(--hw-radius-sm);
  color: var(--hw-ink);
  text-decoration: none;
}

.hw-search__hit a:hover {
  outline: none;
  background: var(--hw-surface-muted);
}

/* Fokus per Schatten statt entferntem Rand: die Markierung hatte nur 1,08:1 Kontrast (WCAG 2.4.7). */
.hw-search__hit a:focus-visible {
  background: var(--hw-surface-muted);
  box-shadow: var(--hw-ring);
}

.hw-search__name {
  grid-column: 1;
  font-weight: 650;
}

.hw-search__name mark {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hw-underline);
  text-decoration-thickness: 2px;
}

.hw-search__meta {
  grid-column: 1;
  color: var(--hw-muted);
  font-size: 0.8rem;
}

.hw-search__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--hw-ink);
  font-family: var(--hw-mono);
  font-size: 0.85rem;
}

/* Kein Treffer: kurzer Hinweis statt einer stumm geschlossenen Liste. */
.hw-search__empty {
  padding: 0.6rem 0.7rem;
  color: var(--hw-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.hw-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
  align-items: center;
}

.hw-iconbtn {
  position: relative;
  display: inline-grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--hw-line);
  border-radius: 50%;
  background: var(--hw-surface);
  color: var(--hw-muted);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--hw-kante-klein);
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-iconbtn:hover {
  color: var(--hw-ink);
}

.hw-iconbtn:active,
.hw-button:active,
.hw-sales-btn:active,
.hw-nav__link:active {
  box-shadow: 0 0 0 var(--hw-edge);
  transform: translate(2px, 2px);
}

.hw-watchlink[aria-current="true"],
.hw-theme-toggle[aria-pressed="true"] {
  color: var(--hw-brand);
}

.hw-watchlink__count {
  position: absolute;
  top: -0.4rem;
  right: -0.45rem;
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.3rem;
  border-radius: var(--hw-radius-pill);
  background: var(--hw-brand);
  color: var(--hw-on-brand);
  font-family: var(--hw-mono);
  font-size: 0.75rem;
  line-height: 1;
}

/* Umschalter zeigt das Ziel: Mond im hellen, Sonne im dunklen Design. */
.hw-icon--sun {
  display: none;
}

:root[data-theme="dark"] .hw-icon--sun {
  display: block;
}

:root[data-theme="dark"] .hw-icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hw-icon--sun {
    display: block;
  }

  :root:not([data-theme="light"]) .hw-icon--moon {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. Navigation: eine Reihe Pillen
   -------------------------------------------------------------------------- */
.hw-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--hw-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hw-nav__list {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: var(--hw-nav-h);
  margin: 0;
  padding: 0.6rem 0.25rem 0.8rem 0;
  flex-wrap: wrap;
  list-style: none;
}

.hw-nav__list li {
  display: flex;
  flex: 0 0 auto;
}

.hw-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-muted);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--hw-kante-klein);
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-nav__link:hover {
  color: var(--hw-ink);
}

.hw-nav__link:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 2px;
}

.hw-nav__link[aria-current="page"] {
  border-color: var(--hw-edge);
  color: var(--hw-ink);
}

.hw-nav__toggle {
  display: none;
  gap: 0.55rem;
  min-height: 2.5rem;
  margin: 0.55rem 0;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--hw-kante-klein);
}

.hw-nav__toggle::before {
  width: 1rem;
  height: 0.7rem;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
  content: "";
}

.hw-nav__toggle[aria-expanded="true"]::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.hw-nav__toggle:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 2px;
}

/* Handy: Klappmenü; ohne JavaScript bleibt die Liste offen. */
@media (max-width: 52rem) {
  .hw-nav__list {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0 0.9rem;
    overflow: visible;
  }

  .hw-nav__list.is-open {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.hw-menu-ready .hw-nav__toggle {
    display: inline-flex;
    align-items: center;
  }

  html.hw-menu-ready .hw-nav__list:not(.is-open) {
    display: none;
  }

  .hw-nav__list.is-open {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   5. Seitenkopf und Hauptbereich
   -------------------------------------------------------------------------- */
main.hw-wrap {
  flex: 1 0 auto;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.hw-hero {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.hw-hero--page {
  max-width: 44rem;
}

.hw-hero__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--hw-brand);
}

.hw-hero__title {
  margin: 0 0 0.45rem;
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hw-hero__subtitle,
.hw-hero--page .hw-hero__subtitle {
  max-width: 40rem;
  margin: 0;
  color: var(--hw-muted);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   6. Sektionen
   -------------------------------------------------------------------------- */
.hw-section {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  scroll-margin-top: calc(var(--hw-nav-h) + 1rem);
}

.hw-section > p {
  max-width: 65ch;
}

.hw-hero + .hw-section,
.hw-section:first-child {
  margin-top: 0;
}

/* Rueckweg am Ende einer Produktseite: ohne eigene Regel klebte der Knopf an
   der Liste "Im selben Preisbereich" (gemessen 26.09.2026). */
.hw-backlink {
  margin: 1.75rem 0 0;
}

.hw-section__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
}

.hw-section__count {
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
}

.hw-section__more {
  margin: 1.25rem 0 0;
  color: var(--hw-muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   7. Kennzahlen, Trend, Badges
   -------------------------------------------------------------------------- */
.hw-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  margin: 0 0 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-stat__value {
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hw-stat b {
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: 1.3rem;
  font-weight: 800;
}

.hw-stat__label {
  color: var(--hw-muted);
  font-size: 0.92rem;
}

.hw-stat__sep {
  color: var(--hw-muted);
}

.hw-delta {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  font-family: var(--hw-mono);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.hw-delta--up {
  color: var(--hw-up);
}

.hw-delta--down {
  color: var(--hw-down);
}

.hw-delta--flat,
.hw-delta--none {
  color: var(--hw-flat);
}

.hw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}

p.hw-badges {
  margin: 0.25rem 0 1rem;
}

.hw-badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 1.55rem;
  padding: 0.1rem 0.6rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

.hw-badge::before {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hw-line-strong);
  content: "";
}

.hw-badge--confidence-high::before,
.hw-badge--confidence-good::before,
.hw-badge--condition-new::before {
  background: var(--hw-good);
}

.hw-badge--confidence-limited::before,
.hw-badge--data-med::before {
  background: var(--hw-warn);
}

.hw-badge--confidence-thin::before,
.hw-badge--outlier::before {
  background: var(--hw-thin);
}

.hw-badge--confidence-low::before {
  background: var(--hw-bad);
}

.hw-badge--condition-used::before {
  background: var(--hw-brand);
}

/* Verkaufsweg "Auktion" in Verkaufstabellen: gleicher Akzent wie der
   Markenpunkt, damit Auktion und Festpreis auf einen Blick unterscheidbar
   sind (Auktionen enden messbar anders als Sofortkäufe). */
.hw-badge--auction::before {
  background: var(--hw-brand);
}

.hw-badge--condition-unknown {
  border-style: dashed;
}

.hw-trend--up {
  color: var(--hw-up);
}

.hw-trend--down {
  color: var(--hw-down);
}

.hw-trend--flat {
  color: var(--hw-flat);
}

.hw-empty {
  padding: 2rem 1.25rem;
  border: 1.5px dashed var(--hw-line-strong);
  border-radius: var(--hw-radius);
  color: var(--hw-muted);
  text-align: center;
}

.hw-chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.2rem 0.85rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--hw-kante-klein);
}

.hw-chip-link:hover {
  color: var(--hw-brand);
}

/* --------------------------------------------------------------------------
   8. Kategorie-Kacheln (wie die Kennzahl-Karten des Vorbilds)
   -------------------------------------------------------------------------- */
.hw-quicknav {
  margin: 0 0 1rem;
}

.hw-quicknav__label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  margin: 0 0 0.85rem;
  color: var(--hw-muted);
}

.hw-quicknav__legend {
  letter-spacing: 0.04em;
  text-transform: none;
}

.hw-quicknav__list {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0 4px 4px 0;
  overflow: visible;
  list-style: none;
}

.hw-quicknav__list li {
  display: flex;
}

.hw-quicknav__btn {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  min-height: 5rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  color: var(--hw-ink);
  text-decoration: none;
  box-shadow: var(--hw-kante);
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-quicknav__btn:hover {
  color: var(--hw-ink);
  box-shadow: 6px 6px 0 var(--hw-edge);
  transform: translate(-2px, -2px);
}

.hw-quicknav__btn:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 3px;
}

.hw-quicknav__name {
  grid-column: 1 / -1;
  /* Am schmalen Viewport bricht das Etikett sonst aus der Schaltflaeche aus. */
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hw-quicknav__count {
  grid-column: 1;
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.hw-quicknav__trend {
  grid-column: 2;
  justify-self: end;
}

/* --------------------------------------------------------------------------
   9. Auffällig (größte Bewegungen)
   -------------------------------------------------------------------------- */
.hw-movers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
}

/* Eine einzelne Liste (Produktseite "Im selben Preisbereich") nicht über die
   volle Breite ziehen, sonst stehen Name und Preis weit auseinander. */
.hw-movers__grid--single {
  grid-template-columns: minmax(0, 36rem);
}

.hw-movers__col {
  padding: 1.1rem 1.3rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-movers__col h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.hw-movers__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-movers__list li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--hw-line);
}

.hw-movers__list li:first-child {
  border-top: 0;
}

.hw-movers__list a {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hw-ink);
  font-weight: 650;
}

.hw-movers__price {
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   10. Produktkarten
   -------------------------------------------------------------------------- */
.hw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.35rem;
  padding: 0 4px 4px 0;
}

.hw-cards > .hw-card {
  margin: 0;
}

/* Am Handy wird jede Kategorie der Startseite zu einer Reihe zum Wischen:
   eine Karte plus Anschnitt der nächsten, einrastend. Vorher standen bis zu
   64 Karten untereinander. Der Rand unten rechts lässt Platz für die harte
   Schattenkante; die Seite selbst bekommt keine waagerechte Scrollleiste. */
@media (max-width: 47.99rem) {
  .hw-cards--swipe {
    grid-template-columns: none;
    grid-auto-columns: minmax(15.5rem, 84%);
    grid-auto-flow: column;
    gap: 0.9rem;
    /* bis an den Bildschirmrand, damit die nächste Karte sichtbar anläuft */
    margin-right: calc(-1 * var(--hw-gutter));
    padding: 0 var(--hw-gutter) 0.6rem 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .hw-cards--swipe > .hw-card {
    scroll-snap-align: start;
  }

  /* Die Karte hebt sich beim Überfahren an; in der Reihe würde der
     Versatz oben abgeschnitten. */
  .hw-cards--swipe > .hw-product-card:hover {
    transform: none;
    box-shadow: var(--hw-kante);
  }
}

.hw-product-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-product-card:hover {
  box-shadow: 6px 6px 0 var(--hw-edge);
  transform: translate(-2px, -2px);
}

.hw-product-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.15rem 1.25rem 0.4rem;
  color: inherit;
  text-decoration: none;
}

.hw-product-card__link:hover {
  color: inherit;
}

.hw-product-card__link:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: -4px;
  border-radius: var(--hw-radius);
}

.hw-card__category {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--hw-muted);
}

.hw-card__title {
  display: block;
  color: var(--hw-head);
  font-family: var(--hw-font-head);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

.hw-card__quote {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  align-items: baseline;
  margin: 0.45rem 0 0.35rem;
}

.hw-card__price {
  display: block;
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hw-product-card .hw-badges {
  margin: 0.55rem 0 0.35rem;
}

.hw-product-card .hw-card__meta {
  font-size: 0.82rem;
}

.hw-card__hint {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.45rem;
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.78rem;
  text-decoration: underline;
  text-decoration-color: var(--hw-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.hw-card__hint::after {
  content: " →";
}

.hw-product-card:hover .hw-card__hint {
  color: var(--hw-ink);
}

.hw-product-card__actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.1rem 1.1rem 1.25rem;
}

.hw-sales-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.3rem 0.9rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink-soft);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--hw-kante-klein);
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-sales-btn:hover {
  color: var(--hw-ink);
}

.hw-star {
  display: inline-grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--hw-line);
  border-radius: 50%;
  background: var(--hw-surface);
  color: var(--hw-subtle);
  cursor: pointer;
  box-shadow: var(--hw-kante-klein);
}

.hw-star:hover {
  color: var(--hw-ink);
}

.hw-star[aria-pressed="true"] {
  color: #d39200;
}

.hw-star[aria-pressed="true"] .hw-icon {
  fill: currentColor;
}

.hw-star.is-bump .hw-icon {
  animation: hwBump 360ms var(--hw-ease);
}

/* Sparkline */
.hw-sparkline {
  display: block;
  width: 100%;
  height: 2.5rem;
  margin: 0.4rem 0;
  overflow: visible;
}

span.hw-sparkline {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1.5px dashed var(--hw-line);
  border-radius: var(--hw-radius-sm);
  color: var(--hw-subtle);
  font-family: var(--hw-mono);
  font-size: 0.75rem;
  line-height: 1.3;
}

svg.hw-sparkline polyline {
  fill: none;
  stroke: var(--hw-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hw-sparkline__area {
  fill: var(--hw-brand);
  fill-opacity: 0.08;
  stroke: none;
}

/* Punkte würden bei nicht proportionaler Skalierung zu Ellipsen. */
svg.hw-sparkline circle {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Tabellen
   -------------------------------------------------------------------------- */
.hw-tabletools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
}

.hw-filter {
  position: relative;
  flex: 1 1 16rem;
  max-width: 24rem;
  margin: 0;
}

.hw-filter::before {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--hw-muted);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-60%);
}

.hw-filter__input {
  padding-left: 2.3rem !important;
  border-radius: var(--hw-radius-pill) !important;
}

.hw-tabletools__export {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  color: var(--hw-muted);
  font-size: 0.88rem;
}

.hw-filter__status:empty {
  display: none;
}

.hw-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
  -webkit-overflow-scrolling: touch;
}

.hw-card .hw-table-scroll {
  box-shadow: none;
}

.hw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

.hw-table caption {
  caption-side: top;
  text-align: left;
}

.hw-table th,
.hw-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: middle;
}

.hw-table td {
  border-top: 1px dashed var(--hw-line);
  color: var(--hw-ink-soft);
}

.hw-table .hw-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hw-table thead th {
  border-bottom: 1.5px solid var(--hw-line);
  background: var(--hw-surface-muted);
  color: var(--hw-muted);
  white-space: nowrap;
}

.hw-table tbody tr:first-child td {
  border-top: 0;
}

.hw-table tbody tr:hover {
  background: var(--hw-surface-muted);
}

.hw-table tbody tr.is-collapsed {
  display: none;
}

.hw-table td b {
  color: var(--hw-ink);
}

.hw-table td:first-child {
  color: var(--hw-ink);
  font-weight: 600;
}

.hw-table td .hw-sale__link {
  margin-top: 0;
}

.hw-table th[aria-sort] {
  padding: 0.35rem 0.5rem;
}

/* Spaltenköpfe dürfen umbrechen: Die gesperrten Großbuchstaben samt
   Sortierpfeil machten die Produktabdeckung am Desktop rund 80 px breiter als
   ihren Rahmen, die Spalte "Datenqualität" wurde abgeschnitten. Das
   Live-Dashboard hat feste Spaltenbreiten und bleibt ausgenommen. */
.hw-table:not(.hw-est {
  margin-left: 0.15em;
  color: var(--hw-muted, #6b7280);
  font-size: 0.85em;
  cursor: help;
}

.hw-dashboard-table) thead th {
  white-space: normal;
}

/* Knopf folgt der Ausrichtung seiner Zelle (Zahlenspalten rechts). */
.hw-table:not(.hw-dashboard-table) thead :where(.hw-sort-button) {
  white-space: normal;
  text-align: inherit;
}

.hw-table-more {
  margin: -0.5rem 0 1.5rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. Formulare und Knöpfe
   -------------------------------------------------------------------------- */
.hw-card label,
.hw-dashboard-controls label,
.hw-dealcheck__form label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--hw-muted);
}

/* :where() hält die Spezifität bei null, damit Bausteine ihre Abstände behalten. */
:where(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--hw-line-strong);
  border-radius: var(--hw-radius-sm);
  background-color: var(--hw-surface);
  color: var(--hw-ink);
  font-size: 0.95rem;
}

select {
  padding-right: 2.4rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378858f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.8rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  cursor: pointer;
}

select:focus,
select:focus-visible,
textarea:focus-visible,
.hw-filter__input:focus,
.hw-dealcheck__field input:focus,
.hw-dashboard-search input:focus {
  outline: none;
  border-color: var(--hw-brand);
  box-shadow: var(--hw-ring);
}

select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hw-button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.5rem 1.2rem;
  border: 1.5px solid var(--hw-edge);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-brand);
  color: var(--hw-on-brand);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--hw-kante-klein);
  transition: transform var(--hw-fast) var(--hw-ease), box-shadow var(--hw-fast) var(--hw-ease);
}

.hw-button:hover {
  background: var(--hw-brand-hover);
  color: var(--hw-on-brand);
}

.hw-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hw-button:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 3px;
}

.hw-button--secondary {
  border-color: var(--hw-line);
  background: var(--hw-surface);
  color: var(--hw-ink);
}

.hw-button--secondary:hover {
  background: var(--hw-surface);
  color: var(--hw-brand);
}

.hw-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* WCAG 2.5.8: Tippziel mindestens 24 x 24 px (ohne Mindesthöhe gemessen 20 px). */
/* Bauteile mit eigener Produktseite: der Name ist der Verweis dorthin.
   Unterstreichung bleibt (sonst sieht man die Klickbarkeit nicht), aber ohne
   Versatz und ohne nowrap — lange Namen ("AIO-Wasserkuehlung 240 mm")
   duerfen in der engen Spalte umbrechen. */
.hw-config__val .hw-sale__link {
  margin-top: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hw-sale__link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-height: 24px;
  white-space: nowrap;
  margin-top: 0.35rem;
  color: var(--hw-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hw-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}


a.hw-sale__link[target="_blank"]::after {
  content: "↗";
  font-size: 0.85em;
}

.hw-bench-q {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-left: 0.35rem;
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.7rem;
}

.hw-bench-source {
  color: var(--hw-muted);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   13. Produktseite
   -------------------------------------------------------------------------- */
.hw-quote {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.35rem;
}

.hw-quote > * {
  grid-column: 1 / -1;
}

.hw-quote > .hw-stat {
  grid-column: auto;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.hw-quote > .hw-stat .hw-stat__sep {
  display: none;
}

.hw-quote > svg.hw-sparkline {
  max-width: 20rem;
  height: 3rem;
}

.hw-quote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.4rem;
}

.hw-quote__hint {
  flex: 1 1 12rem;
  color: var(--hw-muted);
  font-size: 0.9rem;
}

/* Knopf "Im Wert-Rechner verwenden" rechts neben dem Merken-Hinweis; am
   Handy rutscht er in eine eigene, volle Zeile. */
.hw-quote__calc {
  flex: 0 0 auto;
}

@media (max-width: 30rem) {
  .hw-quote__calc {
    flex: 1 1 100%;
  }
}

.hw-dealcheck {
  scroll-margin-top: calc(var(--hw-nav-h) + 1rem);
}

.hw-dealcheck__grid {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 1.5rem 2.25rem;
  align-items: center;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-dealcheck__intro p {
  margin-bottom: 0.9rem;
}

.hw-dealcheck__form {
  margin: 0 0 0.8rem;
}

.hw-dealcheck__field {
  position: relative;
}

.hw-dealcheck__field input {
  padding-right: 2.25rem !important;
  font-family: var(--hw-font-head);
  font-size: 1.2rem !important;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

.hw-dealcheck__field input::-webkit-outer-spin-button,
.hw-dealcheck__field input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.hw-dealcheck__field span {
  position: absolute;
  top: 50%;
  right: 0.95rem;
  color: var(--hw-muted);
  transform: translateY(-50%);
}

.hw-dealcheck__result {
  min-height: 3rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1.5px dashed var(--hw-line);
  border-radius: var(--hw-radius-sm);
  color: var(--hw-muted);
  font-size: 0.92rem;
}

.hw-dealcheck__result strong {
  display: block;
  color: inherit;
  font-family: var(--hw-font-head);
  font-size: 1.1rem;
  font-weight: 800;
}

.hw-dealcheck__result.is-good {
  border-style: solid;
  border-color: currentColor;
  color: var(--hw-good);
}

.hw-dealcheck__result.is-fair {
  border-style: solid;
  border-color: currentColor;
  color: var(--hw-brand);
}

.hw-dealcheck__result.is-high {
  border-style: solid;
  border-color: currentColor;
  color: var(--hw-warn);
}

.hw-dealcheck__result.is-bad {
  border-style: solid;
  border-color: currentColor;
  color: var(--hw-bad);
}

.hw-dist {
  position: relative;
  padding: 1.25rem 0 0;
}

.hw-dist__bar {
  position: relative;
  height: 2.4rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface-muted);
}

.hw-dist__whisker {
  position: absolute;
  top: 50%;
  right: calc(100% - var(--w9));
  left: var(--w1);
  height: 2px;
  background: var(--hw-outline);
  transform: translateY(-50%);
}

.hw-dist__box {
  position: absolute;
  top: 0.35rem;
  right: calc(100% - var(--q3));
  bottom: 0.35rem;
  left: var(--q1);
  border: 1.5px solid var(--hw-brand);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-brand-tint);
}

.hw-dist__median {
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  left: var(--md);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--hw-brand);
}

.hw-dist__offer {
  position: absolute;
  top: -1rem;
  bottom: -0.35rem;
  left: var(--offer, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--hw-ink);
  transition: left 200ms var(--hw-ease);
}

.hw-dist__offer::before {
  position: absolute;
  top: -0.2rem;
  left: 50%;
  border: 0.4rem solid transparent;
  border-top-color: var(--hw-ink);
  content: "";
  transform: translateX(-50%);
}

.hw-dist__marks {
  position: relative;
  height: 2.6rem;
  margin: 0.4rem 0 0.4rem;
}

.hw-dist__mark {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.hw-dist__mark b {
  font-size: 0.88rem;
}

/* Entzerrte Marke: sie steht nicht mehr mittig auf ihrem Wert, sonst ist der
   Bezug zur Verteilung verloren. Eine duenne Linie fuehrt zurueck, und der
   Text bekommt einen ruhigen Grund, damit er auf dem Balken lesbar bleibt. */
.hw-dist__mark.is-shifted {
  padding: 0.1rem 0.3rem;
  border-radius: var(--hw-radius-pill, 999px);
  background: var(--hw-surface, Canvas);
  box-shadow: 0 0 0 3px var(--hw-surface, Canvas);
}

.hw-dist__mark.is-shifted::after {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 1.9rem;
  background: var(--hw-outline);
  content: "";
  opacity: 0.7;
}

.hw-dist__mark.is-shifted[data-shift-dir='links']::after {
  right: 100%;
  transform: translateX(50%);
}

.hw-dist__mark.is-shifted[data-shift-dir='rechts']::after {
  left: 100%;
  transform: translateX(-50%);
}

.hw-dist__mark small {
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hw-dist figcaption {
  margin: 0;
  font-size: 0.82rem;
}

/* Preisverlauf */
.hw-chart {
  margin: 0 0 1.5rem;
}

.hw-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hw-chart--history {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante);
}

.hw-chart--history svg {
  min-height: 11rem;
}

.hw-chart--history figcaption {
  margin-top: 0.75rem;
}

.hw-chart__line {
  fill: none;
  stroke: var(--hw-brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hw-chart__area {
  fill: url(#hw-chart-fade);
  stroke: none;
}

.hw-chart__stop {
  stop-color: var(--hw-brand);
  stop-opacity: 0.18;
}

.hw-chart__stop--end {
  stop-opacity: 0;
}

.hw-chart--history circle {
  fill: var(--hw-surface);
  stroke: var(--hw-brand);
  stroke-width: 2.25;
}

.hw-chart__grid {
  stroke: var(--hw-line);
  stroke-dasharray: 3 5;
  stroke-width: 1;
}

.hw-chart__axis {
  fill: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 11px;
}

.hw-sales-list {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.hw-sales-list li {
  padding: 0.8rem 0;
  border-top: 1px dashed var(--hw-line);
}

.hw-sale__title {
  color: var(--hw-ink);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hw-sale__meta {
  margin-top: 0.2rem;
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   14. PC-Wert-Rechner (Stückliste + Beleg)
   -------------------------------------------------------------------------- */
.hw-rechner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .hw-rechner {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}

.hw-rechner > .hw-card {
  margin: 0;
}

.hw-rechner > noscript,
.hw-rechner > script {
  grid-column: 1 / -1;
}

.hw-rechner__parts {
  padding: 0;
  overflow: hidden;
}

.hw-rechner__head {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 6rem;
  gap: 1rem;
  margin: 0;
  padding: 0.85rem 1.25rem 0.6rem;
  color: var(--hw-muted);
}

.hw-rechner__head span:last-child {
  text-align: right;
}

.hw-rechner-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 6rem;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.8rem 1.25rem;
  border-top: 1px dashed var(--hw-line);
}

.hw-rechner-row label {
  margin: 0;
  color: var(--hw-ink);
  font-family: var(--hw-font);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.hw-rechner-row__price {
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.hw-rechner-group {
  min-width: 0;
  margin: 0;
  padding: clamp(0.8rem, 2vw, 1rem) 1.25rem;
  border: 1px solid var(--hw-line);
  border-width: 1px 0 0;
  border-style: dashed;
  border-radius: 0;
}

.hw-rechner-group legend {
  float: left;
  margin: 0;
  padding: 0;
  color: var(--hw-ink);
  font-size: 0.95rem;
  font-weight: 650;
}

.hw-rechner-group .hw-rechner-row__price {
  float: right;
}

.hw-rechner-checkboxes {
  display: grid;
  clear: both;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem 0 0;
}

.hw-rechner-group input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--hw-brand);
  cursor: pointer;
}

.hw-rechner-checkboxes label,
.hw-rechner-chip {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-ink-soft);
  cursor: pointer;
  font-family: var(--hw-font);
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.hw-rechner-checkboxes label:hover,
.hw-rechner-chip:hover {
  border-color: var(--hw-line-strong);
}

.hw-rechner-checkboxes label:focus-within,
.hw-rechner-chip:focus-within {
  outline: 2px solid var(--hw-focus);
  outline-offset: 1px;
}

.hw-rechner-checkboxes label:has(input:checked),
.hw-rechner-chip:has(input:checked) {
  border-color: var(--hw-brand);
  background: var(--hw-brand-tint);
  color: var(--hw-on-brand-tint);
}

.hw-rechner-chip__name {
  min-width: 0;
}

.hw-rechner-chip__price {
  margin-left: auto;
  padding-left: 0.5rem;
  font-family: var(--hw-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

.hw-rechner-empty {
  display: block;
  color: var(--hw-muted);
  font-size: 0.9rem;
}

.hw-rechner-summary {
  position: sticky;
  top: calc(var(--hw-nav-h) + 1rem);
  padding: 1.4rem;
}

.hw-rechner-summary h2 {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  color: var(--hw-muted);
}

.hw-rechner-summary h2 span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}

/* Sockelpruefung im Wert-Rechner: unvereinbare Auswahl wird ausdrücklich als
   Fehler gemeldet (Nutzerauftrag 25.09.2026). */
.hw-rechner-error {
  margin: 0.5rem 0 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--hw-bad);
  border-left-width: 0.35rem;
  border-radius: var(--hw-radius-sm);
  background: var(--hw-surface-muted);
  color: var(--hw-bad);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

.hw-rechner-error[hidden] {
  display: none;
}

#summe.is-error,
#summe-bar.is-error {
  color: var(--hw-bad);
}

/* Unvereinbare Auswahl: Hinweiszeile bleibt klein und umbruchfaehig, */
/* damit die grosse Summenzahl nie ueber die Karte hinauslaeuft. */
.hw-rechner-summary h2 span.hw-rechner-summary__hinweis {
  color: var(--hw-bad);
  font-family: var(--hw-font-body);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
}

.hw-rechner-summary h2 span.hw-rechner-summary__hinweis[hidden] {
  display: none;
}

.hw-rechner-summary__range {
  margin: 0 0 1rem;
  color: var(--hw-brand);
  font-size: 0.88rem;
}

.hw-rechner-summary__list {
  margin: 0 0 1rem;
  padding: 0.75rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--hw-line);
  font-size: 0.86rem;
}

/* Ohne gewählte Teile gibt es keine Posten (auch keine Pauschale mehr);
   sonst stünden zwei Trennlinien ohne Inhalt übereinander. */
.hw-rechner-summary__list:empty {
  display: none;
}

.hw-rechner-summary__list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.2rem 0;
}

.hw-rechner-summary__list li span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hw-rechner-summary__list li span:first-child::after {
  content: " ···························································";
  color: var(--hw-line-strong);
}

.hw-rechner-summary__list li span:last-child {
  flex: 0 0 auto;
  color: var(--hw-ink);
  font-weight: 650;
}

.hw-rechner-summary__flat span {
  color: var(--hw-muted) !important;
}

.hw-rechner-summary .hw-card__meta {
  margin: 0 0 1.1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--hw-line);
  font-size: 0.8rem;
}

.hw-rechner-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hw-rechner-summary__actions .hw-button {
  flex: 1 1 7rem;
  /* "Link kopieren" brach in der schmalen Summenkarte auf zwei Zeilen um;
     lieber rutscht der zweite Knopf in eine eigene Zeile. */
  white-space: nowrap;
}

.hw-rechner-loading #summe {
  animation: hwPulse 1.4s ease-in-out infinite;
}

.hw-rechner-bar {
  display: none;
}

/* --------------------------------------------------------------------------
   15. Konfigurationen
   -------------------------------------------------------------------------- */
.hw-configs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.35rem;
  margin-bottom: 1.75rem;
  padding: 0 4px 4px 0;
}

.hw-config {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Konfigurationen: Sprungleiste zur Stufe (wie Kategorie-Quicknav).
   scroll-margin, damit der Ankersprung die Karte nicht unter den klebenden
   Kopf schiebt. */
.hw-config { scroll-margin-top: 0.6rem; } /* Wurzel scroll-padding-top (76px) deckt den klebenden Kopf; nur dezenter Zwischenraum */
.hw-config-jump {
  min-height: 3.2rem;
  align-content: center;
}

/* Budget immer unter dem Titel: bei langen Stufennamen ("Gehobene
   Mittelklasse") rutschte es sonst in eine zweite Zeile, und die Bauteilzeilen
   nebeneinanderstehender Karten fluchteten nicht mehr. */
.hw-config__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem 0.5rem;
}

.hw-config__head h2 {
  margin: 0;
  font-size: 1.5rem;
}

.hw-config__budget {
  color: var(--hw-muted);
  font-family: var(--hw-mono);
  font-size: 0.78rem;
}

.hw-config__parts {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 1.25rem;
  list-style: none;
}

.hw-config__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.05rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px dashed var(--hw-line);
}

.hw-config__part {
  grid-column: 1 / -1;
  color: var(--hw-muted);
  font-size: 0.66rem;
}

.hw-config__val {
  min-width: 0;
  color: var(--hw-ink);
  font-size: 0.95rem;
  font-weight: 600;
}



.hw-config__price {
  color: var(--hw-ink);
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.hw-config__total {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 0.9rem 1.25rem 1rem;
  border-top: 1.5px solid var(--hw-line);
}

.hw-config__total > span:first-child {
  color: var(--hw-muted);
}

.hw-config__total strong {
  margin-left: auto;
  color: var(--hw-ink);
  font-family: var(--hw-font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.hw-config__total .hw-card__meta {
  flex-basis: 100%;
  font-size: 0.8rem;
  text-align: right;
}

/* Alternative Grafikkarten je Budgetstufe (hinten zugeklappt) */
.hw-config__alts {
  margin: 0;
  padding: 0.7rem 1.25rem;
  border-top: 1.5px solid var(--hw-line);
  font-size: 0.85rem;
}

.hw-config__alts summary {
  color: var(--hw-muted);
  cursor: pointer;
  font-weight: 600;
}

.hw-config__alts ul {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.hw-config__alt {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6rem;
  align-items: baseline;
}

.hw-config__alt-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hw-config__alt-note {
  color: var(--hw-muted);
  font-size: 0.8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hw-config__open {
  margin: 0 1.25rem 1.25rem;
}

/* --------------------------------------------------------------------------
   16. Lokale KI: Umschalter (wie "Tibo time | Local time")
   -------------------------------------------------------------------------- */
.hw-ki-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 0 1.35rem;
  overflow: hidden;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  box-shadow: var(--hw-kante-klein);
}

.hw-ki-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.35rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--hw-muted);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.hw-ki-toggle button + button {
  border-left: 1.5px solid var(--hw-line);
}

.hw-ki-toggle button[aria-pressed="true"] {
  color: var(--hw-ink);
}

.hw-ki-toggle button:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   17. Aufklappbereich "Quellen & Details"
   -------------------------------------------------------------------------- */
.hw-details {
  padding: 0;
  overflow: hidden;
}

.hw-card .hw-details {
  margin-top: 1.25rem;
  margin-bottom: 0;
  box-shadow: none;
}

.hw-details > summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.75rem 1.2rem;
  color: var(--hw-ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.hw-details > summary::-webkit-details-marker {
  display: none;
}

.hw-details > summary::after {
  color: var(--hw-muted);
  content: "+";
  font-family: var(--hw-mono);
  font-size: 1.1rem;
}

.hw-details[open] > summary::after {
  content: "−";
}

.hw-details > summary:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: -3px;
}

.hw-details[open] > summary {
  border-bottom: 1px dashed var(--hw-line);
}

.hw-details > p {
  margin: 0;
  padding: 0.85rem 1.2rem 0;
}

.hw-details > p:last-child {
  padding-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   18. Live-Dashboard
   -------------------------------------------------------------------------- */
.hw-dashboard h2 {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.hw-dashboard > .hw-card__meta {
  margin: 0.25rem 0 1rem;
  font-size: 0.85rem;
}

.hw-dashboard-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0.75rem 0;
}

.hw-dashboard-controls > div {
  min-width: 0;
}

.hw-dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  border: 1.5px dashed var(--hw-line);
  border-radius: var(--hw-radius-sm);
  color: var(--hw-muted);
  font-size: 0.88rem;
}

.hw-dashboard-summary strong {
  color: var(--hw-ink);
}

.hw-dashboard-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-sm);
  -webkit-overflow-scrolling: touch;
}

.hw-dashboard-table th {
  padding: 0.35rem 0.5rem;
  vertical-align: middle;
}

.hw-dashboard-table td[data-label="Produkt"] a {
  color: var(--hw-ink);
  font-weight: 650;
}

.hw-sort-button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}

.hw-sort-button::after {
  content: "↕";
  opacity: 0.5;
}

.hw-sort-button:hover {
  background: var(--hw-surface-high);
  color: var(--hw-ink);
}

.hw-num .hw-sort-button {
  flex-direction: row-reverse;
}

.hw-sort-button:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 0;
}

th[aria-sort="ascending"] .hw-sort-button,
th[aria-sort="descending"] .hw-sort-button {
  color: var(--hw-ink);
}

th[aria-sort="ascending"] .hw-sort-button::after {
  content: "↑";
  opacity: 1;
}

th[aria-sort="descending"] .hw-sort-button::after {
  content: "↓";
  opacity: 1;
}

.hw-dashboard-title {
  min-width: 0;
  max-width: none;
}

.hw-dashboard-title__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

/* Im Desktop-Raster genau eine Zeile: unterschiedlich hohe Zeilen würden die
   Höhenrechnung der bildschirmfüllenden Ansicht verfälschen. */
@media (min-width: 48rem) {
  .hw-dashboard-title__text {
    -webkit-line-clamp: 1;
  }
}

.hw-dashboard-sort {
  display: none;
}

/* Sortierauswahl fuer Tabellen mit Spaltenknoepfen: nur in der Kartenansicht
   am Handy sichtbar, dort ist der Tabellenkopf ausgeblendet (hwindex.js). */
.hw-sort-picker {
  display: none;
}

@media (max-width: 47.99rem) {
  .hw-sort-picker {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 1rem;
  }

  .hw-sort-picker label {
    color: var(--hw-muted);
    font-family: var(--hw-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

.hw-dashboard-more {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* Bildschirmfüllende Ansicht (Nutzerauftrag 25.09.2026): Das Live-Dashboard
   passt vollständig ohne Scrollen in das Fenster. Der Seitenrahmen wird zur
   Spalte, die Tabelle bekommt den Rest der Höhe; die Zeilenzahl bestimmt
   hwindex-gebundenes JavaScript (pp_portal._DASHBOARD_JS, platzZeilen()). */


/* Feste Spaltenbreiten: die Tabelle bleibt innerhalb ihres Rahmens, damit der
   eBay-Verweis ohne waagerechtes Scrollen erreichbar ist. Die Zustandsspalte
   ist entfallen. Nur ab Tabletbreite: in der Kartenansicht am Handy schlugen
   die nth-child-Breiten das width:auto und kappten Kategorie und Produkt auf
   zwei, drei Buchstaben ("C", "Mai", "DDF"). */
@media (min-width: 48rem) {
  .hw-dashboard-table {
    table-layout: fixed;
  }

  .hw-dashboard-table th,
  .hw-dashboard-table td {
    padding: 0.3rem 0.5rem;
  }

  .hw-dashboard-table th:nth-child(1),
  .hw-dashboard-table td:nth-child(1) { width: 5.6rem; }

  .hw-dashboard-table th:nth-child(2),
  .hw-dashboard-table td:nth-child(2) { width: 7.4rem; }

  .hw-dashboard-table th:nth-child(3),
  .hw-dashboard-table td:nth-child(3) { width: 8.6rem; }

  .hw-dashboard-table th:nth-child(5),
  .hw-dashboard-table td:nth-child(5) { width: 6.2rem; }

  .hw-dashboard-table th:nth-child(6),
  .hw-dashboard-table td:nth-child(6) { width: 6.6rem; }

  .hw-dashboard-table td[data-label="Kategorie"],
  .hw-dashboard-table td[data-label="Produkt"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Einzeiliger Fuß für die bildschirmfüllende Ansicht. */


/* --------------------------------------------------------------------------
   19. Dialog "Letzte Verkäufe"
   -------------------------------------------------------------------------- */
.hw-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  place-items: center;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hw-ink-soft);
}

.hw-modal[hidden],
dialog.hw-modal:not([open]) {
  display: none !important;
}

.hw-modal::backdrop {
  background: rgb(14 19 26 / 0.45);
}

.hw-modal__backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: default;
}

.hw-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  max-height: min(88vh, 48rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  box-shadow: 6px 6px 0 var(--hw-edge);
  animation: hwPop 180ms var(--hw-ease);
}

.hw-modal__panel h2 {
  margin-bottom: 0.2rem;
  padding-right: 3rem;
}

.hw-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1.5px solid var(--hw-line);
  border-radius: 50%;
  background: var(--hw-surface);
  color: var(--hw-muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: var(--hw-kante-klein);
}

.hw-modal__close:hover {
  color: var(--hw-ink);
}

.hw-modal__close:focus-visible {
  outline: 2px solid var(--hw-focus);
  outline-offset: 2px;
}

.hw-modal__foot {
  margin: 1.25rem 0 0;
}

body.hw-modal-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   20. Merkliste
   -------------------------------------------------------------------------- */
.hw-watch {
  scroll-margin-top: calc(var(--hw-nav-h) + 1rem);
}

.hw-watch__body {
  min-height: 3rem;
}

.hw-watch__table td:last-child {
  width: 1%;
  text-align: right;
}

.hw-watch__remove {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
}

.hw-watch__remove:hover {
  color: var(--hw-bad);
}

.hw-watch__empty {
  padding: 1.25rem;
  border: 1.5px dashed var(--hw-line-strong);
  border-radius: var(--hw-radius);
  color: var(--hw-muted);
}

/* --------------------------------------------------------------------------
   21. Blog (wie die Ankündigungen des Vorbilds)
   -------------------------------------------------------------------------- */
.hw-blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  margin-top: 1.25rem;
}

.hw-blog-card {
  display: flex;
  flex-direction: column;
}

.hw-blog-card .hw-card__meta {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 0.5rem;
  padding: 0.1rem 0.7rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  color: var(--hw-ink);
  font-family: var(--hw-mono);
  font-size: 0.75rem;
}

.hw-blog-card h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
}

.hw-blog-card h2 a {
  display: inline-block;
  color: var(--hw-head);
  text-decoration: none;
}

.hw-blog-card h2 a:hover {
  color: var(--hw-brand);
}

.hw-blog-card p:not(.hw-card__meta) {
  color: var(--hw-muted);
  font-size: 1.02rem;
}

/* "Weitere Beiträge" unter einem Beitrag: kleinere Karten, am Rechner
   nebeneinander. */
.hw-blog-card h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
}

.hw-blog-card h3 a {
  display: inline-block;
  color: var(--hw-head);
  text-decoration: none;
}

.hw-blog-card h3 a:hover {
  color: var(--hw-brand);
}

.hw-blog-list--weitere {
  margin-top: 0;
}

@media (min-width: 48rem) {
  .hw-blog-list--weitere {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hw-blog-card > .hw-sale__link:last-child {
  align-self: flex-start;
  font-family: var(--hw-mono);
  font-size: 0.8rem;
}

/* Der Beitrag nutzt die Standardbreite der Seite (.hw-wrap) wie jede andere
   Karte auch; die frühere Lesebreite von 44rem war am Rechner deutlich
   schmaler als Konfigurationen, Effizienz und Co. */
.hw-blog-post {
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.hw-blog-post > .hw-card__meta:first-child {
  font-family: var(--hw-mono);
  font-size: 0.8rem;
}

/* Die Karte bleibt so breit wie alle anderen; nur der Text bekommt eine
   Lesebreite. Am Rechner liefen die Zeilen sonst über 110 Zeichen. */
.hw-blog-body {
  max-width: var(--hw-text-width);
  color: var(--hw-ink-soft);
  font-size: 1.06rem;
  line-height: 1.75;
}

.hw-blog-body h2 {
  margin: 2rem 0 0.7rem;
}

.hw-blog-body h3 {
  margin: 1.5rem 0 0.5rem;
}

.hw-blog-body ul,
.hw-blog-body ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}

.hw-blog-body li {
  margin-bottom: 0.35rem;
}

.hw-blog-body li::marker {
  color: var(--hw-brand);
}

.hw-blog-body code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--hw-surface-high);
  color: var(--hw-ink);
  font-family: var(--hw-mono);
  font-size: 0.88em;
}

.hw-blog-body pre {
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border-radius: var(--hw-radius-sm);
  background: var(--hw-surface-high);
}

.hw-blog-body pre code {
  padding: 0;
  background: none;
}

.hw-blog-body img {
  display: block;
  height: auto;
  margin: 1.25rem 0;
  border-radius: var(--hw-radius-sm);
}

.hw-blog-body blockquote {
  margin: 1.4rem 0;
  padding: 0.8rem 1.2rem;
  border-left: 3px solid var(--hw-underline);
  color: var(--hw-ink);
}

.hw-blog-meta {
  color: var(--hw-muted);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   22. Rechtstexte
   -------------------------------------------------------------------------- */
.hw-legal {
  max-width: var(--hw-text-width);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  line-height: 1.7;
}

/* Methodik: dieselbe Kartenform wie die Rechtstexte und dieselbe Breite. */
.hw-methodik .hw-methodik-details {
  margin: 1.25rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px dashed var(--hw-line);
}

.hw-methodik .hw-methodik-summary {
  margin: 0 0 0.4rem;
  color: var(--hw-ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.hw-methodik .hw-methodik-summary::-webkit-details-marker {
  display: none;
}

.hw-methodik-details[open] .hw-methodik-summary::after,
.hw-methodik .hw-methodik-summary::after {
  color: var(--hw-muted);
  content: "+";
  font-family: var(--hw-mono);
  margin-left: 0.5rem;
}

.hw-methodik-details[open] .hw-methodik-summary::after {
  content: "−";
}

.hw-methodik__note {
  margin: 0 0 0.6rem;
  color: var(--hw-ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.hw-methodik-detail {
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px dashed var(--hw-line);
}

.hw-methodik-detail summary {
  margin: 0 0 0.5rem;
  color: var(--hw-ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

/* Vorher standen die Abschnitte als nackte .hw-section ohne Karte und wirkten
   im Chromium-Check neben den anderen Seiten wie eine vergessene Seite. */
.hw-methodik {
  max-width: var(--hw-text-width);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1.5px solid var(--hw-line);
  line-height: 1.7;
}

.hw-stats-optout {
  margin: 0.5rem 0 1.25rem;
  padding: 0.8rem 1rem;
  border: 1.5px dashed var(--hw-line);
  border-radius: var(--hw-radius-sm);
}

.hw-stats-optout label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
  color: var(--hw-ink);
  font-family: var(--hw-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.hw-stats-optout input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--hw-brand);
}

.hw-stats-optout__state {
  margin: 0.4rem 0 0 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hw-muted);
  font-size: 0.9rem;
}

.hw-legal h2 {
  margin: 2rem 0 0.6rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
}

.hw-legal h2:first-child {
  margin-top: 0;
}

.hw-legal h3 {
  margin: 1.4rem 0 0.4rem;
  font-size: 1.1rem;
}

.hw-legal ol,
.hw-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.hw-legal li {
  margin-bottom: 0.4rem;
}

.hw-legal a {
  overflow-wrap: anywhere;
}

.hw-legal dl {
  display: grid;
  gap: 0.3rem 1.2rem;
  grid-template-columns: max-content minmax(0, 1fr);
}

.hw-legal dt {
  color: var(--hw-ink);
  font-weight: 650;
}

.hw-legal dd {
  margin: 0;
}

.hw-legal .hw-card__meta {
  margin-top: 1.5rem;
  padding: 0.85rem 1.1rem;
  border: 1.5px dashed var(--hw-line);
  border-radius: var(--hw-radius-sm);
}

/* --------------------------------------------------------------------------
   23. Fuß: schlichte Textzeilen
   -------------------------------------------------------------------------- */
.hw-footer,
body > footer,
footer {
  margin-top: auto;
  padding: 0 0 calc(2.5rem + env(safe-area-inset-bottom));
  background: var(--hw-bg);
  color: var(--hw-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.hw-footer__inner {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.75rem;
  border-top: 1.5px solid var(--hw-line);
}

.hw-footer__brand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-start;
}

.hw-footer__logo {
  width: 2rem;
  height: auto;
  flex: 0 0 auto;
  padding: 0.15rem;
  border-radius: 50%;
  background: #ffffff;
}

.hw-footer__meta {
  margin: 0;
}

.hw-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.hw-footer__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: center;
}

.hw-footer__label {
  color: var(--hw-muted);
}

.hw-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--hw-ink-soft);
  font-weight: 600;
}

.hw-theme-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hw-theme-switch legend {
  float: left;
  margin: 0 0.4rem 0 0;
}

.hw-theme-switch__opt {
  position: relative;
  display: inline-flex;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.hw-theme-switch[hidden] {
  display: none;
}

.hw-theme-switch__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hw-theme-switch__opt span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: normal;
  text-align: center;
  min-height: 2.1rem;
  padding: 0.2rem 0.85rem;
  border: 1.5px solid var(--hw-line);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-surface);
  color: var(--hw-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.hw-theme-switch__opt input:checked + span {
  border-color: var(--hw-edge);
  color: var(--hw-ink);
  box-shadow: var(--hw-kante-klein);
}

.hw-theme-switch input:focus-visible + span {
  outline: 2px solid var(--hw-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   24. Bewegung
   -------------------------------------------------------------------------- */
@keyframes hwPop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hwBump {
  40% {
    transform: scale(1.3) rotate(-8deg);
  }
}

@keyframes hwPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* --------------------------------------------------------------------------
   25. Responsiv
   -------------------------------------------------------------------------- */
/* Tippziele auf Touchgeräten: 44 px (WCAG 2.5.5). */
@media (any-pointer: coarse) {
  .hw-rechner-checkboxes label,
  .hw-rechner-chip,
  .hw-nav__link,
  .hw-sale__link,
  .hw-footer__link,
  .hw-sales-btn,
  .hw-star,
  .hw-sort-button {
    min-height: 44px;
  }

  .hw-star {
    min-width: 44px;
  }
}

@media (max-width: 55.99rem) {
  .hw-rechner-summary {
    position: static;
  }

    /* Die fixierte Ergebnisleiste unten deckt sonst den letzten Listen-Eintrag
     ab; der Container bekommt Platz dafür. */
  .hw-rechner {
    padding-bottom: 4.5rem;
  }

.hw-rechner-bar {
    position: fixed;
    z-index: 30;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.65rem 1.1rem;
    border: 1.5px solid var(--hw-edge);
    border-radius: var(--hw-radius-pill);
    background: var(--hw-surface);
    color: var(--hw-muted);
    font-size: 0.85rem;
    box-shadow: var(--hw-kante);
    opacity: 0;
    pointer-events: none;
    transform: translateY(160%);
    transition: transform 200ms var(--hw-ease), opacity 200ms var(--hw-ease);
  }

  .hw-rechner-bar.is-visible {
    opacity: 1;
    transform: none;
  }

  .hw-rechner-bar strong {
    font-family: var(--hw-font-head);
    font-size: 1.3rem;
    font-weight: 800;
  }
}

@media (max-width: 52rem) {
  .hw-topbar {
    flex-wrap: wrap;
    gap: 0.9rem 0.6rem;
  }

  .hw-search {
    flex: 1 1 100%;
    order: 3;
  }

  .hw-search__results {
    right: auto;
    left: 0;
    width: 100%;
  }

  .hw-dealcheck__grid,
  .hw-quote {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.99rem) {
  .hw-dashboard-sort {
    display: block;
  }

  .hw-dashboard-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  /* Sieben Spalten sind auf 360 px nicht lesbar: jede Zeile wird eine
     Karte, jedes Feld trägt seine Beschriftung aus data-label. */
  .hw-dashboard-table {
    display: block;
    width: 100%;
  }

  .hw-dashboard-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hw-dashboard-table tbody,
  .hw-dashboard-table tr,
  .hw-dashboard-table td {
    display: block;
    width: auto;
  }

  .hw-dashboard-table tr {
    margin: 0 0 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1.5px solid var(--hw-line);
    border-radius: var(--hw-radius-sm);
    background: var(--hw-surface);
  }

  .hw-dashboard-table td {
    display: grid;
    /* Lange Beschriftungen ("Preis inkl. Versand" 140 px) brauchen mehr als
       6,5 rem, sonst ragen sie in die Wertspalte (gemessen 26.09.2026). Die
       Prozentangabe deckelt die Spalte auf breiten Fenstern. */
    grid-template-columns: minmax(6.5rem, 55%) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.2rem 0;
    border: 0;
    text-align: left;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
  }

  .hw-dashboard-table td[colspan] {
    display: block;
  }

  /* Preis in der Karte links wie alle anderen Felder (die Zahlenregel der
     Tabelle schob sonst die Beschriftung nach rechts). */
  .hw-dashboard-table td.hw-num {
    text-align: left;
  }

  /* Eine zu lange Beschriftung darf die Wertspalte nicht ueberdecken: sie
     bricht notfalls innerhalb des Wortes um, statt ueber den Wert zu laufen.
     Anlass (26.09.2026): "Erscheinungsjahr" (118 px) ragte bei 360 px Fenster
     um 13 px in den Wert ("12 GB") — die Spalte war 97,6 px breit. */
  .hw-dashboard-table td::before {
    content: attr(data-label);
    color: var(--hw-muted);
    font-family: var(--hw-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hw-dashboard-table td[colspan]::before {
    content: none;
  }

  .hw-dashboard-title {
    min-width: 0;
    max-width: none;
  }

  /* Übrige Datentabellen werden ebenfalls zur Kartenliste. */
  .hw-table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .hw-table:not(.hw-dashboard-table) {
    display: block;
    width: 100%;
    white-space: normal;
  }

  .hw-table:not(.hw-dashboard-table) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hw-table:not(.hw-dashboard-table) tbody,
  .hw-table:not(.hw-dashboard-table) tr,
  .hw-table:not(.hw-dashboard-table) td {
    display: block;
    width: auto;
  }

  .hw-table:not(.hw-dashboard-table) tr {
    margin: 0 0 0.9rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--hw-line);
    border-radius: var(--hw-radius-sm);
    background: var(--hw-surface);
    box-shadow: var(--hw-kante-klein);
  }

  .hw-table:not(.hw-dashboard-table) td,
  .hw-table:not(.hw-dashboard-table) td.hw-num {
    display: grid;
    gap: 0.5rem;
    /* Obergrenze 30 % statt fester 8 rem: sonst ragten lange Beschriftungen
       ("Preis inkl. Versand" 140 px) in die Wertspalte (gemessen 26.09.2026). */
    grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
    align-items: baseline;
    padding: 0.2rem 0;
    border: 0;
    text-align: left;
    font-size: 0.88rem;
    white-space: normal;
    /* Verkaufstitel enthalten oft lange Zeichenketten ohne Leerzeichen
       ("RTX3070-8GB-GDDR6-..."): ohne Umbruch im Wort schob eine solche
       Zeile die Produktseite bei 360 px um 9 px seitlich auf. */
    overflow-wrap: anywhere;
  }

  /* Siehe Dashboard-Tabelle: Beschriftung bricht notfalls im Wort um. */
  .hw-table:not(.hw-dashboard-table) td::before {
    content: attr(data-label);
    color: var(--hw-muted);
    font-family: var(--hw-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hw-table:not(.hw-dashboard-table) td:empty {
    display: none;
  }

  /* Links in den Karten dürfen umbrechen ("NVIDIA RTX 2070 SUPER" schob die
     Seite bei 320 px sonst um 40 px auf). */
  .hw-table:not(.hw-dashboard-table) td :where(.hw-sale__link) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hw-table:not(.hw-dashboard-table) td:first-child {
    display: block;
    margin-bottom: 0.35rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed var(--hw-line);
    font-size: 1rem;
  }

  .hw-table:not(.hw-dashboard-table) td:first-child::before,
  .hw-table:not(.hw-dashboard-table) td[colspan]::before {
    display: none;
  }

  .hw-table:not(.hw-dashboard-table) td[colspan] {
    display: block;
  }

  .hw-table tbody tr:hover {
    background: var(--hw-surface);
  }

  .hw-rechner__head {
    display: none;
  }

  .hw-rechner-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 1rem;
  }

  .hw-rechner-row select {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hw-rechner-row .hw-rechner-row__price {
    grid-column: 2;
    grid-row: 1;
  }

  .hw-chart--history svg {
    min-height: 0;
  }

  /* Das Verlaufsdiagramm schrumpft am Handy auf gut die Hälfte:
     Achsenschrift und Linie in SVG-Einheiten anheben. */
  .hw-chart__axis {
    font-size: 22px;
  }

  .hw-chart__line {
    stroke-width: 4.5;
  }

  .hw-chart--history circle {
    r: 7px;
    stroke-width: 3.5;
  }
}

@media (max-width: 43.99rem) {
  .hw-hero__subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .hw-stat__sep {
    display: none;
  }

  .hw-brand__tag {
    display: none;
  }

  .hw-rechner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  /* Sehr schmale Handys: die Beschriftungsspalte darf wachsen (bis 55 %), damit
     lange Beschriftungen wie "Erscheinungsjahr" einzeilig bleiben. Vorher stand
     hier 38 % — bei 360 px Fensterbreite (Spalte 97,6 px) ragte die Beschriftung
     um 13 px in den Wert (gemessen 26.09.2026). */
  .hw-table:not(.hw-dashboard-table) td,
  .hw-table:not(.hw-dashboard-table) td.hw-num {
    grid-template-columns: minmax(5.5rem, 55%) minmax(0, 1fr);
  }

  .hw-quicknav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: wrap;
    gap: 0.8rem;
    overflow: visible;
  }

  .hw-quicknav__btn {
    grid-template-columns: minmax(0, 1fr);
    min-height: 2.75rem;
    padding: 0.75rem 0.85rem;
  }

  .hw-quicknav__trend {
    grid-column: 1;
    justify-self: start;
  }

  .hw-quicknav__legend {
    display: none;
  }

  /* Umbruch statt fester Breite: bei 320 px zog die Leiste die Seite sonst
     um 16 px auseinander. */
  .hw-ki-toggle {
    display: flex;
    flex-wrap: wrap;
  }

  .hw-ki-toggle button {
    flex: 1 1 auto;
  }
}

/* Tippziele am Handy: 44 px Mindesthöhe. */
@media (max-width: 640px) {
  .hw-quicknav__btn,
  .hw-ki-toggle button,
  .hw-details > summary,
  .hw-sales-btn,
  .hw-sale__link,
  .hw-sort-button,
  .hw-brand,
  .hw-footer__link,
  .hw-nav__link {
    min-height: 2.9rem;
  }

  .hw-star {
    width: 2.9rem;
    height: 2.9rem;
  }
}

/* --------------------------------------------------------------------------
   26. Bewegung reduzieren, Kontrast, Zwangsfarben, Druck
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hw-line: var(--hw-ink);
    --hw-line-strong: var(--hw-ink);
    --hw-muted: var(--hw-ink-soft);
    --hw-head: var(--hw-ink);
  }
}

@media (forced-colors: active) {
  .hw-card__price,
  .hw-stat__value,
  .hw-rechner-summary h2 span {
    color: CanvasText;
  }

  .hw-rechner-checkboxes label:has(input:checked),
  .hw-rechner-chip:has(input:checked) {
    border-color: Highlight;
    outline: 2px solid Highlight;
  }

  .hw-dist__box,
  .hw-dist__median {
    background: Highlight;
  }

  .hw-card,
  .hw-stat,
  .hw-badge,
  .hw-star,
  .hw-quicknav__btn,
  .hw-nav__link {
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   FAQ, Suchseite und verlinkte Kennzeile (27.09.2026)
   Die Fragen und Antworten sind eigene zitierfaehige Bloecke; die Suchseite
   ist das adressierbare Ziel der SearchAction-Auszeichnung.
   -------------------------------------------------------------------------- */
.hw-hero__eyebrow-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hw-hero__eyebrow-link:hover,
.hw-hero__eyebrow-link:focus-visible {
  color: var(--hw-brand);
}

.hw-faq {
  scroll-margin-top: 5rem;
}

.hw-faq__liste {
  display: grid;
  gap: 0.25rem;
  max-width: 64ch;
}

.hw-faq__frage {
  margin: 1.1rem 0 0.3rem;
  font-size: 1.03rem;
}

.hw-faq__antwort {
  margin: 0 0 0.4rem;
  color: var(--hw-ink-soft);
  line-height: 1.62;
}

.hw-suche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin-bottom: 0.9rem;
}

.hw-suche label {
  flex: 1 1 100%;
  color: var(--hw-muted);
  font-size: 0.9rem;
}

.hw-suche input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  color: var(--hw-ink);
  font: inherit;
  background: var(--hw-surface-solid);
  border: 1px solid var(--hw-line-strong);
  border-radius: 0.6rem;
}

.hw-suche__liste {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-suche__liste li {
  padding: 0.55rem 0.7rem;
  background: var(--hw-surface);
  border: 1px solid var(--hw-line);
  border-radius: 0.55rem;
}
.hw-kat__liste {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-kat__karte {
  padding: 0.85rem 0.95rem;
  background: var(--hw-surface);
  border: 1px solid var(--hw-line);
  border-radius: 0.7rem;
}

.hw-kat__karte .hw-card__meta {
  margin: 0.35rem 0 0;
}

.hw-kat__link {
  font-weight: 600;
  text-decoration: none;
}

.hw-kat__link:hover,
.hw-kat__link:focus-visible {
  text-decoration: underline;
}


@media print {
  .hw-sort-picker { display: none !important; }

  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hw-skip,
  .hw-modal,
  .hw-button,
  .hw-sales-btn,
  .hw-star,
  .hw-search,
  .hw-actions,
  .hw-nav,
  .hw-quicknav,
  .hw-ki-toggle,
  .hw-rechner-bar,
  .hw-theme-switch,
  .hw-tabletools,
  .hw-dealcheck__form {
    display: none !important;
  }

  .hw-card,
  .hw-stat,
  .hw-table-scroll,
  .hw-chart--history,
  .hw-movers__col {
    break-inside: avoid;
    box-shadow: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: #444;
    font-size: 0.8em;
  }
}