/* Zielseiten für Kampagnen (hosting-wechsel.php, it-betreuung.php).
   Hell wie die übrige Seite, ein Akzent (Markenblau), ein Radius (12px). */
.lp { --lp-ink:#17212b; --lp-muted:#4a5866; --lp-line:#d9e2ea; --lp-soft:#f2f6f9;
      --lp-accent:#4eaae0; --lp-action:#1b6797; --lp-action-hover:#15557d; --lp-r:12px;
      color:var(--lp-ink); background:#fbfcfd; }
.lp section { padding:4.5rem 0; }
.lp .lp-wrap { max-width:1180px; margin:0 auto; padding:0 1rem; }
.lp h1, .lp h2, .lp h3 { color:var(--lp-ink); }
.lp h1 { font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.1; letter-spacing:-.02em; font-weight:700; margin:0 0 1rem; }
.lp h2 { font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.15; letter-spacing:-.015em; font-weight:700; margin:0 0 1rem; }
.lp h3 { font-size:1.15rem; font-weight:700; margin:0 0 .4rem; }
.lp p, .lp li { color:var(--lp-muted); line-height:1.6; }
.lp .lp-lead { font-size:1.2rem; max-width:34ch; }
.lp .lp-text { max-width:65ch; }

/* Hero: Text links, echtes Bild rechts */
.lp .lp-hero { padding:3.5rem 0 4rem; border-top:6px solid var(--lp-accent); }
.lp .lp-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:3rem; align-items:center; }
.lp .lp-hero img { width:100%; height:auto; border-radius:var(--lp-r); box-shadow:0 20px 50px rgba(27,103,151,.14); }
.lp .lp-eyebrow { font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--lp-action); font-weight:700; margin-bottom:.8rem; }

/* Buttons: Weiß auf #1b6797 = 6,1:1 */
.lp .lp-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; align-items:center; }
.lp .lp-btn { display:inline-block; background:var(--lp-action); color:#fff; padding:.85rem 1.4rem; border-radius:var(--lp-r);
              font-weight:700; text-decoration:none; white-space:nowrap; transition:background .2s, transform .1s; }
