/* ── SUBPAGE-MODUS ───────────────────────────────────────────────────────
   Unterseiten scrollen normal. base.css setzt fuer das Single-Page-Home
   overflow:hidden + cursor:none — hier ueberschreiben. */
html:has(body.subpage),
body.subpage {
  overflow: auto !important;
  height: auto !important;
  cursor: auto !important;
}
body.subpage #cur { display: none; }
body.subpage #canvas { position: fixed; opacity: .70; }
body.subpage a, body.subpage button { cursor: pointer; }

/* Reveal-on-Scroll (sanftes Einblenden der Inhaltsbloecke) */
body.subpage .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
body.subpage .reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.subpage .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Reveal-Klassen der Home-Engine auf Unterseiten neutralisieren
   (ohne Engine bekaemen sie nie .in und blieben unsichtbar) */
body.subpage .li { transform: none !important; }
body.subpage .r  { opacity: 1 !important; transform: none !important; }
/* Formularfelder (cform) werden auf der Startseite per .r.in eingeblendet;
   ohne Engine hier sonst dauerhaft opacity:0 → erzwingen sichtbar */
body.subpage .cform .ff,
body.subpage .cform .fr2,
body.subpage .cform .cf-submit { opacity: 1 !important; transform: none !important; }

/* Nav nicht mehr fixed-ueberlagernd kompensieren: Inhalt unter die Nav schieben */
.page-main {
  position: relative;
  z-index: 2;
  padding-top: 7.5rem;
  min-height: 60vh;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container-narrow { max-width: min(760px, 92vw); }

/* ── Section-Rhythmus ── */
.psec { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.psec-tight { padding: 2rem 0; }

/* ── Hero einer Unterseite — Überschriften wie auf der Startseite ── */
.phero { padding: clamp(1.4rem, 4vw, 2.8rem) 0 clamp(3rem, 6vw, 4.5rem); }
.phero .ht-line { font-size: clamp(2.8rem, 9vw, 8rem); white-space: normal; line-height: .98; }
.phero .ht-line.long { font-size: clamp(2.3rem, 7.5vw, 7rem); }
.phero .ht { line-height: .98; }

/* Ratgeber-Artikel: lange Satz-Überschrift bleibt lesbar (sonst gequetscht) */
.container-narrow.phero .ht-line,
.container-narrow.phero .ht-line.long {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
}
.plead {
  margin-top: 1.4rem;
  max-width: 640px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--txt-sub);
}

/* ── Breadcrumb ── */
.crumbs {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: lowercase;
  color: var(--txt-dim); margin-bottom: 1.2rem;
}
.crumbs a { color: var(--txt-dim); text-decoration: none; }
.crumbs a:hover { color: rgb(var(--dyn-acc)); }

/* ── Prose ── */
.prose { max-width: 720px; color: var(--txt-sub); line-height: 1.7; }
.prose h2 {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  letter-spacing: -.01em; color: var(--txt); font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin: 2.4rem 0 .9rem; line-height: 1.1;
}
.prose h3 {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  color: var(--txt); font-size: 1.2rem; margin: 1.8rem 0 .6rem;
}
.prose p { margin: .8rem 0; }
.prose ul, .prose ol { margin: .8rem 0 .8rem 1.2rem; }
.prose li { margin: .4rem 0; }
.prose a { color: rgb(var(--dyn-acc)); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--txt); }

/* ── Karten-Grid ── */
.cards {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1.8rem;
}
.card {
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--r); padding: 1.6rem; box-shadow: var(--card-sh);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  text-decoration: none; display: block;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--card-sh-h); border-color: rgba(var(--dyn-acc), .45); }
.card:hover .card-ico { background: rgba(var(--dyn-acc), .2); }
.card-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--dyn-acc), .12); color: rgb(var(--dyn-acc)); margin-bottom: 1rem;
}
.card-t {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  color: var(--txt); font-size: 1.15rem; margin-bottom: .5rem;
}
.card-b { color: var(--txt-sub); font-size: .94rem; line-height: 1.55; }
.card-tag {
  display: inline-block; margin-top: .9rem;
  font-family: 'Josefin Sans', sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: lowercase; color: var(--txt-dim);
}

