/* Leistungsseiten (Märklin, Spur N, Preise): Sprungleiste, Überblick mit
   Preiskarte, Beratungsband, Variantenvergleich mit Technik zum Aufklappen.
   Nur auf den Seiten eingebunden, die diese Bausteine nutzen. */
/* Sprungziel endet bündig unter Navigation + Sprungleiste. Den genauen Wert misst
   sprung.js (Leistenhöhen schwanken mit Schrift und Zoom); 147px ist der Ersatzwert. */
[id] { scroll-margin-top: var(--lp-anker, 147px); }
.lp-sprung { position: sticky; top: 93px; z-index: 50; background: rgba(247,241,230,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--beige-3); }
.lp-sprung-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.lp-sprung-inner::-webkit-scrollbar { display: none; }
.lp-sprung a { flex-shrink: 0; padding: 15px 14px 13px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.lp-sprung a:hover { color: var(--ink-1); }
.lp-sprung a.aktiv { color: var(--red); border-bottom-color: var(--red); }
.lp-sprung a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.lp-blick { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.lp-typen { margin-top: 32px; border-top: 1px solid var(--beige-3); }
.lp-typ { display: grid; grid-template-columns: 132px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--beige-3); }
.lp-typ .eyebrow { margin: 3px 0 0; }
.lp-typ h3 { font-size: 1.02rem; margin-bottom: 6px; }
.lp-typ p { font-size: 0.86rem; line-height: 1.7; margin: 0; }

.lp-preis { background: var(--beige-0); border: 1px solid var(--beige-3); border-top: 3px solid var(--red); border-radius: var(--radius); padding: 32px 30px; }
.lp-preis-titel { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 6px; }
.lp-preis-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--beige-2); }
.lp-preis-zeile span { font-size: 0.9rem; color: var(--ink-1); font-weight: 600; }
.lp-preis-zeile small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.lp-preis-zeile b { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--ink-1); white-space: nowrap; }
/* Hinweis Markendecoder in der Preiskarte */
.lp-marke { margin-top: 18px; padding: 16px 18px; background: var(--red-subtle); border-left: 3px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; }
.lp-marke strong { display: block; font-size: 0.9rem; color: var(--red); margin-bottom: 6px; }
.lp-marke p { font-size: 0.84rem; line-height: 1.65; color: var(--ink-1); margin: 0; }
.lp-preis-fuss { font-size: 0.8rem; line-height: 1.65; color: var(--ink-2); margin-top: 16px; }
.lp-preis .checklist { margin: 22px 0 0; }
.lp-preis .ck-row { font-size: 0.84rem; }

.lp-beratung { background: var(--dark-1); color: var(--light-1); padding: 72px 0; }
.lp-beratung-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.lp-beratung h2 { color: var(--light-1); }
.lp-beratung p { color: var(--hero-sub); }
.lp-beratung .eyebrow { color: #E0A0AC; }
.lp-brauche { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(243,237,227,0.16); }
.lp-brauche li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(243,237,227,0.16); }
.lp-brauche-nr { font-family: 'Oswald', sans-serif; font-size: 1.1rem; color: #E0A0AC; line-height: 1.4; }
.lp-brauche strong { display: block; color: var(--light-1); font-size: 0.95rem; }
.lp-brauche span { font-size: 0.84rem; color: var(--light-2); }


.lp-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
/* Empfehlung in der Mitte etwas breiter (Märklin) */
.lp-opts.lp-opts-mitte { grid-template-columns: 1fr 1.12fr 1fr; }
.lp-opt { background: var(--beige-0); border: 1px solid var(--beige-3); border-radius: var(--radius-md); padding: 28px 26px; display: flex; flex-direction: column; }
.lp-opt-top { border: 1.5px solid var(--red); box-shadow: 0 10px 28px rgba(28,26,21,0.08); }
.lp-opt-band { margin: -28px -26px 20px; background: var(--red); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 26px; }
.lp-opt h3 { font-size: 1.15rem; margin: 6px 0 10px; line-height: 1.3; }
.lp-opt-wirkung { font-size: 0.9rem; line-height: 1.65; color: var(--ink-1); }
.lp-meter { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 0.76rem; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; }
.lp-meter i { display: inline-block; width: 26px; height: 6px; border-radius: 1px; background: var(--beige-2); }
.lp-meter i.an { background: var(--red); }
.lp-fakten { margin: 14px 0 0; border-top: 1px solid var(--beige-3); }
.lp-fakten div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--beige-2); font-size: 0.84rem; line-height: 1.55; }
.lp-fakten dt { color: var(--ink-3); }
.lp-fakten dd { margin: 0; color: var(--ink-1); }
.lp-opt-hinweis { font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); margin-top: 14px; }
.lp-mehr { margin-top: auto; padding-top: 16px; }
.lp-mehr summary { font-size: 0.86rem; font-weight: 600; color: var(--red); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--beige-3); }
.lp-mehr summary::-webkit-details-marker { display: none; }
.lp-mehr summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg) translate(-2px,-2px); transition: transform 0.2s ease; }
.lp-mehr[open] summary::after { transform: rotate(-135deg); }
.lp-mehr summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.lp-mehr p { font-size: 0.84rem; line-height: 1.75; margin-top: 12px; }

.lp-technik-kopf { max-width: 640px; margin-bottom: 48px; }
.lp-technik-teil { padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--beige-3); }
.lp-motor { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.lp-bsp { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.lp-bsp-karte { background: var(--beige-0); border: 1px solid var(--beige-3); padding: 32px; display: flex; flex-direction: column; }
.lp-bsp-karte h3 { font-size: 1.2rem; margin-bottom: 12px; }
.lp-bsp-karte p { font-size: 0.9rem; line-height: 1.7; }
.lp-bsp-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.lp-bsp-bilder img, .lp-bsp-bild { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius); display: block; }
.lp-bsp-bild { margin-bottom: 22px; }
.lp-bsp-karte .link-more { margin-top: auto; padding-top: 18px; }

@media (max-width: 960px) {
  .lp-blick, .lp-beratung-grid, .lp-motor { grid-template-columns: 1fr; gap: 40px; }
  .lp-opts, .lp-opts.lp-opts-mitte { grid-template-columns: 1fr; }
  .lp-bsp { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-typ { grid-template-columns: 1fr; gap: 6px; }
  .lp-preis { padding: 26px 20px; }
  .lp-preis-zeile { flex-direction: column; gap: 4px; }
  .lp-bsp-karte { padding: 24px 20px; }
}