/* Hallmark v2.0.0 | scope: component (lvs-kaufen elements, top product card) | system: project, Kanzi light blue, Raleway heads, Open Sans body, theme buttons | signature: recommended device large with its three real numbers | deal: none, existing system | sloplint: not run, scripts not installed */
/* critique: flat like the model overview page: photos on white, no boxes, no radius, no hover effects; one recommendation leads, six devices follow, the emergency kit reads as one equation, extras sit in a quiet list */
/* waive 1 (partial): the theme's own stylesheets keep literal colours | waive 6: no custom focus style by owner's request, the browser default focus ring stays */

:root {
  --pk-ink: #1d2b36;
  --pk-ink-soft: #46555f;
  --pk-muted: #67767f;
  --pk-line: #e3e9ed;
  --pk-accent: #55c5e9;
  --pk-signal: #0a7aa3;
  --pk-new: #0f7373;
  --pk-font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --pk-font-head: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --pk-gap: 32px;
}

html, body { overflow-x: clip; }

/* Abschnitte */
.pk-abschnitt { margin: 0 0 64px; font-family: var(--pk-font-body); color: var(--pk-ink-soft); }
.pk-abschnitt h2,
.pk-abschnitt h3 { font-family: var(--pk-font-head); color: var(--pk-ink); text-transform: none; letter-spacing: 0; overflow-wrap: break-word; min-width: 0; }
.pk-kopf { margin: 0 0 28px; max-width: 640px; }
.pk-kopf h2 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; font-weight: 500; }
.pk-kopf p { font-size: 16px; line-height: 1.6; margin: 0; }

/* Empfehlung oben */
.pk-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; margin: 8px 0 64px; font-family: var(--pk-font-body); }
.pk-hero h2 { font-family: var(--pk-font-head); font-size: 40px; line-height: 1.12; font-weight: 500; color: var(--pk-ink); margin: 0 0 16px; text-transform: none; letter-spacing: 0; overflow-wrap: break-word; min-width: 0; }
.pk-hero-satz { font-size: 18px; line-height: 1.55; color: var(--pk-ink-soft); margin: 0 0 28px; }
.pk-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pk-aktionen .btn { margin: 0; }
.pk-buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.pk-buehne img { width: 100%; max-height: 340px; object-fit: contain; }
.pk-buehne-name { font-family: var(--pk-font-head); font-size: 24px; color: var(--pk-ink); margin: 0 0 4px; }
.pk-buehne-marke { font-size: 14px; color: var(--pk-muted); margin: 0 0 20px; }
.pk-zahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pk-zahlen li { display: grid; gap: 2px; }
.pk-zahlen strong { font-family: var(--pk-font-head); font-size: 34px; line-height: 1; font-weight: 500; color: var(--pk-ink); }
.pk-zahlen span { font-size: 14px; color: var(--pk-ink-soft); }

/* Geräte */
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--pk-gap); }
.pk-card { position: relative; display: flex; flex-direction: column; font-family: var(--pk-font-body); }
.pk-bild { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; margin: 0 0 16px; }
.pk-bild img { height: 190px; width: auto; max-width: 85%; object-fit: contain; }
.pk-quelle { position: absolute; right: 0; bottom: -2px; font-size: 11px; color: var(--pk-muted); }
.pk-body { display: flex; flex-direction: column; flex: 1; }
.pk-label { display: block; font-size: 13px; font-weight: 600; color: var(--pk-signal); margin: 0 0 2px; }
.pk-label.neu { color: var(--pk-new); }
.pk-marke { font-size: 13px; color: var(--pk-muted); margin: 0; }
.pk-card .pk-name { font-family: var(--pk-font-head); font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--pk-ink); margin: 0 0 6px; text-transform: none; letter-spacing: 0; overflow-wrap: break-word; min-width: 0; }
.pk-card .pk-name a { color: inherit; text-decoration: none; }
.pk-daten { font-size: 14px; color: var(--pk-ink); margin: 0 0 6px; }
.pk-text { font-size: 14px; line-height: 1.55; color: var(--pk-ink-soft); margin: 0 0 16px; flex: 1; }
.pk-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pk-uvp { font-size: 14px; color: var(--pk-ink-soft); margin: 0; }
.pk-uvp strong { font-size: 18px; color: var(--pk-ink); font-weight: 600; }
.pk-fuss .btn { margin: 0; }

