/* seiten.css – Gestaltung der SEO-Unterseiten (Neufassung 20.09.2026)
   Gilt für /marketing-aesthetische-medizin/, /meta-ads-arztpraxis/, /patientengewinnung-arztpraxis/,
   /recruiting-arztpraxis/, /wissen/ und /print-design/.

   Leitgedanke der Neufassung: weniger Kästen, mehr Redaktion. Gearbeitet wird mit Haarlinien,
   großen Ziffern, Spalten und viel Weißraum. Gefüllte Flächen gibt es nur noch dort, wo sie etwas
   bedeuten – beim Abschluss-Aufruf und bei der hervorgehobenen Kachel.
   Farben, Schrift und Formen bleiben die der übrigen Website: Manrope, Blau #0A6EBD → #3A9FE8. */

.lp { --lp-blau: #0A6EBD; --lp-blau-hell: #3A9FE8; --lp-tinte: #111827; --lp-grau: #6B7280; --lp-linie: #E7EAEF;
  --lp-grad: linear-gradient(135deg, #0A6EBD 0%, #3A9FE8 100%); --lp-ease: cubic-bezier(.22, .61, .36, 1);
  --lp-sec-y: clamp(4rem, 3rem + 4vw, 7rem); background: #fff; }

.lp-wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48em) { .lp-wrap { padding: 0 2.5rem; } }
.lp-schmal { max-width: 46rem; }
.lp-sec { padding: var(--lp-sec-y) 0; }
.lp-grau-bg { background: #F8F9FA; }
.lp-trenner { height: 1px; background: var(--lp-linie); max-width: 74rem; margin: 0 auto; }

/* Typografie */
.lp-ic { width: 1.125rem; height: 1.125rem; flex: none; }
.lp-eyebrow { margin: 0 0 .875rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-blau); }
.lp-eyebrow::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin: 0 .625rem .25rem 0; background: var(--lp-grad); vertical-align: middle; }
.lp-h1 { margin: 0; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; color: var(--lp-tinte); text-wrap: balance; }
.lp-grad-text { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-h2 { margin: 0; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; color: var(--lp-tinte); text-wrap: balance; }
.lp-h3 { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 800; color: var(--lp-tinte); }
.lp-lead { margin: 1.5rem 0 0; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.65; color: #4B5563; text-wrap: pretty; }
.lp-sub { margin: 1rem 0 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; color: var(--lp-grau); }
.lp-kopf { margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem); max-width: 44rem; text-align: center; }
.lp-kopf .lp-eyebrow::before { display: none; }
.lp-kopf .lp-sub { margin-left: auto; margin-right: auto; }
.lp-kopf-mitte { margin-left: auto; margin-right: auto; text-align: center; }
.lp-kopf-mitte .lp-eyebrow::before { display: none; }
.lp-kopf-mitte .lp-sub { margin-left: auto; margin-right: auto; }
.lp-text { max-width: 42rem; }
.lp-text p { margin: 0 0 1.125rem; font-size: 1.0625rem; line-height: 1.75; color: #374151; }
.lp-text p:last-child { margin-bottom: 0; }
.lp-text a, .lp-lead a, .lp-sub a, .lp-liste a, .lp-schritte a, .lp-gegen a { color: var(--lp-blau); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lp-text a:hover, .lp-lead a:hover, .lp-sub a:hover { text-decoration-thickness: 2px; }
.lp p, .lp li, .lp h1, .lp h2, .lp h3, .lp summary { overflow-wrap: break-word; }

/* Buttons */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .8rem 1.6rem; border-radius: .875rem;
  font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.lp-btn-primary { background: var(--lp-grad); color: #fff; box-shadow: 0 14px 30px -12px rgba(10, 110, 189, .65); }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(10, 110, 189, .75); }
.lp-btn-ghost { background: transparent; color: var(--lp-tinte); border: 1px solid var(--lp-linie); }
.lp-btn-ghost:hover { border-color: var(--lp-blau); color: var(--lp-blau); }
.lp-btn-weiss { background: #fff; color: var(--lp-blau); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .3); }
.lp-btn-weiss:hover { transform: translateY(-2px); }
.lp-btn:focus-visible { outline: 3px solid var(--lp-blau-hell); outline-offset: 3px; }

/* ── Hero: großzügig, asymmetrisch, ohne Rahmen ─────────────────────────────── */
.lp-hero { position: relative; padding: calc(4rem + clamp(2.5rem, 1.5rem + 4vw, 5rem)) 0 clamp(3rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.lp-hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 159, 232, .16), transparent 62%); pointer-events: none; }
.lp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.lp-hero-ohne-bild .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
.lp-hero-ohne-bild .lp-lead { max-width: 44rem; }
.lp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.75rem; font-size: .8125rem; color: #9CA3AF; }
.lp-crumb a { color: #9CA3AF; text-decoration: none; }
.lp-crumb a:hover { color: var(--lp-blau); }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.lp-hero-bild { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 25rem; }
.lp-hero-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.75rem; }
.lp-hero-tag { position: absolute; left: -1.25rem; bottom: 1.75rem; display: flex; align-items: center; gap: .5rem; padding: .7rem 1.05rem; border-radius: 999px;
  background: #fff; box-shadow: 0 18px 36px -16px rgba(10, 37, 64, .45); font-size: .8125rem; font-weight: 700; color: var(--lp-tinte); }
.lp-hero-tag .lp-ic { width: 1rem; height: 1rem; color: #16a34a; }
@media (max-width: 56.25em) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-bild { justify-self: start; max-width: 20rem; }
  .lp-hero-tag { left: .75rem; bottom: .75rem; }
}
@media (max-width: 30em) { .lp-hero-cta .lp-btn { width: 100%; } }

/* Kennzahlen unter dem Hero – weiße Karten wie die KPI-Karten der Startseite */
.lp-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-fakten div { padding: 1.5rem 1.375rem; border-radius: 1rem; background: #fff; border: 1px solid #EDF0F4; box-shadow: 0 1px 3px rgba(10, 37, 64, .04); }
.lp-fakten b { display: block; margin-bottom: .35rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 800; letter-spacing: -.02em; color: var(--lp-tinte); }
.lp-fakten span { display: block; font-size: .9375rem; line-height: 1.6; color: var(--lp-grau); }
@media (max-width: 48em) { .lp-fakten { grid-template-columns: minmax(0, 1fr); } }

/* ── Redaktionelle Liste mit großen Ziffern (statt Kästen) ──────────────────── */
.lp-punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.lp-punkte > div { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--lp-linie); }
.lp-punkte .lp-nr { display: block; margin-bottom: .75rem; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; color: var(--lp-blau-hell); }
.lp-punkte h3 { margin: 0 0 .6rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--lp-tinte); }
.lp-punkte p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--lp-grau); }
@media (max-width: 48em) { .lp-punkte { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ── Hervorgehobene Kachel: die einzige gefüllte Fläche im Textteil ─────────── */
.lp-akzent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); border-radius: 1.75rem; background: linear-gradient(135deg, #F2F8FE 0%, #EDF4FB 100%);
  border: 1px solid rgba(10, 110, 189, .12); }
.lp-akzent h3, .lp-akzent .lp-akzent-titel { margin: .5rem 0 .75rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 900; letter-spacing: -.025em; color: var(--lp-tinte); }
.lp-akzent p { margin: 0; font-size: 1rem; line-height: 1.7; color: #4B5563; }
.lp-akzent-bild { margin: 0; }
.lp-akzent-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; }
@media (max-width: 56.25em) { .lp-akzent { grid-template-columns: minmax(0, 1fr); } }

/* ── Ablauf: weiße Karten mit runder Ziffer, wie „In 4 Schritten“ auf der Startseite ── */
.lp-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-schritte li { position: relative; padding: 1.75rem 1.5rem; border-radius: 1.25rem; background: #fff; border: 1px solid #EDF0F4;
  box-shadow: 0 1px 3px rgba(10, 37, 64, .04); transition: transform .4s var(--lp-ease), box-shadow .35s, border-color .35s; }
.lp-schritte li:hover { transform: translateY(-4px); border-color: rgba(10, 110, 189, .2); box-shadow: 0 24px 50px -30px rgba(10, 60, 120, .35); }
.lp-schritt-nr { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 50%;
  background: var(--lp-grad); color: #fff; font-size: 1rem; font-weight: 800; box-shadow: 0 10px 20px -10px rgba(10, 110, 189, .7); }
.lp-schritte h3 { margin: 0 0 .4rem; font-size: 1.0625rem; font-weight: 800; color: var(--lp-tinte); }
.lp-schritte p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--lp-grau); }
@media (max-width: 64em) { .lp-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .lp-schritte { grid-template-columns: minmax(0, 1fr); } }

/* ── Gegenüberstellung „Häufig so / Besser so“ ──────────────────────────────── */
.lp-gegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); }
.lp-gegen > div > p.lp-gegen-kopf { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--lp-linie);
  font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lp-gegen .lp-schlecht .lp-gegen-kopf { color: #b91c1c; border-color: rgba(185, 28, 28, .25); }
.lp-gegen .lp-gut .lp-gegen-kopf { color: #15803d; border-color: rgba(21, 128, 61, .3); }
.lp-gegen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lp-gegen li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; font-size: 1rem; line-height: 1.65; color: #374151; }
.lp-gegen li span.z { font-weight: 800; }
.lp-gegen .lp-schlecht li span.z { color: #dc2626; }
.lp-gegen .lp-gut li span.z { color: #16a34a; }
@media (max-width: 48em) { .lp-gegen { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ── Häkchenliste ──────────────────────────────────────────────────────────── */
.lp-liste { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .875rem; }
.lp-liste li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; font-size: 1rem; line-height: 1.6; color: #374151; }
.lp-liste .lp-ic { margin-top: .2rem; color: #16a34a; }

/* ── Text und Bild nebeneinander ────────────────────────────────────────────── */
.lp-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.lp-split-bild { margin: 0; }
.lp-split-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.5rem; }
.lp-split-bild.lp-hoch img { aspect-ratio: 3 / 4; object-position: center 15%; }
@media (max-width: 56.25em) { .lp-split { grid-template-columns: minmax(0, 1fr); } .lp-split-bild { max-width: 26rem; width: 100%; } }

/* ── Zitat ─────────────────────────────────────────────────────────────────── */
.lp-zitat { max-width: 48rem; margin: 0 auto; text-align: center; }
.lp-zitat blockquote { margin: 0; }
.lp-zitat blockquote p { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; color: var(--lp-tinte); text-wrap: balance; }
.lp-zitat figcaption { margin-top: 1.5rem; font-size: .9375rem; color: var(--lp-grau); }
.lp-zitat figcaption strong { display: block; font-size: 1rem; color: var(--lp-tinte); }

/* ── FAQ: weiße Karten mit Pfeil, wie auf der Startseite ──────────────────── */
.lp-faq { display: grid; gap: .75rem; }
.lp-faq details { border-radius: 1rem; background: #fff; border: 1px solid #EDF0F4; box-shadow: 0 1px 3px rgba(10, 37, 64, .04); overflow: hidden; }
.lp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.75rem; padding: 1.125rem 1.5rem; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: var(--lp-tinte); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; flex: none; width: .625rem; height: .625rem; border-right: 2px solid var(--lp-blau); border-bottom: 2px solid var(--lp-blau);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--lp-ease); }
.lp-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lp-faq summary:hover { color: var(--lp-blau); }
.lp-faq summary:focus-visible { outline: 3px solid var(--lp-blau-hell); outline-offset: -3px; }
.lp-faq details p { margin: 0; padding: 0 1.5rem 1.375rem; font-size: .95rem; line-height: 1.7; color: var(--lp-grau); }

/* ── Weiterlesen: weiße Karten mit Pfeil ───────────────────────────────────── */
.lp-weiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-weiter a { display: grid; gap: .45rem; padding: 1.625rem 1.5rem; border-radius: 1.25rem; background: #fff; border: 1px solid #EDF0F4;
  box-shadow: 0 1px 3px rgba(10, 37, 64, .04); text-decoration: none; transition: transform .4s var(--lp-ease), box-shadow .35s, border-color .35s; }
.lp-weiter a:hover { transform: translateY(-4px); border-color: rgba(10, 110, 189, .2); box-shadow: 0 24px 50px -30px rgba(10, 60, 120, .35); }
.lp-weiter strong { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: 1.0625rem; font-weight: 800; color: var(--lp-tinte); letter-spacing: -.02em; }
.lp-weiter strong span { color: var(--lp-blau); transition: transform .25s var(--lp-ease); }
.lp-weiter a:hover strong span { transform: translateX(4px); }
.lp-weiter small { font-size: .9375rem; line-height: 1.6; color: var(--lp-grau); }
@media (max-width: 56.25em) { .lp-weiter { grid-template-columns: minmax(0, 1fr); } }

/* ── Wissensbereich ────────────────────────────────────────────────────────── */
.lp-wissen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 1.5rem + 2vw, 4rem); }
.lp-wissen article { padding: 1.75rem 0; border-top: 1px solid var(--lp-linie); }
.lp-wissen h3 { margin: .75rem 0 .5rem; font-size: 1.125rem; font-weight: 800; color: var(--lp-tinte); letter-spacing: -.02em; }
.lp-wissen p { margin: 0 0 .875rem; font-size: 1rem; line-height: 1.65; color: var(--lp-grau); }
.lp-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-blau-hell); }
.lp-status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--lp-blau-hell); }
.lp-wissen a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--lp-blau); text-decoration: none; }
.lp-wissen a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 48em) { .lp-wissen { grid-template-columns: minmax(0, 1fr); } }

