/*
 * KINDLINGER Kategorie-Landingpages (0.8.100) – gemeinsame Bausteine für alle Bereichsseiten.
 * Lädt nur auf Seiten mit Meta kindlinger_landing (inc/landing.php), nach kindlinger.css.
 * Nutzt nur die Theme-Tokens (Schrift, Abstände, Radius, Buttons, Icons); je Bereich ändert
 * sich nur die Akzentfarbe über die Klasse k-lp--blue|green|yellow|pink (Logofarben der Navigation).
 */

.k-lp { --k-lp-accent: var(--k-yellow); --k-lp-accent-text: var(--k-navy); }
.k-lp--blue { --k-lp-accent: #463a82; --k-lp-accent-text: #463a82; }
.k-lp--green { --k-lp-accent: #8cb414; --k-lp-accent-text: #3f5a00; }
.k-lp--yellow { --k-lp-accent: #f6bf0a; --k-lp-accent-text: #7a5a00; }
.k-lp--pink { --k-lp-accent: #e30d4b; --k-lp-accent-text: #b00a3a; }

/* Akzent an H1/H2 in der Bereichsfarbe */
.k-lp .k-lp__title::after, .k-lp .k-lp__h2::after { background: var(--k-lp-accent); }

/* A – Einstieg */
.k-lp__head { max-width: 860px; }
.k-lp__kicker { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: var(--k-lp-accent-text); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.k-lp__kicker::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--k-lp-accent); }
.k-lp__head .k-lp__intro { max-width: 68ch; }
.k-lp__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.k-lp__end .k-lp__cta { justify-content: center; }
@media (max-width: 599px) { .k-lp__cta .k-button { width: 100%; justify-content: center; } }

/* Gemeinsamer Abschnittsabstand */
.k-lp__sec > .k-lp__text { margin-bottom: 16px; }

/* Icon-Badge wie Service-Kacheln (weißer Kreis, Ring in Bereichsfarbe) */
.k-lp__benefit-icon { box-sizing: border-box; display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 2px solid var(--k-lp-accent); border-radius: 50%; background: #fff; color: var(--k-lp-accent-text); }
.k-lp__benefit-icon .k-icon { width: 22px; height: 22px; }

/* B – Vorteile */
.k-lp__benefits { margin-top: clamp(20px, 3vw, 32px); }
.k-lp__benefit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .k-lp__benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .k-lp__benefit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.k-lp__benefit { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); }
.k-lp__benefit-title { margin: 2px 0 4px; color: var(--k-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.k-lp__benefit p { margin: 0; color: var(--k-ink-2); font-size: .9375rem; line-height: 1.5; }

/* C/D – Auswahlkarten (ganze Karte klickbar über den Link) */
.k-lp__pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .k-lp__pick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .k-lp__pick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k-lp__pick { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); transition: border-color .15s, box-shadow .15s; }
@media (min-width: 600px) { .k-lp__pick { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } }
.k-lp__pick:hover { border-color: var(--k-lp-accent); box-shadow: 0 6px 18px rgb(15 23 42 / 8%); }
.k-lp__pick:focus-within { box-shadow: var(--k-focus); }
.k-lp__pick-media { display: block; background: #fff; }
.k-lp__pick-img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 599px) { .k-lp__pick-img { aspect-ratio: 1 / 1; object-fit: contain; } }
.k-lp__pick-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-top: 3px solid var(--k-lp-accent); }
@media (max-width: 599px) { .k-lp__pick-body { border-top: 0; border-left: 3px solid var(--k-lp-accent); } }
.k-lp__pick-title { margin: 0; color: var(--k-ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.k-lp__pick-text { margin: 0; color: var(--k-ink-2); font-size: .9375rem; line-height: 1.5; }
.k-lp__pick-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: var(--k-navy); font-weight: 700; text-decoration: none; }
.k-lp__pick-link .k-icon { flex: none; width: 18px; height: 18px; transition: transform .15s; }
.k-lp__pick .k-lp__pick-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.k-lp__pick-link:focus-visible { outline: none; }
.k-lp__pick:hover .k-lp__pick-link { text-decoration: underline; text-underline-offset: 3px; }
.k-lp__pick:hover .k-lp__pick-link .k-icon { transform: translateX(3px); }

/* E – Ablauf */
.k-lp__step-list { list-style: none; counter-reset: k-step; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .k-lp__step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.k-lp__step { counter-increment: k-step; position: relative; padding: 16px 16px 16px 64px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-canvas); }
.k-lp__step::before { content: counter(k-step); position: absolute; top: 14px; left: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k-lp-accent-text); color: #fff; font-weight: 800; }
.k-lp__step-title { margin: 4px 0 4px; color: var(--k-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.k-lp__step p { margin: 0; color: var(--k-ink-2); font-size: .9375rem; line-height: 1.5; }

/* F – Auswahlhilfe (Fließtext) */
.k-lp__prose { max-width: 75ch; color: var(--k-ink-2); font-size: 1.0625rem; line-height: 1.65; }
.k-lp__prose p { margin: 0 0 .9em; }
.k-lp__prose h3 { margin: 1.4em 0 .4em; color: var(--k-ink); font-size: 1.125rem; font-weight: 700; }
.k-lp__prose a { color: var(--k-navy); text-decoration: underline; text-underline-offset: 3px; }

/* G – Beratung & Standort */
.k-lp__local { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--k-line); border-left: 4px solid var(--k-lp-accent); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); }
@media (min-width: 900px) { .k-lp__local { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; } }
.k-lp__local .k-lp__text { margin: 0; }
.k-lp__local .k-lp__text p { margin: 0 0 .7em; }
.k-lp__local-cta { margin: 16px 0 0; }
.k-lp__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.k-lp__facts li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--k-line); }
.k-lp__facts li:first-child { border-top: 0; }
.k-lp__facts .k-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--k-lp-accent-text); }
.k-lp__facts a, .k-lp__facts span { color: var(--k-ink); font-weight: 600; line-height: 1.4; }
.k-lp__facts a:hover { color: var(--k-navy); text-decoration: underline; }
.k-lp__facts small { display: block; color: var(--k-muted); font-size: .875rem; font-weight: 400; }

