/* ============================================================
   LS Media Solution — Startseite
   Wird ausschliesslich vom Template "LS Startseite" geladen.
   Alle Klassen sind mit ls- praefixiert, damit nichts mit dem
   Diteck-Theme, Elementor oder WooCommerce kollidiert.
   ============================================================ */

.ls-page {
  /* Marke — direkt aus dem Logo extrahiert */
  --ls-brand:      #4FAEB2;
  --ls-ink:        #F0F0F0;

  /* Grund + Neutrale: kein reines Grau, alle Richtung Teal gebogen */
  --ls-ground:     #0B1517;
  --ls-ground-2:   #0E1B1E;
  --ls-surface:    #122326;
  --ls-surface-2:  #16292D;
  --ls-line:       #1E363A;
  --ls-line-soft:  #17292C;
  --ls-ink-dim:    #A6BABD;
  --ls-ink-faint:  #7B9195;

  /* Signal */
  --ls-signal:     #FF6B4A;
  --ls-on-signal:  #0B1517;
  --ls-signal-15:  rgba(255, 107, 74, 0.15);

  --ls-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ls-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ls-pad: clamp(1.25rem, 5vw, 5rem);
  --ls-maxw: 1180px;
}

/* Grundlage: das Theme daran hindern, hier hineinzuregieren */
html.ls-html,
body.ls-body {
  margin: 0;
  padding: 0;
  background: #0B1517;
}

body.ls-body {
  color: #F0F0F0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Eigene, undurchsichtige Flaeche. Falls Theme, Plugin oder Browser dem
   body einen Hintergrund unterschieben, liegt der Inhalt trotzdem auf
   einem soliden Grund und bleibt lesbar. */
.ls-page {
  background: var(--ls-ground);
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 100vh;
}

.ls-page,
.ls-page *,
.ls-page *::before,
.ls-page *::after { box-sizing: border-box; }

.ls-page img { max-width: 100%; display: block; height: auto; }

.ls-page a { color: inherit; }

.ls-page :focus-visible { outline: 2px solid var(--ls-signal); outline-offset: 3px; }

.ls-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ls-signal);
  color: var(--ls-on-signal);
  padding: 0.75rem 1.25rem;
  z-index: 999;
}
.ls-skip:focus { left: 0; }

/* ---------- Grundbausteine ---------- */

.ls-wrap {
  width: 100%;
  max-width: var(--ls-maxw);
  margin-inline: auto;
  padding-inline: var(--ls-pad);
}

.ls-eyebrow {
  font-family: var(--ls-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
  margin: 0;
}

.ls-eyebrow--signal { color: var(--ls-signal); }

.ls-h2 {
  font-family: var(--ls-display);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
  color: var(--ls-ink);
}

.ls-lede { color: var(--ls-ink-dim); max-width: 62ch; margin: 0; }

.ls-band {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-top: 1px solid var(--ls-line-soft);
}

.ls-band--raised { background: var(--ls-ground-2); }

.ls-band__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.ls-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 48ch;
}

/* ---------- Kopfzeile ---------- */

.ls-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  flex-wrap: wrap;
}

.ls-logo { display: block; flex: none; }
.ls-logo img { width: 168px; height: auto; }

.ls-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.7rem);
  font-size: 0.88rem;
  color: var(--ls-ink-dim);
  flex-wrap: wrap;
}

.ls-nav__link { text-decoration: none; }
.ls-nav__link:hover { color: var(--ls-ink); }

/* ---------- Buttons ---------- */

.ls-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 200ms ease;
}

.ls-btn--signal { background: var(--ls-signal); color: var(--ls-on-signal); }
.ls-btn--signal:hover { transform: translateY(-2px); color: var(--ls-on-signal); }

.ls-btn--ghost { background: transparent; border-color: var(--ls-line); color: var(--ls-ink); }
.ls-btn--ghost:hover { border-color: var(--ls-ink-faint); color: var(--ls-ink); }

