/* Fusszeile mit Buehne (22.10.2026, Ilja: Figuren fest im Footer, Footer besonderer gestalten).
   Eigene Datei, eingebunden aus teile/fuss.html, damit site.css unberuehrt bleibt (dort liegen die Grundregeln .fuss, .fuss__raster).
   Buehne ohne Knoepfe (Startseite hat direkt davor den Abschluss mit Knoepfen), Satz = Slogan „Developed by carers.“.
   Maedchen und Junge winken als Video-Schleife (assets/video/avatar, freigestellt, WebM + HEVC mit Alpha) auf einer
   leuchtenden Horizontlinie, dahinter ein leiser Sternenhimmel. Kein Gold als Schrift auf Navy. Bewegung nur bei
   prefers-reduced-motion: no-preference; die Videos starten erst sichtbar (site.js, data-spielen-sichtbar). */

.fuss{padding-top:0;border-top:0;background:var(--midnight)}

/* Buehne */
.fuss__buehne{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 0;
  background:radial-gradient(70% 90% at 50% 100%,rgba(246,196,83,.16),transparent 62%),
             radial-gradient(40% 60% at 15% 0%,rgba(42,157,110,.10),transparent 70%),
             linear-gradient(180deg,var(--navy) 0%,var(--midnight) 100%)}
.fuss__buehne-innen{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(0,2.1fr) 1fr;align-items:end;gap:clamp(16px,3vw,40px)}
.fuss__botschaft{align-self:center;text-align:center;padding-bottom:clamp(40px,5vw,72px)}
.fuss__stern{display:inline-block;font-size:26px;line-height:1;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.fuss__satz{margin-top:12px;font-size:clamp(36px,4.8vw,66px);line-height:1.02;letter-spacing:-.045em;font-weight:700;color:#fff;text-wrap:balance}
.fuss__unterzeile{margin-top:14px;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.72)}

/* Figuren stehen auf dem Horizont */
.fuss__figur{display:flex;justify-content:center;align-items:flex-end}
.fuss__video{display:block;height:clamp(170px,19vw,250px);width:auto;max-width:100%;background:transparent;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.fuss__figur--links .fuss__video{transform:translateX(8%)}
.fuss__figur--rechts .fuss__video{transform:translateX(-8%)}

/* Horizont: leuchtende Linie, auf der die Figuren stehen */
.fuss__horizont{position:relative;z-index:1;display:block;height:1px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(246,196,83,.55) 30%,rgba(255,255,255,.75) 50%,rgba(246,196,83,.55) 70%,transparent)}
.fuss__horizont::after{content:"";position:absolute;left:20%;right:20%;top:-14px;height:28px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(246,196,83,.28),transparent);filter:blur(6px)}

/* Sternenhimmel: zehn Punkte, die langsam funkeln */
.fuss__himmel{position:absolute;inset:0;z-index:0;pointer-events:none}
.fuss__himmel i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(246,196,83,.55);opacity:.55}
.fuss__himmel i:nth-child(1){left:8%;top:18%}.fuss__himmel i:nth-child(2){left:19%;top:42%}
.fuss__himmel i:nth-child(3){left:31%;top:12%}.fuss__himmel i:nth-child(4){left:44%;top:30%;width:2px;height:2px}
.fuss__himmel i:nth-child(5){left:57%;top:9%}.fuss__himmel i:nth-child(6){left:66%;top:36%;width:2px;height:2px}
.fuss__himmel i:nth-child(7){left:78%;top:16%}.fuss__himmel i:nth-child(8){left:89%;top:44%}
.fuss__himmel i:nth-child(9){left:94%;top:10%;width:2px;height:2px}.fuss__himmel i:nth-child(10){left:4%;top:58%;width:2px;height:2px}
@media (prefers-reduced-motion:no-preference){
  .fuss__himmel i{animation:fuss-funkeln 4.5s ease-in-out infinite alternate}
  .fuss__himmel i:nth-child(2n){animation-duration:6s;animation-delay:-2s}
  .fuss__himmel i:nth-child(3n){animation-duration:5.2s;animation-delay:-3.4s}
}
@keyframes fuss-funkeln{from{opacity:.15;transform:scale(.6)}to{opacity:.8;transform:scale(1.15)}}

/* Spalten unter der Buehne */
.fuss .fuss__raster{padding-top:clamp(48px,5vw,64px)}
.fuss nav a{transition:color .2s ease}

/* Schmale Fenster: Satz oben, die beiden Figuren nebeneinander darunter auf dem Horizont */
@media (max-width:820px){
  .fuss__buehne-innen{grid-template-columns:1fr 1fr;grid-template-areas:"text text" "links rechts";row-gap:8px}
  .fuss__botschaft{grid-area:text;padding-bottom:18px}
  .fuss__figur--links{grid-area:links;justify-content:flex-end}
  .fuss__figur--rechts{grid-area:rechts;justify-content:flex-start}
  .fuss__video{height:150px}
  .fuss__figur--links .fuss__video,.fuss__figur--rechts .fuss__video{transform:none}
}