/* MEISTERHILFE - Außenauftritt (Startseite)
   Developed by Toni Sciacca - mail@tonisciacca.com
   Hell, eine Akzentfarbe, große klare Schrift. Karten ohne Rahmen mit weichem Schatten wie in der App,
   Knöpfe als Pille. Keine dunklen Flächen. */

:root {
  color-scheme: light;
  --tinte: #0f1115; --text: #454a57; --leise: #7b8190; --linie: #e7e9ee; --flaeche: #f5f6f8;
  --gelb: #f6a200; --gelb-d: #df9200; --gelb-hell: #fff5e0; --gelb-ton: #fdeac0;
  --rund: 26px; --kopf: 72px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 48px -30px rgba(15, 23, 42, .45);
  --schatten-gross: 0 2px 4px rgba(15, 23, 42, .05), 0 50px 90px -40px rgba(15, 23, 42, .5);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 18px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--text); background: #fff;
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.lp-breite { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 28px; }

/* ------------------------------------------------------------------ Knöpfe */
.lp-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; box-sizing: border-box; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .09); font-weight: 600; font-size: .95rem; line-height: 1.2;
            white-space: nowrap; transition: transform .16s, box-shadow .2s, background-color .16s, color .16s; }
.lp-knopf:hover { transform: translateY(-2px); }
.lp-knopf--gross { padding: 0 28px; font-size: 1.02rem; }
.lp-knopf--voll { display: flex; width: 100%; }
.lp-knopf--gelb { background: var(--gelb); color: var(--tinte); box-shadow: none; }
.lp-knopf--gelb:hover { background: var(--gelb-d); }
.lp-knopf--dunkel { background: var(--tinte); color: #fff; }
.lp-knopf--dunkel:hover { background: #262a33; }
.lp-knopf--hell { background: #fff; color: var(--tinte); box-shadow: none; }
.lp-knopf--hell:hover { box-shadow: inset 0 0 0 1px #cfd3db, 0 12px 26px -16px rgba(15, 23, 42, .6); }
.lp-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lp-knoepfe--mitte { justify-content: center; }
.lp-textlink { font-weight: 600; font-size: .95rem; color: var(--tinte); padding: 8px 6px; }
.lp-textlink:hover { color: var(--gelb-d); }

/* ------------------------------------------------------------------ Kopfleiste */
.lp-kopf { position: sticky; top: 0; z-index: 60; height: var(--kopf); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
           transition: box-shadow .25s; }
.lp-kopf.unten { box-shadow: 0 1px 0 var(--linie), 0 14px 30px -24px rgba(15, 23, 42, .5); }
.lp-kopf-in { height: 100%; max-width: 1260px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.lp-logo img { height: 22px; width: auto; }
.lp-menue { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lp-menue a { padding: 8px 14px; border-radius: 999px; font-size: .93rem; font-weight: 500; color: var(--text); transition: background-color .15s, color .15s; }
.lp-menue a:hover { background: var(--flaeche); color: var(--tinte); }
/* Zwischen Handy-Menü und breitem Fenster: Menüpunkte rücken zusammen, statt in zwei Zeilen zu brechen („Ohne MEISTERHILFE") */
.lp-menue a, .lp-textlink { white-space: nowrap; }
@media (max-width: 1100px) {
  .lp-kopf-in { gap: 14px; }
  .lp-menue { gap: 0; }
  .lp-menue a { padding: 8px 9px; font-size: .9rem; }
  .lp-kopf-rechts .lp-knopf { padding: 11px 16px; }
}
.lp-kopf-rechts { display: flex; align-items: center; gap: 10px; }
.lp-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--flaeche); color: var(--tinte); }

/* Menü am Handy: ganze Fläche, fährt von oben herein */
.lp-voll { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0 22px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto;
           background: radial-gradient(760px 420px at 0% 0%, var(--gelb-hell) 0%, rgba(255, 245, 224, 0) 66%), radial-gradient(620px 420px at 100% 100%, #f1f5fb 0%, rgba(241, 245, 251, 0) 66%), #fff;
           transform: translateY(-102%); visibility: hidden; transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s; }
.lp-voll.offen { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.lp-voll-kopf { display: flex; align-items: center; justify-content: space-between; height: var(--kopf); flex: none; }
.lp-voll-zu { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--tinte); box-shadow: var(--schatten); }
.lp-voll-punkte { display: flex; flex-direction: column; margin: auto 0; padding: 26px 0; }
.lp-voll-punkte a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; font-size: clamp(1.9rem, 8.4vw, 3.2rem); line-height: 1.06; font-weight: 800; letter-spacing: -.036em; color: var(--tinte);
                    border-bottom: 1px solid var(--linie); opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1), color .15s, padding-left .2s; }
.lp-voll-punkte a:last-child { border-bottom: 0; }
.lp-voll-punkte a span { flex: none; min-width: 2.1em; font-size: .82rem; font-weight: 600; letter-spacing: .08em; color: var(--gelb-d); }
.lp-voll-punkte a:hover, .lp-voll-punkte a:active { color: var(--gelb-d); padding-left: 10px; }
.lp-voll.offen .lp-voll-punkte a { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .055s), calc(.18s + var(--i) * .055s), 0s, 0s; }
.lp-voll-fuss { display: grid; gap: 10px; flex: none; }
.lp-voll-fuss .lp-knopf { width: 100%; }

/* ------------------------------------------------------------------ Kopf der Seite */
.lp-held { position: relative; padding: clamp(36px, 5vw, 72px) 0 clamp(34px, 4vw, 56px); overflow: hidden;
           background: radial-gradient(1100px 520px at 12% -8%, var(--gelb-hell) 0%, rgba(255, 245, 224, 0) 62%), radial-gradient(900px 520px at 100% 10%, #f3f6fb 0%, rgba(243, 246, 251, 0) 60%), #fff; }
.lp-held-in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lp-marke { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; color: var(--tinte); font-size: .84rem; font-weight: 600;
            box-shadow: inset 0 0 0 1px var(--gelb-ton), 0 8px 20px -14px rgba(246, 162, 0, .8); }
.lp-marke svg { color: var(--gelb-d); }
.lp-held h1 { margin: 22px 0 0; font-size: clamp(2.7rem, 6vw, 5rem); line-height: .98; font-weight: 800; letter-spacing: -.042em; color: var(--tinte); }
.lp-held h1 em { font-style: normal; position: relative; white-space: nowrap; }
.lp-held--b h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }   /* Fassung B: längere Zeile „Mehr Zeit fürs Handwerk.“ */
.lp-held--b h1 em { white-space: normal; }
.lp-held h1 em::after { content: ""; position: absolute; left: -.04em; right: -.06em; bottom: .06em; height: .3em; border-radius: .08em; background: var(--gelb); opacity: .42; z-index: -1; }
.lp-held-text { position: relative; z-index: 1; }
.lp-held-sub { margin-top: 24px; max-width: 34em; font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.58; color: var(--text); }
.lp-held .lp-knoepfe { margin-top: 32px; }
.lp-held-preis { margin-top: 20px; font-size: .9rem; color: var(--leise); }
.lp-held-preis strong { color: var(--tinte); font-weight: 700; }
.lp-held-bild { position: relative; margin-right: clamp(-150px, -9vw, -20px); }
.lp-fenster { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--schatten-gross), 0 0 0 1px rgba(15, 23, 42, .06); }
.lp-fenster-leiste { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f1f3f6; }
.lp-fenster-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d3d7de; }
.lp-fenster-leiste span { margin-left: 12px; padding: 3px 14px; border-radius: 999px; background: #fff; font-size: .72rem; color: var(--leise); }
.lp-fenster--klein { border-radius: 16px; }
.lp-fenster--klein .lp-fenster-leiste { height: 28px; }
.lp-fenster--klein .lp-fenster-leiste i { width: 8px; height: 8px; }
.lp-schild { position: absolute; display: flex; align-items: center; gap: 11px; padding: 12px 18px 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--schatten-gross); font-size: .82rem; color: var(--leise); line-height: 1.3; }
.lp-schild svg { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: var(--gelb-hell); color: var(--gelb-d); }
.lp-schild b { display: block; color: var(--tinte); font-weight: 600; font-size: .92rem; }
.lp-schild--a { left: -30px; bottom: -26px; }
.lp-schild--b { left: 34%; top: -26px; }
.lp-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(38px, 5vw, 70px); }
.lp-fakten li { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px; border-radius: 20px; background: #fff; box-shadow: var(--schatten); }
.lp-fakten b { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--tinte); line-height: 1; }
.lp-fakten span { font-size: .88rem; color: var(--leise); line-height: 1.35; }

