/* PrintDeal — seitenspezifisches Layout: Liste, Detail, Vergleich,
   Filament-Infos, Material-Detail, Material-Navigator. */

/* ---------- Seiten-Grundbausteine ---------- */

/* Einleitungsabsatz unter einer Seitenüberschrift. */
.seiten-einleitung {
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
  margin-top: var(--abstand-s);
}

/* ---------- Startseite: Filamentliste ---------- */

/* Suchfeld, Sortierung und Trefferzahl in EINER Zeile über der Liste.
   Das Suchfeld nimmt den freien Platz, alles Weitere steht rechts. */
.listen-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-l);
}

.suchfeld {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  background: var(--surface-container-high);
  border-radius: var(--radius-pille);
  padding: 0 var(--abstand-l);
  /* Wächst in den freien Platz, schrumpft aber nicht unter 220px. */
  flex: 1 1 220px;
  min-width: 0;
}

/* Trefferzahl rechts neben der Sortierung, nicht als eigene Zeile darunter. */
.listen-treffer {
  margin-left: auto;
  font-size: var(--body-small);
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.listen-treffer:empty { display: none; }
.suchfeld svg { width: 20px; height: 20px; color: var(--on-surface-variant); flex: 0 0 auto; }
.suchfeld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--abstand-m) 0;
  outline: none;
  font-size: var(--body-large);
}
.suchfeld input::placeholder { color: var(--on-surface-variant); }

.filter-zeile { display: flex; gap: var(--abstand-s); flex: 0 0 auto; }

/* Filterformular-Bausteine (identisch in Bottom-Sheet und Desktop-Sidebar). */
.filter-suchfeld {
  width: 100%;
  margin-top: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
  background: var(--surface-container-lowest);
  color: inherit;
}
.filter-suchtreffer { margin-top: var(--abstand-s); }

.temperatur-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.temperatur-kopf h3 { margin: 0; }
.temperatur-wert { font-size: var(--body-medium); color: var(--on-surface-variant); }
.temperatur-wert--aktiv { color: var(--primary); }
.temperatur-aufheben { align-self: flex-end; }

/* Sortier-Sheet: eigene Radiooptionen (auch der deaktivierte Platzhalter). */
.sortier-option {
  display: flex;
  gap: var(--abstand-s);
  align-items: center;
  width: 100%;
  padding: var(--abstand-s) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--body-large);
}
.sortier-radio {
  width: 20px; height: 20px;
  border: 2px solid var(--outline);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sortier-option[aria-checked="true"] .sortier-radio { border-color: var(--primary); }
.sortier-radio::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 120ms ease;
}
.sortier-option[aria-checked="true"] .sortier-radio::after { transform: scale(1); }
.sortier-option--platzhalter { opacity: 0.38; cursor: default; }
.sortier-option--platzhalter .sortier-radio { border-color: currentColor; }
.sortier-option--platzhalter small { color: var(--on-surface-variant); }

/* Desktop: dauerhafte Filterleiste links neben der Liste. */
.liste-layout { display: block; }
.filter-sidebar { display: none; }

@media (min-width: 1024px) {
  .liste-layout {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: sonst kann die Liste die Spalte über die
       Fensterbreite hinaus aufdrücken (Grid-Mindestbreite = auto). */
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--abstand-l);
    align-items: start;
  }
  .filter-sidebar {
    display: block;
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
    padding: var(--abstand-l);
    /* KEIN max-height und KEIN overflow: die Seite scrollt als Ganzes,
       nicht die Leiste in sich. Verschachteltes Scrollen war das
       App-Muster, das hier entfällt. */
  }
  /* Der Filter-Button der mobilen Ansicht entfällt am Desktop. */
  .filter-zeile .nur-mobil { display: none; }
}

/* Mitlaufen statt Kleben, wenn das Fenster niedriger ist als die Leiste:
   CSS kann die eigene Höhe eines Elements nicht abfragen, deshalb die
   Fensterhöhe als Näherung. Unter dieser Schwelle scrollt die Leiste
   einfach mit dem Seiteninhalt — und ihr unteres Ende bleibt erreichbar. */
@media (min-width: 1024px) and (min-height: 900px) {
  .filter-sidebar {
    position: sticky;
    top: 72px; /* Höhe der einzeiligen Kopfzeile plus Abstand */
  }
}

