/* ==========================================================================
   Leistungsseiten – Inhaltsbereich (seit 16.10.2026 im Seitenrahmen)

   Ergaenzt style.css, ersetzt sie nicht: Kopf, Fusszeile, Schriften und
   Farbwerte kommen von der Website. Alles hier gilt nur innerhalb von
   .lp, damit nichts in Kopf- oder Fusszeile hineinwirkt.
   Farben ausschliesslich ueber die Theme-Tokens aus style.css
   (--page-bg, --on-page-text ...), damit die Seiten im hellen UND im
   dunklen Modus funktionieren - bis 16.10.2026 kannten sie nur Hell.
   Nachfolger der frueheren public/leistungen/stil.css.
   ========================================================================== */

.lp {
  /* Ton, in den das Hero-Foto ausgeblendet wird (= Seitengrund als RGB) */
  --lp-fade: 55, 58, 59;           /* dunkles Theme: --navy */
  --lp-dunkel: #232526;            /* dunkler Abschnitt im dunklen Theme */
  --lp-abschluss: var(--navy-2);
  --lp-linie: rgba(241, 247, 251, .14);
  color: var(--on-page-text);
}
:root[data-theme="light"] .lp {
  --lp-fade: 241, 247, 251;        /* helles Theme: --white */
  --lp-dunkel: var(--navy);
  --lp-linie: rgba(55, 58, 59, .14);
}

.lp h1, .lp h2, .lp h3 { font-family: var(--font-head); color: var(--on-page-text); line-height: 1.2; margin: 0 0 .6em; }
.lp h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); font-weight: 800; letter-spacing: -.01em; }
.lp h2 { font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 700; }
.lp h3 { font-size: 1.1rem; font-weight: 700; }
.lp p { margin: 0 0 1.05em; color: var(--on-page-text-muted); }
.lp a { color: var(--accent-on-page); }

.lp .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.lp .schmal { max-width: 760px; }

/* ---------- Hero ----------
   Wie der Hero der Startseite: Seitengrund, Foto rechts, nach links und
   unten in den Seitengrund ausgeblendet - kein Schleier ueber dem Motiv.
   Oben Platz fuer die feste Kopfzeile (84px). */
.lp .lp-hero { position: relative; overflow: hidden; background: var(--page-bg); padding: 0; }
.lp .lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hero-bild, none);
  background-size: cover; background-position: var(--hero-position, center);
}
.lp .lp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(100deg, rgb(var(--lp-fade)) 0%, rgb(var(--lp-fade)) 40%, rgba(var(--lp-fade), 0) 85%),
    linear-gradient(to top, rgb(var(--lp-fade)) 0%, rgba(var(--lp-fade), 0) 45%);
}
@media (max-width: 760px) {
  .lp .lp-hero::after {
    background:
      linear-gradient(100deg, rgb(var(--lp-fade)) 0%, rgb(var(--lp-fade)) 66%, rgba(var(--lp-fade), 0) 100%),
      linear-gradient(to top, rgb(var(--lp-fade)) 0%, rgba(var(--lp-fade), 0) 55%);
  }
}
.lp .hero-inhalt { position: relative; z-index: 1; padding: calc(84px + clamp(48px, 8vw, 104px)) 0 clamp(84px, 12vw, 140px); }
.lp .lp-hero .eyebrow {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-page); margin: 0 0 18px;
}
.lp .lp-hero h1 { max-width: 16ch; }
.lp .lp-hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); margin: 0 0 32px; max-width: 560px; }
.lp .hero-aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Schaltflaechen ---------- */
.lp .btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  padding: .85em 1.8em; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.15;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.lp .btn-primaer { background: var(--teal); color: var(--on-teal); }
.lp .btn-primaer:hover { background: var(--teal-bright); transform: translateY(-2px); }
.lp .btn-hell { border-color: rgba(255, 255, 255, .75); color: #fff; }
.lp .btn-hell:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
.lp .btn-outline { border-color: var(--on-page-text); color: var(--on-page-text); }
.lp .btn-outline:hover { background: var(--on-page-text); color: var(--page-bg); transform: translateY(-2px); }

/* ---------- Abschnitte ---------- */
.lp section { padding: clamp(56px, 7vw, 88px) 0; background: var(--page-bg); }
.lp section.hell { background: var(--page-bg-2); }
.lp section.dunkel { background: var(--lp-dunkel); }
.lp section.dunkel h2, .lp section.dunkel h3 { color: #fff; }
.lp section.dunkel p, .lp section.dunkel li { color: #c6cfcc; }
.lp .eyebrow-s {
  font-family: var(--font-head); font-weight: 700; font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-page); margin: 0 0 12px;
}
.lp section.dunkel .eyebrow-s { color: var(--teal); }
.lp .lead { font-size: 1.08rem; max-width: 62ch; }

/* ---------- Listen ---------- */
.lp ul.haken { list-style: none; padding: 0; margin: 1.4em 0; }
.lp ul.haken li { position: relative; padding-left: 2.1rem; margin-bottom: .85em; max-width: 62ch; color: var(--on-page-text-muted); }
.lp ul.haken li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* ---------- Karten (helle Flaechen in beiden Themes, wie .service-card) ---------- */
.lp .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.lp .karte {
  background: var(--surface); border-radius: 18px; padding: 26px;
  box-shadow: var(--shadow); border: 1px solid var(--surface-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp .karte:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(55, 58, 59, .14); }
.lp .karte h3 { color: var(--surface-text); margin-bottom: .4em; }
.lp .karte p { margin: 0; color: var(--surface-text-muted); font-size: .95rem; }

/* ---------- Ablauf ---------- */
.lp .ablauf { display: grid; gap: 22px; margin-top: 30px; }
.lp .schritt { display: flex; gap: 20px; align-items: flex-start; }
.lp .schritt .nr {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: var(--on-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
}
.lp .schritt h3 { margin-bottom: .25em; }
.lp .schritt p { margin: 0; max-width: 60ch; }

/* ---------- FAQ ---------- */
.lp .faq { margin-top: 26px; max-width: 760px; }
.lp .faq details { border-bottom: 1px solid var(--lp-linie); padding: 18px 0; }
.lp .faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 700; color: var(--on-page-text);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.lp .faq summary::-webkit-details-marker { display: none; }
.lp .faq summary::after { content: "+"; color: var(--accent-on-page); font-size: 1.4rem; line-height: 1; flex: none; }
.lp .faq details[open] summary::after { content: "–"; }
.lp .faq p { margin: .7em 0 0; }

/* ---------- Abschluss-Aufruf ---------- */
.lp section.abschluss { background: var(--lp-abschluss); text-align: center; }
.lp .abschluss h2 { color: #fff; }
.lp .abschluss p { color: #c6cfcc; }
.lp .abschluss .lead { margin: 0 auto 30px; }
.lp .abschluss .hero-aktionen { justify-content: center; }

/* ---------- Weitere Leistungen ---------- */
.lp .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp .chips a {
  background: var(--surface); border: 1px solid var(--surface-border); color: var(--surface-text);
  padding: .6em 1.2em; border-radius: 999px; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  transition: border-color .2s ease, transform .2s ease;
}
.lp .chips a:hover { border-color: var(--teal); transform: translateY(-2px); }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp .karte, .lp .btn, .lp .chips a { transition: none; }
  .lp .karte:hover, .lp .btn:hover, .lp .chips a:hover { transform: none; }
}

@media (max-width: 640px) {
  .lp .lp-hero h1 { max-width: none; }
  .lp .hero-aktionen .btn { width: 100%; justify-content: center; }
}