/* ------------------------------------------------------------------ Abschnitte */
.lp-banner { background: var(--gelb); color: var(--tinte); font-size: .9rem; }
.lp-banner-in { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; flex-wrap: wrap; text-align: center; }
.lp-banner svg { flex: none; }
.lp-banner a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.lp-abschnitt { padding: clamp(64px, 8vw, 118px) 0; }
.lp-abschnitt--grau { background: var(--flaeche); }
.lp-abschnitt--schmal { padding: clamp(54px, 6vw, 88px) 0; }
.lp-titel { max-width: 720px; margin-bottom: clamp(30px, 4vw, 50px); }
.lp-titel--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.lp-vorzeile { display: inline-block; margin-bottom: 14px; padding: 5px 13px; border-radius: 999px; background: var(--gelb-hell); color: #8a5a00; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.lp-abschnitt--grau .lp-vorzeile { background: #fff; }
.lp-titel h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.04; font-weight: 800; letter-spacing: -.036em; color: var(--tinte); }
.lp-titel p { margin-top: 16px; font-size: 1.1rem; line-height: 1.6; color: var(--text); }
.lp-titel .lp-knopf { margin-top: 26px; }

/* ------------------------------------------------------------------ Module */
.lp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.lp-filter-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: .9rem; font-weight: 500; transition: background-color .15s, color .15s; }
.lp-filter-knopf i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.lp-filter-knopf span { color: var(--leise); font-variant-numeric: tabular-nums; font-size: .82rem; }
.lp-filter-knopf:hover { background: #eceef2; }
.lp-filter-knopf.on { background: var(--tinte); color: #fff; }
.lp-filter-knopf.on span { color: rgba(255, 255, 255, .62); }
.lp-module { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.lp-modul { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px 16px; border: 0; border-radius: 22px; background: #fff; text-align: center;
            box-shadow: inset 0 0 0 1px var(--linie); transition: transform .18s, box-shadow .2s, opacity .2s; }
.lp-modul:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, var(--schatten); }
.lp-modul-ic { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px; background: color-mix(in srgb, var(--g) 13%, #fff); color: color-mix(in srgb, var(--g) 78%, #111); transition: background-color .2s, color .2s, transform .2s; }
.lp-modul-name { max-width: 100%; font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--tinte); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.lp-modul.on { box-shadow: inset 0 0 0 2px var(--tinte), var(--schatten); }
.lp-modul.on .lp-modul-ic { background: var(--g); color: #fff; transform: scale(1.05); }
.lp-modul.leise { opacity: .32; }
/* Breite Kachel: eine Zeile über das ganze Gitter, Zeichen links, Name und ein Satz daneben */
.lp-modul--breit { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 16px; padding: 14px 22px; text-align: left; }
.lp-modul--breit .lp-modul-ic { flex: none; width: 50px; height: 50px; border-radius: 16px; }
.lp-modul--breit .lp-modul-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; font-size: .95rem; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.lp-modul--breit .lp-modul-name small { font-size: .88rem; font-weight: 400; color: var(--text); }
.lp-blatt { margin-top: 22px; border-radius: var(--rund); background: var(--flaeche); overflow: hidden; }
.lp-blatt-seite { display: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.4vw, 54px); align-items: center; padding: clamp(24px, 3.4vw, 50px); }
.lp-blatt-seite.on { display: grid; animation: lp-auf .38s cubic-bezier(.2, .7, .2, 1); }
@keyframes lp-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-blatt-gruppe { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--leise); }
.lp-blatt-gruppe i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.lp-blatt-text h3 { margin-top: 10px; font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--tinte); }
.lp-blatt-text p { margin-top: 14px; font-size: 1.06rem; color: var(--text); }
.lp-blatt-text ul { margin-top: 20px; display: grid; gap: 11px; }
.lp-blatt-text li { display: flex; align-items: flex-start; gap: 11px; color: var(--tinte); font-weight: 500; font-size: .98rem; }
.lp-blatt-text li svg { flex: none; margin-top: 4px; color: color-mix(in srgb, var(--g) 80%, #111); }
.lp-ersetzt { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 9px 18px 9px 9px; border-radius: 999px; background: #fff; box-shadow: var(--schatten); font-size: .92rem; }
.lp-ersetzt span { padding: 4px 12px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.lp-ersetzt b { font-weight: 600; color: var(--tinte); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--g) 80%, #111); text-decoration-thickness: 2px; }
.lp-blatt-bild .lp-fenster { box-shadow: var(--schatten), 0 0 0 1px rgba(15, 23, 42, .05); }
.lp-blatt-seite--hoch { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.lp-handy { width: min(100%, 290px); margin: 0 auto; padding: 9px; border-radius: 38px; background: #fff; box-shadow: var(--schatten-gross), 0 0 0 1px rgba(15, 23, 42, .08); }
.lp-handy img { border-radius: 30px; }
.lp-blatt-zeichen { display: flex; align-items: center; justify-content: center; min-height: 300px; border-radius: 22px; background: #fff; box-shadow: var(--schatten); }
.lp-blatt-zeichen span { display: flex; align-items: center; justify-content: center; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--g) 11%, #fff); color: color-mix(in srgb, var(--g) 70%, #111); }

/* ------------------------------------------------------------------ Vergleich */
.lp-vergleich { display: grid; grid-template-columns: minmax(0, 1.25fr) 70px minmax(0, 1fr); gap: 22px; align-items: center; }
.lp-vergleich-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-weight: 600; color: var(--tinte); font-size: 1.12rem; line-height: 1.25; }
.lp-vergleich-kopf small { display: block; font-weight: 400; font-size: .88rem; color: var(--leise); }
.lp-zahl-gross { font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--tinte); }
.lp-ohne .lp-zahl-gross { color: #b9bec9; }
.lp-stapel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-karte-klein { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 26px -22px rgba(15, 23, 42, .6); font-size: .9rem; line-height: 1.3; }
.lp-karte-klein:nth-child(4n+1) { transform: rotate(-1.1deg); }
.lp-karte-klein:nth-child(4n+2) { transform: rotate(.9deg) translateY(3px); }
.lp-karte-klein:nth-child(4n+3) { transform: rotate(.6deg); }
.lp-karte-klein:nth-child(4n+4) { transform: rotate(-.8deg) translateY(-2px); }
.lp-stapel > .lp-karte-klein:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: calc(50% - 5px); }
.lp-karte-klein-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--flaeche); color: var(--leise); }
.lp-karte-klein b { display: block; font-weight: 600; color: var(--tinte); }
.lp-karte-klein small { color: var(--leise); font-size: .78rem; }
.lp-pfeil { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gelb); color: var(--tinte); box-shadow: 0 16px 34px -16px rgba(246, 162, 0, .95); justify-self: center; }
.lp-mit-karte { padding: clamp(24px, 3vw, 38px); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten-gross); }
.lp-mit-karte img { height: 24px; width: auto; margin-bottom: 22px; }
.lp-mit-karte ul { display: grid; gap: 14px; margin-bottom: 26px; }
.lp-mit-karte li { display: flex; align-items: flex-start; gap: 12px; font-size: .98rem; line-height: 1.45; color: var(--text); }
.lp-mit-karte li svg { flex: none; margin-top: 3px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--gelb-hell); color: var(--gelb-d); }
.lp-mit-karte b { color: var(--tinte); font-weight: 600; }
.lp-gegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 52px); }
.lp-gegen li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 22px 26px; border-radius: 22px; background: #fff; box-shadow: var(--schatten); }
.lp-gegen span { color: var(--leise); font-size: .95rem; }
.lp-gegen s { text-decoration-color: #d14343; text-decoration-thickness: 2px; color: var(--text); font-weight: 600; }
.lp-gegen b { grid-row: span 2; font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; color: var(--tinte); line-height: 1; }
.lp-gegen small { color: var(--tinte); font-weight: 500; font-size: .92rem; }

/* ------------------------------------------------------------------ Konfigurator: so kreierst du deine individuelle Software */
.lp-abschnitt--konf { background: radial-gradient(900px 460px at 50% -10%, var(--gelb-hell) 0%, rgba(255, 245, 224, 0) 64%), #fff; }
/* Pfeil-Pipeline wie die Status-Leiste der Projektakte */
.lp-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.lp-seg { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px 13px 30px; background: var(--flaeche); color: var(--tinte); font-size: .92rem; font-weight: 700; white-space: nowrap;
          clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.lp-seg:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 20px; }
.lp-seg span { width: 24px; height: 24px; border-radius: 50%; background: var(--tinte); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; flex: none; }
.lp-seg--ziel { background: var(--tinte); color: #fff; }
.lp-seg--ziel span { background: var(--gelb); color: var(--tinte); }
.lp-konf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.lp-konf-karte { position: relative; padding: 26px 24px 24px; border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); min-height: 100%; }
.lp-konf-karte--ziel { background: var(--tinte); color: #fff; }
.lp-konf-nr { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 700; }
.lp-konf-karte--ziel .lp-konf-nr { background: var(--gelb); color: var(--tinte); }
.lp-konf-karte h3 { margin-top: 16px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); }
.lp-konf-karte--ziel h3 { color: #fff; }
.lp-konf-karte p { margin-top: 6px; font-size: .92rem; line-height: 1.5; color: var(--text); }
.lp-konf-karte--ziel p { color: rgba(255, 255, 255, .8); }
.lp-konf-demo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lp-konf-demo > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--flaeche); font-size: .78rem; font-weight: 600; color: var(--tinte); }
.lp-konf-demo > span.an { background: var(--tinte); color: #fff; }
.lp-konf-demo > span.an svg { color: var(--gelb); }
.lp-konf-demo--zeilen { flex-direction: column; gap: 6px; }
.lp-konf-demo--zeilen > span { display: flex; width: 100%; min-width: 0; border-radius: 12px; padding: 7px 8px 7px 10px; background: var(--flaeche); color: var(--tinte); }
.lp-konf-demo--zeilen > span.an { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.lp-konf-demo--zeilen > span.aus { color: var(--leise); font-weight: 500; }
.lp-konf-demo--zeilen b { flex: 1; min-width: 0; font-weight: inherit; line-height: 1.25; }
.lp-konf-demo--zeilen small { display: block; margin-top: 1px; font-size: .7rem; color: var(--leise); font-weight: 500; }
.lp-konf-demo--zeilen i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); font-style: normal; }
.lp-konf-demo--zeilen i.voll { background: var(--tinte); color: #fff; box-shadow: none; }
.lp-konf-demo--zeilen em { min-width: 18px; text-align: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-konf-haken { display: grid; gap: 8px; margin-top: 16px; }
.lp-konf-haken li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: #fff; }
.lp-konf-haken svg { flex: none; padding: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--gelb); color: var(--tinte); }
.lp-konf-fuss { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.lp-konf-fuss span { font-size: .92rem; color: var(--leise); }

/* ------------------------------------------------------------------ Vertrauen, Alltag, Für wen, Daten, Fragen, Empfehlen, Schnell-Einstieg */
.lp-vertrauen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .86rem; font-weight: 500; color: var(--text); }
.lp-vertrauen span { display: inline-flex; align-items: center; gap: 6px; }
.lp-vertrauen svg { flex: none; padding: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gelb); color: var(--tinte); }
.lp-vertrauen--mitte { justify-content: center; margin: 14px 0 18px; }
.lp-alltag { margin: 0 auto 26px; text-align: left; padding-left: 18px; border-left: 4px solid var(--gelb); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; font-weight: 600; letter-spacing: -.015em; color: var(--tinte); max-width: 720px; }
.lp-wen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-wen-karte { display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--rund); background: var(--flaeche); }
.lp-wen-karte--mitte { background: var(--tinte); color: #fff; }
.lp-wen-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--tinte); box-shadow: var(--schatten); }
.lp-wen-karte--mitte .lp-wen-ic { background: var(--gelb); }
.lp-wen-modus { display: inline-block; margin-top: 18px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gelb-d); }
.lp-wen-karte--mitte .lp-wen-modus { color: var(--gelb); }
.lp-wen-karte h3 { margin-top: 6px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); }
.lp-wen-karte--mitte h3 { color: #fff; }
.lp-wen-karte p { margin: 10px 0 20px; font-size: .95rem; line-height: 1.55; color: var(--text); flex: 1; }
.lp-wen-karte--mitte p { color: rgba(255, 255, 255, .82); }
.lp-wen-karte .lp-knopf { align-self: flex-start; }
.lp-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-daten-karte { display: flex; gap: 16px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: var(--schatten); }
.lp-daten-karte h3 { font-size: 1.08rem; font-weight: 700; color: var(--tinte); letter-spacing: -.01em; }
.lp-daten-karte p { margin-top: 4px; font-size: .93rem; line-height: 1.5; color: var(--text); }
.lp-daten-fuss { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; font-size: .92rem; color: var(--text); }
.lp-daten-fuss svg { flex: none; margin-top: 3px; color: var(--gelb-d); }
.lp-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lp-faq-in .lp-titel { margin-bottom: 0; position: sticky; top: calc(var(--kopf) + 24px); }
.lp-faq { display: grid; gap: 10px; }
.lp-frage { border-radius: 18px; background: var(--flaeche); padding: 0 22px; }
.lp-frage summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 1.02rem; font-weight: 700; color: var(--tinte); cursor: pointer; list-style: none; }
.lp-frage summary::-webkit-details-marker { display: none; }
.lp-frage summary svg { flex: none; color: var(--tinte); transition: transform .2s; }
.lp-frage[open] summary svg { transform: rotate(180deg); }
.lp-frage p { padding: 0 0 20px; font-size: .95rem; line-height: 1.6; color: var(--text); max-width: 640px; }
.lp-empf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lp-empf-text h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.06; font-weight: 800; letter-spacing: -.034em; color: var(--tinte); margin-top: 14px; }
.lp-empf-text p { margin-top: 16px; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.lp-empf-text .lp-knoepfe { margin-top: 24px; }
.lp-empf-schritte { display: grid; gap: 12px; }
.lp-empf-schritte li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: var(--schatten); }
.lp-empf-schritte span { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinte); color: var(--gelb); font-weight: 700; }
.lp-empf-schritte b { font-size: 1.02rem; color: var(--tinte); }
.lp-empf-schritte small { font-size: .88rem; line-height: 1.45; color: var(--text); }
.lp-schnell { margin: 24px auto 0; max-width: 560px; text-align: left; }
.lp-schnell-label { display: block; margin-bottom: 8px; font-size: .84rem; font-weight: 600; color: var(--text); }
.lp-schnell-zeile { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); }
.lp-schnell-zeile input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 16px; font: inherit; font-size: 1rem; color: var(--tinte); outline: 0; }
.lp-schnell-zeile .lp-knopf { flex: none; white-space: nowrap; }