/* Einblendanimation der Kacheln nach Filterwechsel. */
.kachel-liste--frisch .filament-kachel { animation: seite-einblenden 250ms ease-out; }

/* ---------- Detailseite eines Angebots (Preisvergleich-Layout) ---------- */

.detail { max-width: 1120px; margin: 0 auto; }
.detail-hinweis { padding: var(--abstand-l) 0; color: var(--on-surface-variant); }

/* Von der Material-Detailseite mitbenutzt — bewusst erhalten. */
.detail-zurueckzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--abstand-s);
}

/* Karten: dünne Umrandung, abgerundet, ruhige Fläche, kein Schatten. */
.detail-karte {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  background: var(--surface-container-lowest);
  padding: var(--abstand-l);
}
.detail-temp > h2,
.detail-datenkarte > h2,
.detail-weitere > h2 {
  font-size: var(--title-medium);
  font-weight: 500;
  margin-bottom: var(--abstand-m);
}

/* Layout: mobil einspaltig in DOM-Reihenfolge (Bild, Kopf, Kaufbox, Temperatur,
   Produktdaten, weitere Shops → Preis oben). Ab Tablet/Desktop per Grid-Areas. */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-l);
  align-items: start;
}
.detail-medien { grid-area: bild; align-self: start; }
.detail-kopf { grid-area: kopf; }
.detail-kaufbox { grid-area: kauf; }
.detail-temp { grid-area: temp; }
.detail-datenkarte { grid-area: daten; }
.detail-weitere { grid-area: weitere; }

@media (min-width: 640px) {
  .detail-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "bild kopf"
      "bild temp"
      "bild daten"
      "kauf kauf";
  }
  .detail-layout--mit-weitere {
    grid-template-areas:
      "bild kopf"
      "bild temp"
      "bild daten"
      "kauf kauf"
      "weitere weitere";
  }
}

@media (min-width: 1024px) {
  .detail-layout {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    grid-template-areas:
      "bild kopf   kauf"
      "bild temp   kauf"
      "bild daten  kauf";
  }
  .detail-layout--mit-weitere {
    grid-template-areas:
      "bild kopf   kauf"
      "bild temp   kauf"
      "bild daten  kauf"
      ".    .      weitere";
  }
  .detail-kaufbox { position: sticky; top: 72px; }
}

/* Spalte 1 – Produktbild */
.detail-bildkarte {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--surface-container-low);
}
.detail-bildkarte img { width: 100%; height: 100%; object-fit: cover; }
.detail-farbchip {
  display: inline-flex;
  align-items: center;
  margin-top: var(--abstand-s);
  padding: var(--abstand-xs) var(--abstand-m);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-pille);
  font-size: var(--label-medium);
  color: var(--on-surface-variant);
}

/* Spalte 2 – Kopfkarte */
.detail-hersteller { font-size: var(--label-large); color: var(--on-surface-variant); }
.detail-name { font-size: var(--headline-medium); font-weight: 400; margin-top: var(--abstand-xs); }
.detail-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-s); margin-top: var(--abstand-m); }
.chip-info {
  display: inline-flex;
  align-items: center;
  padding: var(--abstand-xs) var(--abstand-m);
  border-radius: var(--radius-s);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: var(--label-large);
}
.chip-warn {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: var(--abstand-xs) var(--abstand-m);
  border-radius: var(--radius-s);
  border: 1px solid currentColor;
  font-size: var(--label-large);
  font-weight: 500;
}
.chip-warn svg { width: 16px; height: 16px; flex-shrink: 0; }
.chip-warn--erhoeht { color: var(--warnung-erhoeht); }
.chip-warn--hardware { color: var(--error); }

.detail-gefahr {
  margin-top: var(--abstand-m);
  border: 1px solid var(--error);
  border-radius: var(--radius-s);
  padding: var(--abstand-m);
  font-size: var(--body-medium);
}
.detail-gefahr strong { color: var(--error); }

