/* Leistungsseiten aus scripts/leistungsseiten.mjs (SEO-Paket 2026-10): Aufbau und Aussehen wie /online-marketing und
   /klassische-werbung (gleiche Maße, Farben, Einblendungen), Karten, dunkle Box und Referenz-Kacheln wie /webdesign-entwicklung.
   Präfix ls-. Grafiken zeigen ohne Skript und bei „Bewegung reduzieren“ sofort ihr Endbild; Startzustände nur mit html.ls-bereit. */
.ls-abschnitt{padding:120px 0}
.ls-intro{padding-top:80px}
.ls-leistung+.ls-leistung{padding-top:0}
.ls-kopf-abschnitt{padding-bottom:64px}
.ls-kopf-abschnitt+.ls-abschnitt{padding-top:0}
.ls-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:8px 24px;border:1px solid var(--background-color-02);border-radius:100px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.ls-titel{margin:0 0 28px;color:var(--text-color-01);font-size:48px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.ls-leistung .ls-titel{font-size:40px}
.ls-grau{color:var(--text-color-02)}
.ls-text{margin:0 0 20px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.ls-text:last-child{margin-bottom:0}
.ls-text a,.ls-region-text a,.ls-karte p a,.ls-dunkel-text a,.faq-answer-wrap a{color:var(--text-color-01);text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .3s}
.ls-dunkel-text a{color:var(--white-color)}
.zigla-maus .ls-text a:hover,.zigla-maus .faq-answer-wrap a:hover,.zigla-maus .ls-region-text a:hover,.zigla-maus .ls-karte p a:hover,.zigla-maus .ls-dunkel-text a:hover{color:var(--primary-color)}
.ls-hero-knopf{margin-top:32px}
/* Knopf nur so breit wie sein Text: Webflows Hover-Füllung ist eine 400 px breite Form und deckt breitere Knöpfe nicht ganz ab */
.ls-hero-knopf .large-button-copy{display:inline-flex}
/* Webflow macht .service-sort-description auf dem Handy zur Flex-Zeile: Text und Knopf untereinander halten */
.service-sort-description:has(>.ls-hero-knopf){flex-direction:column;align-items:flex-start}
/* Sofort-Einblendung schiebt Text und Bild 100 px von rechts herein: ohne Begrenzung wird die Seite kurz breiter als der
   Bildschirm (Chrome behält das manchmal). clip statt hidden: kein Scroll-Container, senkrecht bleibt alles sichtbar. */
.service-details-hero-wrapper{overflow-x:clip}
/* Webflow setzt den Hero ab 1440 px fest auf 90vh; mit Knopf und längerer H1 ragt der Inhalt auf niedrigen, breiten
   Bildschirmen sonst unten heraus. So wächst der Hero mit und ist trotzdem mindestens 90vh hoch. */
@media screen and (min-width:1440px){.service-details-hero-wrapper{height:auto;min-height:90vh}}
/* Lange H1 der SEO-Seiten: Webflow teilt den Überschriften-Block ab 1440 px in zwei Spalten, die zweite ist leer. Ohne sie und
   mit etwas mehr Breite bleibt die H1 bei drei Zeilen statt sieben (Klappkarte rückt dafür etwas nach rechts). */
@media screen and (min-width:1440px){.service-details-heading-block:empty{display:none}.service-details-hero-content{width:min(560px,40vw)}}
/* Webflows FAQ-Einblendung kommt von der Seite und macht die Seite auf dem Handy kurz breiter als den Bildschirm */
.faqs-wrapper{overflow-x:clip}

/* Zwei Spalten: Text und Grafik, bei .ls-gespiegelt steht die Grafik links */
.ls-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.ls-gespiegelt>.ls-grafik-spalte{order:-1}
.ls-text-spalte,.ls-grafik-spalte{min-width:0}
.ls-kopf{max-width:820px}
.ls-kopf .ls-titel{margin-bottom:24px}

/* Liste „Das gehört dazu“ mit lila Haken */
.ls-liste-titel{margin:32px 0 16px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.ls-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0;padding:0;list-style:none}
.ls-liste li{position:relative;padding-left:30px;color:var(--text-color-01);font-size:16px;font-weight:500;line-height:1.5em}
.ls-liste li::before{content:"";position:absolute;top:2px;left:0;width:20px;height:20px;border-radius:50%;background:#f3e1fe}
.ls-liste li::after{content:"";position:absolute;top:6px;left:7px;width:6px;height:10px;border:solid var(--primary-color);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ls-liste b,.ls-punkte b{color:var(--text-color-01);font-weight:600}

/* Karten (kurze Leistungen, Versprechen): Kopf weiß mit Nummer, Inhalt grau wie auf /webdesign-entwicklung */
.ls-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.ls-karten-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ls-karten-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ls-karte{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--background-color-01);box-shadow:0 5px 32px #0000001a}
.ls-karte-kopf{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 24px;background:var(--white-color)}
.ls-karte-nr{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--background-color-01);color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1}
.ls-karte-inhalt{flex:1;padding:24px 24px 32px}
.ls-karte-titel{margin:0 0 12px;color:var(--text-color-01);font-size:20px;font-weight:600;line-height:1.35em;text-transform:uppercase}
.ls-karte p{margin:0 0 12px;color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.5em}
.ls-karte p:last-child{margin-bottom:0}
.ls-karte .ls-liste{grid-template-columns:minmax(0,1fr);margin-top:16px}
.ls-karte-grafik{margin:0 0 16px}

/* Punkte mit fettem Einstieg („Was du bekommst“, „So arbeiten wir“) */
.ls-punkte{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.ls-punkte li{position:relative;padding-left:54px;color:var(--text-color-02);font-size:17px;font-weight:500;line-height:1.6em}
.ls-punkte li::before{content:"";position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;background:#f3e1fe}
.ls-punkte li::after{content:"";position:absolute;top:9px;left:13px;width:7px;height:12px;border:solid var(--primary-color);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Dunkle Box mit feinen Linien wie im Footer (Versprechen, Beweis) */
.ls-dunkel{position:relative;isolation:isolate;overflow:hidden;padding:80px;border-radius:20px;background-color:var(--text-color-01);background-image:linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:25% 100%;color:var(--white-color)}
.ls-dunkel::before{content:"";position:absolute;right:-18%;bottom:-55%;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#5510ff5c,#c00bf72e 55%,transparent)}
.ls-dunkel::after{content:"";position:absolute;top:-80px;left:25%;z-index:-1;width:3px;height:80px;margin-left:-1px;border-radius:3px;background:linear-gradient(transparent,var(--primary-color));animation:ls-strich 7s linear infinite}
.ls-dunkel .ls-pill{border-color:#ffffff33;color:var(--white-color)}
.ls-dunkel .ls-titel{color:var(--white-color)}
.ls-dunkel-inhalt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 80px;align-items:center}
.ls-dunkel-text p{margin:0 0 20px;color:#b5b5bd;font-size:18px;font-weight:500;line-height:1.6em}
.ls-dunkel-text p:last-child{margin-bottom:0}
.ls-dunkel .ls-punkte li{color:#d6d6de}
.ls-dunkel .ls-punkte b{color:var(--white-color)}
.ls-dunkel .ls-punkte li::before{background:#c00bf733}
.ls-dunkel .ls-punkte li::after{border-color:#e7b6ff}

/* Referenz-Kacheln (Screenshot oben, Name und Branche unten) wie das Laufband auf /webdesign-entwicklung */
.ls-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.ls-kacheln-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ls-kachel-link{display:block;height:100%;overflow:hidden;border-radius:16px;background:var(--text-color-01);color:var(--white-color);text-decoration:none;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.ls-kachel-leiste{display:flex;gap:6px;padding:12px 14px}
.ls-kachel-leiste span{width:9px;height:9px;border-radius:50%;background:#ffffff38;transition:background .4s}
.ls-kachel-bild{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#1b1b24}
.ls-kachel-text{display:flex;flex-direction:column;gap:2px;padding:16px 18px 18px}
.ls-kachel-name{font-size:18px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.ls-kachel-info{color:#b5b5bd;font-size:14px;line-height:1.4em}
.ls-kachel-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:4px}
.zigla-maus .ls-kachel-link:hover{transform:translateY(-8px);box-shadow:0 24px 44px #c00bf72e}
.zigla-maus .ls-kachel-link:hover .ls-kachel-leiste span{background:var(--primary-color)}
.zigla-maus .ls-kachel-link:hover .ls-kachel-leiste span:nth-child(2){transition-delay:.08s}
.zigla-maus .ls-kachel-link:hover .ls-kachel-leiste span:nth-child(3){transition-delay:.16s}

/* Orte (Webdesign im Kreis Höxter): Text mit Referenz-Kacheln */
.ls-orte{display:grid;gap:64px}
.ls-ort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px 80px;align-items:start}
.ls-ort-titel{margin:0 0 16px;color:var(--text-color-01);font-size:32px;font-weight:600;line-height:1.25em;text-transform:uppercase}
.ls-ort .ls-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Ablauf: senkrechte Zeitleiste, die lila Linie wächst mit dem Scrollen (--ls-fortschritt, ohne Skript voll) */
.ls-ablauf-kopf{max-width:820px;margin-bottom:64px}
.ls-schritte{--ls-fortschritt:1;position:relative;display:grid;gap:48px;margin:0;padding:0 0 0 96px;list-style:none}
.ls-schritte::before,.ls-schritte::after{content:"";position:absolute;top:28px;bottom:28px;left:27px;width:2px;border-radius:2px;background:var(--background-color-02)}
.ls-schritte::after{background:var(--primary-color);transform:scaleY(var(--ls-fortschritt));transform-origin:top}
.ls-schritt{position:relative}
.ls-schritt-nr{position:absolute;top:0;left:-96px;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid var(--primary-color);border-radius:50%;background:var(--white-color);color:var(--primary-color);font-size:18px;font-weight:600}
.ls-schritt-titel{margin:12px 0 10px;color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.ls-schritt p{max-width:680px;margin:0;color:var(--text-color-02);font-size:17px;font-weight:500;line-height:1.6em}

/* Region */
.ls-region{padding-top:40px}
.ls-region-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;padding-top:64px;border-top:1px solid var(--background-color-02)}
.ls-region .ls-titel{color:var(--text-color-02)}
.ls-region-text p{margin:0 0 24px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.ls-region-text p:last-child{margin-bottom:0}

/* Abschluss: Text links, Terminkarte (termin-karte.css) rechts */
.ls-termin-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px 80px;align-items:start}
.ls-termin-inhalt .termin{scroll-margin-top:110px}
.ls-anruf{font-size:16px}
.faqs-wrapper+.ls-termin-abschnitt{padding-top:40px}

/* Grafiken: gemeinsame Bausteine (wie /online-marketing) */
.ls-grafik{position:relative;margin:0;padding:32px;border-radius:20px;background:var(--blue-chalk);overflow:hidden}
.ls-beispiel{position:absolute;top:14px;right:14px;z-index:3;padding:4px 10px;border-radius:100px;background:var(--white-color);color:var(--text-color-02);font-size:11px;font-weight:600;line-height:1.5em;letter-spacing:.04em;text-transform:uppercase}
.ls-fenster{position:relative;border-radius:14px;background:var(--white-color);box-shadow:0 24px 48px -24px #1b0b4a40;overflow:hidden}
.ls-fenster-leiste{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #ececf3}
.ls-fenster-leiste i{width:9px;height:9px;border-radius:50%;background:#dcdce6}
.ls-suchfeld{display:flex;align-items:center;gap:10px;min-height:44px;margin:16px;padding:10px 16px;border:1px solid #e3e3ec;border-radius:100px;color:var(--text-color-01);font-size:15px;font-weight:500;line-height:1.4}
.ls-suchfeld svg{flex:none;color:var(--text-color-02)}
.ls-balken{display:block;flex:none;width:var(--b,70%);height:8px;border-radius:8px;background:#e4e4ee}
.ls-url{color:var(--primary-color);font-size:13px;font-weight:600;line-height:1.3}
.ls-notiz{margin:14px 0 0;color:var(--text-color-02);font-size:14px;line-height:1.5em}
.ls-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.ls-chips li{padding:5px 12px;border-radius:100px;background:var(--white-color);color:var(--text-color-01);font-size:12px;font-weight:600;line-height:1.4}
.ls-chips .ls-chip-lila{background:var(--primary-color);color:var(--white-color)}
.ls-grafik-dunkel{background-color:var(--text-color-01);background-image:radial-gradient(circle at 100% 100%,#5510ff5c,transparent 55%),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:100% 100%,25% 100%;color:var(--white-color)}
.ls-grafik-dunkel .ls-beispiel{background:#ffffff1f;color:#d6d6de}
.ls-grafik-dunkel .ls-notiz{color:#b5b5bd}
.ls-tippen::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--primary-color);opacity:0}

@media (prefers-reduced-motion:no-preference){
  /* Einblenden (Karten, Schritte); falls das Skript nicht läuft, nach 3 s trotzdem sichtbar */
  html.w-mod-js .ls-einblenden:not(.ls-sichtbar){opacity:0;transform:translateY(40px)}
  .ls-einblenden{transition:opacity .7s ease,transform .9s cubic-bezier(.25,1,.5,1)}
  html.w-mod-js:not(.ls-bereit) .ls-einblenden{animation:ls-notfall 0s 3s forwards}
  .ls-tippt::after{opacity:1;animation:ls-blinken .9s steps(1) infinite}
}
/* Startzustände ein Bild lang ohne Übergang setzen (html.ls-sofort, leistungsseite.js): sonst liefen Grafiken mit
   Verzögerung nach dem Laden erst rückwärts in den Startzustand */
html.ls-sofort .ls-grafik *,html.ls-sofort .ls-grafik *::before,html.ls-sofort .ls-grafik *::after{transition:none!important}
@keyframes ls-notfall{to{opacity:1;transform:none}}
@keyframes ls-blinken{50%{opacity:0}}
@keyframes ls-strich{to{transform:translateY(1400px)}}

@media screen and (max-width:991px){
  .ls-abschnitt{padding:80px 0}
  .ls-intro{padding-top:40px}
  .ls-kopf-abschnitt{padding-bottom:48px}
  .ls-titel{font-size:40px}
  .ls-leistung .ls-titel{font-size:36px}
  .ls-zwei,.ls-region-inhalt,.ls-termin-inhalt,.ls-dunkel-inhalt,.ls-ort{grid-template-columns:minmax(0,1fr);gap:40px}
  .ls-gespiegelt>.ls-grafik-spalte{order:0}
  .ls-zwei>.ls-grafik-spalte{justify-self:center;width:100%;max-width:600px}
  .ls-karten,.ls-karten-4,.ls-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-kacheln-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-dunkel{padding:56px 40px}
  .ls-dunkel::after{display:none}
}
@media screen and (max-width:767px){
  .ls-abschnitt{padding:60px 0}
  .ls-titel,.ls-leistung .ls-titel{font-size:30px}
  .ls-text,.ls-region-text p,.ls-dunkel-text p{font-size:16px}
  .ls-liste{grid-template-columns:minmax(0,1fr)}
  .ls-karten,.ls-karten-2,.ls-karten-4,.ls-kacheln,.ls-kacheln-3,.ls-ort .ls-kacheln{grid-template-columns:minmax(0,1fr);gap:16px}
  .ls-karte-kopf{height:76px;padding:0 20px}
  .ls-karte-nr{width:48px;height:48px;font-size:20px}
  .ls-karte-inhalt{padding:20px 20px 24px}
  .ls-karte-titel{font-size:18px}
  .ls-punkte li{font-size:16px}
  .ls-ort-titel{font-size:26px}
  .ls-dunkel{padding:40px 24px}
  .ls-schritte{gap:36px;padding-left:64px}
  .ls-schritte::before,.ls-schritte::after{top:22px;bottom:22px;left:21px}
  .ls-schritt-nr{left:-64px;width:44px;height:44px;font-size:15px}
  .ls-schritt-titel{margin-top:8px;font-size:20px}
  .ls-schritt p{font-size:16px}
  .ls-grafik{padding:20px}
  .ls-beispiel{top:10px;right:10px}
}
@media screen and (max-width:479px){
  .ls-pill{padding:6px 18px;font-size:12px}
}