/* ------------------------------------------------------------------ Ablauf und Themen */
.lp-ablauf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: schritt; position: relative; }
.lp-ablauf::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--gelb) 0%, var(--gelb-ton) 100%); border-radius: 2px; }
.lp-ablauf li { position: relative; padding-right: 22px; }
.lp-ablauf-nr { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tinte); font-weight: 700; box-shadow: inset 0 0 0 2px var(--gelb), 0 0 0 6px #fff; }
.lp-ablauf h3 { margin-top: 20px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); }
.lp-ablauf p { margin-top: 6px; font-size: .9rem; color: var(--text); line-height: 1.5; }
.lp-ablauf-module { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lp-ablauf-module span { padding: 4px 11px; border-radius: 999px; background: var(--flaeche); font-size: .76rem; font-weight: 500; color: var(--text); }
.lp-themen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(44px, 6vw, 84px); }
.lp-thema-bild { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--flaeche); margin-bottom: 16px; }
.lp-thema-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lp-thema:hover .lp-thema-bild img { transform: scale(1.05); }
.lp-thema-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--leise); }
.lp-thema-label b { color: var(--gelb-d); margin-right: 4px; }
.lp-thema h3 { margin-top: 6px; font-size: 1.08rem; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--tinte); }
.lp-thema p { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--text); }