/* Spalte 2 – Temperaturfenster (gemeinsame Skala 0–300 °C) */
.temp-skala { display: flex; flex-direction: column; gap: var(--abstand-m); }
.temp-zeile { display: flex; flex-direction: column; gap: var(--abstand-xs); }
.temp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-s); }
.temp-label { font-size: var(--label-large); font-weight: 500; }
.temp-bereich { font-size: var(--body-medium); color: var(--on-surface-variant); text-align: right; }
.temp-richtwert { font-style: italic; }
.temp-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pille);
  background: var(--surface-container-high);
}
.temp-fuellung {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: var(--radius-pille);
  background: var(--primary);
}
.temp-fuellung--richtwert { background: var(--outline); }
.temp-achse {
  display: flex;
  justify-content: space-between;
  margin-top: var(--abstand-s);
  font-size: var(--label-small);
  color: var(--on-surface-variant);
}

/* Spalte 2 – Produktdaten */
.detail-datenliste { margin: 0; }
.detail-datenzeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-s) 0;
  border-top: 1px solid var(--outline-variant);
  font-size: var(--body-medium);
}
.detail-datenzeile:first-child { border-top: 0; }
.detail-datenzeile dt { color: var(--on-surface-variant); }
.detail-datenzeile dd { margin: 0; text-align: right; }

/* Spalte 3 – Kaufbox */
.kaufbox-titel { font-size: var(--label-large); font-weight: 500; color: var(--on-surface-variant); }
.kaufbox-preis {
  font-size: var(--display-medium);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  margin-top: var(--abstand-xs);
  white-space: nowrap;
}
.kaufbox-preis-einheit { font-size: var(--body-medium); color: var(--on-surface-variant); }
.kaufbox-trenner { border: 0; border-top: 1px solid var(--outline-variant); margin: var(--abstand-m) 0; }
.kaufbox-liste { margin: 0; }
.kaufbox-zeile { display: flex; justify-content: space-between; gap: var(--abstand-s); padding: var(--abstand-xs) 0; font-size: var(--body-medium); }
.kaufbox-zeile dt { color: var(--on-surface-variant); }
.kaufbox-zeile dd { margin: 0; text-align: right; }
.kaufbox-lieferbar {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin-top: var(--abstand-m);
  font-size: var(--label-large);
  font-weight: 500;
}
.kaufbox-lieferbar svg { width: 18px; height: 18px; flex-shrink: 0; }
.kaufbox-lieferbar--ja { color: var(--balken-gruen); }
.kaufbox-lieferbar--nein { color: var(--error); }
.kaufbox-zumshop { margin-top: var(--abstand-m); }
.kaufbox-kein-link { font-size: var(--body-small); color: var(--on-surface-variant); margin-top: var(--abstand-xs); text-align: center; }
.kaufbox-nebenaktionen { display: flex; gap: var(--abstand-s); margin-top: var(--abstand-s); }
.kaufbox-nebenaktionen .knopf { flex: 1; }

/* Spalte 3 – Weitere Shops */
.weitere-liste { display: flex; flex-direction: column; }
.weitere-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-s) 0;
  border-top: 1px solid var(--outline-variant);
  font-size: var(--body-medium);
}
.weitere-zeile:first-child { border-top: 0; }
.weitere-shop { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weitere-preis { font-weight: 700; color: var(--primary); white-space: nowrap; }

/* ---------- Merkzettel ---------- */

.merkzettel-liste { margin-top: var(--abstand-m); }

/* ---------- Produktvergleich ---------- */

.vergleich-aktionen {
  margin-top: var(--abstand-l);
  display: flex;
  gap: var(--abstand-s);
}

.vergleich-hinweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius-m);
  padding: var(--abstand-m);
  font-size: var(--body-medium);
  margin-bottom: var(--abstand-m);
}
.vergleich-hinweis svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Vergleichstabelle ----------
   Ein gemeinsames Raster: erste Spalte die Zeilenbezeichnungen, danach je
   Produkt eine Spalte. Nur der Rahmen scrollt waagerecht — die Seite selbst
   bekommt keinen horizontalen Scrollbalken. */

.vt-rahmen {
  overflow-x: auto;
  max-width: 100%;
  /* Platz für den Fokusrahmen der Zellen beim Tastaturscrollen. */
  padding-bottom: var(--abstand-xs);
}

.vt-raster {
  display: grid;
  /* Bezeichnungsspalte fest, Produktspalten mindestens 200px breit. */
  grid-template-columns: 148px repeat(var(--spalten, 3), minmax(200px, 1fr));
  gap: var(--abstand-s);
  align-items: stretch;
  /* Erzwingt das Scrollen im Rahmen statt das Schrumpfen der Spalten. */
  min-width: min-content;
}

