/* WG Bausteine: Widget „leistung“ (Hero der Leistungsseiten, Sektion #leistung).
   Gleiche Materialsprache wie der Hero der Startseite (Körnung, Raster mit radialer Maske, Lime-Glühen, Milchglas),
   aber bewusst schlichter: ein Schaufenster statt der Werkbank, eine einzige ruhige Schleife (die Benachrichtigung). */

/* ---------- Sektion und Hintergrund ---------- */
#leistung.v3-sec{padding-top:clamp(116px,9vw,132px);padding-bottom:clamp(40px,4.5vw,60px);overflow-x:clip}
#leistung .lh-gridbg{position:absolute;left:0;right:0;top:0;height:min(1000px,100%);z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 68% 42%,#000 22%,transparent 78%);mask-image:radial-gradient(ellipse 62% 58% at 68% 42%,#000 22%,transparent 78%)}
#leistung .lh-glowbg{left:-8%;top:4%;width:44%;height:420px;z-index:0;opacity:.28}
#leistung .v3-wrap{position:relative;z-index:1}

/* ---------- Ohne Leiste der Bausteine (Standard) ----------
   Auf Bildschirmen im Querformat bis 1000 px Höhe füllt der Hero den ersten Bildschirm, und der Inhalt steht in der
   Höhe mittig zwischen Kopfzeile und Unterkante. So bleibt unten kein leeres Band, in dem nur der Anfang der nächsten
   Sektion zu sehen wäre. Ist der Inhalt höher als der Bildschirm, bestimmt er wie bisher die Höhe. Auf höheren
   Bildschirmen folgt die nächste Sektion direkt und füllt den Rest. Mit Leiste (.lh--leiste) bleibt alles wie bisher. */
@media (min-width:960px) and (min-aspect-ratio:4/3) and (max-height:1000px){
  #leistung.v3-sec:not(.lh--leiste){display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}
  #leistung.v3-sec:not(.lh--leiste)>.v3-wrap{width:100%}
}

/* ---------- Raster: links Text, rechts Schaufenster ---------- */
#leistung .lh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
@media (min-width:960px){
  /* Textspalte etwas breiter, damit Button und Zweitlink bei voller Breite nebeneinander passen */
  #leistung .lh-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:clamp(36px,3.2vw,44px)}
}

/* ---------- Text ---------- */
#leistung .lh-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
#leistung .lh-copy .v3-pill{margin:0}
#leistung .lh-copy h1{margin:0;font-size:clamp(38px,3.9vw,56px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
#leistung .lh-copy .v3-lead{margin:0;max-width:33em;font-size:18px;line-height:1.62}
#leistung .lh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
#leistung .lh-cta svg{flex:none}
#leistung .lh-link{display:inline-flex;align-items:center;gap:8px;padding:10px 2px;border-bottom:1px solid var(--line-2);color:var(--ink);font:500 15px/1.2 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;text-decoration:none;transition:border-color .3s var(--ease),gap .3s var(--ease)}
#leistung .lh-link:hover{border-color:var(--ink);gap:11px;color:var(--ink)}
#leistung .lh-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
@media (min-width:1360px){
  /* Volle Breite: Button und Zweitlink bleiben in einer Zeile */
  #leistung .lh-cta{flex-wrap:nowrap}
  #leistung .lh-link{white-space:nowrap}
}

/* Vertrauenspunkte: ruhige Liste unter dem Button, Symbole in kleinen Milchglasflächen (Lime bleibt Marker, Button, Rahmen und Meldung vorbehalten) */
#leistung .lh-trust{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:0;border:0;list-style:none;width:100%;max-width:30em}
#leistung .lh-trust li{display:flex;align-items:center;gap:13px;margin:0;padding:0;color:var(--ink-2);font:500 15.5px/1.35 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif}
#leistung .lh-trust-ico{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;color:var(--ink);background:rgba(255,255,255,.86);box-shadow:0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.95),0 6px 14px rgba(20,20,20,.05)}
#leistung .lh-trust-ico .v3-ico{width:16px;height:16px}

