/* Produktseite: eigene Regeln (nach v13.css + site.css geladen) */

/* Technische Daten + Fragen untereinander, wenn eine Spalte viel länger ist
   (Klasse sf-stack kommt aus der Build-Regel in [product].astro) */
.specs-faq.sf-stack .specs, .specs-faq.sf-stack .faq { grid-column: 1 / -1; }
.specs-faq.sf-stack .faq details p { max-width: 75ch; }
.specs-faq.sf-stack .specs-none { margin-bottom: 26px; }
@media (min-width: 961px) {
  .specs-faq.sf-stack .specs { columns: 2; column-gap: 48px; }
  .specs-faq.sf-stack .specs h3 { column-span: all; }
  .specs-faq.sf-stack .spec-g { break-inside: avoid; }
}

/* Partner-Knopf „Zum Shop“ in „Alle Anbieter“: Formular-Knopf (POST an /weiter/), sieht aus wie der frühere Link */
.pcmp-row .pcmp-go { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 62px; font-weight: 700; font-size: .78rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ice-3); text-align: right; }

/* Langtext aus Directus (product_texts): Zwischenüberschriften ### / #### und Listen im Abschnitt */
.pd-text .kx-copy h3 { font-size: 1.3rem; letter-spacing: -.02em; margin: 28px 0 8px; }
.pd-text .kx-copy h4 { font-size: 1.08rem; margin: 20px 0 6px; }
.pd-text .kx-copy h3 + p, .pd-text .kx-copy h4 + p { margin-top: 0; }
.pd-text .kx-copy ul, .pd-text .kx-copy ol { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; max-width: none; margin: 14px 0 0; padding-left: 1.2em; }
.pd-text .kx-copy p + ul, .pd-text .kx-copy p + ol { margin-top: 8px; }

/* Kachel-Beschriftung mit Erklärung: gepunktet unterstrichen wie Fachbegriffe im Ratgeber (.rb-term), Erklärung beim
   Antippen oder Überfahren; am Handy als Leiste unten */
.kt { position: relative; display: inline; }
.kt > button { font: inherit; color: inherit; padding: 0; background: none; border: 0; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--chl); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kt > button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.kt-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 30; width: min(300px, 80vw); padding: 14px 16px; border-radius: 16px; background: var(--slate); color: rgba(255, 255, 255, .8); font-size: .86rem; line-height: 1.5; font-weight: 500; letter-spacing: 0; box-shadow: 0 20px 40px -16px rgba(16, 24, 32, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.kt-tip b { display: block; color: var(--lime); font-size: .9rem; margin-bottom: 2px; }
.kt:hover .kt-tip, .kt:focus-within .kt-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.keys div:last-child .kt-tip { left: auto; right: -8px; transform: translateY(6px); }
.keys div:last-child .kt:hover .kt-tip, .keys div:last-child .kt:focus-within .kt-tip { transform: none; }
@media (max-width: 640px) {
  .kt-tip, .keys div:last-child .kt-tip { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; transform: translateY(8px); }
  .kt:hover .kt-tip, .kt:focus-within .kt-tip, .keys div:last-child .kt:hover .kt-tip, .keys div:last-child .kt:focus-within .kt-tip { transform: none; }
}

/* Links im Produkttext: wie auf den Inhaltsseiten (.ih-copy a) */
.pd-text .kx-copy :is(p, li) > a, .pd-text .kx-faq a { color: var(--chl-2); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pd-text .kx-copy :is(p, li) > a:hover, .pd-text .kx-faq a:hover { color: var(--ink); }

/* Produkttext aus Directus (.pt-art): eine Lesespalte, kompakt, ohne Trennlinien; Bausteine fügen sich in den Fluss */
/* Text links, „Auf einen Blick“ rechts (klebt beim Scrollen); ohne Kasten steht der Text mittig */
.pt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); justify-content: space-between; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pt-wrap.solo { grid-template-columns: minmax(0, 1fr); }
.pt-side { position: sticky; top: 160px; } /* unter Kopf und Abschnitts-Leiste (.pd-tabs), wie .need-copy */
.pt-card { border-radius: 22px; background: var(--ice); padding: 22px 22px 20px; }
.pt-card .kick { margin-bottom: 12px; }
.pt-card dl { display: grid; gap: 0; margin: 0; }
.pt-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ice-3); }
.pt-card dl > div:first-child { border-top: 0; padding-top: 0; }
.pt-card dt { color: var(--ink-2); font-size: .9rem; }
.pt-card dd { margin: 0; font-weight: 800; text-align: right; white-space: nowrap; }
.pt-basis { color: var(--ink-2); font-size: .8rem; line-height: 1.5; margin: 12px 0 14px; }
.pt-card .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .pt-wrap { grid-template-columns: minmax(0, 1fr); } .pt-side { position: static; } }
.pt-art > h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.02em; line-height: 1.25; margin: 34px 0 10px; scroll-margin-top: 150px; }
.pt-art > h2:first-child { margin-top: 0; }
.pt-art > h3 { font-size: 1.12rem; margin: 22px 0 6px; }
.pt-art > p, .pt-art > ul, .pt-art > ol { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.pt-art > p + p { margin-top: 12px; }
.pt-art > ul, .pt-art > ol { margin: 10px 0 0; padding-left: 1.2em; }
.pt-art > p:first-child { font-size: 1.14rem; color: var(--ink); }
.pt-art > .rb { margin-top: 22px; margin-bottom: 22px; }
.pt-art > .rb + .rb { margin-top: 8px; }
.pt-art :is(p, li) > a { color: var(--chl-2); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pt-art :is(p, li) > a:hover { color: var(--ink); }

/* Alternativen: Vergleichstabelle über den Karten */
.alt-cmp { margin-bottom: 28px; }
.alt-cmp .rb-table { margin: 0; }
/* Breiter als der Bildschirm: rechter Rand blendet aus, bis man ans Ende gewischt hat (Hinweis „hier geht es weiter“).
   Nur mit scroll-gesteuerten Animationen; passt die Tabelle ganz hinein, ist die Zeitleiste inaktiv und nichts blendet aus.
   Rahmen als border statt Schatten, denn die Maske schneidet alles außerhalb der Box ab. */
@property --cmp-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes cmp-fade { from, 92% { --cmp-fade: 56px; } to { --cmp-fade: 0px; } }
@supports (animation-timeline: scroll()) {
  .alt-cmp .rb-table-scroll { box-shadow: none; border: 1px solid var(--line); animation: cmp-fade linear both; animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--cmp-fade)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--cmp-fade)), transparent); }
}