/* ── Faktenliste / Checks ── */
.checklist { list-style: none; margin: 1.2rem 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 1.8rem; margin: .7rem 0; color: var(--txt-sub); line-height: 1.55;
}
.checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: rgb(var(--dyn-acc)); font-weight: 700;
}

/* ── Preistabelle ── */
.ptable-wrap { overflow-x: auto; margin: 1.6rem 0; }
.ptable { width: 100%; border-collapse: collapse; min-width: 540px; }
.ptable th, .ptable td {
  padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--txt-sub);
}
.ptable th {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  letter-spacing: .08em; color: var(--txt);
}
.ptable td:first-child { color: var(--txt); font-weight: 600; }

/* ── CTA-Band ── */
.cta-band {
  margin: 3rem 0 1rem; padding: 2.4rem; border-radius: var(--r);
  background: rgba(var(--dyn-acc), .08); border: 1px solid rgba(var(--dyn-acc), .18);
  text-align: center;
}
.cta-band-t {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem); color: var(--txt); margin-bottom: .6rem; line-height: 1.1;
}
.cta-band-b { color: var(--txt-sub); margin-bottom: 1.4rem; max-width: 520px; margin-inline: auto; }

/* ── Footer ── */
.site-foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--foot-bd);
  padding: 3rem var(--pad-x) 2rem; margin-top: 3rem;
  background: var(--bg);
}
.site-foot-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
/* Footer-Logo in Seitenfarbe (SVG als Mask, Füllung = --dyn-acc), dark = weiß */
.foot-brand .foot-logo {
  display: block; height: 44px; aspect-ratio: 120 / 26; margin-bottom: 1.1rem;
  -webkit-mask: url(../brand/logo-light.svg) left center / contain no-repeat;
  mask: url(../brand/logo-light.svg) left center / contain no-repeat;
  background: rgb(var(--dyn-acc));
  transition: background .5s;
}
body.dark .foot-brand .foot-logo { background: #fff; }
.foot-brand p { color: var(--txt-sub); font-size: .9rem; line-height: 1.6; max-width: 280px; }
.foot-col h4 {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  letter-spacing: .12em; font-size: .82rem; color: var(--txt-dim); margin-bottom: .9rem;
}
.foot-col a {
  display: block; color: var(--txt-sub); text-decoration: none;
  font-size: .92rem; margin: .45rem 0; transition: color .2s;
}
.foot-col a:hover { color: rgb(var(--dyn-acc)); }
.site-foot .logo-d { display: none; }
body.dark .site-foot .logo-l { display: none; }
body.dark .site-foot .logo-d { display: inline; }
.foot-legal {
  max-width: var(--max-w); margin: 2rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--foot-bd);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between;
  font-size: .82rem; color: var(--foot-c);
}
.foot-legal a { color: var(--foot-c); text-decoration: none; }
.foot-legal a:hover { color: rgb(var(--dyn-acc)); }

@media (max-width: 860px) {
  .site-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .page-main { padding-top: 5.5rem; }
  .site-foot-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   REICHE LEISTUNGSSEITE (Leistung.astro) — auf Marken-/Standort-Niveau
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero: Badge + Stat-Karten ── */
.lstg-badge { margin-top: 1.1rem; }
.lstg-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .9rem; max-width: 560px; margin-top: 2rem;
}
.lstg-stat {
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--card-sh);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lstg-stat:hover { transform: translateY(-3px); box-shadow: var(--card-sh-h); border-color: rgba(var(--dyn-acc), .45); }
.lstg-stat-num {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(1.6rem, 4vw, 2.2rem); color: rgb(var(--dyn-acc)); text-transform: lowercase;
}
.lstg-stat-lbl { margin-top: .5rem; font-size: .82rem; letter-spacing: .04em; color: var(--txt-sub); text-transform: lowercase; }