/* Die Einstellungsleiste von WG FX sitzt ab 821 px links mittig bis 76 px vom Rand und damit auf Höhe der Einleitung.
   Der Text beginnt deshalb mindestens 104 px vom Fensterrand (wie in der Sektion Wirkung). Ab 1280 px übernimmt das
   der Seitenrahmen für alle Bausteine (core.css). Zwischen 821 und 959 px stehen Text und Schaufenster untereinander,
   dort rückt das ganze Raster ein, damit beide an derselben Kante beginnen. */
@media (min-width:960px) and (max-width:1279px){
  body:has(.wgfx-sidebar) #leistung .lh-copy{padding-left:max(0px,calc(80px - max(0px,(100vw - var(--wrap)) / 2)))}
}
@media (min-width:821px) and (max-width:959px){
  body:has(.wgfx-sidebar) #leistung .lh-grid{padding-left:80px}
}

/* ---------- Schaufenster ---------- */
#leistung .lh-show{position:relative;display:flex;justify-content:center;min-width:0}
#leistung .lh-stage{position:relative;width:100%}
#leistung .lh-show--phone .lh-stage{width:min(100%,280px)}
#leistung .lh-glow{left:4%;right:4%;top:12%;bottom:-4%;z-index:0;opacity:.8}
#leistung .lh-show--phone .lh-glow{left:-18%;right:-18%;top:18%;bottom:6%}
#leistung .lh-device{position:relative;z-index:1}
#leistung .lh-show--phone .lh-device{width:100%}
/* Adresse wirklich mittig: rechts ein Gegengewicht zu den drei Punkten */
#leistung .lh-bar-end{flex:none;width:36px}
#leistung .lh-screen{container-type:inline-size}
#leistung .lh-island{position:absolute;z-index:3;left:50%;top:10px;width:30%;height:22px;margin-left:-15%;border-radius:999px;background:#050605;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
#leistung .lh-video{background:#0B0C0B}

/* ---------- Gebaute Beispielseite (em-basiert, skaliert mit dem Rahmen) ---------- */
#leistung .lh-page{position:absolute;inset:0;overflow:hidden;padding:0 2.2em;color:var(--ink);font-size:14px;font-size:clamp(7px,2.05cqw,14px);line-height:1.4;background:radial-gradient(52% 60% at 76% 46%,rgba(194,242,28,.22),rgba(194,242,28,0) 70%),linear-gradient(180deg,#FBFBF8 0%,#F4F5EF 100%)}
#leistung .lh-page::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(20,20,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.05) 1px,transparent 1px);background-size:2.6em 2.6em;background-position:center top;-webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000 25%,transparent 85%);mask-image:radial-gradient(70% 70% at 60% 45%,#000 25%,transparent 85%)}
#leistung .lh-page>*{position:relative;z-index:1}
#leistung .lh-p-nav{display:flex;align-items:center;gap:1.4em;height:3.6em;border-bottom:1px solid rgba(20,20,20,.07)}
#leistung .lh-p-logo{display:flex;align-items:center;gap:.5em;margin-right:auto;font:800 .92em/1 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap}
#leistung .lh-p-logo span{flex:none;width:1.3em;height:1.3em;border-radius:.35em;background:#141414;box-shadow:inset 0 -.35em 0 var(--lime)}
#leistung .lh-p-links{display:flex;gap:1.4em;color:var(--muted);font-size:.74em;white-space:nowrap}
#leistung .lh-p-burger{display:none;flex-direction:column;justify-content:center;gap:.28em;width:2.2em;height:2.2em;padding:0 .55em;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.08)}
#leistung .lh-p-burger i{display:block;height:.14em;border-radius:1em;background:var(--ink)}
#leistung .lh-p-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2em;align-items:center;padding:2.3em 0 1.9em}
#leistung .lh-p-pic{display:none;height:8.6em;border-radius:.9em;overflow:hidden;background:#E6E9DD;box-shadow:0 0 0 1px rgba(20,20,20,.06)}
#leistung .lh-p-pic svg{display:block;width:100%;height:100%}
#leistung .lh-p-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.8em;min-width:0}
#leistung .lh-p-kicker{font:500 .6em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#leistung .lh-p-h{display:block;font:800 2.3em/1.02 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;letter-spacing:-.035em;color:var(--ink)}
#leistung .lh-p-sub{max-width:22em;color:var(--muted);font-size:.8em;line-height:1.5}
#leistung .lh-p-btn{display:inline-flex;align-items:center;margin-top:.35em;padding:.85em 1.4em;border-radius:999px;background:var(--lime);color:var(--lime-ink);font:700 .78em/1 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;box-shadow:0 .5em 1.4em rgba(194,242,28,.4)}
#leistung .lh-p-form{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:1.15em;border-radius:.95em;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.07),0 1.2em 2.6em rgba(20,20,20,.08)}
#leistung .lh-p-form b{grid-column:1/-1;margin-bottom:.15em;font:700 .88em/1.1 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;color:var(--ink)}
#leistung .lh-p-field{display:flex;align-items:center;height:2.7em;padding:0 1em;border-radius:.65em;background:#F1F2EC;color:var(--faint);font-size:.68em}
#leistung .lh-p-field--wide{grid-column:1/-1;align-items:flex-start;height:4.6em;padding-top:.9em}
#leistung .lh-p-send{grid-column:1/-1;display:flex;align-items:center;justify-content:center;height:3.1em;border-radius:.7em;background:#141414;color:var(--lime);font:700 .74em/1 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif}
#leistung .lh-p-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em}
#leistung .lh-p-service{display:flex;flex-direction:column;gap:.5em;min-width:0;padding:.95em;border-radius:.8em;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,20,20,.07)}
#leistung .lh-p-service i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.55em;background:#141414;color:var(--lime)}
#leistung .lh-p-service svg{width:1.1em;height:1.1em}
#leistung .lh-p-service b{font:700 .85em/1 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif}
#leistung .lh-p-service em{font-style:normal;font-size:.72em;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Schmaler Rahmen (Handy oder Browser auf dem Handy): mobile Fassung der Beispielseite. Die Schwelle passt zur
   Fensterbreite 436 px weiter unten, ab der der Browser-Rahmen auf dem Handy fast quadratisch wird. */
