/* LGMW CD 3.0 · Web-Elemente „Winkel & Bogen“
   Einbinden: lgmw-elemente.css + lgmw-elemente.js. Alle Animationen ruhen bei prefers-reduced-motion.
   Farben: --lg-blau #00387A · --lg-nacht #07182F · --lg-amber #FFB224 · --lg-papier #F6F8FB */
:root{--lg-blau:#00387A;--lg-nacht:#07182F;--lg-amber:#FFB224;--lg-papier:#F6F8FB;--lg-eis:#C9D9EE;--lg-linie:#D9DEE7;
  --lg-head:"Roboto Condensed","Arial Narrow",Arial,sans-serif;--lg-ease:cubic-bezier(.2,.7,.2,1)}

/* 1 · Signalraster: Punktraster mit wandernder Lichtwelle (für Header, CTA, Footer) */
.lg-signal{position:relative;isolation:isolate;background-color:var(--lg-nacht)}
.lg-signal::before,.lg-signal::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 12px 12px,#fff 1.2px,transparent 1.7px);background-size:24px 24px}
.lg-signal::before{opacity:.12}
.lg-signal::after{opacity:.55;
  -webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:lg-welle 7s linear infinite}
.lg-signal.lg-blau{background-color:var(--lg-blau)}
@keyframes lg-welle{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:-200% 0;mask-position:-200% 0}}

/* 2 · Winkel zeichnet sich, sobald er sichtbar wird */
.lg-winkel{display:block;overflow:visible}
.lg-winkel path{fill:none;stroke:var(--lg-amber);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--lg-ease)}
.lg-winkel.is-in path{stroke-dashoffset:0}

/* 3 · Bildmarke: Kontur zeichnen, dann füllen (Hero, Ladeanzeige) */
.lg-marke path{stroke:currentColor;stroke-width:3;fill:currentColor;fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
.lg-marke.is-in path{animation:lg-kontur 1.6s var(--lg-ease) forwards,lg-fuellen .6s 1.3s ease forwards}
@keyframes lg-kontur{to{stroke-dashoffset:0}}
@keyframes lg-fuellen{to{fill-opacity:1;stroke-width:0}}

/* 4 · Dachzeile: Kerbe wächst, Text folgt */
.lg-dach{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--lg-head);letter-spacing:.2em;text-transform:uppercase;color:var(--lg-blau)}
.lg-dach::before{content:"";height:6px;width:0;background:var(--lg-amber);transition:width .6s var(--lg-ease)}
.lg-dach>span{opacity:0;transform:translateX(-6px);transition:opacity .5s .3s,transform .5s .3s var(--lg-ease)}
.lg-dach.is-in::before{width:24px}.lg-dach.is-in>span{opacity:1;transform:none}
.lg-dunkel .lg-dach{color:var(--lg-eis)}

/* 5 · Datenleitung: Trennlinie, auf der eine Kerbe läuft */
.lg-leitung{position:relative;height:1px;background:var(--lg-linie);overflow:hidden}
.lg-leitung::after{content:"";position:absolute;top:-2px;left:0;width:24px;height:5px;background:var(--lg-amber);animation:lg-paket 4.5s var(--lg-ease) infinite}
.lg-dunkel .lg-leitung{background:rgba(255,255,255,.18)}
@keyframes lg-paket{0%{transform:translateX(-24px)}70%,100%{transform:translateX(calc(100vw))}}

/* 6 · Karte: Winkel und Kerbe erscheinen beim Überfahren */
.lg-karte{position:relative;background:#fff;border:1px solid var(--lg-linie);border-radius:0;padding:28px;transition:transform .35s var(--lg-ease),border-color .35s}
.lg-karte::before{content:"";position:absolute;left:-1px;bottom:-1px;width:0;height:0;border-left:2px solid var(--lg-blau);border-bottom:2px solid var(--lg-blau);opacity:0;transition:width .45s var(--lg-ease),height .45s var(--lg-ease),opacity .2s}
.lg-karte::after{content:"";position:absolute;left:28px;top:-3px;width:0;height:6px;background:var(--lg-amber);transition:width .35s .1s var(--lg-ease)}
.lg-karte:hover,.lg-karte:focus-within{transform:translateY(-4px);border-color:transparent}
.lg-karte:hover::before,.lg-karte:focus-within::before{width:56%;height:56%;opacity:1}
.lg-karte:hover::after,.lg-karte:focus-within::after{width:24px}

/* 7 · Kennzahl zählt hoch, im Winkel gerahmt */
.lg-zahl{position:relative;padding:0 0 14px 18px;font:800 clamp(40px,6vw,64px)/1 var(--lg-head);color:var(--lg-nacht);font-variant-numeric:tabular-nums}
.lg-zahl::before{content:"";position:absolute;left:0;bottom:0;width:0;height:0;border-left:2px solid var(--lg-amber);border-bottom:2px solid var(--lg-amber);transition:width .8s var(--lg-ease),height .8s var(--lg-ease)}
.lg-zahl.is-in::before{width:48px;height:100%}
.lg-zahl small{display:block;margin-top:8px;font:700 12px/1.3 var(--lg-head);letter-spacing:.16em;text-transform:uppercase;color:#5F677A}
.lg-dunkel .lg-zahl{color:#fff}

/* 8 · Laufband für Leistungen */
.lg-band{overflow:hidden;white-space:nowrap;border-block:1px solid var(--lg-linie);padding:14px 0}
.lg-band>div{display:inline-flex;gap:40px;padding-right:40px;animation:lg-lauf 28s linear infinite}
.lg-band span{font:800 clamp(22px,3vw,34px)/1 var(--lg-head);text-transform:uppercase;color:var(--lg-nacht);display:inline-flex;align-items:center;gap:40px}
.lg-band span::after{content:"";width:24px;height:6px;background:var(--lg-amber)}
.lg-dunkel .lg-band{border-color:rgba(255,255,255,.15)}.lg-dunkel .lg-band span{color:#fff}
@keyframes lg-lauf{to{transform:translateX(-100%)}}

/* 9 · Notebook-Rahmen für Referenz-Screenshots (Bild als <img> oder Platzhalter) */
.lg-notebook{container-type:inline-size;position:relative}
.lg-notebook .scr{background:var(--lg-nacht);border-radius:3cqw 3cqw 0 0;padding:2.4cqw 2.4cqw 3cqw;margin:0 6cqw}
.lg-notebook .scr>*{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--lg-papier)}
.lg-notebook .basis{height:2.4cqw;background:var(--lg-eis);border-radius:0 0 2cqw 2cqw;position:relative}
.lg-notebook .basis::after{content:"";position:absolute;left:50%;top:0;width:16cqw;height:.9cqw;transform:translateX(-50%);background:#9DBDE4;border-radius:0 0 1cqw 1cqw}

/* Zierelemente nie klickbar: Links und Knöpfe darunter bleiben erreichbar */
.lg-karte::before,.lg-karte::after,.lg-zahl::before,.lg-dach::before,.lg-leitung::after,.lg-winkel,.lg-marke{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .lg-signal::after,.lg-leitung::after,.lg-band>div{animation:none}
  .lg-winkel path,.lg-marke path{stroke-dashoffset:0;transition:none;animation:none}.lg-marke path{fill-opacity:1;stroke-width:0}
  .lg-dach::before{width:24px;transition:none}.lg-dach>span{opacity:1;transform:none;transition:none}
  .lg-zahl::before{width:48px;height:100%;transition:none}
  .lg-karte,.lg-karte::before,.lg-karte::after{transition:none}
}