/* Kurzclips (Video-Studio): eigenstaendig eingefaerbt, funktioniert in hellen und dunklen Abschnitten. */
.lm-clip{margin:2rem auto 0;max-width:56rem}
.lm-clip-buehne{position:relative;border-radius:18px;overflow:hidden;background:#070D1A;box-shadow:0 30px 70px -35px rgba(7,13,26,.7),0 0 0 1px rgba(108,231,250,.14);aspect-ratio:16/9}
.lm-clip video{display:block;width:100%;height:100%;object-fit:cover;background:#070D1A}
.lm-clip-tasten{position:absolute;right:.75rem;top:.75rem;display:flex;gap:.5rem}
.lm-clip-taste{appearance:none;border:1px solid rgba(108,231,250,.45);background:rgba(7,13,26,.86);color:#EAF0F9;font:600 .9rem/1 "Schibsted Grotesk",Arial,sans-serif;padding:.6rem .9rem;border-radius:999px;cursor:pointer;min-height:44px;min-width:44px}
.lm-clip-taste:hover{border-color:#6CE7FA;color:#fff}
.lm-clip-taste:focus-visible{outline:3px solid #6CE7FA;outline-offset:2px}
.lm-clip-taste[aria-pressed="true"]{background:#6CE7FA;color:#06121F;border-color:#6CE7FA}
.lm-clip-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:#6CE7FA;color:#06121F;cursor:pointer;box-shadow:0 14px 40px -10px rgba(108,231,250,.7);display:grid;place-items:center}
.lm-clip-start:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lm-clip-start svg{width:28px;height:28px;margin-left:4px}
.lm-clip.laeuft .lm-clip-start{display:none}
.lm-clip figcaption{margin-top:.75rem;font-size:.95rem;line-height:1.5;color:inherit;opacity:.85;text-align:center}
.teil--hell .lm-clip figcaption,.lm-clip.auf-hell figcaption{color:#2A3A55;opacity:1}
@media (max-width:40rem){.lm-clip{margin-top:1.5rem}.lm-clip-buehne{border-radius:14px}.lm-clip-tasten{right:.4rem;top:.4rem;gap:.35rem}.lm-clip-taste{font-size:.8rem;padding:.45rem .7rem}}
/* Clip im ersten Bildschirm (Hero): unter dem Haupttext, ab 64rem daneben. Feste 16:9-Flaeche, kein Layoutsprung. */
.lm-clip--oben{margin:1.25rem 0 0;max-width:40rem;width:100%}
.lm-clip--oben figcaption{text-align:left;font-size:.88rem;margin-top:.5rem}
@media (min-width:64rem){
  .seiten-kopf .mass:has(> .lm-clip--oben){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem);align-items:start}
  .seiten-kopf .mass:has(> .lm-clip--oben) > *{grid-column:1}
  .seiten-kopf .mass:has(> .lm-clip--oben) > .lm-clip--oben{grid-column:2;grid-row:1 / span 12;align-self:center;margin:0}
}
@media (max-width:40rem){.lm-clip--oben{margin-top:1rem}}
/* Vorschaubild im Shop: erst auf Klick wird es zum Video */
.lm-clip-mini{appearance:none;display:block;position:relative;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:#070D1A;cursor:pointer;aspect-ratio:16/9}
.lm-clip-mini img{display:block;width:100%;height:100%;object-fit:cover}
.lm-clip-mini span{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:999px;background:rgba(7,13,26,.86);color:#EAF0F9;font:600 .82rem/1 "Schibsted Grotesk",Arial,sans-serif;min-height:44px}
.lm-clip-mini span::before{content:"";width:0;height:0;border-left:.6rem solid #6CE7FA;border-top:.38rem solid transparent;border-bottom:.38rem solid transparent}
.lm-clip-mini:focus-visible{outline:3px solid #6CE7FA;outline-offset:2px}
.lm-clip--mini{margin:0;max-width:none}
.lm-clip--mini .lm-clip-buehne{border-radius:12px}
.lm-clip--mini .lm-clip-start{width:56px;height:56px}
/* Branchen- und Standortseiten: Clip rechts neben dem Text; am Handy zwischen Einleitung und Knoepfen */
.lm-clip--seite{margin:0;max-width:none;align-self:center}
@media (max-width:860px){
  .about-hero:has(> .lm-clip--seite){display:flex;flex-direction:column;align-items:stretch;gap:0}
  .about-hero:has(> .lm-clip--seite) > div:first-child{display:contents}
  .about-hero:has(> .lm-clip--seite) > div:first-child > *{align-self:flex-start}
  .about-hero:has(> .lm-clip--seite) > div:first-child > .lead{align-self:stretch}
  .about-hero:has(> .lm-clip--seite) > .lm-clip--seite{order:1;align-self:stretch;margin:0 0 1.5rem}
  .about-hero:has(> .lm-clip--seite) .hero-actions,.about-hero:has(> .lm-clip--seite) .hero-trust{order:2}
}
/* Handy: Bildunterschrift im Hero ausblenden (Video hat aria-label, Untertitel eingebrannt), damit die Knoepfe nah bleiben */
@media (max-width:40rem){.lm-clip--oben figcaption{display:none}}
@media (max-width:860px){.about-hero:has(> .lm-clip--seite) > .lm-clip--seite{margin:1.5rem 0 0}}
.lm-clip-taste[hidden]{display:none}
/* Handy (10.10.2026): Clip oben direkt unter dem Titel, damit Handy-Leiste, Chat-Knopf und Cookie-Hinweis
   ihn im ersten Bildschirm nicht verdecken. Nur die Anzeige-Reihenfolge, die Lesereihenfolge bleibt. */
@media (max-width:40rem){
  :not(.about-hero):has(> .lm-clip--oben){display:flex;flex-direction:column;align-items:flex-start}
  :not(.about-hero):has(> .lm-clip--oben) > *{max-width:100%}
  :not(.about-hero):has(> .lm-clip--oben) > :is(h1,:has(~ h1)){order:-2}
  :not(.about-hero):has(> .lm-clip--oben) > .lm-clip--oben{order:-1;align-self:stretch;margin:1rem 0 1.25rem}
  .shop-kopf-in:has(> .lm-clip--oben) > .shop-kopf-text{display:contents}
  .shop-kopf-in:has(> .lm-clip--oben) > .shop-kopf-text > :is(h1,:has(~ h1)){order:-2}
}

/* Lightbox (Grossansicht) */
.lm-clip-box{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#EAF0F9;overflow:hidden}
.lm-clip-box::backdrop{background:rgba(3,7,15,.92)}
.lm-clip-box-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:3.5rem 1rem 1rem;box-sizing:border-box;gap:.75rem}
.lm-clip-box video{max-width:min(96vw,1600px);max-height:calc(100vh - 8rem);width:auto;height:auto;background:#000;border-radius:10px}
.lm-clip-box-t{margin:0;font-size:.9rem;opacity:.8;text-align:center;max-width:60rem}
.lm-clip-zu{position:absolute;top:.75rem;right:.75rem;appearance:none;border:1px solid rgba(108,231,250,.6);background:rgba(7,13,26,.9);color:#EAF0F9;font:600 .95rem/1 "Schibsted Grotesk",Arial,sans-serif;padding:.7rem 1.1rem;border-radius:999px;min-height:44px;min-width:44px;cursor:pointer}
.lm-clip-zu:hover{background:#6CE7FA;color:#06121F}
.lm-clip-zu:focus-visible{outline:3px solid #6CE7FA;outline-offset:2px}