/* ------------------------------------------------------------------ Gewerke, Recht */
.lp-zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.lp-zwei .lp-titel { margin-bottom: 0; }
.lp-gewerke { display: flex; flex-wrap: wrap; gap: 9px; }
.lp-gewerke span { padding: 10px 17px; border-radius: 999px; background: #fff; font-size: .92rem; font-weight: 500; color: var(--tinte); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 22px -20px rgba(15, 23, 42, .7); }
.lp-gewerke .lp-gewerke-mehr { background: var(--gelb); box-shadow: none; font-weight: 600; }
.lp-sicher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-sicher-punkt { display: flex; gap: 16px; padding: 24px; border-radius: 22px; background: var(--flaeche); }
.lp-sicher-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: var(--gelb-d); box-shadow: var(--schatten); }
.lp-sicher-punkt h3 { font-size: 1.04rem; font-weight: 700; color: var(--tinte); letter-spacing: -.01em; }
.lp-sicher-punkt p { margin-top: 3px; font-size: .92rem; line-height: 1.5; color: var(--text); }

/* ------------------------------------------------------------------ Preise */
.lp-takt { display: inline-flex; gap: 3px; margin-top: 26px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--schatten); }
.lp-takt-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: .92rem; color: var(--leise); }
.lp-takt-knopf span { padding: 2px 8px; border-radius: 999px; background: var(--gelb); color: var(--tinte); font-size: .72rem; font-weight: 700; }
.lp-takt-knopf.on { background: var(--tinte); color: #fff; }
.lp-preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.lp-preis { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.lp-preis--vorn { box-shadow: inset 0 0 0 2px var(--tinte), var(--schatten-gross); }
.lp-preis-marke { position: absolute; top: -13px; left: 30px; padding: 5px 13px; border-radius: 999px; background: var(--gelb); color: var(--tinte); font-size: .74rem; font-weight: 700; }
.lp-preis h3 { font-size: 1.25rem; font-weight: 700; color: var(--tinte); letter-spacing: -.02em; }
.lp-preis-bereich { font-size: .9rem; color: var(--leise); font-weight: 500; }
.lp-preis-betrag { display: flex; align-items: flex-start; gap: 5px; margin: 20px 0 2px; color: var(--tinte); }
.lp-preis-betrag b { font-size: 3.2rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-preis-betrag span { margin-top: 6px; font-size: 1.3rem; font-weight: 700; }
.lp-preis-je { font-size: .86rem; color: var(--leise); }
.lp-preis p { margin: 14px 0 22px; font-size: .94rem; color: var(--text); }
.lp-preis ul { display: grid; gap: 11px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie); }
.lp-preis li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--tinte); font-weight: 500; line-height: 1.4; }
.lp-preis li svg { flex: none; margin-top: 3px; color: var(--gelb-d); }
.lp-preis-fuss { display: flex; align-items: flex-start; justify-content: center; gap: 9px; max-width: 760px; margin: 30px auto 0; text-align: center; font-size: .88rem; color: var(--leise); }
.lp-preis-fuss svg { flex: none; margin-top: 4px; color: var(--gelb-d); }

