/* ============================================================
   Werbeseiten (/lp/*) — gemeinsame Klassen fuer die Google-Ads-
   Landingpages. Bewusst getrennt von style.css: die Werbeseiten
   duerfen sich aendern, ohne dass eine normale Seite betroffen ist.
   ============================================================ */

/* ============================================================
   Werbeseite Webdesign — eigene Klassen (lp-*), damit style.css
   unberührt bleibt und keine andere Seite betroffen ist.
   ============================================================ */

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: absolute; left: 1rem; top: 1rem; padding: .75rem 1.25rem; background: var(--color-neon-1); color: var(--color-dark-1); font-weight: 700; border-radius: var(--radius); z-index: 1000; }

/* ---- Nav-Dropdown (identisch zu den übrigen Seiten) ---- */
.nav-item-dropdown { position: relative; }
.nav-trigger { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--color-dark-1, #0D2B1A); border-radius: var(--radius, 12px); padding: .5rem; list-style: none; margin: .5rem 0 0; box-shadow: 0 18px 40px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease; z-index: 60; }
.nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: .6rem .75rem; border-radius: 8px; color: #fff; text-decoration: none; }
.nav-dropdown a small { display: block; font-size: .78rem; opacity: .7; font-weight: 400; }
.nav-dropdown a:hover, .nav-dropdown a.active { background: rgba(61,224,41,.14); }
.nav-mobile-only { display: none; }
@media (max-width: 899px) {
  .nav-desktop-only { display: none; }
  .nav-mobile-only { display: block; }
  .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding-left: .5rem; }
  /* Das Mobil-Panel ist hell, die Flaeche des Dropdowns wird transparent.
     Die weisse Schrift aus der Desktop-Regel blieb dabei stehen: fuenf
     unsichtbare Menuepunkte. Farbe hier zuruecknehmen. */
  .nav-dropdown a { color: var(--color-ink, #1A1A1A); }
  .nav-dropdown a small { color: var(--color-muted, #666); opacity: 1; }
  .nav-dropdown a:hover, .nav-dropdown a.active { background: rgba(27,122,74,.10); color: var(--color-green-2, #1B7A4A); }
  /* Der Aufklapper "Leistungen" war 27px hoch und klebte an seinen Nachbarn. */
  .nav-item-dropdown.nav-mobile-only summary { min-height: 44px; display: flex; align-items: center; padding: .4rem 0; }
}

/* ---- Hero: Text links, Formular rechts ---- */
.lp-hero { position: relative; background: var(--color-dark-1, #0D2B1A); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.lp-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 15% 0%, rgba(61,224,41,.16), transparent 60%); pointer-events: none; }
.lp-hero .container { position: relative; z-index: 1; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 899px) { .lp-hero-grid { grid-template-columns: 1fr; } }

.lp-eyebrow { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neon-1, #3DE029); background: rgba(61,224,41,.12); border: 1px solid rgba(61,224,41,.35); border-radius: 999px; padding: .4rem .9rem; margin: 0 0 1.1rem; }
.lp-hook { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; margin: 0 0 1rem; }
.lp-hook .neon { color: var(--color-neon-1, #3DE029); }
.lp-sub { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; opacity: .92; max-width: 46ch; margin: 0 0 1.4rem; }
.lp-metarow { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.lp-metarow li { display: flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 600; }
.lp-metarow svg { width: 18px; height: 18px; stroke: var(--color-neon-1, #3DE029); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp-google { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .5rem .9rem; font-size: .9rem; }
.lp-google:hover { background: rgba(255,255,255,.12); }
.lp-google .stars { color: #FBBC05; letter-spacing: .06em; }

/* ---- Formularkarte ---- */
.lp-formcard { background: #fff; color: var(--color-ink, #1A1A1A); border-radius: 18px; padding: clamp(1.25rem, 2.4vw, 1.9rem); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.lp-formcard h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0 0 .4rem; }
.lp-formcard .lp-form-sub { font-size: 1rem; color: var(--color-muted, #666); margin: 0 0 1.1rem; }
.lp-form { display: grid; gap: .8rem; }
.lp-form label { display: block; font-size: .95rem; font-weight: 600; }
.lp-form .label-text { display: block; margin-bottom: .3rem; }
.lp-form .req { color: #B03030; }
.lp-form input, .lp-form textarea, .lp-form select { width: 100%; font-family: inherit; font-size: 1rem; line-height: 1.4; font-weight: 400; padding: .7rem .8rem; border: 1px solid #d8ded8; border-radius: 10px; background: #fff; color: inherit; }
.lp-form input:focus, .lp-form textarea:focus, .lp-form select:focus { outline: 2px solid var(--color-green-2, #1B7A4A); outline-offset: 1px; border-color: transparent; }
.lp-form textarea { resize: vertical; min-height: 84px; }
.lp-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .lp-form-row2 { grid-template-columns: 1fr; } }
.lp-form .btn { width: 100%; justify-content: center; margin-top: .2rem; }
.lp-form-legal { font-size: 1rem; color: var(--color-muted, #666); line-height: 1.5; margin: .2rem 0 0; }
.lp-form-legal a { color: inherit; }
.lp-form-status { display: none; font-size: 1rem; padding: .7rem .8rem; border-radius: 10px; }
.lp-form-status.error { display: block; background: #fdecec; color: #B03030; }
.lp-success { display: none; background: #eefbe9; border: 1px solid rgba(27,122,74,.3); border-radius: 14px; padding: 1.25rem; }
.lp-success h3 { margin: 0 0 .5rem; color: var(--color-green-2, #1B7A4A); }
.lp-success p { margin: 0; font-size: 1rem; }

/* ---- Inhaltsblöcke ---- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 899px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-card { background: #fff; border: 1px solid #e6ebe6; border-radius: 16px; padding: 1.4rem; }
.lp-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.lp-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: #333; }
.lp-card .lp-card-num { display: inline-block; font-family: 'Archivo Black', system-ui, sans-serif; color: var(--color-green-2, #1B7A4A); font-size: .9rem; margin-bottom: .6rem; }

.lp-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 899px) { .lp-nums { grid-template-columns: repeat(2, 1fr); } }
.lp-num { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1.1rem; }
.lp-num .n { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--color-neon-1, #3DE029); line-height: 1.1; }
.lp-num .l { font-size: .82rem; opacity: .85; margin-top: .4rem; line-height: 1.45; }

.lp-quote { margin: 1.6rem 0 0; padding: 1.1rem 1.3rem; border-left: 4px solid var(--color-neon-1, #3DE029); background: rgba(255,255,255,.05); border-radius: 0 12px 12px 0; }
.lp-quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.lp-quote cite { display: block; margin-top: .5rem; font-size: .85rem; font-style: normal; opacity: .8; }

.lp-faq details { border-bottom: 1px solid #e0e6e0; padding: .95rem 0; }
.lp-faq summary { cursor: pointer; font-weight: 700; font-size: 1.03rem; 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(--color-green-2, #1B7A4A); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq p { margin: .7rem 0 0; line-height: 1.65; color: #333; }

#sichtbarkeits-garantie { scroll-margin-top: 110px; }

.lp-closing { text-align: center; }
.lp-closing h2 { margin-bottom: .6rem; }
.lp-closing p { max-width: 58ch; margin: 0 auto 1.3rem; }
.lp-stand { text-align: center; font-size: 1rem; color: var(--color-muted, #666); margin-top: 2rem; }

/* ---- Video: Klick-zum-Laden (uebernommen aus index.html) ---- */
.video-embed { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--color-dark-1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  cursor: pointer; background: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-facade::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(13,43,26,0.10), rgba(13,43,26,0.28)); }
.video-facade-icon { position: relative; z-index: 2; display: inline-flex; align-items: center;
  justify-content: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--color-neon-1); color: var(--color-dark-1); font-size: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: transform .2s ease; }
.video-duration { position: absolute; z-index: 2; right: 14px; top: 12px;
  background: rgba(0,0,0,0.72); color: #fff; font-size: .82rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 4px; letter-spacing: .02em; }
.video-facade:hover .video-facade-icon,
.video-facade:focus-visible .video-facade-icon { transform: scale(1.08); }
.video-facade:focus-visible { outline: 3px solid var(--color-neon-1); outline-offset: 3px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video-privacy { max-width: 880px; margin: .5rem auto 0; text-align: center;
  color: var(--color-muted); font-size: .72rem; opacity: .72; }
.video-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Sales-Video: Split auf dunklem Grund */
.video-section { background: var(--color-dark-1); }
.video-paar { display: grid; grid-template-columns: 2.1fr 1fr; gap: 2.5rem; align-items: center;
  max-width: 1200px; margin: 0 auto; }
.video-paar .video-embed { max-width: none;
  box-shadow: 0 0 0 1px rgba(61,224,41,.30), 0 0 55px rgba(61,224,41,.18), 0 20px 50px rgba(0,0,0,.5); }
.video-text .eyebrow { background: rgba(61,224,41,.14); color: var(--color-neon-1); }
.video-text h2 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.3;
  margin: .9rem 0 .8rem; color: #fff; }
.video-text h2 .hl { color: var(--color-neon-1); }
.video-wer { color: var(--color-light-2); font-size: .86rem; margin: 0 0 1.4rem; opacity: .85; }
.btn-neon { display: inline-block; background: var(--color-neon-1); color: var(--color-dark-1);
  text-decoration: none; font-weight: 700; padding: .85rem 1.35rem; border-radius: var(--radius); }
.btn-neon:hover { background: var(--color-neon-3); }
.video-section .video-privacy { color: var(--color-light-2); text-align: left;
  max-width: none; margin: .6rem 0 0; }
@media (max-width: 900px) {
  .video-paar { grid-template-columns: 1fr; gap: 1.6rem; }
  .video-section .video-privacy { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .video-facade:hover .video-facade-icon,
  .video-facade:focus-visible .video-facade-icon { transform: none; }
}

/* ============================================================
   Nachtrag 19.09.2026 nach der visuellen Pruefung
   ============================================================ */

/* Befund 5: .prose aus style.css bringt margin:0 auto mit. Zusammen mit
   max-width rueckte der Textblock am Desktop 216px nach rechts, weg von
   seiner Ueberschrift. Eigene Klasse statt .prose. */
.lp-prose { max-width: 58ch; margin-left: 0; margin-right: 0; }
.lp-prose p { margin: 0 0 1rem; line-height: 1.7; font-size: 1.05rem; }
.lp-prose p:last-child { margin-bottom: 0; }

/* Befund 6: 68ch ergibt bei Inter rund 88 Zeichen je Zeile, der Layout-
   Standard verlangt 66 bis 74. 58ch trifft den Korridor. */
.lp-faq { max-width: 58ch; }

/* Befund 1: .btn-secondary ist dunkelgruen auf dunkelgruen, also unsichtbar.
   Auf dunklem Grund die helle Variante. */
.section-dark .btn-secondary,
.lp-hero .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.section-dark .btn-secondary:hover,
.lp-hero .btn-secondary:hover {
  background: #fff;
  color: var(--color-dark-1, #0D2B1A);
  border-color: #fff;
}

/* Befund 7: Telefon und E-Mail in der Fusszeile der Seite lagen 2px
   auseinander und waren 16px hoch. */
.lp-stand a {
  display: inline-block;
  padding: .45rem .2rem;
  margin: 0 .35rem;
}

/* Hinweis aus der Pruefung: die Aufklapper waren 26px hoch. */
.lp-faq summary { padding: .35rem 0; min-height: 44px; }

/* ---- Handlungsweg auf dem Handy (Befund B5) ----
   Unter 900px steht das Formular unter dem Text, im ersten Bildschirm ist
   also kein Knopf sichtbar: der Nav-Aufruf liegt im eingeklappten Menue.
   Deshalb ein Sprungknopf unter der Metarow und eine feste Leiste unten. */
.lp-mobil-cta { display: none; }
.lp-leiste { display: none; }
@media (max-width: 899px) {
  .lp-mobil-cta { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin: 0 0 1.2rem; }
  .lp-mobil-cta .btn { justify-content: center; }
  .lp-mobil-cta .lp-anruf {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 56px; min-height: 48px; padding: 0 .9rem; border-radius: var(--radius, 12px);
    border: 1px solid rgba(255,255,255,.45); color: #fff; text-decoration: none; font-weight: 700;
  }
  .lp-mobil-cta .lp-anruf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .lp-leiste {
    display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(13,43,26,.97); box-shadow: 0 -6px 24px rgba(0,0,0,.28);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .lp-leiste[data-sichtbar="ja"] { transform: translateY(0); }
  .lp-leiste .btn { width: 100%; justify-content: center; min-height: 48px; }
  .lp-leiste .lp-anruf {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; min-height: 48px; border-radius: var(--radius, 12px);
    border: 1px solid rgba(255,255,255,.45); color: #fff; text-decoration: none;
  }
  .lp-leiste .lp-anruf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
  body { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .lp-leiste { transition: none; } }

/* Ausstiege sind Textlinks, keine Knoepfe (Befund B6): auf einer Werbeseite
   gehoert die Knopf-Form dem einen Weg zum Formular. */
.lp-textlink {
  display: inline-block; color: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--color-neon-1, #3DE029); text-decoration-thickness: 2px;
  padding: .4rem 0;
}
.lp-textlink:hover { text-decoration-thickness: 3px; }
.section-dark .lp-textlink { color: #fff; }

/* Fokus-Ring in der CI statt Browser-Blau (Tastatur-Bedienung) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-neon-1, #3DE029);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Nachtrag 2: Restbefunde des Mobil-Gates */

/* Auswahlfeld: Hoehe wie die Eingabefelder, sonst 19px Tap-Ziel */
.lp-form select { min-height: 48px; padding: .7rem .8rem; border: 1px solid #d8ded8; border-radius: 10px; background: #fff; color: inherit; appearance: auto; }

/* Video-Block: die Texte kommen aus style.css und sind dort 11,5 bzw. 13,8px */
.lp-hero + .video-section .video-privacy,
.video-section .video-privacy { font-size: 1rem; }
.video-section .video-wer { font-size: 1rem; }
.video-section .video-duration { font-size: .95rem; }
/* Der Knopf selbst erbt die Browser-Schrift (13,3px). */
.video-section .video-facade { font-size: 1rem; }

/* Textlinks auf Tap-Hoehe */
.lp-textlink { min-height: 44px; display: inline-flex; align-items: center; }

/* Bei 320px wuchsen Grid-Kinder ueber den Container hinaus: Grid-Items haben
   min-width:auto und geben dem Inhalt nach. Text stand dann 7px vom Rand. */
.lp-hero-grid > *, .lp-mobil-cta > *, .lp-leiste > *, .lp-cards > *, .lp-nums > * { min-width: 0; }
.lp-hero-grid, .lp-mobil-cta, .lp-leiste, .lp-cards, .lp-nums { max-width: 100%; }
@media (max-width: 380px) {
  .lp-mobil-cta { grid-template-columns: 1fr; }
  .lp-mobil-cta .lp-anruf { width: 100%; }
}

/* ---- FAQ kuerzen: ab der siebten Frage erst auf Wunsch (Mobil-Gate) ----
   Ohne JS: die Liste steht vollstaendig im HTML, nur der Rest ist zu.
   Ein <details>-Element traegt die weiteren Fragen. */
.lp-faq-rest { margin-top: 0; }
.lp-faq-rest > summary {
  cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--color-green-2, #1B7A4A);
  padding: .8rem 0; border-bottom: 1px solid #e0e6e0;
}
.lp-faq-rest > summary::-webkit-details-marker { display: none; }
.lp-faq-rest > summary::after { content: "▾"; }
.lp-faq-rest[open] > summary::after { content: "▴"; }
.lp-faq-rest[open] > summary { color: var(--color-muted, #666); font-weight: 600; }

/* ---- Portfolio (aus webdesign-koeln.html uebernommen) ----
   Der Block war zuerst ohne diese Regeln eingebaut: das Pfeil-Icon wurde
   1152px gross, jede Karte 1985px hoch, der Block zwei Drittel der Seite.
   Auf der Werbeseite steht er auf hellem Grund, deshalb keine .section-dark-
   Korrekturen. Der Wisch-Slider unter 768px braucht .pf-card direkt als Kind,
   weil die Parallax-Huellen hier entfernt wurden. */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2.25rem; }
.pf-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-light-1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s, border-color .2s; }
.pf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-dark-3); }
.pf-thumb { position: relative; background: var(--color-dark-1); padding: 26px 10px 10px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pf-thumb::before { content: ""; position: absolute; top: 10px; left: 14px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 12px 0 0 #febc2e, 24px 0 0 var(--color-neon-1); }
.pf-shot { aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: #0a2416; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pf-card:hover .pf-thumb img { transform: scale(1.04); }
/* Geräte-Ansicht (Laptop + Handy): das Motiv bringt seinen Rahmen selbst mit, deshalb kein gezeichnetes Browserfenster */
.pf-geraete .pf-thumb { padding: 0; background: #eef3f0; }
.pf-geraete .pf-thumb::before { display: none; }
.pf-geraete .pf-shot { border-radius: 0; background: transparent; }
.pf-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pf-body h3 { font-size: 1.15rem; margin: 0; }
.pf-body .branche { font-size: 1rem; color: var(--color-muted); line-height: 1.45; flex: 1; margin: 0; }
.pf-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem; color: var(--color-dark-2); margin-top: .25rem; min-height: 44px; }
.pf-link:hover { color: var(--color-dark-1); }
.pf-link svg { width: 15px; height: 15px; flex: none; }
.pf-swipe-hint { display: none; }
@media (max-width: 767px) {
  .pf-grid { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: .5rem 1rem 1.25rem; margin: 2.25rem -1rem 0; scrollbar-width: none; }
  .pf-grid::-webkit-scrollbar { display: none; }
  .pf-grid > .pf-card { flex: 0 0 calc(100% - 2.5rem); scroll-snap-align: start; }
  .pf-swipe-hint { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--color-muted); font-size: 1rem; margin-top: 1rem; }
  .pf-swipe-hint span { letter-spacing: .15em; }
  .pf-grid .pf-card.reveal { opacity: 1; transform: none; }
}

/* ---- Lesebreite der breiten Spalte (91 bis 93 Zeichen gemessen) ---- */
/* style.css Zeile 1686 setzt "main .section-intro p { max-width: 68ch }".
   68ch sind bei Inter rund 86 Zeichen, der Korridor endet bei 74.
   Gleiche Spezifitaet reicht nicht, deshalb mit main davor. */
main .section-intro p, main .lp-closing p { max-width: 56ch; }
main .section-intro p { margin-left: 0; margin-right: 0; }
main .lp-closing p { margin-left: auto; margin-right: auto; }

/* ---- Fusszeilen-Links: 17px hoch mit 6px Abstand ---- */
.site-footer .footer-bottom a { display: inline-block; padding: .5rem .25rem; }
@media (max-width: 899px) {
  .site-footer .footer-bottom span { line-height: 2.2; }
}

/* ---- Ablauf: vier Karten standen in einem Drei-Spalten-Raster ---- */
.lp-cards.lp-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lp-cards.lp-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 899px) { .lp-cards.lp-cards-4 { grid-template-columns: 1fr; } }

/* Nachtrag 3: Hinweise der Schlussabnahme

   style.css setzt .btn-large auf dem Handy auf .88rem — der grosse Knopf ist
   dort kleiner beschriftet als der normale. Nur fuer die Werbeseiten geradezogen. */
@media (max-width: 767px) {
  .lp-hero .btn-large, .lp-leiste .btn, .lp-mobil-cta .btn,
  main .btn-large { font-size: 1rem; }
}

/* Der Cookie-Banner liegt auf z-index 1000, die Handlungsleiste auf 90: beim
   Erstbesuch blieben von der Leiste 16px als abgeschnittener Streifen stehen.
   Die Leiste wartet jetzt, bis die Cookie-Entscheidung gefallen ist. */
.lp-leiste[data-warte="ja"] { transform: translateY(110%); }

/* ============================================================
   HEROES DER WERBESEITEN — Umbau 21.09.2026
   Adrian: "Formular raus aus dem Hero, CTA springt nach unten,
   Bilder und Trust fehlen komplett." Dazu: es soll nach Profi
   aussehen, nicht nach Baukasten.

   Zwei eigene Bauarten, je aus einem echten Markenfakt:
   - Webdesign: echte Kundenseiten wechseln in einem Fenster,
     dahinter laeuft das vorhandene Hero-Video gedimmt.
     Aussage: du siehst in zwei Sekunden, was du kaufst.
   - SEO: eine neutrale Rangliste, in der "Dein Betrieb" von
     Platz 47 auf Platz 1 klettert. Kein Google-Nachbau, keine
     erfundenen Firmen (Regel aus motiv-montage.md, Abschnitt 4).
     Aussage: 2.000+ Platz-1-Rankings, woertlich gezeigt.
   ============================================================ */

.lph { position: relative; overflow: hidden; background: #071b10; color: #fff; isolation: isolate; }
.lph > .container { position: relative; z-index: 4; padding-top: clamp(2.2rem, 4.5vw, 3.4rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }

/* Ebenen, ausgeschrieben: 0 Motiv · 1 Duotone · 2 Schleier · 3 Vignette · 4 Inhalt */
.lph-motiv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lph-duotone { position: absolute; inset: 0; z-index: 1; mix-blend-mode: color; background: rgba(27,122,74,.55); pointer-events: none; }
.lph-schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(4,18,11,.94) 0%, rgba(4,18,11,.88) 42%, rgba(4,18,11,.55) 72%, rgba(4,18,11,.68) 100%); }
.lph-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 220px rgba(0,0,0,.65); }
.lph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%); }

/* ---- Raster: Text links, Buehne rechts ---- */
.lph-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (max-width: 979px) { .lph-grid { grid-template-columns: 1fr; gap: 2rem; } }
.lph-grid > * { min-width: 0; }

/* ---- Text ---- */
.lph-badge { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neon-1, #3DE029); background: rgba(61,224,41,.10); border: 1px solid rgba(61,224,41,.30);
  border-radius: 999px; padding: .38rem .9rem; margin: 0 0 .9rem; line-height: 1.35; }
.lph-hook { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.04; margin: 0 0 .85rem; letter-spacing: -.01em; }
.lph-hook .neon { color: var(--color-neon-1, #3DE029); }
.lph-sub { font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.6; opacity: .93; max-width: 46ch; margin: 0 0 1.2rem; }
.lph-sub strong { color: #fff; }

/* ---- Beweis-Zeile: drei Zahlen, kleiner als die Hook (Rangfolge-Regel) ---- */
.lph-zahlen { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.25rem; padding: 0; list-style: none;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); }
.lph-zahlen li { flex: 1 1 0; min-width: 0; padding: .7rem .85rem; border-right: 1px solid rgba(255,255,255,.12); }
.lph-zahlen li:last-child { border-right: 0; }
.lph-zahlen .n { display: block; font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--color-neon-1, #3DE029); line-height: 1.1; }
.lph-zahlen .l { display: block; font-size: .84rem; opacity: .82; margin-top: .25rem; line-height: 1.35; }
@media (max-width: 540px) { .lph-zahlen { flex-direction: column; } .lph-zahlen li { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .lph-zahlen li:last-child { border-bottom: 0; } }

/* ---- Handlung: ein Knopf, daneben Anruf, darunter Entlastung ---- */
.lph-cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0 0 1rem; }
.lph-cta .btn { min-height: 52px; display: inline-flex; align-items: center; font-size: 1.02rem; }
.lph-tel { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; padding: 0 1.1rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius, 12px); color: #fff; text-decoration: none; font-weight: 700; }
.lph-tel:hover { background: rgba(255,255,255,.1); }
.lph-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.lph-entlastung { opacity: .8; margin: 0 0 1rem; display: flex; align-items: center; gap: .45rem; }
.lph-entlastung svg { width: 17px; height: 17px; stroke: var(--color-neon-1, #3DE029); fill: none; stroke-width: 2.5; flex: none; }

/* ---- Bewertungs-Pill ---- */
.lph-google { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .5rem .95rem; font-size: .93rem; }
.lph-google:hover { background: rgba(255,255,255,.14); }
.lph-google .stars { color: #FBBC05; letter-spacing: .05em; }

/* ============================================================
   BUEHNE A — Fenster mit wechselnden Kundenseiten (Webdesign)
   ============================================================ */
.lph-fenster { position: relative; border-radius: 16px; overflow: hidden; background: #0a2416;
  box-shadow: 0 0 0 1px rgba(61,224,41,.22), 0 28px 70px rgba(0,0,0,.55); }
.lph-fenster-leiste { display: flex; align-items: center; gap: .45rem; padding: .6rem .9rem; background: rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.1); }
.lph-fenster-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; display: block; }
.lph-fenster-leiste i:nth-child(2) { background: #febc2e; }
.lph-fenster-leiste i:nth-child(3) { background: var(--color-neon-1, #3DE029); }
.lph-fenster-leiste .adresse { flex: 1; margin-left: .5rem; font-size: .76rem; color: rgba(255,255,255,.62);
  background: rgba(0,0,0,.28); border-radius: 6px; padding: .25rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lph-buehne { position: relative; aspect-ratio: 16/10; }
.lph-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .7s ease; }
.lph-buehne img.an { opacity: 1; }
.lph-fenster-fuss { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .95rem; background: rgba(0,0,0,.34); font-size: .86rem; }
.lph-fenster-fuss .name { font-weight: 700; }
.lph-fenster-fuss .ergebnis { color: var(--color-neon-1, #3DE029); font-weight: 700; white-space: nowrap; }
.lph-punkte { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; }
/* Trefferflaeche 44px, sichtbarer Punkt bleibt klein (Handy-Gate) */
.lph-punkte { gap: 0; }
.lph-punkte button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.lph-punkte button::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: background .2s, transform .2s; }
.lph-punkte button[aria-current="true"]::before { background: var(--color-neon-1, #3DE029); transform: scale(1.35); }
.lph-punkte button:hover::before { background: rgba(255,255,255,.55); }

/* ============================================================
   BUEHNE B — Rangliste: "Dein Betrieb" klettert nach oben (SEO)
   Bewusst KEIN Google-Nachbau: eigene Farben, eigene Form,
   Wettbewerber ohne Namen. Die Form eines Ergebniseintrags ist
   Allgemeingut, das Erscheinungsbild eines Anbieters nicht.
   ============================================================ */
.lph-rang { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.1rem; box-shadow: 0 28px 70px rgba(0,0,0,.45); }
.lph-rang-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.lph-rang-kopf .such { display: flex; align-items: center; gap: .5rem; font-size: .92rem; opacity: .9; min-width: 0; }
.lph-rang-kopf .such svg { width: 16px; height: 16px; stroke: rgba(255,255,255,.6); fill: none; stroke-width: 2; flex: none; }
.lph-rang-kopf .such b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lph-rang-kopf .platz { font-size: .82rem; opacity: .72; white-space: nowrap; }
.lph-rang-liste { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.lph-rang-liste li { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s; }
.lph-rang-liste .rang { font-family: 'Archivo Black', system-ui, sans-serif; font-size: .95rem; opacity: .55; min-width: 1.9rem; }
.lph-rang-liste .zeilen { flex: 1; min-width: 0; }
.lph-rang-liste .titel { display: block; height: 9px; border-radius: 4px; background: rgba(255,255,255,.26); width: 62%; }
.lph-rang-liste .text { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); width: 88%; margin-top: .42rem; }
.lph-rang-liste li.du { background: rgba(61,224,41,.13); border-color: rgba(61,224,41,.45); }
.lph-rang-liste li.du .rang { opacity: 1; color: var(--color-neon-1, #3DE029); }
.lph-rang-liste li.du .zeilen { display: flex; flex-direction: column; gap: .2rem; }
.lph-rang-liste li.du .titel { height: auto; width: auto; background: none; font-weight: 700; font-size: .98rem; color: #fff; }
.lph-rang-liste li.du .text { height: auto; width: auto; background: none; font-size: .84rem; opacity: .8; margin-top: 0; }
.lph-rang-fuss { margin: .8rem 0 0; font-size: .84rem; opacity: .72; line-height: 1.5; }

/* ============================================================
   Logo-Band direkt unter dem Hero — der Beweis vor dem Text
   ============================================================ */
.lph-logos { background: var(--color-bg, #fff); border-bottom: 1px solid var(--color-light-1, #e6ebe6); padding: 1.6rem 0; }
.lph-logos .kopf { text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted, #666); margin: 0 0 1.1rem; }
.lph-band { display: flex; gap: 2.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lph-spur { display: flex; align-items: center; gap: 2.5rem; flex: 0 0 auto; animation: lphLauf 38s linear infinite; }
.lph-band:hover .lph-spur { animation-play-state: paused; }
@keyframes lphLauf { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 2.5rem)); } }
.lph-spur img { flex: 0 0 auto; max-height: 46px; width: auto; object-fit: contain; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .lph-band { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lph-band [aria-hidden="true"] { display: none; }
  .lph-spur { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 1.6rem 2.5rem; }
}

/* ============================================================
   Mobil: Poster-Standbild. Buehne ueber den Text, Motiv ruhig.
   ============================================================ */
@media (max-width: 979px) {
  .lph > .container { padding-top: clamp(2rem, 7vw, 3rem); }
  .lph-grid { display: flex; flex-direction: column; }
  .lph-buehne-wrap { order: -1; margin-bottom: .4rem; }
  .lph-hook { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .lph-cta { flex-direction: row; }
  .lph-cta .btn { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
  .lph-motiv { display: none; }
  .lph { background: linear-gradient(165deg, #0b2a19 0%, #071b10 60%, #061710 100%); }
  .lph-schleier, .lph-vignette, .lph-duotone { display: none; }
  .lph-canvas { display: none; }
  .lph-fenster-fuss { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ============================================================
   TRUST-BAUSTEINE (21.09.2026) — Adrian: "wichtig ist vor allem,
   dass wir Trust aufbauen, viele Beweise, Testimonials, es ist
   eine Google-Ads-Konvertierungsseite."
   ============================================================ */

/* ---- Große Kundenstimme mit Foto und Ranking-Beleg ---- */
.lp-stimme-gross { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; margin-bottom: 2.5rem; }
@media (max-width: 899px) { .lp-stimme-gross { grid-template-columns: 1fr; } }
.lp-stimme-foto { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 18px 44px rgba(0,0,0,.14); }
@media (max-width: 899px) { .lp-stimme-foto { max-width: 200px; } }
.lp-stimme-body blockquote { margin: 0 0 .9rem; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; font-weight: 600; color: var(--color-ink, #1A1A1A); }
.lp-stimme-body cite { display: block; font-style: normal; margin-bottom: 1.4rem; }
.lp-stimme-body cite strong { display: block; font-size: 1.02rem; }
.lp-stimme-body cite span { display: block; font-size: .95rem; color: var(--color-muted, #666); }
.lp-beleg { margin: 0; }
.lp-beleg img { width: 100%; max-width: 440px; height: auto; border-radius: 12px; border: 1px solid var(--color-light-1, #e6ebe6); display: block; }
.lp-beleg figcaption { font-size: .86rem; color: var(--color-muted, #666); margin-top: .6rem; line-height: 1.5; max-width: 52ch; }

/* ---- Zwei kleine Stimmen nebeneinander ---- */
.lp-stimmen-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 899px) { .lp-stimmen-paar { grid-template-columns: 1fr; } }
.lp-stimme-klein { margin: 0; background: var(--color-bg, #fff); border: 1px solid var(--color-light-1, #e6ebe6); border-radius: 16px; padding: 1.4rem; }
.lp-stimme-klein .sterne { color: #FBBC05; letter-spacing: .08em; margin-bottom: .6rem; }
.lp-stimme-klein blockquote { margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.6; }
.lp-stimme-klein figcaption strong { display: block; }
.lp-stimme-klein figcaption span { font-size: .9rem; color: var(--color-muted, #666); }
.lp-stimmen-fuss { margin-top: 1.2rem; }

/* ---- Beweis-Bilder mit Quellenzeile ---- */
.lp-belege { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.8rem; }
@media (max-width: 899px) { .lp-belege { grid-template-columns: 1fr; } }
.lp-belege.einspaltig { grid-template-columns: 1fr; max-width: 900px; }
.lp-beleg-karte { margin: 0; background: var(--color-bg, #fff); border: 1px solid var(--color-light-1, #e6ebe6); border-radius: 16px; padding: 1rem; }
.section-dark .lp-beleg-karte { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.lp-beleg-karte img { width: 100%; height: auto; border-radius: 10px; display: block; }
.lp-beleg-karte figcaption { font-size: .86rem; line-height: 1.5; margin-top: .75rem; color: var(--color-muted, #666); }
.section-dark .lp-beleg-karte figcaption { color: rgba(255,255,255,.78); }
.lp-beleg-karte figcaption b { color: var(--color-green-2, #1B7A4A); }
.section-dark .lp-beleg-karte figcaption b { color: var(--color-neon-1, #3DE029); }

/* ---- Abschluss mit Formular ---- */
.lp-abschluss { background: var(--color-dark-1, #0D2B1A); color: #fff; }
.lp-abschluss .eyebrow { background: rgba(61,224,41,.14); color: var(--color-neon-1, #3DE029); }
.lp-abschluss h2 { color: #fff; }
.lp-abschluss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 979px) { .lp-abschluss-grid { grid-template-columns: 1fr; } }
.lp-abschluss-grid > * { min-width: 0; }
.lp-abschluss-punkte { list-style: none; margin: 1.4rem 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.lp-abschluss-punkte li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1rem; line-height: 1.5; }
.lp-abschluss-punkte svg { width: 20px; height: 20px; stroke: var(--color-neon-1, #3DE029); fill: none; stroke-width: 2.5; flex: none; margin-top: .15rem; }
.lp-abschluss-tel { font-size: 1rem; opacity: .9; }
.lp-abschluss-tel a { color: var(--color-neon-1, #3DE029); font-weight: 700; padding: .4rem 0; display: inline-block; }
.lp-abschluss .lp-stand { color: rgba(255,255,255,.62); margin-top: 2.5rem; }
.lp-abschluss .lp-stand a { color: rgba(255,255,255,.82); }

/* Der Wortregen lief bis unter die Headline und drueckte dort den Kontrast.
   Ein Schleier zwischen Regen und Text: links deckend, rechts offen, damit
   die Buehne den Regen weiter zeigt. */
.lph-regenschleier { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(4,18,11,.93) 0%, rgba(4,18,11,.9) 38%, rgba(4,18,11,.4) 62%, rgba(4,18,11,.25) 100%); }
@media (max-width: 979px) { .lph-regenschleier { background: rgba(4,18,11,.88); } }

/* Handy-Gate: Kleinschrift auf mindestens 16px (Fliesstext-Regel) */
.lph-entlastung { font-size: 1rem; }
.lph-rang-fuss { font-size: 1rem; }
.lph-logos .kopf { font-size: 1rem; letter-spacing: .05em; }
.lph-zahlen .l { font-size: .95rem; }
.lph-fenster-leiste .adresse { font-size: .9rem; }
.lph-fenster-fuss { font-size: .95rem; }
.lph-google { font-size: 1rem; }

/* ---- Fußzeile des Heros: Bewertung + Gesicht nebeneinander ---- */
.lph-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.lph-person { display: inline-flex; align-items: center; gap: .65rem; font-size: .95rem; line-height: 1.3; }
.lph-person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 22%;
  border: 2px solid rgba(61,224,41,.5); flex: none; }
.lph-person b { display: block; font-size: 1rem; }
.lph-person span { opacity: .85; }

/* ---- Der Hero war zu dunkel und zu flach. Licht von rechts oben,
        Bodenlicht unter der Bühne, feines Raster für Tiefe. ---- */
.lph::before { content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -18%; right: -8%; width: 68%; height: 118%;
  background: radial-gradient(48% 42% at 62% 38%, rgba(61,224,41,.26), transparent 70%),
              radial-gradient(38% 34% at 78% 66%, rgba(27,122,74,.34), transparent 72%); }
.lph::after { content: ""; position: absolute; z-index: 1; pointer-events: none; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%); }
.lph > .container { z-index: 5; }

/* Die Rangliste bekommt Bodenlicht, damit sie nicht im Dunkeln steht */
.lph-rang { position: relative; background: linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: 0 0 0 1px rgba(61,224,41,.18), 0 28px 80px rgba(0,0,0,.5), 0 0 70px rgba(61,224,41,.10); }
.lph-rang::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 44px; z-index: -1;
  background: radial-gradient(50% 100% at 50% 0%, rgba(61,224,41,.34), transparent 72%); filter: blur(10px); }
.lph-fenster { box-shadow: 0 0 0 1px rgba(61,224,41,.26), 0 28px 80px rgba(0,0,0,.55), 0 0 70px rgba(61,224,41,.10); }

/* Der eigene Eintrag pulst einmal kurz, wenn er oben ankommt */
@keyframes lphAngekommen {
  0% { box-shadow: 0 0 0 0 rgba(61,224,41,.55); }
  100% { box-shadow: 0 0 0 16px rgba(61,224,41,0); }
}
.lph-rang-liste li.du.oben { animation: lphAngekommen .9s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .lph-rang-liste li.du.oben { animation: none; } }

/* Foto statt Buchstaben-Kachel in den Bewertungskarten */
.review-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---- "Du hast nichts zu verlieren" — Risikoumkehr vor dem Formular ---- */
.lp-fair { background: var(--color-light-2, #f4f8f4); }
.lp-fair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.8rem; }
@media (max-width: 899px) { .lp-fair-grid { grid-template-columns: 1fr; } }
.lp-fair-karte { background: var(--color-bg, #fff); border: 1px solid var(--color-light-1, #e6ebe6); border-radius: 16px; padding: 1.4rem; }
.lp-fair-karte .sym { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(61,224,41,.14); margin-bottom: .8rem; }
.lp-fair-karte .sym svg { width: 22px; height: 22px; stroke: var(--color-green-2, #1B7A4A); fill: none; stroke-width: 2; }
.lp-fair-karte h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.lp-fair-karte p { margin: 0; font-size: 1rem; line-height: 1.6; color: #333; }
.lp-fair-satz { margin-top: 1.6rem; font-size: 1.1rem; font-weight: 600; line-height: 1.55; max-width: 62ch; }
.lp-fair-satz .neon-text { color: var(--color-green-2, #1B7A4A); }

/* ============================================================
   Portfolio als Slider (Adrian 21.09.: nicht alles auf einen
   Schlag zeigen, immer drei, dann weiter nach rechts).
   Überschreibt das Raster aus dem übernommenen Portfolio-CSS.
   ============================================================ */
.lp-slider { position: relative; }
.lp-slider .pf-grid {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .35rem .25rem 1rem; margin: 2.25rem -.25rem 0;
}
.lp-slider .pf-grid::-webkit-scrollbar { display: none; }
.lp-slider .pf-grid > .pf-card { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; }
@media (max-width: 1100px) { .lp-slider .pf-grid > .pf-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 767px) {
  .lp-slider .pf-grid { gap: 1rem; padding: .35rem 1rem 1.25rem; margin: 2.25rem -1rem 0; }
  .lp-slider .pf-grid > .pf-card { flex: 0 0 calc(100% - 2.5rem); }
}
.lp-slider-steuer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.lp-slider-knopf {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-light-1, #e6ebe6);
  background: var(--color-bg, #fff); color: var(--color-dark-1, #0D2B1A); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .15s, opacity .15s;
}
.section-dark .lp-slider-knopf { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.lp-slider-knopf:hover { background: var(--color-neon-1, #3DE029); color: var(--color-dark-1, #0D2B1A); transform: scale(1.06); }
.lp-slider-knopf[disabled] { opacity: .3; cursor: default; transform: none; }
.lp-slider-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.lp-slider-zaehler { font-size: 1rem; color: var(--color-muted, #666); font-weight: 600; }
.section-dark .lp-slider-zaehler { color: rgba(255,255,255,.75); }
.lp-slider-knoepfe { display: flex; gap: .6rem; }

/* Beleg-Zeile unter dem Zitat: die Zahl hinter der Aussage */
.review-beleg { margin: .2rem 0 0; padding-top: .7rem; border-top: 1px solid var(--color-light-1, #e6ebe6);
  font-size: .95rem; line-height: 1.45; color: var(--color-green-2, #1B7A4A); font-weight: 600; }

/* ---- "Nichts zu verlieren" mit Adrian: zwei Spalten, Foto links ---- */
.lp-fair-oben { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (max-width: 899px) { .lp-fair-oben { grid-template-columns: 1fr; } }
.lp-fair-oben > * { min-width: 0; }
.lp-fair-portraet { position: relative; }
.lp-fair-portraet img { width: 100%; height: auto; border-radius: 20px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,.16); }
@media (max-width: 899px) { .lp-fair-portraet { max-width: 260px; } }
.lp-fair-schild { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap;
  background: var(--color-dark-1, #0D2B1A); color: #fff; border-radius: 999px; padding: .5rem 1rem; font-size: .95rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.25); }
/* Auf schmalen Schirmen ragte das Schild aus dem Bild: dort mitlaufend
   statt mittig gesetzt, und der Text darf umbrechen. */
@media (max-width: 520px) {
  .lp-fair-portraet { max-width: 100%; }
  .lp-fair-schild { position: static; transform: none; display: inline-block; white-space: normal;
    margin-top: .8rem; text-align: center; }
}
.lp-fair-schild b { color: var(--color-neon-1, #3DE029); }
.lp-fair-zitat { margin: 0 0 1.1rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; font-weight: 600; }
.lp-fair-zitat .neon-text { color: var(--color-green-2, #1B7A4A); }

/* ---- Ansprechpartner-Zeile neben dem Formular ---- */
.lp-wer { display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16); }
.lp-wer img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; border: 2px solid rgba(61,224,41,.5); }
.lp-wer div { min-width: 0; }
.lp-wer b { display: block; font-size: 1.02rem; }
.lp-wer span { font-size: .95rem; opacity: .82; line-height: 1.45; }


/* ============================================================
   BEWERTUNGSKARTEN — die Regeln standen im seiten-eigenen
   <style> von seo-agentur-koeln.html, nicht in style.css.
   Ohne sie wurde das Google-Symbol bildschirmfüllend.
   Derselbe Fall wie beim Portfolio: beim Übernehmen eines
   Bausteins immer prüfen, wo seine Regeln wohnen.
   ============================================================ */
.reviews-section { background: var(--color-bg); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 960px; margin: 0 auto; }
.review-card { background: var(--color-bg); border: 1px solid var(--color-light-1); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.review-card-header { display: flex; align-items: center; gap: 1rem; }
.review-avatar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-neon-1); color: var(--color-dark-1); font-family: var(--font-headline); font-size: 1.1rem; flex-shrink: 0; }
.review-author { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.review-author strong { color: var(--color-dark-1); font-size: .95rem; font-weight: 700; }
.review-author span { color: var(--color-muted); font-size: .82rem; }
.review-google-icon { width: 22px; height: 22px; flex-shrink: 0; }
.review-stars { color: #FBBC05; letter-spacing: 2px; font-size: 1rem; }
.review-text { color: var(--color-text); font-size: 1rem; line-height: 1.55; margin: 0; }
.review-footer { display: flex; justify-content: space-between; align-items: center; padding-top: .85rem; border-top: 1px solid var(--color-light-1); font-size: .82rem; }
.review-footer .verified { color: var(--color-muted); }
.review-footer a { color: var(--color-dark-2); text-decoration: none; font-weight: 600; }
.reviews-summary { text-align: center; color: var(--color-muted); font-size: .9rem; margin-top: 2rem; }
.reviews-summary strong { color: var(--color-dark-1); }
.reviews-summary .stars-inline { color: #FBBC05; letter-spacing: 2px; }
.reviews-swipe-hint { display: none; }

/* Das Symbol bekommt zusätzlich eine harte Grenze, damit es nie
   wieder wachsen kann, egal welches Stylesheet fehlt. */
.review-google-icon { width: 22px !important; height: 22px !important; flex: none; }

/* ============================================================
   Matrix-Regen auf den dunklen Flächen (Adrian 21.09.: "sieht
   super stark aus, gerade in den dunklen Flächen — außer im Hero")
   ============================================================ */
.regen-flaeche { position: relative; overflow: hidden; }
.regen-flaeche > .container { position: relative; z-index: 2; }
.lp-regen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%); }
@media (max-width: 767px) { .lp-regen { display: none; } }

/* ---- Bild mit Kundin: Seitenbild im Ablauf-/Methodenblock ---- */
.lp-bild-block { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 899px) { .lp-bild-block { grid-template-columns: 1fr; } }
.lp-bild-block > * { min-width: 0; }
.lp-bild-figur { margin: 0; position: relative; }
.lp-bild-figur img { width: 100%; height: auto; border-radius: 20px; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.lp-bild-figur figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(13,43,26,.92); color: #fff; border-radius: 12px; padding: .7rem .9rem; font-size: .95rem; line-height: 1.45; }
.lp-bild-figur figcaption b { color: var(--color-neon-1, #3DE029); }

/* "rund 31.000 EUR" brach hinter dem Tausenderpunkt um. */
.lp-num .n { hyphens: none; overflow-wrap: normal; word-break: keep-all; font-size: clamp(1.25rem, 2.2vw, 1.85rem); }
.lp-nums { align-items: stretch; }
.lp-num { display: flex; flex-direction: column; }

.reviews-summary { font-size: 1rem; }


/* ============================================================
   TESTIMONIALS — neu gestaltet (21.09.2026)
   Adrian: "Es gibt viel schönere Varianten. Mach das schön,
   wie ein Webdesigner." Zwei Formen:
   A gross: Foto ragt aus der Karte, Zitat traegt die Flaeche
   B kompakt: Zitat gross, Person als Zeile darunter
   ============================================================ */

/* ---- Form A: das grosse Stück ---- */
.tm-gross { position: relative; display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; margin-top: 2.5rem; }
@media (max-width: 899px) { .tm-gross { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; } }
.tm-gross > * { min-width: 0; }

.tm-foto { position: relative; margin: .5rem 0 0; position: sticky; top: 96px; }
@media (max-width: 899px) { .tm-foto { position: relative; top: auto; margin: 0 auto; max-width: 220px; } } /* relative statt static (02.10.2026): sonst hängt .tm-marke am Textblock und liegt über Name/Bildunterschrift */
.tm-foto img { width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.tm-foto::before { content: ""; position: absolute; inset: auto -14px -14px -14px; height: 62%;
  border-radius: 20px; background: linear-gradient(160deg, rgba(61,224,41,.22), rgba(61,224,41,0));
  z-index: -1; }
.tm-marke { position: absolute; right: -14px; bottom: 18px; background: var(--color-neon-1, #3DE029);
  color: var(--color-dark-1, #0D2B1A); border-radius: 14px; padding: .6rem .85rem; text-align: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.3); max-width: 160px; }
.tm-marke b { display: block; font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.25rem; line-height: 1; }
.tm-marke span { display: block; font-size: .8rem; line-height: 1.25; margin-top: .25rem; font-weight: 600; }
@media (max-width: 899px) { .tm-marke { right: -8px; bottom: 10px; max-width: 140px; } }

.tm-text { position: relative; }
.tm-text::before { content: "\201C"; position: absolute; left: -.12em; top: -.46em;
  font-family: 'Archivo Black', Georgia, serif; font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  color: var(--color-neon-1, #3DE029); opacity: .2; pointer-events: none; }
.tm-text blockquote { margin: 0; position: relative; }
.tm-text blockquote p { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.62; }
.tm-text blockquote p:first-child { font-size: clamp(1.22rem, 1.85vw, 1.55rem); line-height: 1.48; font-weight: 600; }
.tm-text blockquote p:last-child { margin-bottom: 0; }
.tm-text .ps { font-size: 1rem; opacity: .78; font-weight: 400; }
.section-dark .tm-text blockquote { color: #fff; }

.tm-wer { display: flex; align-items: center; gap: .85rem; margin-top: 1.6rem;
  padding-top: 1.3rem; border-top: 1px solid var(--color-light-1, #e6ebe6); }
.section-dark .tm-wer { border-top-color: rgba(255,255,255,.16); }
.tm-wer .sterne { color: #FBBC05; letter-spacing: .06em; font-size: 1.05rem; }
.tm-wer b { display: block; font-size: 1.05rem; }
.tm-wer span { display: block; font-size: .95rem; color: var(--color-muted, #666); }
.section-dark .tm-wer span { color: rgba(255,255,255,.72); }
.tm-wer .quelle { margin-left: auto; font-size: .92rem; color: var(--color-muted, #666); }
.section-dark .tm-wer .quelle { color: rgba(255,255,255,.65); }
.tm-wer .quelle a { color: inherit; }
@media (max-width: 620px) { .tm-wer { flex-wrap: wrap; } .tm-wer .quelle { margin-left: 0; flex-basis: 100%; } }

/* ---- Form B: kompakt, zwei nebeneinander ---- */
.tm-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem; }
.tm-paar.einzeln { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 899px) { .tm-paar { grid-template-columns: 1fr; } }
.tm-klein { position: relative; background: var(--color-bg, #fff); border: 1px solid var(--color-light-1, #e6ebe6);
  border-radius: 20px; padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.section-dark .tm-klein { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.tm-klein blockquote { margin: 0 0 auto; font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.6; font-weight: 600; }
.section-dark .tm-klein blockquote { color: #fff; }
.tm-klein .tm-wer { margin-top: 1.4rem; }
.tm-klein-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex: none; }

/* Beleg unter einem Testimonial */
.tm-beleg { margin: 1.4rem 0 0; }
.tm-beleg img { width: 100%; max-width: 460px; height: auto; border-radius: 12px; display: block;
  border: 1px solid var(--color-light-1, #e6ebe6); }
.section-dark .tm-beleg img { border-color: rgba(255,255,255,.16); }
.tm-beleg figcaption { font-size: .92rem; color: var(--color-muted, #666); margin-top: .6rem; line-height: 1.5; max-width: 52ch; }
.section-dark .tm-beleg figcaption { color: rgba(255,255,255,.7); }

/* ============================================================
   KOPFZEILE der Werbeseiten (Adrian 21.09.: "was ist mit der
   Navigation, muss die nicht verändert werden?")
   Richtig: Die volle Navigation führt den Besucher von der
   Seite weg, für die ein Klick bezahlt wurde. Geblieben sind
   Logo, Telefonnummer und der eine Weg zum Formular. Fallstudien
   und Über uns stehen in der Fußzeile, für alle, die wirklich
   danach suchen.
   ============================================================ */
.lp-kopf .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-kopf .brand { display: inline-flex; align-items: center; }
.lp-kopf-rechts { display: flex; align-items: center; gap: .9rem; }
.lp-kopf-tel { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  color: var(--color-dark-1, #0D2B1A); font-weight: 700; font-size: 1rem; padding: .5rem .2rem; min-height: 44px; }
.lp-kopf-tel:hover { color: var(--color-green-2, #1B7A4A); }
.lp-kopf-tel svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.lp-kopf .nav-cta { min-height: 48px; display: inline-flex; align-items: center; }
@media (max-width: 620px) {
  .lp-kopf-tel span { display: none; }
  .lp-kopf-tel { min-width: 48px; justify-content: center; border: 1px solid var(--color-light-1, #e6ebe6); border-radius: 12px; }
  .lp-kopf .nav-cta { font-size: 1rem; padding-left: .85rem; padding-right: .85rem; }
  .lp-kopf .brand-logo { max-width: 120px; }
}

/* Naht nach den Regen-Flächen war 60px statt 56px */
.regen-flaeche { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }


/* ============================================================
   BEWERTUNGS-SLIDER — Adrian 21.09.: Volkers gekürztes Zitat
   wirkte deplatziert, die eckigen Klammern sahen aus, als hätte
   er es selbst geschrieben. In einem Slider mit mehreren echten
   Bewertungen ist eine Kürzung normal und fällt nicht auf.
   Regeln aus seo-agentur-koeln.html übernommen.
   ============================================================ */
.reviews-swipe-hint { display: none; }
.reviews-carousel { position: relative; max-width: 1080px; margin: 0 auto; }
.reviews-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.reviews-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-light-1); border-radius: 50%; background: var(--color-bg); color: var(--color-dark-1); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, color .15s ease, transform .15s ease; }
.reviews-arrow:hover { background: var(--color-neon-1); color: var(--color-dark-1); }
.reviews-arrow:active { transform: translateY(-50%) scale(.94); }
.reviews-arrow-prev { left: 0; }
.reviews-arrow-next { right: 0; }
@media (min-width: 768px) {
  .reviews-carousel { padding: 0 3.5rem; }
  .reviews-viewport { overflow: hidden; }
  .reviews-grid.reviews-slider { display: flex; grid-template-columns: none; flex-wrap: nowrap; max-width: none; gap: 1.5rem; justify-content: flex-start; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
  .reviews-grid.reviews-slider.is-centered { justify-content: center; }
  .reviews-grid.reviews-slider > .review-card { flex: 0 0 var(--rcb, calc((100% - 3rem) / 3)); max-width: var(--rcb, calc((100% - 3rem) / 3)); }
  .reviews-arrow.is-active { display: inline-flex; }
}
@media (max-width: 767px) {
  .reviews-grid.reviews-slider { display: flex !important; grid-template-columns: none !important; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: .5rem 1rem 1.25rem; margin: 0 -1rem; scrollbar-width: none; }
  .reviews-grid.reviews-slider::-webkit-scrollbar { display: none; }
  .reviews-grid.reviews-slider > .review-card { flex: 0 0 calc(100% - 2.5rem); scroll-snap-align: start; max-width: none; margin: 0; }
  .reviews-swipe-hint { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--color-muted); font-size: .82rem; margin-top: 1rem; }
  .reviews-swipe-hint span { letter-spacing: .15em; }
}
.reviews-carousel .review-card { height: 100%; }

/* Garantie-Anriss mit Siegel, Regeln von den Leistungsseiten übernommen */
.gar-anriss { display: grid; grid-template-columns: auto 1fr; gap: 2.25rem; align-items: center; }
.gar-anriss .section-intro { margin-bottom: 0; }
.gar-siegel { width: 150px; height: 150px; display: block; flex: none; }
@media (max-width: 720px) {
  .gar-anriss { grid-template-columns: 1fr; gap: 1.2rem; justify-items: start; }
  .gar-siegel { width: 112px; height: 112px; }
}

/* ============================================================
   HERO WEBDESIGN — 1:1 aus /webdesign-koeln uebernommen
   (Adrian, 21.09.2026: "der Hero ist schon super stark").
   Ohne den Scroll-Scrub der Originalseite: auf einer Anzeigen-
   seite sollen 200vh nicht zwischen Klick und Formular stehen.
   ============================================================ */
.wd-hero{position:relative;overflow:hidden;background:#071b10;color:#fff;padding:0;min-height:min(94svh,940px);display:flex;align-items:flex-end}
.wd-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Selbstgebauter "Deep-Dive"-Hintergrund (Canvas statt Fremd-CDN-Video) */
.wd-live-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(900px 620px at 66% 22%,#1b6b47 0%,#0e3d27 34%,#082418 58%,#04140b 88%)}
@media (prefers-reduced-motion:reduce){.wd-live-bg{display:none}.wd-hero{background:radial-gradient(900px 620px at 66% 22%,#1b6b47 0%,#0e3d27 34%,#082418 58%,#04140b 88%)}}
.wd-duotone{position:absolute;inset:0;z-index:1;mix-blend-mode:color;background:rgba(27,122,74,.5);pointer-events:none}
.wd-hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,#071b10 6%,rgba(7,27,16,.82) 34%,rgba(7,27,16,.2) 64%,rgba(7,27,16,.5) 100%);pointer-events:none}
.wd-hero-vignette{position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 200px rgba(0,0,0,.6);pointer-events:none}
.wd-hero .container{position:relative;z-index:3;padding-top:clamp(4rem,10vw,7rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.wd-col-text{max-width:880px;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem}
.wd-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin:0;font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.01em;color:var(--color-neon-3);line-height:1.3}
.wd-eyebrow::before{content:"";width:26px;height:2px;background:var(--color-neon-1);border-radius:2px;flex:none}
.wd-hook{font-family:var(--font-headline);font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.0;letter-spacing:-.03em;margin:0;color:#fff}
.wd-hook .neon{background:linear-gradient(92deg,var(--color-neon-1),var(--color-neon-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.wd-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:var(--color-light-1);max-width:60ch;margin:0}
.wd-metarow{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin:1.1rem 0 0}
.wd-metarow .m{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem .95rem;
  font-size:.97rem;font-weight:600;line-height:1.25;color:#fff;
  background:rgba(8,30,18,.52);border:1px solid rgba(61,224,41,.34);border-radius:12px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:0 4px 16px rgba(0,0,0,.22);transition:border-color .25s,background .25s,transform .25s}
.wd-metarow .m:hover{border-color:var(--color-neon-1);background:rgba(8,30,18,.68);transform:translateY(-2px)}
.wd-metarow .m svg{width:19px;height:19px;stroke:var(--color-neon-1);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.wd-metarow .sep{display:none}
@media (max-width:560px){.wd-metarow .m{font-size:.9rem;padding:.55rem .8rem}}
.wd-cta-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.7rem}
.wd-microproof{display:flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:600;color:var(--color-light-1);margin:0;max-width:24ch;line-height:1.3}
.wd-microproof svg{width:16px;height:16px;flex:none;stroke:var(--color-neon-1)}
@media (max-width:900px){.wd-metarow .sep{display:none}.wd-metarow{gap:.5rem;flex-direction:column;align-items:flex-start}}

/* Einblend-Animation beim Laden (rise) */
.rise{opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.48s}.d5{animation-delay:.6s}.d6{animation-delay:.72s}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;animation:none}.wd-video{display:none}}

/* Google-Badge im Hero (dunkel, live via reviews.js) */
.hero-google{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1.05rem;background:rgba(7,27,16,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;backdrop-filter:blur(8px);text-decoration:none;transition:transform .15s,border-color .15s}
.hero-google:hover{border-color:var(--color-neon-1);transform:translateY(-1px)}
.hero-google .g{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.hero-google .g .b{color:#4285F4}.hero-google .g .r{color:#EA4335}.hero-google .g .y{color:#FBBC05}.hero-google .g .g2{color:#34A853}
.hero-google .stars{color:#FBBC05;letter-spacing:1px;font-size:.95rem}
.hero-google .meta{font-size:.88rem;color:var(--color-light-1)}
.hero-google .meta strong{color:#fff}
/* Ads-Zusatz: Telefon-Knopf und Ansprechpartner neben der Google-Pille */
.wd-cta-row .lph-tel { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; text-decoration: none; }
.wd-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .3rem; }
.wd-fuss .lph-person { color: #fff; }
@media (max-width: 560px) { .wd-fuss { gap: .8rem 1rem; } }

/* Der Original-Hero traegt auf der Anzeigenseite eine Zeile mehr (Telefon,
   Ansprechpartner, vier Merkmale). Damit Knopf und Google-Bewertung auf einem
   1440x900-Laptop ueber der Falz bleiben: Luft oben knapper, Merkmale kompakter. */
.wd-hero .container { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.wd-col-text { gap: 1.05rem; }
.wd-metarow { margin-top: .7rem; gap: .5rem; }
.wd-metarow .m { padding: .55rem .85rem; font-size: .93rem; }

/* Kopfzeile: bei schmalen Bildschirmen ragte der Knopf 32 px aus dem Bild
   (der Header schneidet ab, deshalb hat kein Overflow-Test angeschlagen). */
.nav-cta-kurz { display: none; }
@media (max-width: 560px) {
  .nav-cta-lang { display: none; }
  .nav-cta-kurz { display: inline; }
}
/* Der Ortszusatz gehoert in den Textfluss der Zeile, nicht in eine zweite Flex-Spalte. */
.wd-eyebrow .t { display: inline; }
.wd-metarow { max-width: 620px; }
/* Mobil steht der Text ueber der hellsten Stelle des Videos (Lichtstrahlen).
   Der Verlauf der Originalseite dunkelt erst weiter unten ab -> hier dichter. */
@media (max-width: 899px) {
  .wd-hero-scrim { background: linear-gradient(0deg,#071b10 4%,rgba(7,27,16,.9) 48%,rgba(7,27,16,.66) 100%); }
}
/* Kopfzeile auf sehr schmalen Geraeten (320 px): Logo und Abstaende knapper,
   sonst schiebt der Anfragen-Knopf 6 px ueber den rechten Rand. */
@media (max-width: 360px) {
  .lp-kopf-rechts { gap: .5rem; }
  .lp-kopf .brand-logo { height: 46px; width: auto; max-width: none; }
  .lp-kopf .nav-cta { font-size: 1rem; padding-left: .65rem; padding-right: .65rem; }
  .lp-kopf-tel { min-width: 44px; }
}

/* Der Problem-Block stand als schmale Textspalte in einer 1200-px-Flaeche:
   rechts blieben ueber 400 px leer. Jetzt Text links, die Zahl aus demselben
   Absatz als Rechnung rechts. */
.lp-prose-split { display: grid; grid-template-columns: minmax(0, 58ch) minmax(260px, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.lp-prose-split .lp-prose { max-width: none; }
.lp-rechnung { background: var(--color-bg-soft, #F2F7F2); border: 1px solid rgba(13,43,26,.10); border-radius: var(--radius, 12px); padding: 1.4rem 1.5rem; }
.section-dark .lp-rechnung { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.lp-rechnung .k { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-green-2, #1B7A4A); margin-bottom: 1rem; }
.lp-rechnung .z { display: flex; align-items: baseline; gap: .8rem; padding: .75rem 0; border-top: 1px solid rgba(13,43,26,.10); }
.lp-rechnung .z b { font-family: var(--font-headline); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1; color: var(--color-dark-1, #0D2B1A); flex: none; }
.lp-rechnung .z span { font-size: 1rem; line-height: 1.45; color: var(--color-muted, #666); }
.lp-rechnung .q { margin: .9rem 0 0; font-size: 1rem; color: var(--color-muted, #666); line-height: 1.5; opacity: .85; }
@media (max-width: 899px) { .lp-prose-split { grid-template-columns: 1fr; } }

/* ============================================================
   KARTEN — Icon-Badge und grosses Hintergrund-Motiv.
   Bauart von der Startseite (.card.has-bg-icon + .leistung-icon-
   wrapper), damit die Werbeseiten dieselbe Handschrift tragen.
   ============================================================ */
.lp-card { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.lp-card > * { position: relative; z-index: 1; }
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13,43,26,.10); border-color: rgba(13,43,26,.22); }
.lp-bg-ico { position: absolute; bottom: -34px; right: -32px; width: 138px; height: 138px; z-index: 0;
  color: var(--color-neon-1, #3DE029); opacity: .12; pointer-events: none;
  transition: opacity .3s ease, transform .4s ease; }
.lp-bg-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-card:hover .lp-bg-ico { opacity: .24; transform: scale(1.06) rotate(-4deg); }
.lp-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(61,224,41,.18), rgba(61,224,41,.05)); color: var(--color-neon-1, #3DE029); margin-bottom: 1rem; }
.lp-card-ico svg { width: 30px; height: 30px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-card:hover .lp-card-ico { background: linear-gradient(135deg, rgba(61,224,41,.28), rgba(61,224,41,.08)); }

/* Ablauf-Karten tragen die Schrittzahl als Ziffernplakette statt eines Icons. */
.lp-cards-schritte .lp-card-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--color-dark-1, #0D2B1A); color: var(--color-neon-1, #3DE029);
  font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.25rem; margin-bottom: .9rem; }
.lp-cards-schritte .lp-card-schritt { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-green-2, #1B7A4A); margin-bottom: .35rem; }
@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-bg-ico { transition: none; }
  .lp-card:hover { transform: none; }
  .lp-card:hover .lp-bg-ico { transform: none; }
}
/* Der Microproof im Hero lag bei 13,8 px — auf dem Handy zu klein. */
.wd-microproof { font-size: 1rem; max-width: 30ch; }
@media (max-width: 560px) { .wd-microproof { font-size: .95rem; } }

/* Kostenvergleich der Plattformen — schmale Leiste unter den Leistungskarten. */
.lp-vergleich { margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-radius: 16px;
  background: var(--color-bg-soft, #F2F7F2); border: 1px solid rgba(13,43,26,.10); }
.section-dark .lp-vergleich { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.lp-vergleich-kopf { margin: 0 0 1rem; font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: .9rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-green-2, #1B7A4A); }
.lp-vergleich-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-vergleich-reihe > * { min-width: 0; }
.lp-vergleich .v { padding: .9rem 1rem; border-radius: 12px; background: #fff; border: 1px solid rgba(13,43,26,.08); }
.lp-vergleich .v b { display: block; font-family: 'Archivo Black', system-ui, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.1; color: var(--color-dark-1, #0D2B1A); margin-bottom: .35rem; }
.lp-vergleich .v span { font-size: 1rem; line-height: 1.45; color: var(--color-muted, #666); }
.lp-vergleich .v-wir { background: var(--color-dark-1, #0D2B1A); border-color: transparent; }
.lp-vergleich .v-wir b { color: var(--color-neon-1, #3DE029); }
.lp-vergleich .v-wir span { color: rgba(255,255,255,.82); }
.lp-vergleich-fuss { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--color-muted, #666); opacity: .9; }
@media (max-width: 767px) { .lp-vergleich-reihe { grid-template-columns: 1fr; } .lp-vergleich { padding: 1.1rem 1.1rem; } }

/* Scroll-Scrubbing im Webdesign-Hero: Der Hero bleibt stehen, das Scrollen spult
   durchs Video. Auf der Anzeigenseite mit 140vh statt der 200vh der Originalseite —
   halber Zusatzweg bis zum ersten Argument. Nur Desktop, nur ohne Reduced-Motion.
   overflow-x:clip statt hidden, weil hidden position:sticky bricht. */
@media (min-width: 900px) { html, body { overflow-x: clip; } }
.wd-hero-scrub { position: relative; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .wd-hero-scrub.scrub-on { height: 140svh; }
  .wd-hero-scrub.scrub-on .wd-hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .wd-hero-scrub.scrub-on .wd-col-text { will-change: transform, opacity; }
}

/* ============================================================
   MOBILER HERO WEBDESIGN — Adrian 22.09.2026: die Google-Bewertung lag
   unter der Falz, die Headline brauchte fuenf Zeilen. Der Text bleibt
   vollstaendig, er wird nur enger gesetzt, und Bewertung samt
   Ansprechpartner ruecken vor die Knoepfe.
   ============================================================ */
@media (max-width: 767px) {
  .wd-col-text { gap: .85rem; }
  .wd-hook { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.04; }
  .wd-sub { font-size: 1rem; line-height: 1.5; }
  .wd-metarow { gap: .45rem; margin-top: .2rem; }
  .wd-metarow .m { padding: .5rem .75rem; font-size: .95rem; }
  /* Trust zwischen Merkmale und Knopf — dort ist er im ersten Bildschirm,
     ohne der Headline den Platz zu nehmen. */
  .wd-col-text > .wd-eyebrow { order: 1; }
  .wd-col-text > .wd-hook    { order: 2; }
  .wd-col-text > .wd-sub     { order: 3; }
  .wd-col-text > .wd-metarow { order: 4; }
  .wd-col-text > .wd-fuss    { order: 5; gap: .7rem 1rem; margin: 0; }
  .wd-col-text > .wd-cta-row { order: 6; gap: .6rem; margin-top: .2rem; }
  .wd-microproof { max-width: 100%; font-size: .95rem; }
}

/* Verkaufspsychologie + Neubau/Relaunch auf den Webdesign-Werbeseiten (01.10.2026):
   Belegzeile unter den Karten. */
.lp-vk-beleg { margin: 1.6rem 0 0; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.84); max-width: 72ch; }
.lp-vk-beleg-hell { color: var(--color-muted, #666); }
.lp-vk-beleg a { text-decoration: underline; text-underline-offset: .18em; }
/* Karten und Rechenkasten auf dunkler Flaeche: Ueberschrift dunkel in der weissen Karte,
   Zahlen neon, Text hell (sonst weiss auf weiss bzw. dunkel auf dunkel). */
.section-dark .lp-card h3 { color: var(--color-dark-1, #0D2B1A); }
.section-dark .lp-rechnung .k { color: var(--color-neon-1, #3DE029); }
.section-dark .lp-rechnung .z { border-top-color: rgba(255,255,255,.14); }
.section-dark .lp-rechnung .z b { color: var(--color-neon-1, #3DE029); }
.section-dark .lp-rechnung .z span, .section-dark .lp-rechnung .q { color: rgba(255,255,255,.84); }

/* ============================================================
   Gilt fuer beide Seitenpaare (/lp/seo + /lp/seo-koeln, /lp/webdesign + /lp/webdesign-koeln).
   Adrian 01.10.2026: Aenderungen an einer Werbeseite gelten immer auch fuer ihre Schwester.
   ============================================================ */
/* Handy: Biancas Aussage im SEO-Hero als Sprechblase neben ihrem Foto (die Vorlage blendete sie aus). */
.bianca-mobil { display: none; }
@media (max-width: 767px) {
  .hero-v3 .bianca-mobil { display: block; order: 7; position: relative; z-index: 3; align-self: flex-start;
    max-width: 58%; margin: 1rem 0 1.4rem; padding: .75rem .9rem; border-radius: 14px;
    background: rgba(13,43,26,.82); border: 1px solid rgba(61,224,41,.45); text-shadow: none; }
  .hero-v3 .bianca-mobil::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px;
    background: rgba(13,43,26,.95); border-top: 1px solid rgba(61,224,41,.45); border-right: 1px solid rgba(61,224,41,.45);
    transform: translateY(-50%) rotate(45deg); }
  .hero-v3 .bianca-mobil p { margin: 0 0 .35rem; font-family: var(--font-headline); font-size: 1rem; line-height: 1.3; color: #fff; }
  .hero-v3 .bianca-mobil cite { display: block; font-style: normal; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--color-neon-1, #3DE029); }
  /* Anruf-Knopf im Hero raus: Telefon bleibt in Kopfzeile und unterer Leiste. Ab 15.10. phone_click je Quelle pruefen. */
  .hero-v3 .lp-cta-reihe .lp-tel, .wd-hero .wd-cta-row .lph-tel { display: none; }
  /* Seit 28.10.2026 ist der zweite Hero-Knopf WhatsApp statt Anruf: der bleibt auf dem Handy sichtbar. */
  .wd-hero .wd-cta-row .lph-tel[data-whatsapp] { display: inline-flex; }
}

/* Handy-Hero der Werbeseiten (Adrian 01.10.2026, gilt grundsaetzlich fuer alle LPs):
   Headline -> Hook -> Kennzahlen -> Knopf -> Google-Bewertung -> Beschreibung -> Kundenstimme.
   Erst Handlung, dann Beleg, dann Erklaerung — keine Textwand vor dem Knopf. HTML-Reihenfolge bleibt. */
@media (max-width: 767px) {
  .hero-v3 .hero-text-wrap > .hero-title { order: 1; }
  .hero-v3 .hero-text-wrap > .hero-hook { order: 2; }
  .hero-v3 .hero-text-wrap > .kurve__marken { order: 3; }
  .hero-v3 .hero-text-wrap > .lp-cta-reihe { order: 4; }
  .hero-v3 .hero-text-wrap > .hero-trust-badge { order: 5; }
  .hero-v3 .hero-text-wrap > .hero-sub { order: 6; }
  .hero-v3 .hero-text-wrap > .bianca-mobil { order: 7; }
}

/* Feinheiten 02.10.2026 (Endkontrolle, alle vier Werbeseiten):
   Handy SEO-Hero: Google-Bewertung klebte ohne Abstand am Knopf.
   Desktop Webdesign-Hero: "Stats don't lie." brach auf zwei Zeilen, die Bewertung lag bei
   1440x900 unter der Falz (888 px) -> Spruch einzeilig, Hero oben knapper. */
@media (max-width: 767px) { .hero-v3 .hero-text-wrap > .hero-trust-badge { margin-top: .9rem; } }
@media (min-width: 900px) {
  .wd-hero .wd-microproof { max-width: none; white-space: nowrap; }
  .wd-hero .container { padding-top: clamp(2.5rem, 4vw, 3rem); }
}

/* Formularkarte: Ueberschrift und Danke-Meldung waren weiss auf weiss (Regel der dunklen
   Abschluss-Flaeche griff in die weisse Karte). Gefunden von lp-check Kontrast-Pruefung 02.10.2026. */
.lp-abschluss .lp-formcard h2, .lp-abschluss .lp-formcard h3, .lp-formcard h2, .lp-formcard h3 { color: var(--color-dark-1, #0D2B1A); }

/* ============================================================
   Sprungmenü in der Kopfzeile (seit 22.10.2026, alle /lp/-Seiten)
   Nur Sprünge auf Abschnitte derselben Seite. Grund: Google bewertet
   die Navigation der Zielseite (Ads-Blog 05.02.2025).
   Regel: ads-landingpage Kriterium 6.
   ============================================================ */
.lp-sprung { display: none; }
.lp-sprung a, .lp-sprung-mobil nav a { color: var(--color-dark-1, #0D2B1A); text-decoration: none; font-weight: 600; }
.lp-sprung a:hover, .lp-sprung-mobil nav a:hover { color: var(--color-green-2, #1B7A4A); }
.lp-kopf .header-inner { position: relative; }
.lp-sprung-mobil { position: static; }
.lp-sprung-mobil summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border: 1px solid var(--color-light-1, #e6ebe6); border-radius: 12px; }
.lp-sprung-mobil summary::-webkit-details-marker { display: none; }
.lp-sprung-mobil summary svg { width: 22px; height: 22px; fill: none; stroke: var(--color-dark-1, #0D2B1A); stroke-width: 2; stroke-linecap: round; }
.lp-sprung-mobil nav { position: absolute; right: 0; top: calc(100% + .5rem); background: #fff; border: 1px solid var(--color-light-1, #e6ebe6);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(13,43,26,.14); padding: .4rem; min-width: 210px; display: flex; flex-direction: column; z-index: 60; }
.lp-sprung-mobil:not([open]) nav { display: none; }
.lp-sprung-mobil nav a { padding: .75rem .9rem; min-height: 44px; display: flex; align-items: center; border-radius: 8px; }
.lp-sprung-mobil nav a:last-child { color: var(--color-green-2, #1B7A4A); font-weight: 700; }
/* Schmale Handys: Telefon-Knopf in der Kopfzeile ausblenden, sonst ragt „Anfragen" über den Rand.
   Die Nummer bleibt in der festen Leiste unten (.lp-leiste, data-anruf). */
@media (max-width: 380px) { .lp-kopf .lp-kopf-tel { display: none; } }
@media (min-width: 1100px) {
  .lp-sprung { display: flex; gap: 1.6rem; align-items: center; }
  .lp-sprung a { padding: .6rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  .lp-sprung-mobil { display: none; }
}
/* Sprungziele landen unter der festen Kopfzeile */
.lp-kopf ~ main section[id], .lp-kopf ~ main #anfrage { scroll-margin-top: 110px; }
/* Foto-Rahmen der Testimonials auf /lp/-Seiten: feste Breite, sonst 0 px bis das Bild lädt
   und der Abschnitt springt beim Scrollen (bis 363 px, gemessen 22.10.2026). Nur /lp/. */
@media (max-width: 899px) { .lp-kopf ~ main .tm-foto { width: 100%; } }

/* WhatsApp fest unten rechts (Desktop, Adrian 28.10.2026). WhatsApp-Gruen als Erkennungsfarbe des Dienstes,
   wie die Google-Farben im Bewertungs-Badge; der Hauptknopf bleibt CI-Neongruen. Handy: siehe .lp-leiste. */
.lp-wa-schwebe { display: none; }
@media (min-width: 900px) {
  .lp-wa-schwebe {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 60px; height: 60px; border-radius: 50%;
    background: #25D366; color: #fff; text-decoration: none;
    box-shadow: 0 8px 24px rgba(13,43,26,.28); transition: transform .2s ease, box-shadow .2s ease;
  }
  .lp-wa-schwebe:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px rgba(13,43,26,.34); }
  .lp-wa-schwebe:focus-visible { outline: 3px solid #0D2B1A; outline-offset: 3px; }
  .lp-wa-schwebe svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (prefers-reduced-motion: reduce) { .lp-wa-schwebe { transition: none; } }