.ls-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.85rem; }

/* ---------- Hero ---------- */

.ls-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}

.ls-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% 35%;
  height: 70vh;
  background: radial-gradient(closest-side, var(--ls-signal-15), transparent 70%);
  pointer-events: none;
}

.ls-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  align-items: flex-start;
}

.ls-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid var(--ls-line);
  border-radius: 999px;
  background: var(--ls-surface);
}

.ls-kicker b {
  background: var(--ls-brand);
  color: var(--ls-ground);
  font-family: var(--ls-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.ls-kicker span {
  font-family: var(--ls-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ls-ink-dim);
}

.ls-hero__h1 {
  font-family: var(--ls-display);
  font-size: clamp(2.8rem, 9.5vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 800;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
  color: var(--ls-ink);
}

.ls-hero__h1 em { font-style: normal; color: var(--ls-signal); }

.ls-hero__sub {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  color: var(--ls-ink-dim);
  max-width: 54ch;
  margin: 0;
}

.ls-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.ls-hero__note {
  font-family: var(--ls-mono);
  font-size: 0.72rem;
  color: var(--ls-ink-faint);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ---------- Plattform-Streifen ---------- */

.ls-plat {
  border-top: 1px solid var(--ls-line-soft);
  background: var(--ls-ground-2);
  padding-block: 1.5rem;
}

.ls-plat__inner {
  display: flex;
  align-items: center;
  gap: 1rem 2.2rem;
  flex-wrap: wrap;
  font-family: var(--ls-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
}

.ls-plat__inner b { color: var(--ls-ink-dim); font-weight: 400; }

/* ---------- Beweis-Streifen ---------- */

.ls-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--ls-line-soft);
  border-block: 1px solid var(--ls-line-soft);
}

.ls-metric {
  background: var(--ls-ground);
  padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.25rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ls-metric__num {
  font-family: var(--ls-display);
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ls-signal);
  font-variant-numeric: tabular-nums;
}

.ls-metric__label { font-size: 0.97rem; color: var(--ls-ink); font-weight: 600; margin: 0; }

.ls-metric__meta {
  font-family: var(--ls-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ls-ink-faint);
  letter-spacing: 0.03em;
  margin: 0;
}

/* ---------- Case ---------- */

.ls-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

@media (min-width: 860px) { .ls-case { grid-template-columns: 1.05fr 0.95fr; } }

.ls-case__body { display: flex; flex-direction: column; gap: 1.1rem; }

.ls-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ls-tag {
  font-family: var(--ls-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--ls-line);
  color: var(--ls-ink-dim);
  background: var(--ls-surface);
}

.ls-quote {
  border-left: 2px solid var(--ls-brand);
  padding-left: 1.1rem;
  color: var(--ls-ink-dim);
  font-size: 0.98rem;
  margin: 0;
}

.ls-shot {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ls-shot__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--ls-line);
  background: var(--ls-surface-2);
}

.ls-shot__dots { display: flex; gap: 0.3rem; }
.ls-shot__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ls-line); display: block; }

.ls-shot__title {
  font-family: var(--ls-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
}

.ls-shot__area {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  text-align: center;
  background-image: repeating-linear-gradient(45deg, var(--ls-line-soft) 0 1px, transparent 1px 11px);
}

.ls-shot__area p {
  margin: 0;
  font-family: var(--ls-mono);
  font-size: 0.74rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--ls-ink-dim);
  max-width: 32ch;
}

.ls-shot__area strong { color: var(--ls-signal); }

.ls-shot img { width: 100%; }

/* ---------- Methode / KI ---------- */

.ls-ai {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) { .ls-ai { grid-template-columns: 0.92fr 1.08fr; } }

.ls-ai__body { display: flex; flex-direction: column; gap: 1.2rem; }

.ls-ai__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ls-ai__list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--ls-ink-dim);
  font-size: 0.97rem;
}