@container (max-width:400px){
  #leistung .lh-page{padding:0 1.5em;font-size:clamp(8px,3.4cqw,13px)}
  #leistung .lh-p-links{display:none}
  #leistung .lh-p-burger{display:flex}
  #leistung .lh-p-hero{grid-template-columns:1fr;gap:1.6em;padding:1.9em 0 1.6em}
  #leistung .lh-p-h{font-size:2.15em}
  #leistung .lh-p-services{display:none}
}
/* Handy: Platz für die Kamera oben, Bild über dem Text, etwas größere Schrift und die Leistungen unter dem Formular als ruhige Liste */
#leistung .lh-show--phone .lh-page{padding-top:2.6em;font-size:clamp(8px,3.9cqw,13px)}
#leistung .lh-show--phone .lh-p-pic{display:block}
#leistung .lh-show--phone .lh-p-hero{gap:1.3em;padding-top:1.3em}
#leistung .lh-show--phone .lh-p-services{display:grid;grid-template-columns:1fr;gap:.6em}
#leistung .lh-show--phone .lh-p-service{flex-direction:row;align-items:center;gap:.8em;padding:.75em .9em}
#leistung .lh-show--phone .lh-p-service b{flex:none}

/* ---------- Benachrichtigung: die einzige Schleife der Seite ---------- */
#leistung .lh-note{position:absolute;z-index:4;left:-28px;bottom:-26px;width:min(340px,86%);display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;align-items:center;padding:13px 16px 13px 13px;border-radius:18px;color:var(--ink);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px var(--line),0 26px 56px rgba(20,20,20,.16),0 2px 6px rgba(20,20,20,.04);pointer-events:none}
#leistung .lh-note-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 1px rgba(20,23,12,.06),0 0 22px rgba(194,242,28,.55)}
#leistung .lh-note-ico svg{width:18px;height:18px}
#leistung .lh-note-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
#leistung .lh-note-txt b{font:700 14px/1.25 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
#leistung .lh-note-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
#leistung .lh-note-sub{min-width:0;font:400 13px/1.35 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;color:var(--muted)}
#leistung .lh-note-when{flex:none;font:500 10px/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
#leistung .lh-show--phone .lh-note{left:-76px;right:auto;top:auto;bottom:13%;width:318px}

/* Schleife: mit JavaScript blendet die Meldung alle neun Sekunden ein, steht gut vier Sekunden und blendet aus.
   Ohne JavaScript, bei reduzierter Bewegung und im Editor steht sie ruhig da. */
