/* Produktseiten (templates/produkt.html): Kurzprofil-Karte im Kopf, „Grundlage“ unter dem Urteil, Abwägung „Passt zu dir“ direkt nach
   dem Datenblatt mit „Dann besser“, Unterschied je Alternative, Schluss-Kasten, „Dieses Modell“ in [[vergleich]].
   Nur auf Produktseiten geladen (eigene Datei, weil das eingebettete site.css an der 60-KB-Grenze von seo_audit.py liegt).
   Farben und Schriften aus site.css (:root), Umbrüche in em wie dort. Alles steht fertig im HTML: kein Layoutsprung. */

/* ── Kopf: Urteil links, Karte rechts (ab 64em, nur lieferbare ausführliche Seiten: .kopf-mit-karte) ── */
.produkt-kopf .urteil > p:nth-child(2) { margin: 0; font-size: 1.12rem; line-height: 1.6; }
.produkt-kopf .urteil p.urteil-basis { margin: .7rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--daemmerung); }
.urteil-basis a { text-underline-offset: 3px; }

.kopf-karte { margin-top: 1.4rem; }
.kopf-karte > .kopf-kauf { margin-top: 1rem; }
.kopf-karte > .kaufen-hinweis { margin: .5rem 0 0; }
.kurzprofil-titel { margin: 0 0 .45rem; font: 800 1.05rem/1.1 var(--display); color: var(--daemmerung); }
.kurzprofil { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.kurzprofil > div { background: var(--papier); border: 1px solid var(--linie); border-radius: 4px; padding: .35rem .7rem .4rem; min-width: 0; }
.kurzprofil dt { font-size: .78rem; line-height: 1.3; color: var(--daemmerung); }
.kurzprofil dd { margin: 0; font: 800 1.2rem/1.15 var(--display); white-space: nowrap; }
.kurzprofil .fehlt { font: italic 400 .95rem/1.3 var(--text); }
.kurzprofil-passt { margin: .9rem 0 0; font-size: .98rem; line-height: 1.5; }
.kurzprofil-passt strong { white-space: nowrap; }
.kurzprofil-passt a { text-underline-offset: 3px; }
/* Link in eigener Zeile: Der Satz davor endet in beiden Schriften am Zeilenende, der Schriftwechsel verschiebt nichts */
.kurzprofil-passt .nur-mit-js { display: block; margin-top: .2rem; }
.kurzprofil-passt .nur-mit-js a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 64em) {
  .kopf-mit-karte {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 1fr); column-gap: 3rem;
    grid-template-areas: "krumen krumen" "titel karte" "urteil karte"; grid-template-rows: auto auto 1fr;
  }
  .kopf-mit-karte > .krumen { grid-area: krumen; }
  .kopf-mit-karte > h1 { grid-area: titel; }
  .kopf-mit-karte > .urteil { grid-area: urteil; align-self: start; }
  .kopf-mit-karte > .kopf-karte {
    grid-area: karte; align-self: start; margin: 0; /* oben bündig mit der H1: bricht die H1 beim Schriftwechsel anders um, bleibt die Karte stehen */
    background: var(--papier); border: 1px solid var(--linie); border-top: 5px solid var(--kiefer); border-radius: 4px; padding: 1.3rem 1.4rem 1.4rem;
  }
  .kopf-mit-karte .kurzprofil > div { background: var(--nebel); }
  /* Zeichnung neben dem Datenblatt nicht höher als nötig: Kaufknopf im Datenblatt rückt nach oben (inline-SVG, kein Layoutsprung) */
  .produkt-bild svg { max-height: 26rem; }
}

/* ── Abwägung: „Passt zu dir / Eher nichts für dich“ direkt nach dem Datenblatt, vor dem Passt-Check ── */
.produkt-buehne:has(+ .abwaegung-wer) { margin-bottom: 2rem; }
.abwaegung-wer:has(+ .passt-spalte) { margin-bottom: 2rem; }
.abw-besser { display: block; margin-top: .2rem; font-size: .95rem; color: var(--daemmerung); }
.abw-besser a { color: var(--granit); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 43.75em) {
  .abwaegung-wer .abw { padding: 1rem 1.1rem; }
  .abwaegung-wer .abw ul { gap: .35rem; }
}

/* ── Alternativen: im Textfluss nach dem Schluss-Kasten, je Karte der Unterschied zu diesem Modell ── */
.spalte .alternativen { max-width: none; padding: 0; margin-top: 2.5rem; }
.spalte .alternativen h2 { margin: 0 0 1rem; }
.spalte .alternativen-intro { margin: 0 0 1rem; }
.spalte .alt-raster li + li { margin-top: 0; }
.alt-unterschied { margin: 0; font-size: .9rem; line-height: 1.45; border-left: 3px solid var(--flechte); padding-left: .6rem; }
.alt-direkt { margin: 1rem 0 0; }
.alt-direkt a { font: 700 1.15rem var(--display); text-underline-offset: 4px; }

/* ── Ersatz-Kasten (nicht lieferbar): was sich ändert, Preisklasse ── */
.ersatz-unterschied, .ersatz-preis { margin-top: .5rem !important; font-size: .95rem; line-height: 1.5; }

/* ── Schluss-Kasten: Kurzurteil, Plus/Minus, Knopf, Ausweg ── */
.produkt-schluss > p.schluss-titel { margin: 0 0 .5rem; font: 800 1.45rem/1.1 var(--display); }
.schluss-urteil { margin: 0 0 .8rem !important; }
.produkt-schluss .schluss-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.produkt-schluss .schluss-liste li { margin: 0; padding-left: 1.6rem; position: relative; line-height: 1.5; overflow-wrap: anywhere; hyphens: auto; }
.schluss-plus::before, .schluss-minus::before { position: absolute; left: 0; font: 800 1.3rem/1.1 var(--display); }
.schluss-plus::before { content: "+"; color: var(--kiefer); }
.schluss-minus::before { content: "–"; color: var(--daemmerung); }
.schluss-weiter { margin: .9rem 0 0 !important; font-size: .98rem; }

/* ── [[vergleich]]: das Modell dieser Seite (Rahmen ohne Breitenänderung) ── */
.vergleich-tabelle .vergleich-aktuell { background: var(--papier); box-shadow: inset 3px 0 0 var(--kiefer), inset -3px 0 0 var(--kiefer); }
.vergleich-tabelle th.vergleich-aktuell { box-shadow: inset 3px 0 0 var(--kiefer), inset -3px 0 0 var(--kiefer), inset 0 3px 0 var(--kiefer); }
.vergleich-tabelle tr:last-child .vergleich-aktuell { box-shadow: inset 3px 0 0 var(--kiefer), inset -3px 0 0 var(--kiefer), inset 0 -3px 0 var(--kiefer); }
.vergleich-marke { display: block; margin: 0 0 .2rem; font: 700 .85rem/1.2 var(--text); color: var(--kiefer); }
.vergleich-karten .vergleich-aktuell { outline: 3px solid var(--kiefer); outline-offset: -3px; }
.vergleich-karten .vergleich-marke { margin: 0 0 .2rem !important; }
/* Leseanleitung für die Kundenbewertungen im Datenblatt (bewertungen_tipp in produkte.yaml) */
.bewertungen-tipp { margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; color: rgba(237,240,234,.85); }
.bewertungen-tipp a { color: var(--nebel); text-underline-offset: 3px; }