/* Die Bezeichnungsspalte bleibt beim Waagerechtscrollen stehen. Eigene
   Fläche, damit die Produktspalten nicht darunter durchscheinen. */
.vt-ecke,
.vt-label,
.vt-blocktitel span {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}

.vt-label {
  display: flex;
  align-items: center;
  padding: var(--abstand-s);
  border-radius: var(--radius-s);
  font-size: var(--label-medium);
  font-weight: 500;
  color: var(--on-surface-variant);
}

.vt-zelle {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  min-width: 0;
  padding: var(--abstand-s);
  border-radius: var(--radius-s);
  font-size: var(--body-medium);
}
.vt--abgesetzt { background: var(--surface-container-low); }

/* Blocküberschrift über die volle Rasterbreite; der Text selbst bleibt beim
   Scrollen links stehen. */
.vt-blocktitel {
  grid-column: 1 / -1;
  margin: var(--abstand-l) 0 var(--abstand-xs);
}
.vt-blocktitel span {
  display: inline-block;
  padding-right: var(--abstand-s);
  font-size: var(--title-medium);
  font-weight: 500;
  color: var(--primary);
}

.zelle-haken { display: inline-flex; flex: 0 0 auto; }
.zelle-haken svg { width: 16px; height: 16px; color: var(--secondary); }

/* ---------- Vergleich als Karten (unter Tablet-Breite) ---------- */

.vergleich-karten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}
.vk-karte {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  padding: var(--abstand-m);
}
.vk-blocktitel {
  font-size: var(--title-small);
  font-weight: 500;
  color: var(--primary);
  margin: var(--abstand-m) 0 var(--abstand-xs);
}
.vk-zeilen { margin: 0; }
.vk-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid var(--outline-variant);
  font-size: var(--body-medium);
}
.vk-zeile:last-child { border-bottom: 0; }
.vk-zeile dt { color: var(--on-surface-variant); }
.vk-zeile dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  text-align: right;
}

/* Überlauf verhindern: Vergleichsspalten dürfen unter ihre Inhaltsbreite
   schrumpfen, sonst erzwingt der breiteste Zellinhalt einen Scrollbalken. */
.produkt-karte { min-width: 0; }

.produkt-karte {
  display: flex;
  flex-direction: column;
  background: var(--surface-container-low);
  border-radius: var(--radius-m);
  border: 2px solid transparent;
  overflow: hidden;
}
.produkt-karte--sieger { border-color: var(--secondary); }

.preissieger-balken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  background: var(--secondary);
  color: var(--on-secondary);
  font-size: var(--label-medium);
  font-weight: 500;
  padding: var(--abstand-xs);
}
.preissieger-balken svg { width: 14px; height: 14px; }

.produkt-karte-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  padding: var(--abstand-m);
  flex: 1;
}
.produkt-karte-inhalt .produkt-bild {
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-s);
  overflow: hidden;
}
.produkt-karte-inhalt .produkt-bild img { height: 100%; object-fit: contain; }
.produkt-hersteller { font-size: var(--title-small); font-weight: 500; }
.produkt-name, .produkt-anbieter { font-size: var(--body-small); color: var(--on-surface-variant); }
.produkt-material { font-size: var(--title-medium); font-weight: 700; color: var(--primary); }
.produkt-karte-inhalt .abstandhalter { flex: 1; }
.produkt-preis { font-size: var(--headline-small); font-weight: 700; color: var(--primary); }
.produkt-rollendaten { font-size: var(--body-small); color: var(--on-surface-variant); }

.empfehlungs-karte {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius-l);
  padding: var(--abstand-l);
  margin-top: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}
.empfehlungs-karte .ek-titel { display: flex; align-items: center; gap: var(--abstand-s); font-size: var(--label-large); font-weight: 500; }
.empfehlungs-karte .ek-titel svg { width: 18px; height: 18px; }
.empfehlungs-karte .ek-name { font-size: var(--title-medium); font-weight: 500; }
.empfehlungs-karte .ek-material { font-size: var(--title-small); font-weight: 700; }
.empfehlungs-karte .ek-preis { font-size: var(--headline-small); font-weight: 700; }
.empfehlungs-karte p { font-size: var(--body-medium); }
.empfehlungs-karte .ek-nebensatz { font-size: var(--body-small); }