/* Einordnung im Sortiment (lib/rating.ts) */
.rt { display: grid; gap: 20px; grid-template-columns: 1fr; background: var(--ice); border-radius: var(--r); padding: clamp(20px, 3vw, 36px); }
.rt-note { align-self: start; }
.rt-note strong { font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 800; color: var(--slate); }
.rt-note small { margin-left: 6px; font-size: 16px; font-weight: 700; color: var(--ink-3); }
.rt-note p { margin: 10px 0 0; color: var(--ink-3); font-size: 15px; max-width: 28ch; }
.rt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rt-h { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.rt-h span { white-space: nowrap; font-weight: 700; }
.rt-bar { position: relative; height: 6px; margin: 8px 7px 0; border-radius: 3px; background: var(--grad); }
.rt-bar i { position: absolute; left: var(--p); top: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--slate); border: 3px solid var(--white, #fff); box-shadow: 0 0 0 1px var(--line); transform: translateY(-50%); }
.rt-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.rt-rows small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.rt-how { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-3); }
@media (min-width: 768px) { .rt { grid-template-columns: minmax(180px, 1fr) 2fr; column-gap: 48px; } }

/* ---------- Derzeit nicht erhältlich (Unit.na, lib/alternativen.ts; freigegeben 07.11., design/konzepte/ohne-angebot/) ---------- */
/* Kaufbereich: nicht erhältlich + 3 Alternativen mit direktem Shop-Link */
.pcmp.na{display:flex;flex-direction:column;gap:10px}
.na-band{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--white);border-radius:var(--r);padding:14px 18px}
.na-band b{display:block;font-size:18px}
.na-band small{display:block;opacity:.75;font-size:14px}
.na-x{flex:none;width:12px;height:12px;border-radius:50%;background:var(--deal);box-shadow:0 0 0 4px color-mix(in srgb,var(--deal) 25%,transparent)}
.na-lead{margin:6px 0 0;font-weight:700;color:var(--ink)}
.na-role{align-self:flex-start;font-style:normal;font-size:12px;font-weight:700;background:var(--ink);color:var(--white);padding:2px 9px;border-radius:999px;margin-bottom:3px}
.c-best .na-role{background:var(--lime);color:var(--ink)}

