/* LD24 Modelle – Grundgestaltung. Farben lassen sich über die Variablen im Theme anpassen. */
.ld-wind, .ld-modell, .ld-tabelle, .ld-windfinder, .ld-kaufberater, .ld-bild {
	--ld-tinte: var(--wp--preset--color--tinte, #13233a);
	--ld-leise: var(--wp--preset--color--gestaenge, #5b6b7f);
	--ld-flaeche: var(--wp--preset--color--himmel, #dcebf5);
	--ld-papier: var(--wp--preset--color--weiss, #fff);
	--ld-akzent: var(--wp--preset--color--spinnaker, #f2b705);
	--ld-gut: var(--wp--preset--color--brandung, #1e7f86);
	--ld-schlecht: var(--wp--preset--color--segelrot, #d7263d);
	--ld-linie: #c9d6e2;
}

/* Windleiste */
.ld-wind { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.ld-wind__skala { display: inline-grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 10.5em; }
.ld-wind__stufe { height: .7em; background: var(--ld-linie); border-radius: 1px; }
.ld-wind__stufe:first-child { border-radius: 4px 1px 1px 4px; }
.ld-wind__stufe:last-child { border-radius: 1px 4px 4px 1px; }
.ld-wind__stufe.ist-an { background: var(--ld-gut); }
.ld-wind__wert { font-variant-numeric: tabular-nums; font-size: .9em; color: var(--ld-tinte); }
.ld-wind--klein .ld-wind__skala { width: 5.5em; }
.ld-wind--klein .ld-wind__stufe { height: .5em; }
.ld-wind--klein .ld-wind__wert { font-size: .82em; }

/* Testblock */
.ld-modell { margin: 2.5rem 0; padding: 1.5rem 0 0; border-top: 3px solid var(--ld-tinte); }
.ld-modell__kopf { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: start; }
.ld-modell__label { grid-column: 1 / -1; margin: 0 0 .5rem; justify-self: start; background: var(--ld-akzent); color: var(--ld-tinte); font-weight: 700; font-size: .85rem; padding: .15rem .6rem; border-radius: 3px; }
.ld-modell__name { margin: 0; }
.ld-modell__hersteller { grid-column: 1; margin: .25rem 0 0; color: var(--ld-leise); }
.ld-note { grid-column: 2; grid-row: 2 / span 2; margin: 0; display: grid; justify-items: center; min-width: 4.5rem; padding: .5rem .6rem; border: 2px solid var(--ld-tinte); border-radius: 6px; line-height: 1.1; }
.ld-note__wert { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-note__text { font-size: .8rem; }
.ld-modell__bild { margin: 1.25rem 0 0; }
.ld-modell__bild img { width: 100%; height: auto; border-radius: 6px; display: block; }
.ld-modell__windzeile { margin: 1.25rem 0 0; }
.ld-modell__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .1rem 2rem; margin: 1rem 0 0; }
.ld-modell__daten div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--ld-linie); }
.ld-modell__daten dt { color: var(--ld-leise); }
.ld-modell__daten dd { margin: 0; text-align: right; font-weight: 700; }
.ld-modell__getestet { margin: .9rem 0 0; font-size: .9rem; color: var(--ld-leise); }
.ld-modell__getestet::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; background: var(--ld-gut); transform: rotate(45deg); }
.ld-modell__urteil { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin: 1.25rem 0 0; }
.ld-urteil__titel { margin: 0 0 .4rem; font-weight: 700; }
.ld-plus ul, .ld-minus ul { margin: 0; padding: 0; list-style: none; }
.ld-plus li, .ld-minus li { position: relative; padding-left: 1.4rem; margin: .3rem 0; }
.ld-plus li::before, .ld-minus li::before { position: absolute; left: 0; font-weight: 700; }
.ld-plus li::before { content: "+"; color: var(--ld-gut); }
.ld-minus li::before { content: "–"; color: var(--ld-schlecht); }
.ld-modell__text { margin: 1rem 0 0; }
.ld-modell__hinweis { margin: 1rem 0 0; font-size: .9rem; color: var(--ld-leise); }
.ld-note--daten .ld-note__text { font-size: .72rem; }
.ld-modell__fazit { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: var(--ld-flaeche); border-radius: 6px; }
.ld-modell__kauf { margin: 1rem 0 0; }
.ld-knopf { display: inline-block; border: 0; cursor: pointer; font: inherit; padding: .7rem 1.2rem; background: var(--ld-akzent); color: var(--ld-tinte); font-weight: 700; text-decoration: none; border-radius: 6px; }
.ld-knopf:hover { background: var(--ld-tinte); color: var(--ld-papier); }

/* Vergleichstabelle */
.ld-tabelle { position: relative; overflow-x: auto; margin: 2rem 0; border: 1px solid var(--ld-linie); border-radius: 6px; background: var(--ld-papier); }
.ld-tabelle:focus-visible { outline: 3px solid var(--ld-akzent); outline-offset: 2px; }
.ld-tabelle table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 40rem; }
.ld-tabelle caption { text-align: left; padding: .8rem 1rem 0; font-weight: 700; }
.ld-tabelle th, .ld-tabelle td { padding: .7rem .65rem; text-align: left; border-bottom: 1px solid var(--ld-linie); vertical-align: middle; }
.ld-tabelle td { white-space: nowrap; }
.ld-tabelle td.ld-tabelle__material { white-space: normal; }
.ld-tabelle th:first-child, .ld-tabelle td:first-child { padding-left: 1rem; }
.ld-tabelle thead th { font-size: .85rem; color: var(--ld-leise); font-weight: 700; }
.ld-tabelle tbody tr:last-child > * { border-bottom: 0; }
.ld-tabelle tbody th a { font-weight: 700; }
.ld-tabelle tbody th { min-width: 9rem; }
.ld-tabelle__klein { display: block; font-size: .78rem; color: var(--ld-leise); }
.ld-tabelle .ld-wind--klein .ld-wind__skala { width: 4em; }
.ld-tabelle .ld-wind--klein { gap: .4em; }
.ld-tabelle__label { display: block; font-size: .78rem; font-weight: 700; color: var(--ld-tinte); }
.ld-tabelle__label::before { content: ""; display: inline-block; vertical-align: .05em; width: .55em; height: .55em; margin-right: .35em; background: var(--ld-akzent); transform: rotate(45deg); }

/* Wind-Finder */
.ld-windfinder { background: var(--ld-papier); border: 2px solid var(--ld-tinte); border-radius: 10px; padding: 1.25rem 1.25rem 1rem; }
.ld-windfinder__regler { display: grid; grid-template-columns: 1fr auto; gap: .4rem .75rem; align-items: baseline; }
.ld-windfinder__regler label { font-weight: 700; }
.ld-windfinder__regler output { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-windfinder input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--ld-gut); }
.ld-windfinder__erklaerung { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--ld-leise); min-height: 2.6em; }
.ld-windfinder__liste { list-style: none; margin: .75rem 0 0; padding: 0; counter-reset: wf; }
.ld-windfinder__liste li { border-top: 1px solid var(--ld-linie); }
.ld-windfinder__liste a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; text-decoration: none; color: var(--ld-tinte); }
.ld-windfinder__liste a:hover .ld-windfinder__name { text-decoration: underline; }
.ld-windfinder__name { font-weight: 700; }
.ld-windfinder__info { color: var(--ld-leise); font-size: .88rem; white-space: nowrap; }
.ld-windfinder__leer { margin: .75rem 0 0; font-size: .9rem; }
.ld-windfinder:not(.ist-aktiv) .ld-windfinder__regler input,
.ld-windfinder:not(.ist-aktiv) .ld-windfinder__regler output { display: none; }

.ld-fehler { padding: .75rem 1rem; border: 2px dashed var(--ld-schlecht); }

@media (max-width: 600px) {
	.ld-modell__kopf { grid-template-columns: 1fr; }
	.ld-note { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .75rem; display: flex; gap: .5rem; align-items: baseline; }
}

/* Infografiken */
.ld-grafik { margin: 2rem 0; }
.ld-grafik img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ld-linie, #d5dde5); }
.ld-grafik figcaption { margin-top: .5rem; font-size: .9rem; color: var(--ld-leise, #5b6b7f); }

/* Modellbilder */
.ld-bild { margin: 0; }
.ld-bild img { display: block; width: auto; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; border-radius: 6px; }
.ld-bild--symbol { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .75rem; background: var(--ld-flaeche); border-radius: 8px; color: #8fb2cc; }
.ld-bild--symbol svg { width: 96px; height: auto; }
.ld-bild--symbol figcaption { font-size: .75rem; color: var(--ld-leise); }

/* Kaufberater */
.ld-kaufberater { border: 2px solid var(--ld-tinte); border-radius: 12px; padding: 1.25rem; background: var(--ld-papier); margin: 1.5rem 0 2.5rem; }
.ld-kaufberater__titel { font-weight: 700; font-size: 1.2rem; margin: 0 0 1rem; }
.ld-kaufberater__fragen { display: grid; gap: 1rem; margin: 0; }
.ld-kaufberater__frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.ld-kaufberater__frage legend { font-weight: 700; margin-bottom: .45rem; padding: 0; }
.ld-kaufberater__optionen { display: flex; flex-wrap: wrap; gap: .45rem; }
.ld-chip { position: relative; cursor: pointer; }
.ld-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ld-chip span { display: inline-block; padding: .45rem .8rem; border: 2px solid var(--ld-linie); border-radius: 999px; background: var(--ld-papier); line-height: 1.2; }
.ld-chip input:checked + span { border-color: var(--ld-tinte); background: var(--ld-tinte); color: var(--ld-papier); }
.ld-chip input:focus-visible + span { outline: 3px solid var(--ld-akzent); outline-offset: 2px; }
.ld-kaufberater__aktion { margin: .25rem 0 0; }
.ld-kaufberater__ergebnis { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ld-linie); }
.ld-kaufberater__ergebnistitel { font-weight: 700; font-size: 1.1rem; margin: 0 0 .75rem; }
.ld-kaufberater__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: kb; }
.ld-kaufberater__karte { counter-increment: kb; display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--ld-linie); border-radius: 10px; position: relative; }
.ld-kaufberater__karte[hidden] { display: none; }
.ld-kaufberater__karte::before { content: counter(kb); position: absolute; top: -.6rem; left: -.6rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ld-akzent); border: 2px solid var(--ld-tinte); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.ld-kaufberater__karte .ld-bild img { max-height: 120px; }
.ld-kaufberater__karte .ld-bild--symbol { padding: .4rem; }
.ld-kaufberater__karte .ld-bild--symbol svg { width: 80px; }
.ld-kaufberater__text { min-width: 0; }
.ld-kaufberater__name { font-weight: 700; font-size: 1.1rem; margin: 0; }
.ld-kaufberater__meta { margin: .15rem 0 .5rem; color: var(--ld-leise); font-size: .9rem; }
.ld-kaufberater__gruende { margin: 0 0 .75rem; padding-left: 1.1rem; }
.ld-kaufberater__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0; }
.ld-kaufberater__hinweis { font-size: .85rem; color: var(--ld-leise); margin: 1rem 0 0; }
.ld-knopf--klein { padding: .4rem .8rem; font-size: .9rem; }
@media (max-width: 520px) { .ld-kaufberater__karte { grid-template-columns: 1fr; } }

/* Amazon-Produktbilder (Creators API) */
.ld-bild--amazon { display: inline-flex; flex-direction: column; gap: .25rem; }
.ld-bild--amazon img, .ld-modell__bild .ld-bild--amazon img { width: auto; max-width: 100%; max-height: 260px; background: #fff; border-radius: 6px; }
.ld-bild--amazon figcaption { font-size: .75rem; color: var(--ld-leise); }
.ld-kaufberater__karte .ld-bild--amazon img { max-height: 120px; }