/* ── Hero-Logo (dpi-Brand-Ring rechts, wie Startseite) ── */
.lstg-hero { position: relative; }
.lstg-hero .hero-brand {
  position: absolute;
  left: calc(50% + clamp(7rem, 13vw, 11rem));
  top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
  animation: hbIn .5s cubic-bezier(.22,1,.36,1) both;
}
.lstg-hero .hb-ring {
  display: grid; place-items: center;
  width: clamp(180px, 17vw, 270px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--dyn-acc), .12) 0%, rgba(var(--dyn-acc), .04) 55%, transparent 72%);
  border: 1.5px solid rgba(var(--dyn-acc), .22);
  box-shadow: 0 0 0 14px rgba(var(--dyn-acc), .05), 0 24px 60px rgba(0,0,0,.10);
  transition: border-color .5s;
}
/* Logo nimmt die Sektionsfarbe an (PNG als Alpha-Mask, Füllung = --dyn-acc) */
.lstg-hero .hb-logo {
  grid-area: 1 / 1; width: 62%; aspect-ratio: 2219 / 1600;
  -webkit-mask: url(../brand/dpi-logo-white-full.png) center / contain no-repeat;
  mask: url(../brand/dpi-logo-white-full.png) center / contain no-repeat;
  background: rgb(var(--dyn-acc));
  transition: background .5s;
}
/* Dark-Mode: Logo immer weiß, unabhängig vom Sektions-Akzent */
body.dark .lstg-hero .hb-logo { background: #fff; }
@keyframes hbIn {
  from { opacity: 0; transform: translateY(-50%) scale(.92); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* Hero-Text links halten, damit er das Logo nicht überlappt */
@media (min-width: 1181px) {
  .lstg-hero .ht { max-width: 62%; }
}
@media (max-width: 1180px) {
  .lstg-hero .hero-brand { display: none; }
}

/* ── Section-Headlines im Homepage-H1-Stil (groß, zweizeilig, Akzent-Wort) ── */
.lstg-h2 { line-height: .98; margin: .5rem 0 1.6rem; }
.lstg-h2 .ht-line { font-size: clamp(1.9rem, 4.6vw, 3.5rem); white-space: normal; line-height: 1; }
.lstg-h2 .ht-line.long { font-size: clamp(1.7rem, 4vw, 3rem); }
/* Eyebrow-Kicker je Sektion (nutzt globale .ch, hier nur Abstand) */
.psec > .ch { margin-bottom: .3rem; }

/* ── Feature-Karten: Icon-Box etwas kräftiger ── */
.lstg-feat .card-ico { width: 42px; height: 42px; }

/* ── Arbeitsschritte 01–03 ── */
.lstg-steps { grid-template-columns: repeat(3, 1fr); }
.lstg-step {
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--r); padding: 1.6rem; box-shadow: var(--card-sh);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lstg-step:hover { transform: translateY(-4px); box-shadow: var(--card-sh-h); border-color: rgba(var(--dyn-acc), .35); }
.lstg-step-num {
  display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: .06em; color: rgb(var(--dyn-acc));
  margin-bottom: .6rem; text-transform: lowercase;
}
.lstg-step-t {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  color: var(--txt); font-size: 1.05rem; margin-bottom: .55rem; line-height: 1.25;
}
.lstg-step-b { color: var(--txt-sub); font-size: .9rem; line-height: 1.6; }

/* ── Vorteil-Panel (Akzent getönt) ── */
.lstg-vorteil {
  padding: 2rem 2.2rem; border-radius: var(--r);
  background: rgba(var(--dyn-acc), .07); border: 1px solid rgba(var(--dyn-acc), .2);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.lstg-vorteil:hover {
  transform: translateY(-3px); box-shadow: var(--card-sh-h);
  border-color: rgba(var(--dyn-acc), .4); background: rgba(var(--dyn-acc), .1);
}
.lstg-vorteil-lbl {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: .14em;
  text-transform: lowercase; font-size: .8rem; color: rgb(var(--dyn-acc)); margin-bottom: .7rem;
}
.lstg-vorteil-t {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.55; color: var(--txt);
  max-width: 760px; font-weight: 500;
}

/* ── Lokaler Abschnitt ── */
.lstg-region-links { margin-top: .4rem; }

/* ── FAQ-Accordion (native details/summary) ── */
.lstg-faq { max-width: 760px; margin-top: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.lstg-faq-item {
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--r-sm); box-shadow: var(--card-sh);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.lstg-faq-item:hover { transform: translateY(-2px); box-shadow: var(--card-sh-h); border-color: rgba(var(--dyn-acc), .35); }
.lstg-faq-item[open] { border-color: rgba(var(--dyn-acc), .35); }
.lstg-faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.3rem;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  color: var(--txt); font-size: 1.02rem; line-height: 1.3;
}
.lstg-faq-q::-webkit-details-marker { display: none; }
.lstg-faq-icon {
  position: relative; flex-shrink: 0; width: 16px; height: 16px;
}
.lstg-faq-icon::before, .lstg-faq-icon::after {
  content: ''; position: absolute; background: rgb(var(--dyn-acc)); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.lstg-faq-icon::before { width: 16px; height: 2px; }
.lstg-faq-icon::after { width: 2px; height: 16px; }
.lstg-faq-item[open] .lstg-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.lstg-faq-a {
  padding: 0 1.3rem 1.2rem; margin: 0; color: var(--txt-sub); line-height: 1.65; max-width: 64ch;
}

/* ── Proof / Rezension ── */
.lstg-proof {
  max-width: 720px; padding: 1.8rem 2rem; border-radius: var(--r);
  background: var(--card-bg); border: 1px solid var(--card-bd); box-shadow: var(--card-sh);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lstg-proof:hover { transform: translateY(-3px); box-shadow: var(--card-sh-h); border-color: rgba(var(--dyn-acc), .35); }
.lstg-proof-stars { color: #69C5B2; letter-spacing: 2px; font-size: 1.05rem; margin-bottom: .7rem; }
.lstg-proof-text { font-size: 1.1rem; line-height: 1.6; color: var(--txt); margin: 0 0 .8rem; }
.lstg-proof-src {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: lowercase;
  letter-spacing: .04em; font-size: .85rem; color: var(--txt-dim);
}

@media (max-width: 900px) {
  .lstg-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lstg-stats { grid-template-columns: 1fr; max-width: 320px; }
}

/* ── Light-Snap: dezentes Scroll-Snap je Sektion (kein JS-Hijack) ──
   proximity = sanft, fängt nur in Nähe; kein Trapping bei langen Sektionen.
   Nur auf Leistungsseiten (body.lstg-snap), nicht global. */
html:has(body.lstg-snap) {
  scroll-snap-type: y proximity;
  scroll-padding-top: 6.5rem;   /* unter die fixe Nav */
}
body.lstg-snap .phero,
body.lstg-snap .psec {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.lstg-snap) { scroll-snap-type: none; }
}


/* ── FOOTER-FEINSCHLIFF ──────────────────────────────────────
   Die Marke schliesst die Seite ab, statt sie auslaufen zu lassen. */
.site-foot { padding-top: 3.4rem; }
.site-foot::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 180px; height: 2px;
  background: linear-gradient(90deg, var(--dpi-mint), rgba(var(--mint), 0));
}
.foot-col h4 {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--acc-txt);
}
.foot-col h4::before {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: var(--dpi-mint);
}
.foot-col a { position: relative; width: fit-content; }
.foot-col a:hover { color: var(--acc-txt); }
.foot-brand .foot-claim {
  margin-top: .9rem; font-size: .82rem; color: var(--txt-dim);
  letter-spacing: .12em; text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif; font-weight: 600;
}

/* ── NAVIGATION: Mint-Unterstrich beim Hover ─────────────────
   Ersetzt den reinen Farbwechsel, der auf hellem Grund kaum auffiel. */
#nl a:not(.nc) { position: relative; padding-bottom: 3px; }
#nl a:not(.nc)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--dpi-mint);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
#nl a:not(.nc):hover::after,
#nl a:not(.nc):focus-visible::after { transform: scaleX(1); }

/* CTA in der Navigation: Mint-Kante wie beim Hero-Button */
.nc { position: relative; }
.nc::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -3px;
  height: 2px; border-radius: 2px; background: var(--dpi-mint);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.nc:hover::after { transform: scaleX(1); }
.nc:hover { opacity: 1 !important; }