/* ------------------------------------------------------------------ Schluss und Fuß */
.lp-schluss { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 70px); border-radius: clamp(26px, 3vw, 40px); text-align: center;
              background: radial-gradient(700px 320px at 50% 0%, #ffd77a 0%, rgba(255, 215, 122, 0) 70%), linear-gradient(180deg, var(--gelb-hell), #ffe9b8); }
.lp-schluss h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.038em; color: var(--tinte); }
.lp-schluss p { max-width: 36em; margin: 16px auto 30px; font-size: 1.1rem; color: #5a4a22; }
.lp-fuss { padding: clamp(44px, 5vw, 70px) 0 0; background: var(--flaeche); font-size: .93rem; }
.lp-fuss-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.lp-fuss-marke img { height: 22px; width: auto; }
.lp-fuss-marke p { margin-top: 14px; max-width: 22em; color: var(--leise); }
.lp-fuss h4 { margin-bottom: 12px; font-size: .82rem; font-weight: 600; color: var(--leise); }
.lp-fuss nav a { display: block; padding: 5px 0; color: var(--text); }
.lp-fuss nav a:hover { color: var(--tinte); }
.lp-fuss-unten { padding-top: 20px; padding-bottom: 26px; border-top: 1px solid var(--linie); color: var(--leise); font-size: .85rem; }

/* ------------------------------------------------------------------ Einblenden */
.lp-ein { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.lp-ein.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-ein { opacity: 1; transform: none; transition: none; }
  .lp-knopf, .lp-modul, .lp-thema-bild img { transition: none; }
  .lp-voll, .lp-voll.offen, .lp-voll-punkte a, .lp-voll.offen .lp-voll-punkte a { transition: none; }
  .lp-blatt-seite.on { animation: none; }
}

/* ------------------------------------------------------------------ Schmalere Fenster */
@media (max-width: 1180px) {
  .lp-module { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-held-bild { margin-right: -60px; }
  .lp-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .lp-ablauf::before { display: none; }
}
/* Fassung B: Wo stehst du gerade? (zwei Wege) */
.lp-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-weg { display: flex; flex-direction: column; padding: 28px 28px 26px; border-radius: var(--rund); background: var(--flaeche); color: var(--tinte); text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.lp-weg:hover { background: #fff; box-shadow: var(--schatten-gross); transform: translateY(-2px); }
.lp-weg-ueber { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gelb-d); }
.lp-weg-ikon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--tinte); box-shadow: var(--schatten); margin-top: 14px; }
.lp-weg:hover .lp-weg-ikon { background: var(--gelb); }
.lp-weg h3 { margin-top: 16px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.lp-weg p { margin-top: 8px; color: var(--text); line-height: 1.6; }
.lp-weg ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; font-size: .92rem; color: var(--text); }
.lp-weg ul li { display: flex; align-items: center; gap: 8px; }
.lp-weg ul svg { color: var(--tinte); flex: none; }
.lp-weg em { margin-top: auto; padding-top: 20px; font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.lp-weg:hover em { color: var(--gelb-d); }
.lp-pipe--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lp-konf-demo--zeilen i.pfeil { width: auto; height: auto; background: none; box-shadow: none; color: var(--gelb-d); display: inline; margin: 0 2px; }

/* Denkt mit: im Alltag einfach, im Hintergrund aufmerksam (beide Fassungen) */
.lp-achtsam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-achtsam-karte { padding: 26px 24px; border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.lp-achtsam-ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--gelb-hell); color: var(--gelb-d); }
.lp-achtsam-ikon--warn { background: var(--tinte); color: var(--gelb); }
.lp-achtsam-karte h3 { margin-top: 16px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); }
.lp-achtsam-karte p { margin-top: 8px; font-size: .94rem; line-height: 1.6; color: var(--text); }
.lp-achtsam-hinweis { grid-column: 1 / -1; display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: var(--rund); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.lp-achtsam-hinweis b { display: block; font-size: 1.02rem; color: var(--tinte); }
.lp-achtsam-hinweis p { margin-top: 8px; font-size: .94rem; line-height: 1.6; color: var(--text); }
.lp-achtsam-zitat { padding: 12px 16px; border-radius: 14px; background: var(--flaeche); color: var(--tinte); font-weight: 500; }

@media (max-width: 980px) {
  .lp-wege, .lp-achtsam { grid-template-columns: minmax(0, 1fr); }
  .lp-pipe--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-menue { display: none; }
  .lp-burger { display: inline-flex; }
  .lp-kopf-rechts { margin-left: auto; }
  .lp-kopf-rechts .lp-textlink { display: none; }
  .lp-held-in { grid-template-columns: minmax(0, 1fr); }
  .lp-held-bild { margin: 22px 0 0; }
  .lp-schild--a { left: -8px; bottom: -18px; }
  .lp-schild--b { left: auto; right: -6px; top: -20px; }
  .lp-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-blatt-seite, .lp-blatt-seite--hoch { grid-template-columns: minmax(0, 1fr); }
  .lp-blatt-seite--hoch .lp-blatt-bild { order: 2; }
  .lp-blatt-zeichen { display: none; }
  .lp-vergleich { grid-template-columns: minmax(0, 1fr); }
  .lp-pfeil { transform: rotate(90deg); }
  .lp-konf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lp-konf-karte { min-height: 0; }
  .lp-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-seg { padding: 11px 16px 11px 22px; font-size: .84rem; }
  .lp-seg:first-child, .lp-seg:nth-child(3) { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
  .lp-ablauf { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-wen { grid-template-columns: minmax(0, 1fr); }
  .lp-daten { grid-template-columns: minmax(0, 1fr); }
  .lp-faq-in { grid-template-columns: minmax(0, 1fr); }
  .lp-faq-in .lp-titel { position: static; margin-bottom: 24px; }
  .lp-empf { grid-template-columns: minmax(0, 1fr); }
  .lp-ablauf::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gelb), var(--gelb-ton)); }
  .lp-ablauf li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; padding-right: 0; }
  .lp-ablauf-nr { grid-row: span 3; }
  .lp-ablauf h3 { margin-top: 8px; }
  .lp-zwei { grid-template-columns: minmax(0, 1fr); }
  .lp-sicher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-preise { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .lp-fuss-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .lp-breite, .lp-kopf-in { padding-left: 18px; padding-right: 18px; }
  .lp-module { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .lp-modul { padding: 14px 4px 12px; border-radius: 18px; gap: 9px; }
  .lp-modul-ic { width: 46px; height: 46px; border-radius: 14px; }
  .lp-modul-ic svg { width: 22px; height: 22px; }
  .lp-modul-name { font-size: .72rem; }
  .lp-modul--breit { justify-content: flex-start; gap: 12px; padding: 12px 14px; }
  .lp-modul--breit .lp-modul-ic { width: 46px; height: 46px; border-radius: 14px; }
  .lp-modul--breit .lp-modul-name { font-size: .86rem; }
  .lp-modul--breit .lp-modul-name small { font-size: .78rem; line-height: 1.35; }
  .lp-filter { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px; scrollbar-width: none; }
  .lp-filter::-webkit-scrollbar { display: none; }
  .lp-filter-knopf { flex: none; }
  .lp-themen { grid-template-columns: repeat(5, 76%); overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -18px; margin-right: -18px; padding: 0 18px 8px; scrollbar-width: none; }
  .lp-themen::-webkit-scrollbar { display: none; }
  .lp-thema { scroll-snap-align: center; }
  .lp-gegen { grid-template-columns: minmax(0, 1fr); }
  .lp-sicher { grid-template-columns: minmax(0, 1fr); }
  .lp-schild { display: none; }
  .lp-knopf--gross { padding: 15px 22px; }
  .lp-held .lp-knoepfe .lp-knopf { flex: 1 1 100%; }
  .lp-kopf-rechts .lp-knopf { padding: 10px 16px; font-size: .88rem; }
}
@media (max-width: 520px) {
  .lp-schnell-zeile { flex-direction: column; border-radius: 22px; padding: 8px; }
  .lp-schnell-zeile .lp-knopf { width: 100%; }
  .lp-alltag { font-size: 1.1rem; }
  .lp-konf { grid-template-columns: minmax(0, 1fr); }
  .lp-seg { font-size: .78rem; gap: 6px; padding: 10px 12px 10px 18px; }
  .lp-module { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-stapel { grid-template-columns: minmax(0, 1fr); }
  .lp-stapel > .lp-karte-klein:last-child:nth-child(odd) { justify-self: stretch; min-width: 0; }
  .lp-karte-klein:nth-child(n) { transform: none; }
  .lp-fakten li { flex-direction: column; gap: 4px; padding: 16px 18px; }
  .lp-fuss-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}