.ls-ai__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.55rem;
  flex: none;
  border-radius: 2px;
  background: var(--ls-signal);
}

.ls-ai__list b { color: var(--ls-ink); font-weight: 600; }

.ls-lab {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 18px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ls-lab__head,
.ls-lab__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--ls-mono);
  font-size: 0.69rem;
  letter-spacing: 0.09em;
  color: var(--ls-ink-faint);
}

.ls-lab__head { text-transform: uppercase; }
.ls-lab__foot b { color: var(--ls-signal); font-weight: 400; }

.ls-lab__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.ls-cell {
  aspect-ratio: 9 / 14;
  border-radius: 6px;
  background: var(--ls-surface-2);
  border: 1px solid var(--ls-line);
  position: relative;
  overflow: hidden;
}

.ls-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ls-brand);
  opacity: 0;
}

.ls-lab.is-live .ls-cell::before {
  animation: ls-probe 620ms ease-out forwards;
  animation-delay: calc(var(--i) * 85ms);
}

@keyframes ls-probe {
  0%   { opacity: 0; }
  45%  { opacity: 0.55; }
  100% { opacity: 0.12; }
}

.ls-cell--win { border-color: var(--ls-signal); }

.ls-lab.is-live .ls-cell--win::before {
  background: var(--ls-signal);
  animation: ls-win 700ms ease-out forwards;
  animation-delay: 1750ms;
}

@keyframes ls-win {
  0%   { opacity: 0.12; }
  100% { opacity: 1; }
}

.ls-cell__badge {
  position: absolute;
  inset: auto 0 0 0;
  font-family: var(--ls-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 3px 0;
  color: var(--ls-on-signal);
  background: var(--ls-signal);
  opacity: 0;
}

.ls-lab.is-live .ls-cell__badge {
  animation: ls-win 700ms ease-out forwards;
  animation-delay: 1750ms;
}

@media (prefers-reduced-motion: reduce) {
  .ls-lab.is-live .ls-cell::before,
  .ls-lab.is-live .ls-cell--win::before,
  .ls-lab.is-live .ls-cell__badge { animation: none; opacity: 1; }
  .ls-lab.is-live .ls-cell::before { opacity: 0.12; }
  .ls-btn--signal:hover { transform: none; }
}

/* ---------- Zusammenarbeit: Umfang + Testzeitraum ---------- */

.ls-caveat {
  margin: 0;
  padding: 0.95rem 1.2rem;
  border-left: 2px solid var(--ls-brand);
  background: var(--ls-surface);
  border-radius: 0 10px 10px 0;
  color: var(--ls-ink-dim);
  font-size: 0.93rem;
}

.ls-caveat b { color: var(--ls-ink); font-weight: 600; }

.ls-testcard {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ls-testcard__num {
  font-family: var(--ls-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ls-signal);
}

.ls-testcard__label {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ls-ink);
}

.ls-testcard p { margin: 0; color: var(--ls-ink-dim); font-size: 0.94rem; }

/* Nummerierung, weil hier tatsaechlich eine Reihenfolge gemeint ist */
.ls-steps {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--ls-line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  counter-reset: ls-step;
}

.ls-steps li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ls-ink-dim);
}

.ls-steps li::before {
  counter-increment: ls-step;
  content: counter(ls-step);
  font-family: var(--ls-mono);
  font-size: 0.68rem;
  color: var(--ls-brand);
  border: 1px solid var(--ls-line);
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  flex: none;
}

/* ---------- Leistungen ---------- */

.ls-svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--ls-line-soft);
  border: 1px solid var(--ls-line-soft);
  border-radius: 16px;
  overflow: hidden;
}

.ls-svc__item {
  background: var(--ls-ground);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  transition: background 220ms ease;
}

.ls-svc__item:hover { background: var(--ls-surface); }

.ls-svc__no { font-family: var(--ls-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ls-ink-faint); }