/* ---------- Filament-Infos (Kachelraster) ---------- */

/* „Keine Materialart passt": Erklärblock mit Ausweg zum Navigator. */
.infos-kein-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  max-width: 520px;
}
.infos-kein-treffer h2 { font-size: var(--title-medium); font-weight: 700; }
.infos-kein-treffer p { font-size: var(--body-medium); color: var(--on-surface-variant); }

.infos-einstieg {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  width: 100%;
  text-align: left;
  background: var(--primary-container);
  color: var(--on-primary-container);
  border: 0;
  border-radius: var(--radius-m);
  padding: var(--abstand-l);
  cursor: pointer;
  margin: var(--abstand-l) 0;
  box-shadow: var(--schatten-karte);
  transition: box-shadow 150ms ease;
}
.infos-einstieg:hover { box-shadow: var(--schatten-schwebend); }
.infos-einstieg .ie-text { flex: 1; }
.infos-einstieg h2 { font-size: var(--title-large); font-weight: 700; }
.infos-einstieg p { font-size: var(--body-medium); margin-top: var(--abstand-xs); }
.infos-einstieg svg { width: 24px; height: 24px; flex: 0 0 auto; }

.material-gruppe-titel {
  font-size: var(--title-medium);
  font-weight: 500;
  color: var(--primary);
  margin: var(--abstand-l) 0 var(--abstand-m);
}

.material-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--abstand-m);
}

.material-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-xs);
  padding: var(--abstand-l) var(--abstand-s);
  background: var(--surface-container-lowest);
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  cursor: pointer;
  text-align: center;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.material-kachel:hover { box-shadow: var(--schatten-schwebend); transform: translateY(-1px); }
.material-kachel .mk-name { font-size: var(--title-medium); font-weight: 500; color: var(--primary); }
.material-kachel .mk-temp { font-size: var(--body-small); color: var(--on-surface-variant); }

/* ---------- Material-Detailseite ---------- */

.material-seite { max-width: 720px; margin: 0 auto; }
.material-seite h1 { font-size: var(--headline-large); margin-bottom: var(--abstand-l); }
.material-leer { color: var(--on-surface-variant); }

.warnstufen-hinweis {
  display: flex;
  gap: var(--abstand-m);
  border-radius: var(--radius-s);
  padding: var(--abstand-m);
  margin-bottom: var(--abstand-l);
}
.warnstufen-hinweis svg { width: 24px; height: 24px; flex: 0 0 auto; }
.warnstufen-hinweis strong { display: block; font-size: var(--title-small); font-weight: 700; }
.warnstufen-hinweis p { font-size: var(--body-medium); margin-top: var(--abstand-xs); }
.warnstufen-hinweis--erhoeht { background: var(--error-container); color: var(--on-error-container); }
.warnstufen-hinweis--hardware { background: var(--tertiary-container); color: var(--on-tertiary-container); }

.abschnitts-karte {
  background: var(--surface-container-low);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  padding: var(--abstand-l);
  margin-bottom: var(--abstand-l);
}
.abschnitts-karte--gefahr { background: var(--error-container); color: var(--on-error-container); }
.abschnitts-karte > h2 {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  font-size: var(--title-medium);
  font-weight: 700;
  margin-bottom: var(--abstand-m);
}
.abschnitts-karte > h2 svg { width: 20px; height: 20px; }
.abschnitts-karte .kurzfassung { font-weight: 700; font-size: var(--body-large); margin-bottom: var(--abstand-s); }
.abschnitts-karte .beschreibung { font-size: var(--body-medium); }

.punkteliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-m); }
.punkteliste li { display: flex; gap: var(--abstand-s); font-size: var(--body-medium); line-height: 1.45; }
.punkteliste li::before { content: "•"; font-weight: 700; }
.punkteliste .schlagwort { font-weight: 700; }

.eigenschaften-liste { display: flex; flex-direction: column; gap: var(--abstand-s); margin: 0; }
.eigenschaften-trenner { border: 0; border-top: 1px solid var(--outline-variant); margin: var(--abstand-xs) 0; }
.praxishinweise-titel { font-size: var(--title-small); font-weight: 500; }
.praxishinweise { list-style: none; margin: 0; padding: 0; font-size: var(--body-medium); display: flex; flex-direction: column; gap: var(--abstand-xs); }
.praxishinweise li::before { content: "• "; }

