/* drivebro — Werbe-Landingpages (gratis-verkaufen.html, gratis-haendler.html; Präfix lp-) und Empfehlungsprogramm (empfehlen.html; Präfix em-).
   parkbro-Design aus basis.css: helle Bühne, weisse Karten, Akzentblau, keine Verläufe. */

/* ---------- Landingpage: Kopf ohne Hauptmenü, keine Tableiste ---------- */
body.lp{--tabbar-h:0px}
body.lp .nav,body.lp .mobil-panel,body.lp .kopf-rechts>*:not(.lp-start){display:none!important}
body.lp .kopf-rechts{margin-left:auto}
.lp-start{display:inline-flex;align-items:center;gap:8px;padding:10px 4px;font-size:14.5px;font-weight:600;color:var(--sub)}
.lp-start .ic{width:16px;height:16px}
.lp-start:hover{color:var(--akzent)}
body.lp .fuss-raster{grid-template-columns:minmax(0,1fr)}
body.lp .fuss-raster>div:not(:first-child),body.lp .fuss-app,body.lp .fuss-recht{display:none}
.lp-rechtlinks{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:14px}
.lp-rechtlinks a{color:var(--sub)}
.lp-rechtlinks a:hover{color:var(--akzent)}

/* ---------- Bühne ---------- */
.lp-buehne .innen{padding-block:clamp(36px,4.6vw,72px)}
.lp-held{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.6vw,80px);align-items:center}
.lp-buehne .kicker{margin-bottom:14px}
.lp-buehne h1{font-size:clamp(38px,4.2vw,60px);line-height:1.04}
.lp-buehne h1 span{white-space:nowrap}
.lp-buehne .lead{max-width:34em}
.lp-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.lp-aktion .knopf{padding:16px 28px;font-size:16.5px}
.lp-notiz{margin:12px 0 0;font-size:14px;color:var(--grau)}
.lp-umziehen{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;font-weight:600;color:var(--akzent)}
.lp-umziehen .ic{width:18px;height:18px}
.lp-umziehen:hover{color:var(--akzent-dunkel)}
.lp-einladung{margin-bottom:20px;max-width:36em}

/* Karte rechts (Inhalt Basic, Rechner) */
.lp-karte{padding:clamp(22px,2.6vw,32px)}
.lp-karte h2{font-size:clamp(22px,2vw,26px);margin:0}
.lp-karte>p{margin:6px 0 18px;font-size:15px;color:var(--grau)}
.lp-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.lp-felder .feld select,.lp-felder .feld input{height:50px}
.lp-felder select:disabled{background-color:var(--weiss);color:var(--grau-hell);cursor:not-allowed}
.lp-karte .knopf{margin-top:16px}
.lp-ergebnis{margin-top:18px;padding:18px 20px;border-radius:16px;background:var(--flaeche)}
.lp-ergebnis[hidden]{display:none}
.lp-ergebnis-titel{margin:0;font-size:14px;font-weight:600;color:var(--sub)}
.lp-betrag{display:block;margin:2px 0 4px;font-size:clamp(32px,3.2vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--akzent);font-variant-numeric:tabular-nums}
.lp-ergebnis p{margin:0;font-size:14.5px;color:var(--sub)}
.lp-ergebnis .knopf{margin-top:14px}
.lp-ergebnis .tlink{margin-top:12px;font-size:14.5px}
.lp-stepper{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.lp-stepper .glas-knopf{width:50px;height:50px;min-height:0;padding:0}
.lp-stepper .glas-knopf .ic{width:18px;height:18px}
.feld .lp-stepper input{text-align:center;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.lp-stepper input::-webkit-outer-spin-button,.lp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lp-weg{margin:14px 0 0;display:grid;border-top:1px solid var(--linie)}
.lp-weg div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linie);font-size:14.5px}
.lp-weg div:last-child{border-bottom:0}
.lp-weg dt{color:var(--sub)}
.lp-weg dd{margin:0;font-weight:600;color:var(--tinte);text-align:right;font-variant-numeric:tabular-nums}
.lp-klein{margin:10px 0 0;font-size:13px;color:var(--grau)}

/* Händler: Preisdeckel */
.lp-drittel{margin:12px 0 0;font-size:17px;font-weight:700;color:var(--akzent)}
.lp-drittel sup,.lp-fussnote sup{font-size:.65em}
.lp-fussnote{margin:0 0 clamp(36px,4vw,56px)}
.lp-zuschlag{margin-top:2px}
.lp-stufen-rahmen{padding:0;overflow:hidden}
.lp-stufen{width:100%;border-collapse:collapse;font-size:16px}
.lp-stufen th,.lp-stufen td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--linie)}
.lp-stufen tbody tr:last-child th,.lp-stufen tbody tr:last-child td{border-bottom:0}
.lp-stufen thead th{font-size:14px;font-weight:600;color:var(--sub);background:var(--weiss)}
.lp-stufen tbody th{font-weight:600;color:var(--tinte)}
.lp-stufen td{font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.lp-stufen td span{margin-left:6px;font-size:13.5px;font-weight:600;color:var(--akzent)}
.lp-stufen tr.lp-aktiv th,.lp-stufen tr.lp-aktiv td{background:var(--flaeche)}

/* ---------- Gründe ---------- */
.lp-gruende{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}
.lp-grund .glas{--s:56px;margin-bottom:18px}
.lp-grund h3{font-size:21px;margin-bottom:8px}
.lp-grund p{margin:0;font-size:16px;color:var(--sub);max-width:34ch}

/* ---------- Schritte ---------- */
.lp-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-schritte li{padding:24px;border-radius:var(--radius);background:#fff;border:1px solid rgba(40,40,35,.05);box-shadow:var(--schatten-klein)}
.lp-nr{display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:50%;background:var(--akzent);color:#fff;font-weight:800;font-size:16px}
.lp-schritte h3{font-size:19px;margin-bottom:6px}
.lp-schritte p{margin:0;font-size:15.5px;color:var(--sub)}
.lp-mitte{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:32px}

/* ---------- Häufige Fragen ---------- */
.lp-zwei{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,88px);align-items:start}
.lp-zwei .block-kopf{margin-bottom:0}
.lp-fragen{padding:4px clamp(18px,2.4vw,30px)}
.lp-fragen details{border-bottom:1px solid var(--linie)}
.lp-fragen details:last-child{border-bottom:0}
.lp-fragen summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tinte);cursor:pointer;list-style:none}
.lp-fragen summary::-webkit-details-marker{display:none}
.lp-fragen summary .ic{width:20px;height:20px;flex:none;color:var(--grau);transition:transform .3s var(--weich)}
.lp-fragen details[open] summary .ic{transform:rotate(180deg)}
.lp-fragen summary:hover{color:var(--akzent)}
.lp-fragen details p{margin:0;padding:0 36px 20px 0;color:var(--text);max-width:62ch}
.lp-fragen details .tlink{margin:-6px 0 20px;font-size:15px}

