/* Leistungen-Kachel-Wand (Quelle: Demos/leistungen-kacheln, erzeugt mit split_wand.py) */
.lw{
  --anth:#4E4E4E; --off:#EFEFED; --grey:#C7C7C5; --orange:#FF914D; --white:#FFFFFF; --black:#000000;
  --head:Impact,"Anton","Arial Narrow",sans-serif;
  --body:"Montserrat",Arial,sans-serif;
  --tile-h:340px; --gap:16px;
  --s:300px; --m:384px; --l:504px;
}
/* ---------- Kopf ---------- */
.lw{padding:96px 0 104px;background:var(--anth);color:var(--white);overflow:hidden}
.lw-head{max-width:1200px;margin:0 auto 56px;padding:0 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.lw-eyebrow{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:12px;margin:0 0 24px}
.lw-eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--orange)}
.lw-head h2{font:400 clamp(36px,4.4vw,56px)/1.06 var(--head);margin:0;color:var(--white)}
.lw-head h2 span{color:var(--orange)}
.lw-head > p{margin:0;font-size:17px;line-height:1.6;color:var(--grey);max-width:440px}

/* ---------- Reihen ---------- */
.lw-rows{display:flex;flex-direction:column;gap:var(--gap)}
.lw-row{overflow:hidden;padding:8px 0}
.lw-track{display:flex;gap:var(--gap);width:max-content;will-change:transform}

/* ---------- Kacheln ---------- */
.lw-tile{flex:0 0 auto;width:var(--w);height:var(--tile-h);border-radius:20px;padding:24px;display:flex;flex-direction:column;
  text-decoration:none;color:var(--anth);position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lw-tile.lw-s{--w:var(--s)} .lw-tile.lw-m{--w:var(--m)} .lw-tile.lw-l{--w:var(--l)}
.lw-off{background:var(--off)} .lw-white{background:var(--white)} .lw-grey{background:var(--grey)}
.lw-dark{background:var(--anth);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--grey)}

.lw-meta{display:flex;align-items:center;gap:12px;font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.lw-meta .lw-no{font:400 18px/1 var(--head);letter-spacing:0}
.lw-arrow{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor;
  transition:background .3s,box-shadow .3s,transform .3s}
.lw-arrow svg{width:16px;height:16px;transition:transform .3s}
.lw-art{flex:1;min-height:0;position:relative;margin:8px 0}
.lw-art > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:float 6s ease-in-out infinite}
.lw-foot{min-height:84px}
.lw-foot h3{font:400 30px/1.05 var(--head);margin:0 0 8px}
.lw-foot p{margin:0;font-size:14px;line-height:1.45}
.lw-dark .lw-foot p{color:var(--grey)}

.lw-tile:hover{transform:translateY(-6px)}
.lw-tile:hover .lw-arrow{background:var(--orange);box-shadow:none;color:var(--black)}
.lw-tile:hover .lw-arrow svg{transform:translateX(2px) rotate(-45deg)}
.lw-tile:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

.lw-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:20px;background:var(--orange);color:var(--black);
  font:700 13px/1 var(--body);margin-top:16px}