.ls-svc__name {
  font-family: var(--ls-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ls-ink);
  hyphens: auto;
  overflow-wrap: break-word;
}

.ls-svc__desc { font-size: 0.92rem; color: var(--ls-ink-dim); margin: 0; }

/* ---------- Team ---------- */

.ls-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

@media (min-width: 700px) { .ls-team { grid-template-columns: 1fr 1fr; } }

.ls-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 20px;
  transition: border-color 220ms ease;
}

.ls-person:hover { border-color: var(--ls-brand); }

/* Rundes Portrait mit Ring — der Ring sitzt als eigener Rahmen aussen,
   damit er das Bild nicht anschneidet. */
.ls-person__avatar {
  width: clamp(104px, 15vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: var(--ls-brand);
  flex: none;
}

.ls-person__photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--ls-surface);
  background: var(--ls-surface-2);
}

.ls-person__head { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }

.ls-person__name {
  font-family: var(--ls-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ls-ink);
}

.ls-person__role {
  font-family: var(--ls-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ls-brand);
  margin: 0;
  max-width: 26ch;
}

.ls-person__bio {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ls-ink-dim);
  max-width: 34ch;
}

.ls-person__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ls-line);
  width: 100%;
  font-family: var(--ls-mono);
  font-size: 0.73rem;
  color: var(--ls-ink-faint);
  letter-spacing: 0.03em;
}

.ls-person__contact a { text-decoration: none; }
.ls-person__contact a:hover { color: var(--ls-brand); }

/* ---------- Schluss-CTA ---------- */

.ls-closer { background: var(--ls-signal); color: var(--ls-on-signal); border-top: 0; }

.ls-closer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.ls-closer__h {
  font-family: var(--ls-display);
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  color: var(--ls-on-signal);
}

.ls-closer__p { margin: 0; max-width: 48ch; opacity: 0.8; font-size: 1.02rem; }

.ls-closer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--ls-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  opacity: 0.78;
  margin: 0;
}

.ls-closer__meta a { text-decoration: none; }
.ls-closer .ls-btn { background: var(--ls-ground); color: var(--ls-ink); }

/* ---------- Fusszeile ---------- */

.ls-foot {
  background: var(--ls-ground);
  border-top: 1px solid var(--ls-line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.ls-foot__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  align-items: start;
}

.ls-foot__col { display: flex; flex-direction: column; gap: 0.6rem; }

.ls-foot__title {
  font-family: var(--ls-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
  margin: 0 0 0.3rem;
}

.ls-foot__col a { color: var(--ls-ink-dim); text-decoration: none; font-size: 0.9rem; }
.ls-foot__col a:hover { color: var(--ls-ink); }
.ls-foot__col p { margin: 0; color: var(--ls-ink-dim); font-size: 0.9rem; }

.ls-foot__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ls-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.82rem;
  color: var(--ls-ink-faint);
}

.ls-foot__legal a { color: var(--ls-ink-faint); text-decoration: none; }
.ls-foot__legal a:hover { color: var(--ls-ink-dim); }

/* ============================================================
   Unterseiten: kompakter Seitenkopf, Kontaktspalten, Formular
   ============================================================ */

.ls-phero {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.ls-phero::after {
  content: "";
  position: absolute;
  inset: auto -20% -70% 40%;
  height: 55vh;
  background: radial-gradient(closest-side, var(--ls-signal-15), transparent 70%);
  pointer-events: none;
}

.ls-phero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

.ls-phero__h1 {
  font-family: var(--ls-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--ls-ink);
}

.ls-phero__h1 em { font-style: normal; color: var(--ls-signal); }

.ls-phero__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ls-ink-dim);
  max-width: 58ch;
  margin: 0;
}

/* ---------- Kontaktseite ---------- */

.ls-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 880px) {
  .ls-contact { grid-template-columns: 0.8fr 1.2fr; }
}