/* ---------- Material-Navigator ---------- */

.navigator-seite {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-m);
  text-align: center;
}

.navigator-leiste {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--abstand-s);
}
.navigator-leiste h1 { font-size: var(--title-large); }

.fortschritt-text { font-size: var(--label-large); font-weight: 500; color: var(--on-surface-variant); }
.fortschritt-punkte { display: flex; gap: var(--abstand-xs); justify-content: center; }
.fortschritt-punkt {
  width: 8px; height: 8px;
  border-radius: var(--radius-pille);
  background: var(--outline-variant);
  transition: width 200ms ease, background-color 200ms ease;
}
.fortschritt-punkt--aktiv { width: 16px; background: var(--primary); }

.frage-titel { font-size: var(--headline-small); }
.frage-untertitel { font-size: var(--label-large); font-weight: 500; color: var(--on-surface-variant); }

.antwort-karte {
  width: 100%;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  padding: var(--abstand-m) var(--abstand-l);
  cursor: pointer;
  font-size: var(--body-large);
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.antwort-karte:hover { transform: translateY(-1px); }
.antwort-karte[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}
.antwort-karte .erklaerung {
  display: block;
  font-size: var(--body-small);
  font-weight: 400;
  opacity: 0.8;
  margin-top: var(--abstand-xs);
}

.navigator-navigation { display: flex; gap: var(--abstand-m); justify-content: center; }

.vorschlag-karte {
  width: 100%;
  background: var(--surface-container-low);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-s);
}
.vorschlag-karte h3 { font-size: var(--title-large); font-weight: 700; color: var(--primary); }
.vorschlag-karte p { font-size: var(--body-medium); }

.vorschlag-karte--optimal {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border: 1px solid var(--secondary);
  box-shadow: none;
}
.vorschlag-karte--optimal .vk-obertitel { font-size: var(--title-small); font-weight: 500; }
.vorschlag-karte--optimal h3 { color: inherit; }
.vorschlag-karte--optimal .vk-hinweis { font-size: var(--body-small); }

.navigator-fussnote { font-size: var(--body-small); color: var(--on-surface-variant); }

/* ---------- Farbfilter ----------
   Die Farbfläche eines Feldes trägt den echten Produktfarbwert (farbeHex) —
   die einzige Stelle im Projekt, an der bewusst kein Theme-Token die Farbe
   bestimmt. Name und Trefferzahl stehen daneben als Text: Die Farbe ist nie
   die einzige Information. */

/* --- Farbnamen als Hauptweg: Eingabe mit Vorschlägen, dann Felder --- */

.farbsuche { position: relative; }

.farbvorschlaege {
  list-style: none;
  margin: var(--abstand-xs) 0 0;
  padding: var(--abstand-xs);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-s);
  background: var(--surface-container-lowest);
  box-shadow: var(--schatten-karte);
  max-height: 220px;
  overflow-y: auto;
}
.farbvorschlaege[hidden] { display: none; }

.farbvorschlag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: var(--body-medium);
}
.farbvorschlag:hover { background: var(--surface-container-high); }
/* Markierter Vorschlag: Fläche UND kräftigere Schrift — die Tastaturauswahl
   hängt nie allein am Farbton. */
.farbvorschlag--aktiv {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-weight: 500;
}
.farbvorschlag-anzahl { font-size: var(--label-medium); opacity: 0.8; }

/* Farbfeld in derselben Form wie Material und Gewicht, mit Trefferzahl. */
.farbchip .chip-anzahl,
.chip-anzahl {
  margin-left: var(--abstand-xs);
  font-size: var(--label-medium);
  opacity: 0.75;
}
.chip:disabled { opacity: 0.38; cursor: default; }
.farbchip--andere::after { content: " ▾"; }

/* --- Farbkreis: eine Zeichenfläche statt vieler Einzelelemente --- */

.farbkreis-bereich[hidden] { display: none; }

/* Was die Punktgruppierung ausgelassen hat, steht hier im Klartext. */
.farbkreis-hinweis {
  width: 100%;
  max-width: 200px;
  font-size: var(--label-medium);
  color: var(--on-surface-variant);
}
.farbkreis-hinweis:empty { display: none; }

.farbkreis-bereich {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-s);
}