/* H – Zubehör & Downloads */
.k-lp__res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .k-lp__res-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.k-lp__res { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); transition: border-color .15s, box-shadow .15s; }
.k-lp__res > div { display: flex; flex-direction: column; gap: 4px; min-height: 100%; }
.k-lp__res:hover { border-color: var(--k-lp-accent); box-shadow: 0 6px 18px rgb(15 23 42 / 8%); }
.k-lp__res:focus-within { box-shadow: var(--k-focus); }
.k-lp__res .k-lp__pick-link::after { content: ""; position: absolute; inset: 0; }
.k-lp__res-title { margin: 2px 0 0; color: var(--k-ink); font-size: 1rem; font-weight: 700; }
.k-lp__res p { margin: 0; color: var(--k-ink-2); font-size: .9375rem; line-height: 1.5; }
.k-lp__files { margin-top: 20px; padding: 16px 18px; border-radius: var(--k-radius); background: var(--k-canvas); }
.k-lp__files-title { margin: 0 0 4px; color: var(--k-ink); font-size: 1rem; font-weight: 700; }
.k-lp__files-text { margin: 0 0 12px; color: var(--k-ink-2); font-size: .9375rem; }
.k-lp__file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k-lp__file-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--k-line); background: #fff; color: var(--k-ink); font-weight: 600; text-decoration: none; }
.k-lp__file-list a:hover { border-color: var(--k-lp-accent); color: var(--k-navy); }
.k-lp__file-list .k-icon { width: 20px; height: 20px; color: var(--k-lp-accent-text); }

/* J – Abschluss */
.k-lp__end-title { margin: 0 0 8px; color: var(--k-ink); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 800; line-height: 1.2; }
.k-lp__end .k-lp__end-text { max-width: 60ch; margin-inline: auto; font-weight: 400; font-size: 1.0625rem; }
.k-lp .k-lp__end { border-top: 3px solid var(--k-lp-accent); }

@media (prefers-reduced-motion: reduce) {
	.k-lp__pick, .k-lp__res, .k-lp__pick-link .k-icon { transition: none; }
}