/* ---------- Schluss ---------- */
.lp-schluss{text-align:center;padding:clamp(32px,4vw,56px) clamp(20px,3vw,48px)}
.lp-schluss h2{font-size:clamp(28px,3vw,42px)}
.lp-schluss p{margin:10px auto 0;max-width:40em;font-size:17px;color:var(--sub)}
.lp-schluss .lp-mitte{justify-content:center;margin-top:24px}

/* ---------- Kontaktformular (Händler) ---------- */
.lp-formular{padding:clamp(22px,2.6vw,34px)}
.lp-formular .lp-felder{gap:16px 14px}
.lp-voll{grid-column:1/-1}
.lp-mehr{grid-column:1/-1;border-top:1px solid var(--linie);padding-top:12px}
.lp-mehr summary{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--akzent);cursor:pointer;list-style:none;padding:4px 0}
.lp-mehr summary::-webkit-details-marker{display:none}
.lp-mehr summary .ic{width:16px;height:16px;transition:transform .3s var(--weich)}
.lp-mehr[open] summary .ic{transform:rotate(180deg)}
.lp-mehr .lp-felder{margin-top:12px}
.lp-pflicht{color:var(--akzent)}
.lp-formular .haken{margin-top:16px;font-size:14.5px;color:var(--sub)}
.lp-danke{display:grid;gap:10px}
.lp-danke h3{font-size:22px}
.lp-danke p{margin:0;color:var(--sub)}

/* ---------- Leiste unten auf dem Telefon ---------- */
.lp-leiste{display:none}

/* ---------- Empfehlen ---------- */
.em-held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.6vw,80px);align-items:center}
.em-buehne .innen{padding-block:clamp(36px,4.6vw,72px)}
.em-buehne h1{font-size:clamp(36px,4.2vw,58px);line-height:1.05}
.em-karte{padding:clamp(22px,2.6vw,32px)}
.em-karte h2{font-size:20px;margin:0 0 12px}
.em-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.em-link input{height:52px;width:100%;min-width:0;padding:0 14px;border:1.5px solid var(--linie);border-radius:var(--radius-feld);background:var(--weiss);font-size:15px;color:var(--tinte)}
.em-link input:focus{outline:0;border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.em-link .knopf{height:52px}
.em-code{margin:10px 0 0;font-size:14px;color:var(--grau)}
.em-code b{color:var(--tinte);letter-spacing:.06em}
.em-teilen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.em-teilen .glas-knopf .ic{width:18px;height:18px}
.em-hinweis{margin-top:18px}
.em-stand{margin:0;display:grid;border-top:1px solid var(--linie)}
.em-stand div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px}
.em-stand dt{color:var(--sub)}
.em-stand dd{margin:0;font-weight:800;font-size:18px;color:var(--tinte);font-variant-numeric:tabular-nums}
.em-demo{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--grau)}
.em-regeln{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.em-regeln li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px;color:var(--text)}
.em-regeln .ic{width:19px;height:19px;flex:none;margin-top:3px;color:var(--akzent)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .lp-held,.em-held{grid-template-columns:minmax(0,1fr)}
  .lp-karte,.em-karte{max-width:620px}
  .lp-zwei{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Telefon ---------- */
@media (max-width:760px){
  .lp-buehne h1,.em-buehne h1{font-size:clamp(32px,9.4vw,42px)}
  .lp-aktion .knopf{width:100%}
  .lp-gruende,.lp-schritte{grid-template-columns:minmax(0,1fr)}
  .lp-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px}
  .lp-felder .feld select,.lp-felder .feld input{font-size:16px}
  .lp-formular .lp-felder{grid-template-columns:minmax(0,1fr)}
  .lp-stufen th,.lp-stufen td{padding:12px 14px;font-size:15px}
  .lp-fragen summary{font-size:16px}
  .lp-fragen details p{padding-right:0}
  .lp-mitte .knopf{width:100%}
  .em-link{grid-template-columns:minmax(0,1fr)}
  .em-teilen .glas-knopf{flex:1 1 auto}
  body.lp{padding-bottom:84px}
  .lp-leiste{position:fixed;z-index:44;left:0;right:0;bottom:0;display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,250,248,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform .35s var(--weich)}
  .lp-leiste.sichtbar{transform:none}
  .lp-leiste .knopf{width:100%}
}