/* Textlink */
a.pk-link, a.pk-link:visited { font-family: var(--pk-font-body); font-size: 15px; font-weight: 600; color: var(--pk-signal); text-decoration: underline; text-underline-offset: 3px; }

/* Notfallausrüstung als Gleichung */
.pk-gleichung { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 16px; margin: 0 0 28px; }
.pk-teil { text-align: center; }
.pk-teil img { height: 120px; width: auto; margin: 0 auto 12px; display: block; }
.pk-teil h3 { font-size: 18px; margin: 0 0 6px; font-weight: 500; }
.pk-teil p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.pk-gleichung .pk-plus { font-family: var(--pk-font-head); font-size: 48px; font-weight: 300; line-height: 120px; color: var(--pk-accent); }

/* Extras als Liste */
.pk-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pk-line); }
.pk-liste li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--pk-line); }
.pk-liste img { width: 72px; height: 72px; object-fit: contain; }
.pk-liste h3 { font-size: 17px; margin: 0 0 4px; font-weight: 500; }
.pk-liste p { font-size: 14px; line-height: 1.5; margin: 0; }
.pk-hinweis { font-size: 13px; color: var(--pk-muted); margin: 24px 0 0; }
.pk-nowrap { white-space: nowrap; }

/* Top-Produkt in der schmalen Seitenleiste */
.pk-top { margin: 0 0 30px; }
.pk-top .pk-bild { height: 140px; margin-bottom: 12px; }
.pk-top .pk-bild img { height: 125px; }
.pk-top .pk-quelle { font-size: 10px; }
.pk-top .pk-name { font-size: 18px; }
.pk-top .pk-fuss { display: block; }
.pk-top .btn { display: block; width: 100%; text-align: center; margin-top: 8px; white-space: normal; }
.pk-top a.pk-link { display: block; font-size: 13px; margin-top: 12px; text-align: center; }


/* Vergleichsseite */
.vg-fazit { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-family: var(--pk-font-body); }
.vg-fazit li { display: flex; flex-direction: column; }
.vg-fazit img { height: 130px; width: auto; max-width: 100%; object-fit: contain; margin: 0 0 12px; align-self: flex-start; }
.vg-fazit strong { font-size: 15px; color: var(--pk-ink); margin: 0 0 4px; }
.vg-fazit span { font-size: 14px; line-height: 1.5; color: var(--pk-ink-soft); }
.vg-geraet-zelle { white-space: nowrap; }
.vg-geraet-zelle img { height: 36px; width: 36px; object-fit: contain; vertical-align: middle; margin-right: 10px; }
.vg-geraet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: start; padding: 32px 0; border-top: 1px solid var(--pk-line); }
.vg-fotos { display: grid; gap: 20px; }
.vg-fotos figure { position: relative; margin: 0; text-align: center; }
.vg-fotos img { height: 190px; width: auto; max-width: 100%; object-fit: contain; }
.vg-quelle { display: block; font-size: 11px; color: var(--pk-muted); margin-top: 4px; }
.vg-geraet h3.h3-body-title { margin-top: 0; }
.vg-geraet { scroll-margin-top: 110px; }
.vg-aktionen .btn { margin: 0 8px 8px 0; }

@media (max-width: 991px) {
  .vg-fazit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vg-fazit { grid-template-columns: minmax(0, 1fr); }
  .vg-geraet { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vg-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-fotos img { height: 150px; }
  .pk-hero h2 { font-size: 32px; }
  .pk-buehne { grid-template-columns: minmax(0, 1fr); }
  .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .pk-gleichung { grid-template-columns: minmax(0, 1fr); }
  .pk-gleichung .pk-plus { line-height: 1; text-align: center; }
  .pk-liste li { grid-template-columns: 56px minmax(0, 1fr); }
  .pk-liste li a.pk-link { grid-column: 2; }
  .pk-liste img { width: 56px; height: 56px; }
}