/* ── Abschluss ─────────────────────────────────────────────────────────────── */
.lp-cta { position: relative; padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem); border-radius: 2rem; text-align: center; color: #fff;
  background: var(--lp-grad); overflow: hidden; }
.lp-cta::before { content: ""; position: absolute; left: -8%; bottom: -60%; width: 28rem; height: 28rem; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.lp-cta > * { position: relative; }
.lp-cta h2 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.lp-cta p { margin: 1rem auto 2rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.lp-cta p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Fußzeile der Unterseiten (eigenes Raster, unabhängig von Tailwind) ─────── */
.lp-fuss { background: #030712; padding: clamp(3rem, 2.5rem + 2vw, 4rem) 1.25rem clamp(1.5rem, 1.25rem + 1vw, 2rem); }
@media (min-width: 48em) { .lp-fuss { padding-left: 2.5rem; padding-right: 2.5rem; } }
.lp-fuss-innen { max-width: 74rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.lp-fuss-marke { display: flex; align-items: center; gap: .625rem; margin-bottom: .875rem; }
.lp-fuss-marke img { border-radius: 50%; object-fit: contain; }
.lp-fuss-marke span { font-weight: 700; color: #fff; }
.lp-fuss p.lp-fuss-text { margin: 0; max-width: 24rem; font-size: .9375rem; line-height: 1.65; color: #9CA3AF; }
.lp-fuss nav { display: grid; gap: .625rem; align-content: start; }
.lp-fuss nav p { margin: 0 0 .25rem; font-size: .875rem; font-weight: 700; color: #fff; }
.lp-fuss nav a { font-size: .9375rem; color: #9CA3AF; text-decoration: none; width: fit-content; transition: color .2s; }
.lp-fuss nav a:hover { color: #fff; }
.lp-fuss-unten { max-width: 74rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-fuss-unten p { margin: 0; font-size: .8125rem; color: #9CA3AF; }
.lp-fuss-recht { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.lp-fuss-recht a { font-size: .8125rem; color: #9CA3AF; text-decoration: none; }
.lp-fuss-recht a:hover { color: #fff; }
@media (max-width: 56.25em) { .lp-fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-fuss-innen > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 36em) { .lp-fuss-innen { grid-template-columns: minmax(0, 1fr); } .lp-fuss-unten { justify-content: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-weiter a, .lp-weiter strong span, .lp-faq summary::after { transition: none; }
  .lp-btn-primary:hover, .lp-btn-weiss:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Bento-Kacheln mit kleinen Animationen (21.09.2026 nachgerüstet)
   Nevio fand die reinen Textblöcke zu langweilig. Deshalb gibt es je Seite einen
   Kachelbereich im Stil von /shooting/: Lichtschein unter der Maus, Anheben beim
   Überfahren, und in den breiten Kacheln eine kleine Animation, sobald sie sichtbar sind.
   Die redaktionellen Teile (Ziffernliste, Ablauf, Gegenüberstellung) bleiben daneben bestehen.
   ══════════════════════════════════════════════════════════════════════════════ */
.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-kachel { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 1.75rem 1.5rem; border-radius: 1.5rem;
  background: #fff; border: 1px solid #EDF0F4; box-shadow: 0 1px 3px rgba(10, 37, 64, .04); --mx: 50%; --my: 0%;
  transition: transform .5s var(--lp-ease), box-shadow .35s, border-color .35s; }
.lp-grau-bg .lp-kachel { background: #fff; }
.lp-kachel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(58, 159, 232, .13), transparent 60%); }
.lp-kachel:hover { transform: translateY(-4px); border-color: rgba(10, 110, 189, .22); box-shadow: 0 26px 52px -30px rgba(10, 60, 120, .4); }
.lp-kachel:hover::before { opacity: 1; }
.lp-kachel > * { position: relative; }
.lp-kachel-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: #EBF4FC; color: var(--lp-blau);
  transition: transform .4s var(--lp-ease), background .3s, color .3s; }
.lp-kachel-ic .lp-ic { width: 1.35rem; height: 1.35rem; }
.lp-kachel:hover .lp-kachel-ic { transform: rotate(-6deg) scale(1.06); background: var(--lp-grad); color: #fff; }
.lp-kachel h3 { margin: 1rem 0 .4rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; color: var(--lp-tinte); }
.lp-kachel p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--lp-grau); }
.lp-kachel-breit { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; padding: 1.875rem 1.75rem; }
.lp-kachel-hoch { grid-row: span 2; }
@media (max-width: 64em) { .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-kachel-breit { grid-column: span 2; } }
@media (max-width: 44em) { .lp-bento { grid-template-columns: minmax(0, 1fr); } .lp-kachel-breit, .lp-kachel-hoch { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr); } }

/* Bildkachel */
.lp-kachel-bild { padding: 0; }
.lp-kachel-bild img { display: block; width: 100%; height: 100%; min-height: 12rem; object-fit: cover; transition: transform .8s var(--lp-ease); }
.lp-kachel-bild:hover img { transform: scale(1.04); }
.lp-kachel-bild figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .94);
  font-size: .8125rem; font-weight: 700; color: var(--lp-tinte); }

/* Gemeinsame Bühne für die kleinen Animationen */
.lp-viz { position: relative; border-radius: 1rem; background: linear-gradient(160deg, #f4f8fd 0%, #eef3f9 100%); border: 1px solid #E8EDF4; overflow: hidden; height: 11rem; }
.lp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .625rem; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 110, 189, .18);
  font-size: .75rem; font-weight: 700; color: var(--lp-blau); white-space: nowrap; }

/* 1 Anzeige im Feed: Beitrag erscheint, Daumen tippt, Anfrage geht raus */
.viz-feed { padding: .875rem; }
.viz-post { background: #fff; border: 1px solid #E8EDF4; border-radius: .75rem; overflow: hidden; box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .5); }
.viz-post-kopf { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; }
.viz-post-kopf i { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--lp-grad); flex: none; }
.viz-post-kopf b { display: block; font-size: .7rem; font-weight: 800; color: var(--lp-tinte); }
.viz-post-kopf small { display: block; font-size: .6rem; font-weight: 600; color: #9CA3AF; }
.viz-post-bild { height: 3.25rem; background: linear-gradient(120deg, #dbe7f3, #f1f5fa 45%, #dbe7f3); }
.viz-post-cta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .625rem; border-top: 1px solid #EEF2F7; font-size: .65rem; font-weight: 700; color: var(--lp-grau); }
.viz-post-cta em { font-style: normal; padding: .2rem .5rem; border-radius: .375rem; background: var(--lp-grad); color: #fff; }
.viz-tap { position: absolute; right: 1.6rem; bottom: 2.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--lp-blau); opacity: 0; }
.ist-da .viz-tap { animation: vizTap 4.5s var(--lp-ease) infinite; }
@keyframes vizTap { 0%, 55% { opacity: 0; transform: scale(.4); } 62% { opacity: .9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.6); } }

/* 2 Trichter: von Reichweite zu Terminen */
.viz-trichter { display: grid; align-content: center; gap: .5rem; padding: 1rem 1.25rem; }
.viz-trichter div { display: flex; align-items: center; gap: .625rem; }
.viz-trichter span.balken { height: 1.35rem; border-radius: .3rem; background: var(--lp-grad); transform-origin: 0 50%; transform: scaleX(.2); opacity: .9; }
.viz-trichter div:nth-child(1) span.balken { width: 100%; }
.viz-trichter div:nth-child(2) span.balken { width: 74%; }
.viz-trichter div:nth-child(3) span.balken { width: 48%; }
.viz-trichter div:nth-child(4) span.balken { width: 28%; }
.viz-trichter b { font-size: .7rem; font-weight: 800; color: var(--lp-grau); white-space: nowrap; }
.ist-da .viz-trichter span.balken { animation: vizBalken 3.4s var(--lp-ease) infinite; }
.ist-da .viz-trichter div:nth-child(2) span.balken { animation-delay: .18s; }
.ist-da .viz-trichter div:nth-child(3) span.balken { animation-delay: .36s; }
.ist-da .viz-trichter div:nth-child(4) span.balken { animation-delay: .54s; }
@keyframes vizBalken { 0% { transform: scaleX(.2); } 22%, 80% { transform: scaleX(1); } 100% { transform: scaleX(.2); } }

/* 3 Zielgruppe: Radar mit Treffer */
.viz-radar { display: grid; place-items: center; }
.viz-radar i.kreis { position: absolute; width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid rgba(10, 110, 189, .18); }
.viz-radar i.kreis.k2 { width: 4.75rem; height: 4.75rem; }
.viz-radar i.kreis.k3 { width: 2.5rem; height: 2.5rem; }
.viz-radar b.punkt { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: #cbd5e1; }
.viz-radar b.treffer { width: .6rem; height: .6rem; background: var(--lp-blau); box-shadow: 0 0 0 4px rgba(10, 110, 189, .16); }
.ist-da .viz-radar b.punkt:not(.treffer) { animation: vizDim 4s var(--lp-ease) infinite; }
.ist-da .viz-radar i.puls { position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--lp-blau); animation: vizPuls 4s var(--lp-ease) infinite; }
@keyframes vizDim { 0%, 25% { opacity: 1; } 45%, 85% { opacity: .22; } 100% { opacity: 1; } }
@keyframes vizPuls { 0%, 30% { opacity: 0; transform: scale(2.6); } 48%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* 4 Kalender: Termin rutscht in den Plan */
.viz-kalender { display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; align-content: center; padding: 1rem 1.25rem; }
.viz-kalender span { height: 1.5rem; border-radius: .3rem; background: #e3eaf3; }
.viz-kalender span.frei { background: #eef2f7; }
.viz-kalender span.neu { background: var(--lp-grad); opacity: 0; }
.ist-da .viz-kalender span.neu { animation: vizNeu 3.6s var(--lp-ease) infinite; }
.ist-da .viz-kalender span.neu:nth-of-type(2) { animation-delay: .5s; }
@keyframes vizNeu { 0%, 15% { opacity: 0; transform: translateY(-.4rem); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 5 Druck: Flyer stapeln sich */
.viz-druck { display: grid; place-items: center; }
.viz-druck i { position: absolute; width: 4.25rem; height: 5.75rem; border-radius: .4rem; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 12px 26px -18px rgba(10, 37, 64, .5); }
.viz-druck i.b1 { transform: rotate(-9deg) translateX(-2.1rem); }
.viz-druck i.b2 { transform: rotate(-2deg); }
.viz-druck i.b3 { transform: rotate(7deg) translateX(2.1rem); background: linear-gradient(160deg, #fff 60%, #EBF4FC); }
.viz-druck i::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: .55rem; height: 1.25rem; border-radius: .2rem; background: var(--lp-grad); opacity: .85; }
.viz-druck i::after { content: ""; position: absolute; left: .5rem; right: 1.2rem; top: 2.2rem; height: .3rem; border-radius: .15rem; background: #dde5ee;
  box-shadow: 0 .55rem 0 #dde5ee, 0 1.1rem 0 #e8edf3; }
.ist-da .viz-druck i { animation: vizDruck 5s var(--lp-ease) infinite; }
.ist-da .viz-druck i.b2 { animation-delay: .2s; } .ist-da .viz-druck i.b3 { animation-delay: .4s; }
@keyframes vizDruck { 0%, 12% { opacity: 0; transform: translateY(.75rem) rotate(0deg); } 26%, 88% { opacity: 1; } 100% { opacity: 0; } }
.ist-da .viz-druck i.b1 { animation-name: vizDruck1; } .ist-da .viz-druck i.b3 { animation-name: vizDruck3; }
@keyframes vizDruck1 { 0%, 12% { opacity: 0; transform: translateY(.75rem) rotate(0); } 26%, 88% { opacity: 1; transform: rotate(-9deg) translateX(-2.1rem); } 100% { opacity: 0; } }
@keyframes vizDruck3 { 0%, 12% { opacity: 0; transform: translateY(.75rem) rotate(0); } 26%, 88% { opacity: 1; transform: rotate(7deg) translateX(2.1rem); } 100% { opacity: 0; } }

/* 6 Wissen: Zeilen erscheinen wie ein wachsender Beitrag */
.viz-text { display: grid; align-content: center; gap: .55rem; padding: 1.25rem 1.5rem; }
.viz-text span { height: .55rem; border-radius: .275rem; background: #e3eaf3; transform-origin: 0 50%; }
.viz-text span:nth-child(1) { width: 62%; background: var(--lp-grad); }
.viz-text span:nth-child(2) { width: 100%; } .viz-text span:nth-child(3) { width: 88%; }
.viz-text span:nth-child(4) { width: 94%; } .viz-text span:nth-child(5) { width: 54%; }
.ist-da .viz-text span { animation: vizZeile 4.5s var(--lp-ease) infinite; }
.ist-da .viz-text span:nth-child(2) { animation-delay: .2s; } .ist-da .viz-text span:nth-child(3) { animation-delay: .4s; }
.ist-da .viz-text span:nth-child(4) { animation-delay: .6s; } .ist-da .viz-text span:nth-child(5) { animation-delay: .8s; }
@keyframes vizZeile { 0%, 8% { transform: scaleX(0); opacity: 0; } 22%, 86% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lp-kachel, .lp-kachel-ic, .lp-kachel-bild img { transition: none; }
  .lp-kachel:hover { transform: none; }
  .ist-da .viz-tap, .ist-da .viz-trichter span.balken, .ist-da .viz-radar b.punkt:not(.treffer), .ist-da .viz-radar i.puls,
  .ist-da .viz-kalender span.neu, .ist-da .viz-druck i, .ist-da .viz-text span { animation: none; }
  .viz-trichter span.balken, .viz-text span { transform: none; }
  .viz-kalender span.neu, .viz-druck i { opacity: 1; }
}

/* Sanftes Einblenden beim Scrollen – dieselbe Bewegung wie auf der Startseite */
.lp .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.lp .reveal.shown { opacity: 1; transform: none; }
.lp .reveal.d1 { transition-delay: .08s; } .lp .reveal.d2 { transition-delay: .16s; } .lp .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .lp .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════════
   Nachbesserung 21.09.2026 (Rückmeldung Nevio)
   Keine losen Kacheln am Zeilenende, kein harter Schnitt zur grauen Fläche,
   ruhigerer Hero: kein Bild auf dem Handy, zentriert wenn es gar kein Bild gibt.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Letzte Zeile füllt die Breite aus – die Spannen rechnet der Seitenbauer aus. */
@media (min-width: 64.0625em) {
  .lp-bento > [data-s3="2"], .lp-schritte > [data-s3="2"] { grid-column: span 2; }
  .lp-bento > [data-s3="3"], .lp-schritte > [data-s3="3"] { grid-column: span 3; }
}
@media (min-width: 44.0625em) and (max-width: 64em) {
  .lp-bento > [data-s2="2"] { grid-column: span 2; }
}
@media (min-width: 40.0625em) and (max-width: 64em) {
  .lp-schritte > [data-s2="2"] { grid-column: span 2; }
}
/* Eine über die volle Breite gezogene Kachel soll nicht wie ein Balken wirken. */
.lp-bento > [data-s3="3"] .lp-viz, .lp-bento > [data-s2="2"]:not(.lp-kachel-breit) .lp-viz { height: 9rem; }

/* Abstand zwischen den Kennzahlen und der folgenden Fläche */
.lp-fakten { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* Hero: auf dem Handy trägt das Bild nichts bei und drückt den Text nach unten */
@media (max-width: 56.25em) { .lp-hero-bild { display: none; } }

/* Hero ohne Bild: mittig statt halb leer */
.lp-hero-ohne-bild .lp-hero-grid { justify-items: center; text-align: center; }
.lp-hero-ohne-bild .lp-crumb, .lp-hero-ohne-bild .lp-hero-cta { justify-content: center; }
.lp-hero-ohne-bild .lp-lead { margin-left: auto; margin-right: auto; max-width: 40rem; }
.lp-hero-ohne-bild { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Überschrift: „Patientengewinnung“ wurde mitten im Wort getrennt */
.lp-h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.lp-lead { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); max-width: 33rem; }

/* Gegenüberstellung ohne Gegenspalte: zwei Spalten für die Punkte selbst */
.lp-gegen-solo { grid-template-columns: minmax(0, 1fr); }
.lp-gegen-solo .lp-schlecht ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; }
@media (max-width: 48em) { .lp-gegen-solo .lp-schlecht ul { grid-template-columns: minmax(0, 1fr); } }

/* Wissen: der Hinweis auf noch fehlende Beiträge soll auffallen */
.lp-status { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .6rem; border-radius: 999px;
  background: #FFF7E6; color: #B45309; border: 1px solid rgba(180, 83, 9, .18); letter-spacing: .06em; }
.lp-status-punkt { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; animation: lp-puls 2.4s ease-in-out infinite; }
@keyframes lp-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .lp-status-punkt { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════════
   23 – Animationen statt Fotos (21.09.2026)
   Nevio: auf der Print-Seite kein Kopfbild, und in „Material“ und „Werberecht“
   keine Aufnahmen von Personen. An deren Stelle stehen gezeichnete Szenen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Bühne im Hero – an der Stelle, wo vorher das Bild stand */
.lp-hero-viz { position: relative; justify-self: end; width: 100%; max-width: 25rem; aspect-ratio: 4 / 5;
  border-radius: 1.75rem; overflow: hidden; border: 1px solid #E4EBF3;
  background: linear-gradient(160deg, #F7FAFD 0%, #EDF3FA 55%, #E8F0F9 100%); }
@media (max-width: 56.25em) { .lp-hero-viz { justify-self: start; max-width: 20rem; aspect-ratio: 5 / 4; } }
@media (max-width: 30em) { .lp-hero-viz { display: none; } }

/* ── Print: Stapel gedruckter Sachen, Beschriftung wechselt ────────────────── */
.vw-buehne { position: absolute; left: 12%; right: 12%; top: 12%; bottom: 26%; }
.vw-blatt { position: absolute; inset: 0; border-radius: .75rem; background: #fff; border: 1px solid #E1E9F3;
  box-shadow: 0 20px 40px -26px rgba(16, 42, 76, .6); }
.vw-b3 { transform: rotate(-7deg) translate(-6%, 4%); background: #F4F8FC; }
.vw-b2 { transform: rotate(4deg) translate(5%, 2%); background: #FAFCFE; }
.vw-b1 { padding: 1rem .9rem; display: flex; flex-direction: column; animation: vw-heben 7s var(--lp-ease) infinite; }
.vw-bild { display: block; height: 46%; border-radius: .5rem; background: linear-gradient(150deg, #CBE0F6 0%, #E8F2FB 60%, #DCEAF8 100%); margin-bottom: .85rem; }
.vw-titel { display: block; height: .62rem; width: 72%; border-radius: 999px; background: var(--lp-grad); opacity: .8; margin-bottom: .55rem; }
.vw-zeile { display: block; height: .34rem; border-radius: 999px; background: #E6ECF4; margin-bottom: .32rem; }
.vw-zeile.kurz { width: 48%; }
.vw-mark { position: absolute; right: .9rem; bottom: .9rem; width: 1.35rem; height: 1.35rem; color: rgba(10, 110, 189, .35); }
@keyframes vw-heben {
  0%, 26% { transform: translateY(0) rotate(0deg); box-shadow: 0 20px 40px -26px rgba(16, 42, 76, .6); }
  46%, 84% { transform: translateY(-8%) rotate(-1.5deg); box-shadow: 0 34px 56px -28px rgba(16, 42, 76, .6); }
  100% { transform: translateY(0) rotate(0deg); }
}
.vw-tipp { position: absolute; left: -12%; bottom: 6%; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 999px; background: #fff; border: 1px solid #E1E9F3;
  box-shadow: 0 14px 28px -18px rgba(16, 42, 76, .6); font-size: .75rem; font-weight: 700; color: var(--lp-tinte);
  opacity: 0; transform: translateY(6px); animation: vw-tipp 7s var(--lp-ease) infinite; }
.vw-tipp svg { width: .8rem; height: .8rem; color: #16a34a; }
@keyframes vw-tipp { 0%, 34% { opacity: 0; transform: translateY(6px); } 48%, 84% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } }

/* die beiden Beschriftungen wechseln sich ab – das ist der Kern der Seite */
.vw-labels { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 2.6rem; }
.vw-labels span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .75rem; border-radius: 999px; background: #fff; border: 1px solid #E1E9F3;
  box-shadow: 0 14px 30px -20px rgba(16, 42, 76, .55); font-size: .8125rem; font-weight: 700; color: var(--lp-grau);
  transition: opacity .5s; }
.vw-l2 { color: var(--lp-blau); border-color: rgba(10, 110, 189, .3); background: #F5FAFE; }
.vw-l1 { animation: vw-labelA 7s ease-in-out infinite; }
.vw-l2 { animation: vw-labelB 7s ease-in-out infinite; }
@keyframes vw-labelA { 0%, 34% { opacity: 1; } 46%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vw-labelB { 0%, 34% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ── Drehtag: Sucherbild mit laufender Aufnahme ─────────────────────────────── */
.viz-drehtag { display: grid; grid-template-rows: 1fr auto; gap: .6rem; padding: .875rem; }
.vd-rahmen { position: relative; border-radius: .6rem; overflow: hidden;
  background: linear-gradient(170deg, #DDE8F4 0%, #C9DCEF 100%); }
.vd-ecke { position: absolute; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .9); }
.vd-ecke.e1 { left: .5rem; top: .5rem; border-right: none; border-bottom: none; }
.vd-ecke.e2 { right: .5rem; top: .5rem; border-left: none; border-bottom: none; }
.vd-ecke.e3 { left: .5rem; bottom: .5rem; border-right: none; border-top: none; }
.vd-ecke.e4 { right: .5rem; bottom: .5rem; border-left: none; border-top: none; }
.vd-person { position: absolute; left: 50%; bottom: 0; width: 34%; height: 58%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 28% 28% 0 0; background: rgba(255, 255, 255, .75); }
.vd-person::before { content: ""; position: absolute; left: 50%; top: -34%; width: 46%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: rgba(255, 255, 255, .85); }
.vd-rec { position: absolute; left: .85rem; top: .85rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .1em; color: #b91c1c; }
.vd-rec::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #dc2626; animation: vd-blink 1.6s steps(1, end) infinite; }
.vd-zeit { position: absolute; right: .85rem; top: .85rem; font-size: .625rem; font-weight: 800; letter-spacing: .06em; color: rgba(17, 24, 39, .6); }
@keyframes vd-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
.vd-streifen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.vd-streifen i { height: 1.75rem; border-radius: .3rem; background: #fff; border: 1px solid #E3EAF3; opacity: .45;
  animation: vd-lauf 4.8s var(--lp-ease) infinite; }
.vd-streifen i:nth-child(2) { animation-delay: .35s; }
.vd-streifen i:nth-child(3) { animation-delay: .7s; }
.vd-streifen i:nth-child(4) { animation-delay: 1.05s; }
@keyframes vd-lauf { 0%, 70%, 100% { opacity: .4; transform: translateY(0); } 18%, 42% { opacity: 1; transform: translateY(-3px); border-color: rgba(10, 110, 189, .35); } }

/* ── Freigabe: Motiv geht an die Praxis und kommt bestätigt zurück ──────────── */
.viz-freigabe { display: grid; place-items: center; }
.vf-karte { position: relative; width: 62%; padding: 1rem .9rem 1.1rem; border-radius: .7rem; background: #fff;
  border: 1px solid #E1E9F3; box-shadow: 0 18px 34px -20px rgba(16, 42, 76, .5); }
.vf-zeile { display: block; height: .34rem; border-radius: 999px; background: #E6ECF4; margin-bottom: .4rem; }
.vf-zeile.z1 { height: 1.9rem; border-radius: .35rem; background: linear-gradient(135deg, #D3E5F8, #EAF3FC); margin-bottom: .6rem; }
.vf-zeile.z3 { width: 58%; }
.vf-haken { position: absolute; right: -.8rem; bottom: -.8rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: #16a34a; color: #fff; box-shadow: 0 12px 22px -12px rgba(22, 163, 74, .9);
  opacity: 0; transform: scale(.5); animation: vf-ok 5.5s var(--lp-ease) infinite; }
.vf-haken svg { width: 1.1rem; height: 1.1rem; }
@keyframes vf-ok { 0%, 40% { opacity: 0; transform: scale(.5); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.vf-stempel { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%) rotate(-4deg);
  padding: .3rem .7rem; border-radius: .35rem; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #15803d; border: 2px solid rgba(21, 128, 61, .35); opacity: 0; animation: vf-stempeln 5.5s var(--lp-ease) infinite; }
@keyframes vf-stempeln { 0%, 55% { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(1.4); } 66%, 88% { opacity: 1; transform: translateX(-50%) rotate(-4deg) scale(1); } 100% { opacity: 0; } }

/* Animationsfläche im hervorgehobenen Block */
.lp-akzent-viz .lp-viz { height: 13rem; }

@media (prefers-reduced-motion: reduce) {
  .vw-b1, .vw-tipp, .vw-l1, .vw-l2, .vd-streifen i, .vd-rec::before, .vf-haken, .vf-stempel { animation: none; }
  .vw-tipp { opacity: 1; transform: none; }
  .vw-l1 { opacity: 0; } .vw-l2 { opacity: 1; }
  .vf-haken { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   24 – Fußzeile der Unterseiten neu aufgeteilt (21.09.2026, Wunsch Nevio)
   Links die Marke mit Anschrift und Kontakt (zählt auch für die lokale
   Auffindbarkeit), rechts drei klar getrennte Spalten. Die Rechtstexte standen
   vorher doppelt – in der Spalte und noch einmal in der Zeile darunter.
   ══════════════════════════════════════════════════════════════════════════════ */
.lp-fuss-innen { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.lp-fuss-spalte-marke { max-width: 26rem; }
.lp-fuss p.lp-fuss-text { margin-bottom: 1.25rem; }

.lp-fuss-kontakt, .lp-fuss-kontakt span { display: grid; gap: .4rem; font-style: normal; font-size: .9375rem; line-height: 1.55; color: #B6BEC9; }
.lp-fuss-kontakt a { display: block; color: #D8DEE6; text-decoration: none; width: fit-content; transition: color .2s; }
.lp-fuss-kontakt a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lp-fuss-gebiet { margin: .9rem 0 0 !important; font-size: .8125rem !important; color: #98A2B0 !important; }

/* Spaltenköpfe deutlicher absetzen */
.lp-fuss nav p { margin: 0 0 .9rem; padding-bottom: .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lp-fuss nav { gap: .7rem; }
.lp-fuss-unten-claim { color: #98A2B0 !important; }

@media (max-width: 64em) and (min-width: 36.0625em) {
  .lp-fuss-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-fuss-spalte-marke { grid-column: 1 / -1; max-width: 34rem; }
}
@media (max-width: 36em) {
  .lp-fuss-innen { grid-template-columns: minmax(0, 1fr); }
  .lp-fuss-spalte-marke { grid-column: auto; }
}