/* ==================================================================
   Leistungsseiten unter /leistungen/

   Bewusst ruhiger als die Startseite. Wer hier landet, hat eine
   konkrete Frage ("was kostet ein Aftermovie") und will eine Antwort,
   keine Inszenierung. Die Startseite beeindruckt, diese Seiten
   ueberzeugen.

   Nutzt die Farbvariablen aus entwurf2.css, eigene Praefixe (lp-).
   ================================================================== */

.lp-schale{ width:min(var(--breite, 1400px), 100% - 2*var(--rand, 24px)); margin-inline:auto; max-width:900px; }

.lp-nav{ border-bottom:1px solid var(--kante); background:var(--tiefer); position:sticky; top:0; z-index:30; }
.lp-nav .lp-schale{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:15px; }
.lp-marke{ font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.lp-marke i{ font-style:normal; color:var(--gruen); }
.lp-zurueck{ font-size:14px; color:var(--dim); text-decoration:none; }
.lp-zurueck:hover{ color:var(--ink); }

.lp-haupt{ padding-block:clamp(26px,4vw,52px) clamp(44px,7vw,88px); }

.lp-weg{ font-size:13px; color:var(--faint); margin:0 0 20px; }
.lp-weg a{ color:inherit; }
.lp-weg a:hover{ color:var(--ink); }

.lp-haupt h1{
  font-size:clamp(29px,5vw,58px); font-weight:600; line-height:1.02;
  letter-spacing:-.025em; margin:0 0 10px;
}
.lp-haupt h1 span{
  display:block; margin-top:9px; font-size:.44em; font-weight:400;
  color:var(--dim); letter-spacing:-.005em; line-height:1.3;
}
.lp-haupt h2{
  font-size:clamp(20px,2.5vw,28px); font-weight:600; letter-spacing:-.02em;
  margin:clamp(38px,5vw,60px) 0 14px;
}
.lp-haupt h3{ font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }

.lp-preis{
  display:inline-block; margin:0 0 24px; padding:7px 15px;
  border:1px solid var(--gruen); border-radius:999px;
  color:var(--gruen); font-size:14px; font-weight:600;
}

.lp-lead{ font-size:clamp(17px,2vw,21px); line-height:1.6; color:var(--ink); max-width:62ch; margin:0 0 26px; }
.lp-text{ font-size:16px; line-height:1.68; color:var(--dim); max-width:66ch; margin:0 0 14px; }
.lp-text a{ color:var(--gruen); }

.lp-bild{ margin:0 0 8px; }
.lp-bild img{ width:100%; height:auto; display:block; border:1px solid var(--kante); }

.lp-liste{ list-style:none; padding:0; margin:0; display:grid; gap:11px; max-width:62ch; }
.lp-liste li{
  position:relative; padding-left:26px; font-size:16px; line-height:1.6; color:var(--dim);
}
.lp-liste li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; background:var(--gruen);
}

.lp-fragen{ display:grid; gap:20px; max-width:66ch; }
.lp-frage p{ margin:0; font-size:16px; line-height:1.65; color:var(--dim); }

.lp-block{
  margin-top:clamp(40px,6vw,68px); padding:clamp(22px,3.4vw,34px);
  background:var(--flaeche); border:1px solid var(--kante);
}
.lp-block h2{ margin-top:0; }

.lp-knopf{
  display:inline-flex; align-items:center; min-height:50px; padding:0 26px;
  background:var(--ink); color:var(--papier-ink); border:1px solid var(--ink);
  text-decoration:none; font-weight:600; font-size:15px; margin-top:6px;
}
.lp-knopf:hover{ background:transparent; color:var(--ink); }

.lp-pillen{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:9px; }
.lp-pillen a{
  display:inline-block; padding:9px 15px; border:1px solid var(--kante);
  font-size:14px; color:var(--dim); text-decoration:none;
}
.lp-pillen a:hover{ color:var(--ink); border-color:var(--gruen); }

.lp-kacheln{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.lp-kacheln a{
  display:flex; flex-direction:column; gap:5px; height:100%; padding:20px 22px;
  background:var(--flaeche); border:1px solid var(--kante);
  border-left:3px solid var(--gruen); text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.lp-kacheln a:hover{ background:#14161C; }
.lp-kacheln b{ font-size:18px; color:var(--ink); font-weight:600; letter-spacing:-.01em; }
.lp-kacheln span{ font-size:13px; color:var(--gruen); font-weight:600; }
.lp-kacheln em{ font-style:normal; font-size:14px; line-height:1.5; color:var(--faint); margin-top:4px; }

.lp-fuss{ border-top:1px solid var(--kante); padding-block:26px; }
.lp-fuss p{ font-size:13px; color:var(--faint); margin:0 0 6px; }
.lp-fuss a{ color:inherit; }
.lp-fuss a:hover{ color:var(--ink); }
.lp-klein{ max-width:60ch; }

/* Rechtlicher Hinweis am Fuss der Referenzseiten. Klein, aber lesbar:
   Er soll niemanden abschrecken, aber im Zweifel belegen koennen, dass
   kein falscher Eindruck erweckt werden sollte. */
.lp-klein-hinweis{
  margin-top:clamp(36px,5vw,58px); padding-top:16px;
  border-top:1px solid var(--kante);
  font-size:13px; line-height:1.6; color:var(--faint); max-width:64ch;
}

/* Rolle hinter dem Namen auf der Ueber-uns-Seite. */
.ub-rolle{
  display:block; margin-top:3px; font-size:13px; font-weight:400;
  color:var(--gruen); letter-spacing:.02em;
}