.lp .lp-btn:hover { background:var(--lp-action-hover); color:#fff; }
.lp .lp-btn:active { transform:translateY(1px); }
.lp .lp-btn:focus-visible, .lp a:focus-visible, .lp summary:focus-visible { outline:3px solid var(--lp-accent); outline-offset:3px; }
.lp .lp-link { color:var(--lp-action); font-weight:700; text-decoration:none; white-space:nowrap; }
.lp .lp-link:hover { text-decoration:underline; }

/* Ablauf: nummerierte Spalte statt Karten */
.lp .lp-steps { list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; counter-reset:s; }
.lp .lp-steps li { counter-increment:s; border-top:3px solid var(--lp-accent); padding-top:1rem; }
.lp .lp-steps li::before { content:counter(s); display:block; font-size:2.2rem; font-weight:700; color:var(--lp-accent); line-height:1; margin-bottom:.6rem; }

/* Tarife */
.lp .lp-band { background:var(--lp-soft); }
.lp .lp-plans { display:grid; gap:1.25rem; margin-top:2rem; }
.lp .lp-plans.lp-3 { grid-template-columns:repeat(3,1fr); }
.lp .lp-plans.lp-4 { grid-template-columns:repeat(4,1fr); }
.lp .lp-plan { background:#fff; border:1px solid var(--lp-line); border-radius:var(--lp-r); padding:1.5rem; display:flex; flex-direction:column; }
.lp .lp-plan.lp-pick { border:2px solid var(--lp-action); box-shadow:0 14px 34px rgba(27,103,151,.12); }
.lp .lp-plan .lp-tag { font-size:.8rem; font-weight:700; color:var(--lp-action); margin-bottom:.4rem; min-height:1.2em; }
.lp .lp-price { font-size:2rem; font-weight:700; color:var(--lp-ink); margin:.4rem 0 .8rem; white-space:nowrap; }
.lp .lp-price small { font-size:.9rem; font-weight:400; color:var(--lp-muted); }
.lp .lp-plan ul { padding-left:1.1rem; margin:0 0 1.2rem; flex:1; }
.lp .lp-plan li { margin-bottom:.3rem; }
.lp .lp-fine { font-size:.88rem; color:var(--lp-muted); margin-top:1.25rem; max-width:90ch; }

/* Zwei Spalten mit Gruppen */
.lp .lp-split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.lp .lp-checks { list-style:none; padding:0; margin:0; }
.lp .lp-checks li { padding-left:1.8rem; position:relative; margin-bottom:.7rem; }
.lp .lp-checks li i { position:absolute; left:0; top:.3rem; color:var(--lp-action); }

/* Mietgeräte: Name links, Preis rechts */
.lp .lp-rent { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.5rem; }
.lp .lp-rent div { background:#fff; border:1px solid var(--lp-line); border-radius:var(--lp-r); padding:1rem 1.2rem; display:flex; justify-content:space-between; gap:1rem; }
.lp .lp-rent b { color:var(--lp-ink); white-space:nowrap; }

/* Kasten für den Einstieg */
.lp .lp-callout { background:#fff; border-left:6px solid var(--lp-accent); border-radius:var(--lp-r); padding:2rem; box-shadow:0 10px 30px rgba(27,103,151,.08); }

/* FAQ mit <details>, ohne JavaScript */
.lp .lp-faq { max-width:820px; }
.lp .lp-faq details { border-bottom:1px solid var(--lp-line); padding:1rem 0; }
.lp .lp-faq summary { cursor:pointer; font-weight:700; color:var(--lp-ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.lp .lp-faq summary::-webkit-details-marker { display:none; }
.lp .lp-faq summary::after { content:"+"; color:var(--lp-action); font-size:1.3rem; line-height:1; transition:transform .2s; }
.lp .lp-faq details[open] summary::after { transform:rotate(45deg); }
.lp .lp-faq details p { margin:.75rem 0 0; }

/* Schluss */
.lp .lp-final { text-align:left; }
.lp .lp-final .lp-wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center; }

@media (max-width: 991px) {
  .lp .lp-plans.lp-4 { grid-template-columns:repeat(2,1fr); }
  .lp .lp-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px) {
  .lp section { padding:3rem 0; }
  .lp .lp-hero-grid, .lp .lp-split, .lp .lp-final .lp-wrap, .lp .lp-rent,
  .lp .lp-plans.lp-3, .lp .lp-plans.lp-4, .lp .lp-steps { grid-template-columns:1fr; }
  .lp .lp-hero-grid { gap:2rem; }
  .lp .lp-rent div { flex-direction:column; gap:.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp * { transition:none !important; }
}

/* KI-Seiten (12.10.2026) */
.lp .lp-caption { font-size:.78rem; color:var(--lp-muted); margin:.4rem 0 0; }
.lp .lp-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }
.lp .lp-cols > div { border-top:3px solid var(--lp-accent); padding-top:1rem; }
.lp .lp-ladder { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2rem; }
.lp .lp-ladder > div { background:#fff; border:1px solid var(--lp-line); border-radius:var(--lp-r); padding:1.4rem 1.5rem; }
.lp .lp-ladder h3 { margin-bottom:.8rem; }
.lp .lp-row { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; }
.lp .lp-row + .lp-row { border-top:1px solid var(--lp-line); }
.lp .lp-row span { color:var(--lp-muted); }
.lp .lp-row a { color:var(--lp-action); font-weight:700; text-decoration:none; }
.lp .lp-row a:hover { text-decoration:underline; }
.lp .lp-row b { color:var(--lp-ink); white-space:nowrap; text-align:right; }
.lp .lp-row small { display:block; color:var(--lp-muted); font-weight:400; }
@media (max-width: 767px) {
  .lp .lp-cols, .lp .lp-ladder { grid-template-columns:1fr; }
}
.lp .lp-price small { white-space:normal; }