.js #leistung .lh-note{opacity:0}
.js #leistung .lh-note.is-static,html.wgb-late #leistung .lh-note{opacity:1}
#leistung .lh-note.is-live{animation:lh-note 9s var(--ease) 1.4s infinite both}
#leistung .lh-note.is-paused{animation-play-state:paused}
#leistung .lh-note.is-live.is-late{animation-delay:-.9s}
@keyframes lh-note{
  0%{opacity:0;transform:translateY(14px) scale(.97)}
  9%{opacity:1;transform:none}
  58%{opacity:1;transform:none}
  68%{opacity:0;transform:translateY(-6px) scale(.99)}
  100%{opacity:0;transform:translateY(-6px) scale(.99)}
}

/* ---------- 3D-Bühne (Schalter „3D-Bühne“, Klasse .lh-show--3d) ----------
   Aufbau: .lh-stage gibt die Perspektive vor. .lh-tilt kippt die ganze Bühne und richtet sie beim Scrollen über
   --lh-p (0 oben, 1 nach gut drei Vierteln der Sektion) langsam auf. .lh-scene setzt sich beim Laden zusammen.
   Darin liegen Kante (.lh-slab), Rahmen, Meldung, Handy und Baustein in eigener Tiefe. Die Tiefe steht in der
   Eigenschaft translate, damit die Animationen über transform davon unberührt bleiben. Nur Transformationen,
   keine Bilder: Der Hero bleibt so schnell wie vorher, das größte Element beim Laden bleibt die Überschrift. */
#leistung .lh-tilt,#leistung .lh-scene{position:relative}
#leistung .lh-tilt{z-index:1}
#leistung .lh-show--3d .lh-stage{perspective:1500px;perspective-origin:50% 38%}
#leistung .lh-show--3d .lh-tilt{
  transform-style:preserve-3d;
  transform:
    rotateX(calc((var(--lh-rx0,11) - var(--lh-rx1,7) * var(--lh-p,0)) * 1deg))
    rotateY(calc((var(--lh-ry0,-18) + var(--lh-ry1,12) * var(--lh-p,0)) * 1deg))
    rotateZ(calc((var(--lh-rz0,1.6) - var(--lh-rz0,1.6) * var(--lh-p,0)) * 1deg));
}
#leistung .lh-show--3d .lh-scene{transform-style:preserve-3d;transition:transform 1.6s var(--ease)}

/* Kante: eine zweite, dunkle Fläche knapp hinter dem Rahmen ergibt Dicke, sobald die Bühne gekippt ist */
#leistung .lh-slab{position:absolute;inset:0;z-index:0;border-radius:var(--radius);background:linear-gradient(150deg,#2B3027 0%,#141613 60%,#0C0D0B 100%);box-shadow:0 0 0 1px rgba(194,242,28,.5),0 0 40px rgba(194,242,28,.18);translate:0 0 -20px;pointer-events:none}
#leistung .lh-show--3d .lh-device{z-index:1}
#leistung .lh-show--phone .lh-slab{border-radius:42px}
/* Schatten auf dem Boden unter der Bühne */
#leistung .lh-floor{position:absolute;z-index:0;left:4%;right:0;bottom:-13%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,23,12,.24),rgba(20,23,12,0));filter:blur(12px);pointer-events:none}

/* Schwebende Teile */
#leistung .lh-fl{position:absolute;z-index:3;pointer-events:none}