.ls-contact__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ls-infocard {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 16px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ls-infocard__link {
  color: var(--ls-ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

.ls-infocard__link:hover { color: var(--ls-brand); }

.ls-infocard__meta {
  margin: 0.3rem 0 0;
  font-family: var(--ls-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ls-ink-faint);
}

.ls-infocard .ls-steps { margin-top: 0; padding-top: 0.6rem; border-top: 0; }

/* ---------- Contact Form 7 ---------- */

.ls-form {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ls-form__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.4rem; }

.ls-form .wpcf7 { margin: 0; }

.ls-form .wpcf7-form > p {
  margin: 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ls-form .wpcf7-form label { display: block; width: 100%; }

.ls-form input[type="text"],
.ls-form input[type="email"],
.ls-form input[type="tel"],
.ls-form input[type="url"],
.ls-form input[type="number"],
.ls-form textarea,
.ls-form select {
  width: 100%;
  background: var(--ls-surface-2);
  border: 1px solid var(--ls-line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--ls-ink);
  font-family: inherit;
  font-size: 0.97rem;
  line-height: 1.5;
  transition: border-color 180ms ease, background 180ms ease;
}

.ls-form textarea { min-height: 150px; resize: vertical; }

.ls-form input::placeholder,
.ls-form textarea::placeholder { color: var(--ls-ink-faint); opacity: 1; }

.ls-form input:focus,
.ls-form textarea:focus,
.ls-form select:focus {
  outline: none;
  border-color: var(--ls-brand);
  background: var(--ls-surface);
}

.ls-form input[type="submit"],
.ls-form button[type="submit"],
.ls-form .wpcf7-submit {
  width: auto;
  background: var(--ls-signal);
  color: var(--ls-on-signal);
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease;
}

.ls-form .wpcf7-submit:hover { transform: translateY(-2px); }

/* CF7-Meldungen */
.ls-form .wpcf7-not-valid-tip {
  color: var(--ls-signal);
  font-size: 0.82rem;
  font-family: var(--ls-mono);
  letter-spacing: 0.02em;
}

.ls-form .wpcf7-not-valid { border-color: var(--ls-signal); }

.ls-form .wpcf7-response-output {
  margin: 1.2rem 0 0 !important;
  padding: 0.9rem 1.1rem !important;
  border: 1px solid var(--ls-line) !important;
  border-left: 2px solid var(--ls-brand) !important;
  border-radius: 0 10px 10px 0;
  background: var(--ls-surface-2);
  color: var(--ls-ink-dim);
  font-size: 0.92rem;
}

.ls-form .wpcf7-spinner { filter: invert(1) opacity(0.5); }

.ls-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.ls-form .wpcf7-acceptance label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ls-ink-dim);
}
.ls-form .wpcf7-acceptance input[type="checkbox"] { width: auto; margin-top: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .ls-form .wpcf7-submit:hover { transform: none; }
}


/* ============================================================
   Rechtstexte — Impressum, Datenschutz, Cookie-Richtlinie
   Der Inhalt dieser Seiten kommt aus Elementor und bringt eigene
   Container mit. Die werden hier flach gelegt, damit der Text im
   normalen Satzspiegel steht und auf dunklem Grund lesbar bleibt.
   ============================================================ */

.ls-legalpage__head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.ls-legalpage__stand {
  margin: 0;
  font-family: var(--ls-mono);
  font-size: 0.78rem;
  color: var(--ls-ink-faint);
}

.ls-legal {
  max-width: 74ch;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  color: var(--ls-ink-dim);
  font-size: 1rem;
  line-height: 1.75;
}

/* Elementor-Geruest neutralisieren.
   Deckt beide Bauarten ab: die alten Sections und die neueren
   Flex-Container (e-con). */
.ls-legal .elementor,
.ls-legal .elementor-section,
.ls-legal .elementor-container,
.ls-legal .elementor-column,
.ls-legal .elementor-column-wrap,
.ls-legal .elementor-widget-wrap,
.ls-legal .elementor-element,
.ls-legal .elementor-widget-container,
.ls-legal .e-con,
.ls-legal .e-con-inner,
.ls-legal .e-con-boxed,
.ls-legal .e-parent,
.ls-legal .e-child {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Die Container brachten aus dem alten hellen Layout eine graue
   Hintergrundflaeche als Pseudoelement mit. */
.ls-legal .e-con::before,
.ls-legal .e-con::after,
.ls-legal .elementor-section::before,
.ls-legal .elementor-section::after,
.ls-legal .elementor-background-overlay {
  background: none !important;
  background-image: none !important;
  content: none !important;
  display: none !important;
}

/* Abstandshalter aus dem alten Layout, teils ueber 250px hoch. Die
   Abstaende kommen hier aus der Typografie. */
.ls-legal .elementor-widget-spacer { display: none !important; }

/* Farben der Elementor-Widgets an den dunklen Grund anpassen */
.ls-legal .elementor-heading-title {
  color: var(--ls-ink) !important;
  font-family: var(--ls-display) !important;
}

.ls-legal .elementor-widget-text-editor,
.ls-legal .elementor-widget-text-editor p {
  color: var(--ls-ink-dim) !important;
}

.ls-legal .elementor-widget-heading { margin: 2.2rem 0 0.7rem !important; }
.ls-legal .elementor-widget-heading:first-child { margin-top: 0 !important; }

.ls-legal > *:first-child { margin-top: 0; }

.ls-legal p,
.ls-legal ul,
.ls-legal ol {
  margin: 0 0 1.1rem;
  color: var(--ls-ink-dim);
}

.ls-legal h1,
.ls-legal h2,
.ls-legal h3,
.ls-legal h4,
.ls-legal h5,
.ls-legal h6 {
  font-family: var(--ls-display);
  color: var(--ls-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 2.4rem 0 0.75rem;
  text-wrap: balance;
}

.ls-legal h1,
.ls-legal h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.ls-legal h3,
.ls-legal h4 { font-size: clamp(1.1rem, 2vw, 1.28rem); }
.ls-legal h5,
.ls-legal h6 { font-size: 1.02rem; color: var(--ls-ink-dim); }

.ls-legal strong,
.ls-legal b { color: var(--ls-ink); font-weight: 650; }

.ls-legal ul,
.ls-legal ol { padding-left: 1.3rem; }
.ls-legal li { margin-bottom: 0.45rem; }
.ls-legal li::marker { color: var(--ls-brand); }

.ls-legal a {
  color: var(--ls-brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

.ls-legal a:hover { color: var(--ls-signal); }

.ls-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}

.ls-legal th,
.ls-legal td {
  border: 1px solid var(--ls-line);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.ls-legal th { color: var(--ls-ink); background: var(--ls-surface); font-weight: 650; }

/* Die Cookie-Tabellen von Complianz stecken in <details> */
.ls-legal details {
  border: 1px solid var(--ls-line);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--ls-surface);
}

.ls-legal summary {
  cursor: pointer;
  color: var(--ls-ink);
  font-weight: 650;
}

.ls-legal img { margin: 1rem 0; border-radius: 10px; }


/* ============================================================
   Haeufige Fragen
   ============================================================ */

.ls-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 78ch;
}

.ls-faq__item {
  border: 1px solid var(--ls-line);
  border-radius: 14px;
  background: var(--ls-surface);
  overflow: hidden;
}

.ls-faq__item[open] { border-color: var(--ls-line); background: var(--ls-surface-2); }

/* display: list-item statt flex — als Flex-Container verliert <summary>
   in Safari das Aufklapp-Verhalten. Der Indikator sitzt deshalb absolut. */
.ls-faq__q {
  cursor: pointer;
  display: list-item;
  list-style: none;
  position: relative;
  padding: 1.05rem 3.25rem 1.05rem 1.25rem;
  color: var(--ls-ink);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
}

.ls-faq__q::-webkit-details-marker { display: none; }

.ls-faq__q::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 1.05rem;
  font-family: var(--ls-mono);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ls-signal);
}

.ls-faq__item[open] .ls-faq__q::after { content: "–"; }

.ls-faq__q:hover { color: var(--ls-brand); }

.ls-faq__a {
  padding: 0 1.25rem 1.15rem;
  margin: 0;
  color: var(--ls-ink-dim);
  max-width: 66ch;
}

.ls-faq__a a {
  color: var(--ls-brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* ---------- Bildwelt ---------- */

/* Hero-Motiv. Das Bild ist rechtsbuendig eingepasst, weil links die
   freie Flaeche fuer Headline und Buttons liegt. Der Verlauf darueber
   haelt den Text auch dann lesbar, wenn das Bild spaeter getauscht wird. */
.ls-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  z-index: 0;
}

.ls-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    100deg,
    var(--ls-ground) 6%,
    rgba(11, 21, 23, 0.94) 32%,
    rgba(11, 21, 23, 0.55) 64%,
    rgba(11, 21, 23, 0.2) 100%
  );
}

/* Szenenbild im Fliesstext, mit Bildunterschrift im Stil der
   Screenshot-Kachel aus der Case-Sektion. */
.ls-scene {
  margin: 0;
  border: 1px solid var(--ls-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ls-surface);
}

.ls-scene img {
  display: block;
  width: 100%;
  height: clamp(190px, 28vw, 340px);
  object-fit: cover;
}

.ls-scene figcaption {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--ls-line);
  font-family: var(--ls-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
}

/* Hinweiskasten mit Bild: das Motiv zeigt genau das, was der Text sagt. */
.ls-caveat--media {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
}

.ls-caveat p { margin: 0; }

.ls-caveat__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .ls-caveat--media { grid-template-columns: 1fr; }
  .ls-caveat__img { max-height: 130px; }
  .ls-hero__media { object-position: 70% center; opacity: 0.75; }
}