/* Vergleichstabelle: Bild + Link + Shop-Knopf je Box; Zeile, Spalte und Zelle reagieren auf die Maus */
.na-cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.na-cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:15px}
.na-cmp th,.na-cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;transition:background-color .12s,box-shadow .12s}
.na-cmp tbody tr:last-child>*{border-bottom:0}
.na-cmp thead th{vertical-align:top;padding:18px 16px 16px;font-weight:400}
.na-cmp thead th>*{display:block}
.na-cmp .cm-img{width:96px;height:96px;margin-bottom:10px}
.na-cmp .cm-img img{width:100%;height:100%;object-fit:contain}
.na-cmp thead small{color:var(--ink-3);font-size:13px}
.na-cmp .cm-nm,.na-cmp thead b{font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:6px}
.na-cmp .cm-nm a{color:inherit}
.na-cmp .na-role{display:inline-block;margin-bottom:6px}
.na-cmp .cm-pr{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px}
.na-cmp .cm-na{color:var(--ink-3);font-size:13px;font-weight:600}
.na-cmp tbody th{font-weight:600;color:var(--ink-2);white-space:nowrap}
.na-cmp .c0,.na-cmp tbody th{position:sticky;left:0;z-index:1;background:var(--white)}
.na-cmp .c-gp,.na-cmp tbody td:nth-child(2){color:var(--ink-3);background:var(--ice)}
.na-cmp thead .c-best{box-shadow:inset 0 3px 0 var(--lime)}
/* beste Werte je Zeile */
.na-cmp td.top{font-weight:700;color:var(--ink)}
.na-cmp .top-l{display:block;width:max-content;font-style:normal;font-size:11px;font-weight:700;background:var(--lime);color:var(--ink);border-radius:999px;padding:1px 8px;margin-top:4px}
/* Zeile */
.na-cmp tbody tr:hover>*{background:var(--ice)}
/* Spalte (Kopf oder Zelle) */
.na-cmp:has(:is(td,th):nth-child(3):hover) :is(td,th):nth-child(3),
.na-cmp:has(:is(td,th):nth-child(4):hover) :is(td,th):nth-child(4),
.na-cmp:has(:is(td,th):nth-child(5):hover) :is(td,th):nth-child(5){background:var(--ice)}
/* Zelle unter der Maus */
.na-cmp tbody td:not(:nth-child(2)):hover{background:var(--white);box-shadow:inset 0 0 0 2px var(--lime)}
@media (hover:none){.na-cmp tbody tr:hover>*{background:inherit}}

.na-note{background:var(--ice);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:18px 0 0;font-size:15px}
.na-cmp .cm-img img{mix-blend-mode:multiply}.na-cmp .cm-img .img-none{border-radius:10px}.na-cmp .cm-img .img-none svg{width:40px}
/* drei Alternativen (components/AltPicks.astro): Raster Bild | Marke + Name | Preis + Shop | Pfeil-Knopf.
   Das Rollen-Label sitzt als Reiter rechts auf der oberen Linie, über dem Pfeil-Knopf (Betreiber 07.11.) */
.na-picks{display:flex;flex-direction:column;gap:14px}
.na-picks .na-lead{margin:0 0 -4px}
.pcmp-best .na-picks{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.na-row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto 40px;grid-template-areas:"img nm nm go" "img pr role go";align-items:center;gap:3px 14px;padding:16px 12px 13px 12px;border:1px solid var(--line);border-radius:18px;background:var(--white);transition:border-color .15s}
.na-row:hover{border-color:var(--ink-3)}
.na-row.is-best{outline:2px solid var(--lime);outline-offset:-1px;border-color:transparent}
.na-img{grid-area:img;width:52px;height:52px;display:block;align-self:center}.na-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.na-nm{grid-area:nm;min-width:0;display:flex;flex-direction:column;gap:2px}
.na-row .na-nm small{display:block;color:var(--ink-3);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:15px;font-weight:700;line-height:1.4} /* 1.4: Linkfläche passt ganz in die Zeile, die Linie wird nicht beschnitten */
.na-t a{color:var(--ink)}
.na-pr{grid-area:pr;display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;line-height:1.2}
.na-pr b{font-size:16px;font-weight:800;color:var(--ink)}
.na-row .na-pr small{display:block;margin:0;color:var(--ink-3);font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.na-go{grid-area:go;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;justify-content:center}
.na-go .ico{margin:0}
.na-row>.na-role{position:absolute;right:12px;top:-6px;font-style:normal;font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em;background:var(--ink);color:var(--white);padding:4px 8px;border-radius:999px;white-space:nowrap;z-index:1}
.na-row.is-best>.na-role{background:var(--lime);color:var(--ink);top:-7px} /* Rahmen der besten Wahl liegt 1 px weiter außen */
.na-all{align-self:center;margin:-6px 0 0}
@media (max-width:560px){.na-bei{display:none}}