/* Handy mit der mobilen Fassung der Beispielseite */
#leistung .lh-fl--phone{right:-13%;bottom:-25%;width:26%;translate:0 0 96px}
@media (max-width:1279px){#leistung .lh-fl--phone{right:-4%}}
#leistung .lh-fl--phone .lh-phone{width:100%;padding:5px;border-radius:26px;background:#0C0D0B;box-shadow:0 0 0 1px rgba(20,20,20,.55),0 0 0 3px rgba(255,255,255,.06) inset,0 34px 60px rgba(20,20,20,.30),0 0 36px rgba(194,242,28,.22)}
#leistung .lh-fl--phone .v3-device-screen{aspect-ratio:9/19.5;border-radius:21px}
#leistung .lh-fl--phone .lh-island{top:6px;width:34%;height:11px;margin-left:-17%}
#leistung .lh-fl--phone .lh-page{padding:2.5em 1.2em 0;font-size:clamp(5px,4.1cqw,12px)}
#leistung .lh-fl--phone .lh-p-pic{display:block;height:7.4em}
#leistung .lh-fl--phone .lh-p-hero{gap:1.1em;padding:1.1em 0 1.3em}
#leistung .lh-fl--phone .lh-p-h{font-size:1.9em}
#leistung .lh-fl--phone .lh-p-services{display:grid;grid-template-columns:1fr;gap:.55em}
#leistung .lh-fl--phone .lh-p-service{flex-direction:row;align-items:center;gap:.7em;padding:.7em .8em}
#leistung .lh-fl--phone .lh-p-service b{flex:none}
#leistung .lh-fl--phone .lh-media{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Baustein auf der Oberkante des Rahmens */
#leistung .lh-fl--brick{top:-55px;right:17%;width:74px;translate:0 0 2px}
#leistung .lh-brick-in{position:relative;display:block}
#leistung .lh-fl--brick svg{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(110,150,0,.30))}
#leistung .lh-brick-ring{position:absolute;z-index:0;left:50%;top:72%;width:150%;aspect-ratio:2.4/1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);box-shadow:0 0 0 2px var(--lime),0 0 24px var(--glow);opacity:0}

/* Meldung schwebt vor dem Rahmen; in der Tiefe ohne Milchglas, das in 3D unruhig rendert */
#leistung .lh-show--3d .lh-note{translate:0 0 92px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:721px){#leistung .lh-show--duo .lh-note{left:-34px;bottom:-30px}}

/* Aufbau beim Laden: nur mit JavaScript, nicht im Editor und nicht, wenn das Skript zu spät kam */
html.js:not(.wgb-late):not(.wgb-edit) #leistung .lh-show--3d .lh-stage:not(.lh-built) .lh-scene{transform:translate3d(0,30px,-160px) rotateX(12deg) rotateY(-12deg)}
html.js:not(.wgb-late):not(.wgb-edit) #leistung .lh-show--3d .lh-stage:not(.lh-built) .lh-slab{opacity:0}
html.js:not(.wgb-late):not(.wgb-edit) #leistung .lh-show--3d .lh-stage:not(.lh-built) .lh-fl--phone{opacity:0;transform:translate3d(18%,16%,0) rotate(5deg)}
html.js:not(.wgb-late):not(.wgb-edit) #leistung .lh-show--3d .lh-stage:not(.lh-built) .lh-fl--brick{opacity:0;transform:translate3d(0,-190px,0) rotate(-16deg)}
#leistung .lh-show--3d .lh-slab{transition:opacity .9s var(--ease) .25s}
#leistung .lh-show--3d .lh-fl--phone{transition:opacity .8s var(--ease) .5s,transform 1.2s var(--ease) .5s}
#leistung .lh-show--3d .lh-fl--brick{transition:opacity .2s linear 1.15s,transform .8s cubic-bezier(.32,1.45,.55,1) 1.15s}
#leistung .lh-show--3d .lh-built .lh-brick-ring{animation:lh-ring 1s var(--ease) 1.75s both}
@keyframes lh-ring{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.45)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
/* Ruhiges Schweben nach dem Aufbau, pausiert außerhalb des Sichtbereichs (.lh-off) */
@keyframes lh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#leistung .lh-show--3d .lh-built .lh-phone{animation:lh-bob 7.5s ease-in-out 2.4s infinite}
#leistung .lh-show--3d .lh-built .lh-brick-in{animation:lh-bob 6s ease-in-out 3.2s infinite}
#leistung .lh-show--3d .lh-built.lh-off .lh-phone,#leistung .lh-show--3d .lh-built.lh-off .lh-brick-in{animation-play-state:paused}

/* ---------- Klick vor der Meldung (Schalter „Klick vor der Meldung zeigen“) ----------
   Mauszeiger und Knopf laufen im selben 9-s-Takt wie die Meldung, 1,2 s früher: Der Zeiger kommt, klickt auf
   „Absenden“, und kurz darauf erscheint die Meldung. Gestartet, pausiert und verschoben wird alles über die
   Klassen an .lh-stage, die leistung.js zusammen mit der Meldung setzt. */
#leistung .lh-p-send{position:relative}
#leistung .lh-cur{position:absolute;left:34%;top:48%;z-index:2;width:2.4em;height:2.4em;opacity:0;pointer-events:none;transform-origin:22% 14%}
#leistung .lh-cur svg{display:block;width:100%;height:100%;fill:#FFFFFF;stroke:#141414;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
#leistung .lh-stage.lh-live .lh-cur{animation:lh-cur 9s var(--ease) .2s infinite both}
#leistung .lh-stage.lh-live .lh-p-send:has(.lh-cur){animation:lh-press 9s var(--ease) .2s infinite both}
#leistung .lh-stage.lh-live.lh-late .lh-cur,#leistung .lh-stage.lh-live.lh-late .lh-p-send:has(.lh-cur){animation-delay:-2.1s}
#leistung .lh-stage.lh-paused .lh-cur,#leistung .lh-stage.lh-paused .lh-p-send{animation-play-state:paused}
@keyframes lh-cur{
  0%{opacity:0;transform:translate(260%,250%)}
  3%{opacity:1}
  11%{opacity:1;transform:translate(0,0) scale(1)}
  12.5%{transform:translate(0,0) scale(.84)}
  14%{transform:translate(0,0) scale(1)}
  22%{opacity:1;transform:translate(40%,70%)}
  29%{opacity:0;transform:translate(80%,140%)}
  100%{opacity:0;transform:translate(80%,140%)}
}
@keyframes lh-press{
  0%,11.6%{transform:none;background:#141414;color:var(--lime);box-shadow:0 0 0 0 rgba(194,242,28,0)}
  12.6%{transform:scale(.95);background:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 0 rgba(194,242,28,.8)}
  15%{transform:none;background:var(--lime);color:var(--lime-ink)}
  21%{background:var(--lime);color:var(--lime-ink)}
  23%{box-shadow:0 0 0 1.1em rgba(194,242,28,0)}
  28%,100%{transform:none;background:#141414;color:var(--lime);box-shadow:0 0 0 0 rgba(194,242,28,0)}
}

/* 3D-Bühne auf Tablet und Handy: weniger Kippung, damit nichts aus dem Bild läuft */
@media (max-width:959px){
  #leistung .lh-show--3d .lh-stage{width:min(100%,620px)}
  #leistung .lh-show--3d .lh-tilt{--lh-rx0:9;--lh-rx1:6;--lh-ry0:-13;--lh-ry1:9;--lh-rz0:1.2}
  #leistung .lh-show--duo .lh-stage{margin-bottom:18%}
}
@media (max-width:720px){
  #leistung .lh-show--3d .lh-tilt{--lh-rx0:8;--lh-rx1:5;--lh-ry0:-10;--lh-ry1:7;--lh-rz0:1}
  #leistung .lh-fl--phone{right:0;bottom:-17%;width:30%;translate:0 0 60px}
  #leistung .lh-fl--brick{top:-40px;width:54px}
  #leistung .lh-show--3d .lh-note{translate:0 0 40px}
}
/* Handy: Der Browser zeigt dort ohnehin die mobile Fassung, deshalb kein zweites Handy davor */
@media (max-width:600px){
  #leistung .lh-fl--phone{display:none}
  #leistung .lh-show--duo .lh-stage{margin-bottom:34px}
}

/* ---------- Leiste der vier Bausteine (nur mit dem Schalter „Leiste der Bausteine zeigen“, Sektion hat dann .lh--leiste) ---------- */
#leistung .lh-bar{position:relative;display:flex;justify-content:center;margin:clamp(56px,6.5vw,88px) 0 0}
/* Feine Grundlinie, auf der die Leiste sitzt; sie läuft zu den Rändern hin aus */
#leistung .lh-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(20,20,20,0),var(--line-2) 22%,var(--line-2) 78%,rgba(20,20,20,0));pointer-events:none}
#leistung .lh-bar-list{position:relative;display:flex;align-items:center;gap:4px;margin:0;padding:6px;list-style:none;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--line),0 14px 36px rgba(20,20,20,.06)}
#leistung .lh-bar-list li{display:flex;margin:0;padding:0}
#leistung .lh-bs{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 17px;border-radius:999px;color:var(--ink-2);font:500 15px/1 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
#leistung .lh-bs .v3-ico{width:18px;height:18px;color:var(--muted);transition:color .3s var(--ease)}
#leistung .lh-bs-arrow{flex:none;margin-left:-2px;color:var(--faint);transition:transform .3s var(--ease),color .3s var(--ease)}
#leistung a.lh-bs:hover{background:rgba(20,20,20,.05);color:var(--ink)}
#leistung a.lh-bs:hover .v3-ico,#leistung a.lh-bs:hover .lh-bs-arrow{color:var(--ink)}
#leistung a.lh-bs:hover .lh-bs-arrow{transform:translateX(3px)}
#leistung a.lh-bs:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#leistung .lh-bs.is-here{color:var(--lime-ink);font-weight:700;background:linear-gradient(96deg,#D8F75C -20%,#C2F21C 55%,#D8F75C 125%);box-shadow:0 0 0 1px rgba(20,23,12,.06) inset,0 8px 28px var(--glow)}
#leistung .lh-bs.is-here .v3-ico{color:var(--lime-ink)}

/* ---------- Tablet und Handy: untereinander ---------- */
@media (max-width:959px){
  #leistung .lh-copy h1{font-size:clamp(40px,5.4vw,50px)}
  /* Die Meldung ragt über die Unterkante des Rahmens, statt den Inhalt zu verdecken */
  #leistung .lh-show:not(.lh-show--phone) .lh-stage{margin-bottom:30px}
  #leistung .lh-note{left:24px;bottom:-30px}
  #leistung .lh-show--phone .lh-note{left:10px;right:10px;top:46px;bottom:auto;width:auto}
}
@media (max-width:720px){
  #leistung.v3-sec{padding-top:112px}
  #leistung .lh-grid{gap:44px}
  #leistung .lh-copy{gap:18px}
  #leistung .lh-copy h1{font-size:clamp(34px,10.2vw,44px)}
  #leistung .lh-copy .v3-lead{font-size:17px}
  #leistung .lh-cta{flex-direction:column;align-items:stretch;gap:6px;width:100%}
  #leistung .lh-cta .v3-btn{justify-content:center;line-height:1.25}
  #leistung .lh-link{align-self:center}
  #leistung .lh-trust{margin-top:10px}
  #leistung .lh-trust li{font-size:15px}
  /* Browser auf schmalen Bildschirmen: etwas höher, damit die Beispielseite mit Formular ganz hineinpasst */
  #leistung .lh-show--demo:not(.lh-show--phone) .lh-screen{aspect-ratio:4/3}
  #leistung .lh-show:not(.lh-show--phone) .lh-stage{margin-bottom:34px}
  #leistung .lh-note{left:12px;right:12px;bottom:-34px;width:auto;padding:12px 14px 12px 12px;grid-template-columns:36px minmax(0,1fr);gap:11px;border-radius:16px}
  #leistung .lh-note-ico{width:36px;height:36px}
  #leistung .lh-note-ico svg{width:17px;height:17px}
  #leistung .lh-note-txt b{font-size:13.5px}
  #leistung .lh-note-sub{font-size:12.5px}
  /* Die Leiste läuft als waagerecht wischbare Reihe über die volle Breite */
  #leistung .lh-bar{justify-content:flex-start;margin:44px -18px 0;padding:4px 18px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding:0 18px}
  #leistung .lh-bar::-webkit-scrollbar{display:none}
  #leistung .lh-bar::before{display:none}
  #leistung .lh-bar-list{flex:none}
  #leistung .lh-bs{padding:12px 18px 12px 15px;font-size:14.5px}
}

@media (max-width:436px){
  /* Handy: mobile Fassung der Beispielseite (Rahmen bis 400 px), dafür ein fast quadratischer Bildschirm */
  #leistung .lh-show--demo:not(.lh-show--phone) .lh-screen{aspect-ratio:1/1.02}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  #leistung .lh-note,.js #leistung .lh-note{opacity:1;animation:none!important;transform:none}
  #leistung .lh-show--3d .lh-scene,#leistung .lh-show--3d .lh-slab,#leistung .lh-show--3d .lh-fl{transition:none!important}
  #leistung .lh-phone,#leistung .lh-brick-in,#leistung .lh-brick-ring,#leistung .lh-p-send{animation:none!important}
  #leistung .lh-cur{display:none}
  #leistung .lh-link,#leistung .lh-bs,#leistung .lh-bs .v3-ico,#leistung .lh-bs-arrow{transition:none}
}