.farbkreis {
  display: block;
  width: 100%;
  /* Nie breiter als die Seitenleiste, nie größer als nötig. */
  max-width: 200px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: crosshair;
  /* Innenrand, damit sich der Kreis in beiden Modi vom Untergrund abhebt —
     die hellen Randtöne verschwänden sonst im Hellmodus. */
  box-shadow: inset 0 0 0 1px var(--outline);
  /* Wischgesten sollen den Kreis bedienen, nicht die Seite scrollen. */
  touch-action: none;
}
.farbkreis:focus-visible { outline-offset: 4px; }

/* --- Helligkeitsleiste --- */

.farbhelligkeit {
  display: block;
  width: 100%;
  max-width: 200px;
}
.farbhelligkeit input[type="range"] { width: 100%; }

/* --- Vorschau: Fläche plus Wert als Text --- */

.farbvorschau {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  width: 100%;
  max-width: 200px;
}

.farbvorschau-flaeche {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px var(--outline);
}
.farbvorschau-flaeche--leer { background: var(--surface-container-high); }

.farbvorschau-text {
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Transparent hat keinen Farbwert: Schachbrett als Sinnbild statt Fläche. */
.farbflaeche--transparent {
  background-image:
    linear-gradient(45deg, var(--outline-variant) 25%, transparent 25%),
    linear-gradient(-45deg, var(--outline-variant) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--outline-variant) 75%),
    linear-gradient(-45deg, transparent 75%, var(--outline-variant) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  background-color: var(--surface-container-lowest);
}

/* --- Hex-Eingabe --- */

.farbe-frei {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  flex-wrap: wrap;
  margin-top: var(--abstand-m);
}

.farbe-frei-hex input {
  width: 120px;
  padding: var(--abstand-s) var(--abstand-m);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-s);
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-size: var(--body-medium);
}
.farbe-frei-hex--ungueltig { border-color: var(--error) !important; }

/* --- Toleranzregler --- */

.farb-toleranz { margin-top: var(--abstand-m); }

.farb-skala {
  display: flex;
  justify-content: space-between;
  font-size: var(--label-medium);
  color: var(--on-surface-variant);
}

.farb-treffer {
  margin-top: var(--abstand-s);
  font-size: var(--body-medium);
  font-weight: 500;
  color: var(--primary);
}

/* ---------- Kompatibilität auf der Detailseite ----------
   Badge plus Begründung im Klartext — hier ist Platz für den Grund, den die
   Kachel nur als Stufe zeigen kann. */

.kompatibilitaets-block {
  margin-top: var(--abstand-m);
  padding: var(--abstand-m);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-s);
  background: var(--surface-container-low);
}

.kompatibilitaets-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  flex-wrap: wrap;
}

.kompatibilitaets-drucker {
  font-size: var(--body-small);
  color: var(--on-surface-variant);
}

.kompatibilitaets-gruende {
  margin: var(--abstand-s) 0 0;
  padding-left: var(--abstand-l);
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
}
.kompatibilitaets-gruende li + li { margin-top: var(--abstand-xs); }

/* ---------- Einstellungen und Über PrintDeal (Seiten des Benutzermenüs) ----------
   Beide sind reine Lesespalten: eine begrenzte Zeilenlänge liest sich besser
   als volle Fensterbreite. */

.einstellungs-seite,
.ueber-seite {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  max-width: 720px;
  margin-top: var(--abstand-l);
}

.einstellungs-karte > h2,
.ueber-karte > h2 {
  font-size: var(--title-medium);
  font-weight: 500;
  margin-bottom: var(--abstand-s);
}

.einstellungs-karte > p + p,
.ueber-karte > p + p { margin-top: var(--abstand-s); }

.einstellungs-hinweis,
.ueber-hinweis {
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
}

/* Hinweiszeilen mit Symbol: das Icon bleibt klein und schrumpft nicht. */
.ueber-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
}
.ueber-hinweis svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Erscheinungsbild: zwei sich ausschließende Werte als Segmentwahl --- */

.theme-wahl {
  display: flex;
  gap: var(--abstand-s);
  margin-top: var(--abstand-m);
}

.theme-option {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  padding: var(--abstand-m) var(--abstand-l);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  background: var(--surface-container-low);
  cursor: pointer;
  color: var(--on-surface-variant);
  font-size: var(--label-large);
  font-weight: 500;
}
.theme-option svg { width: 20px; height: 20px; }
.theme-option:hover { background: var(--surface-container-high); }