/* Einschweben beim ersten Sichtbarwerden (Idee aus der Lyuma-Vorlage) */
.lw-tile{opacity:0;transform:translateY(40px) scale(.96)}
.lw.lw-in .lw-tile{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d,0) * 90ms),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * 90ms)}
.lw.lw-in .lw-tile:hover{transform:translateY(-6px);transition-delay:0s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- SVG-Grundstil (DH-Lineart) ---------- */
.lw-art svg{fill:none;stroke:var(--black);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lw-art svg *{transform-box:fill-box;transform-origin:center}
.lw-o{stroke:var(--orange)} .lw-of{fill:var(--orange);stroke:none} .lw-lg{stroke:var(--grey)}
.lw-dark .lw-art svg{stroke:var(--white)}

/* 1 Workshops: Ideen fließen zur Glühbirne */
.ws-flow{stroke-dasharray:2 7;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.ws-p{animation:bob 2.4s ease-in-out infinite}
.ws-p:nth-of-type(2){animation-delay:.3s}.ws-p:nth-of-type(3){animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ws-glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.ws-ray{animation:ray 2.4s ease-in-out infinite}
@keyframes ray{0%,25%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.15)}}

/* 3 Personal Training: Tippen und Antwort */
.pt-dot{animation:typing 1.2s ease-in-out infinite}
.pt-dot:nth-of-type(2){animation-delay:.15s}.pt-dot:nth-of-type(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
.pt-line{stroke-dasharray:1;stroke-dashoffset:1;animation:write 4s ease-in-out infinite}
.pt-line.b{animation-name:write2}
@keyframes write{0%,10%{stroke-dashoffset:1;opacity:1}35%,80%{stroke-dashoffset:0;opacity:1}92%{opacity:0;stroke-dashoffset:0}100%{opacity:0}}
@keyframes write2{0%,30%{stroke-dashoffset:1;opacity:1}55%,80%{stroke-dashoffset:0;opacity:1}92%{opacity:0;stroke-dashoffset:0}100%{opacity:0}}

/* 4 Keynotes: Schallwellen */
.kn-w{opacity:0;animation:wave 2.2s ease-out infinite}
.kn-w.w2{animation-delay:.25s}.kn-w.w3{animation-delay:.5s}
@keyframes wave{0%{opacity:0;transform:scale(.85)}30%{opacity:1}70%,100%{opacity:0;transform:scale(1.08)}}

/* 5 KI-Beauftragter: Schild und Haken */
.kb-ring{stroke-dasharray:3 8;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.kb-shield,.kb-check{stroke-dasharray:1;stroke-dashoffset:1}
.kb-shield{animation:shield 5s ease-in-out infinite}
.kb-check{animation:check 5s ease-in-out infinite}
@keyframes shield{0%{stroke-dashoffset:1;opacity:1}35%,85%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes check{0%,35%{stroke-dashoffset:1;opacity:1}50%,85%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}

/* 6 Schulungspflicht: Abhaken und Stempel */
.sp-c{stroke-dasharray:1;stroke-dashoffset:1;animation:tick1 5s ease-in-out infinite}
.sp-c.c2{animation-name:tick2}.sp-c.c3{animation-name:tick3}
@keyframes tick1{0%,8%{stroke-dashoffset:1;opacity:1}16%,85%{stroke-dashoffset:0;opacity:1}95%,100%{opacity:0}}
@keyframes tick2{0%,20%{stroke-dashoffset:1;opacity:1}28%,85%{stroke-dashoffset:0;opacity:1}95%,100%{opacity:0}}
@keyframes tick3{0%,32%{stroke-dashoffset:1;opacity:1}40%,85%{stroke-dashoffset:0;opacity:1}95%,100%{opacity:0}}
.sp-stamp{opacity:0;animation:stamp 5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes stamp{0%,46%{opacity:0;transform:scale(1.8) rotate(0)}56%,85%{opacity:1;transform:scale(1) rotate(-12deg)}95%,100%{opacity:0;transform:scale(1) rotate(-12deg)}}
.sp-stamp text{font:400 13px var(--head);fill:var(--black);stroke:none;letter-spacing:.04em}

/* 7 KI-Check: Text im Tacho */
.lw-art svg .kc-needle{transform-box:view-box;transform-origin:0 0}
.kc-val{font:400 30px var(--head);fill:var(--anth);stroke:none}
.kc-lbl{font:700 9px var(--body);fill:var(--anth);stroke:none;letter-spacing:.14em}

/* 9 KI-night: Sterne und Bausteine */
.kn-star{animation:twinkle 2.6s ease-in-out infinite}
.kn-star:nth-of-type(2){animation-delay:.6s}.kn-star:nth-of-type(3){animation-delay:1.2s}.kn-star:nth-of-type(4){animation-delay:1.8s}
@keyframes twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1) rotate(45deg);opacity:1}}
.kn-b{opacity:0;animation:drop1 5s cubic-bezier(.3,1.5,.6,1) infinite}
.kn-b.b2{animation-name:drop2}.kn-b.b3{animation-name:drop3}
@keyframes drop1{0%{opacity:0;transform:translateY(-60px)}12%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes drop2{0%,12%{opacity:0;transform:translateY(-60px)}24%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes drop3{0%,24%{opacity:0;transform:translateY(-60px)}36%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}

/* 10 Erstgespräch: Termin pulsiert */
.eg-pick{animation:pick 2.4s ease-in-out infinite}
@keyframes pick{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}

/* Logo-Kachel */
.lw-logo{width:72%;max-width:220px;display:block}
.lw-line{height:2px;width:0;border-radius:2px;background:var(--orange);margin:24px auto 0;animation:line 4s ease-in-out infinite}
@keyframes line{0%{width:0}40%,80%{width:64px}100%{width:0}}
.lw-dark .lw-art{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:820px){
  .lw{--tile-h:320px;--s:256px;--m:300px;--l:340px}
  .lw{padding:72px 0 80px}
  .lw-head{grid-template-columns:1fr;gap:24px;padding:0 16px;margin-bottom:40px}
  .lw-foot h3{font-size:26px}
}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  .lw-track{flex-wrap:wrap;width:auto;justify-content:center;padding:0 16px;transform:none!important}
  .lw-track [aria-hidden="true"]{display:none}
  .lw-art svg,.lw-art svg *,.lw-line{animation:none!important}
  .pt-line,.kb-shield,.kb-check,.sp-c{stroke-dashoffset:0}
  .kn-w,.sp-stamp,.kn-b{opacity:1}
  .sp-stamp{transform:rotate(-12deg)}
  .lw-line{width:64px}
  .lw-tile{opacity:1;transform:none}
}