/* ---------- Kunden-Laufband ---------- */

.ls-clients .ls-band__inner { gap: clamp(1.4rem, 3vw, 2rem); }

.ls-marquee {
  overflow: hidden;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ls-marquee__track {
  display: flex;
  width: max-content;
  animation: ls-marquee 64s linear infinite;
}

.ls-marquee:hover .ls-marquee__track,
.ls-marquee:focus-within .ls-marquee__track { animation-play-state: paused; }

.ls-marquee__list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(2.5rem, 6vw, 5rem);
  /* Jede Gruppe ist mindestens einen halben Bildschirm breit. Dadurch
     ist die eine Haelfte des Bandes auf jeder Bildschirmbreite laenger
     als das Fenster und beim Umlauf entsteht keine Luecke. */
  min-width: 48vw;
  margin: 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
}

.ls-marquee__list a {
  display: block;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.ls-marquee__list a:hover,
.ls-marquee__list a:focus-visible { opacity: 1; }

/* Einheitliche optische Groesse, egal wie die Logodatei beschnitten ist. */
.ls-marquee__list img {
  display: block;
  height: clamp(26px, 3.4vw, 40px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

@keyframes ls-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .ls-marquee__list:nth-child(n+2) { display: none; }
  .ls-marquee__list { flex-wrap: wrap; justify-content: center; }
}

/* Kunden ohne Bildlogo: Schriftzug im selben optischen Gewicht. */
.ls-marquee__word {
  font-family: var(--ls-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: -0.01em;
  color: var(--ls-ink);
  white-space: nowrap;
}

.ls-marquee__list a { text-decoration: none; }

/* Logos liegen als weisse Freisteller vor und werden nur abgedunkelt,
   damit kein Logo lauter ist als die eigene Marke. */
.ls-marquee__list img { opacity: 0.92; }