/* Gewählter Zustand zusätzlich zur Farbe an der kräftigeren Umrandung
   erkennbar — nicht allein am Farbton. */
.theme-option[aria-checked="true"] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: var(--primary);
}

/* --- Auskunft über den lokalen Speicher --- */

.einstellungs-liste {
  margin: var(--abstand-m) 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}
.einstellungs-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  font-size: var(--body-medium);
}
.einstellungs-zeile dt { color: var(--on-surface-variant); }
.einstellungs-zeile dd { margin: 0; }

/* --- Rechtstexte: noch nicht befüllt --- */

.rechtstext-liste {
  list-style: none;
  margin: var(--abstand-m) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.rechtstext-zeile {
  padding: var(--abstand-m);
  border: 1px dashed var(--outline);
  border-radius: var(--radius-s);
  background: var(--surface-container-low);
}

.rechtstext-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  flex-wrap: wrap;
}

.rechtstext-titel { font-size: var(--title-small); font-weight: 500; }
a.rechtstext-titel { text-decoration: underline; }

/* --- Rechtstextseiten: Entwurfshinweis und Platzhalter --- */

/* Der Entwurfsbalken muss die Seite dominieren, solange die Texte ungeprüft
   sind. Fehlerrolle statt Warnorange: Das ist kein Nebenhinweis, sondern ein
   Grund, die Seite nicht öffentlich zu stellen. */
.entwurf-hinweis {
  display: flex;
  gap: var(--abstand-m);
  padding: var(--abstand-l);
  border-radius: var(--radius-m);
  background: var(--error-container);
  color: var(--on-error-container);
  border: 1px solid currentColor;
}

.entwurf-hinweis svg {
  width: 24px; height: 24px;
  flex: 0 0 auto;
}

.entwurf-hinweis strong { font-size: var(--title-small); }

.entwurf-hinweis p {
  margin-top: var(--abstand-xs);
  font-size: var(--body-medium);
  line-height: 1.45;
}

/* Platzhalter tragen die eckigen Klammern im Text — die Auszeichnung hier ist
   die zweite Sicherung, nicht die einzige. Deshalb zusätzlich zur Fläche eine
   gestrichelte Kontur: erkennbar auch ohne Farbwahrnehmung. */
.platzhalter,
.platzhalter-beispiel {
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: 1px dashed var(--outline);
  border-radius: var(--radius-s);
  padding: 0 var(--abstand-xs);
  font-style: italic;
}

/* Die Angaben der Rechtstexte sind länger als die kurzen Werte der
   Einstellungsseite. Nebeneinander liefen sie auf einen Rest von zwei Wörtern
   zusammen — hier steht der Wert deshalb unter seiner Beschriftung. */
.ueber-karte .einstellungs-zeile {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-xs);
}

.pruefpunkt-liste {
  list-style: none;
  margin: var(--abstand-m) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.pruefpunkt-liste li {
  display: flex;
  gap: var(--abstand-s);
  font-size: var(--body-medium);
  line-height: 1.45;
}

.pruefpunkt-liste li::before {
  content: "☐";
  flex: 0 0 auto;
}

/* Aufzählung ohne Schlagwort-Spalte (Datenschutz, Affiliate). */
.punkteliste--schlicht { gap: var(--abstand-s); }

/* Kernaussage der Affiliate-Seite: Sie soll gelesen werden, auch wenn sonst
   nichts gelesen wird. */
.affiliate-kernsatz {
  font-size: var(--title-small);
  line-height: 1.45;
  font-weight: 500;
}

/* --- Werbekennzeichnung über der Angebotsliste --- */

/* Sitzt direkt über der Liste und damit über jedem „Zum Shop"-Knopf.
   Zurückhaltend gestaltet, aber dauerhaft: Es gibt kein Schließen. */
.werbehinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-s);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  font-size: var(--body-small);
  color: var(--on-surface-variant);
  line-height: 1.45;
}

.werbehinweis svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.werbehinweis a { text-decoration: underline; white-space: nowrap; }

.rechtstext-zweck {
  margin-top: var(--abstand-xs);
  font-size: var(--body-small);
  color: var(--on-surface-variant);
}