/* Projekt Chili V10.5 – dezente öffentliche Animationen */
:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-fast:220ms;
  --motion-normal:620ms;
}

html.motion-capable{scroll-behavior:smooth}

html.motion-capable body{
  animation:chili-page-in 420ms var(--motion-ease) both;
}

@keyframes chili-page-in{
  from{opacity:.01}
  to{opacity:1}
}

/* Hero: nur beim Seitenaufruf, keine dauerhafte Ablenkung */
html.motion-capable .hero .inner > *{
  opacity:0;
  transform:translateY(18px);
  animation:chili-hero-in 720ms var(--motion-ease) forwards;
}
html.motion-capable .hero .inner > *:nth-child(1){animation-delay:70ms}
html.motion-capable .hero .inner > *:nth-child(2){animation-delay:150ms}
html.motion-capable .hero .inner > *:nth-child(3){animation-delay:230ms}
html.motion-capable .hero .inner > *:nth-child(4){animation-delay:310ms}
html.motion-capable .hero .inner > *:nth-child(5){animation-delay:390ms}

@keyframes chili-hero-in{
  to{opacity:1;transform:none}
}

html.motion-capable .hero{
  overflow:hidden;
}
html.motion-capable .hero::before{
  content:"";
  position:absolute;
  inset:-25% auto -25% -32%;
  width:23%;
  pointer-events:none;
  z-index:0;
  transform:skewX(-17deg) translateX(-170%);
  background:linear-gradient(90deg,transparent,rgba(226,29,43,.055),rgba(255,255,255,.025),transparent);
  animation:chili-hero-sweep 1500ms 260ms var(--motion-ease) both;
}
@keyframes chili-hero-sweep{
  to{transform:skewX(-17deg) translateX(700%)}
}

/* Scroll-Reveal */
html.motion-capable .motion-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-normal) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}
html.motion-capable .motion-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Kleiner Akzent für Kennzahlen */
html.motion-capable .motion-reveal.is-visible .metric,
html.motion-capable .motion-reveal.is-visible .big{
  animation:chili-metric-in 500ms calc(var(--motion-delay,0ms) + 90ms) var(--motion-ease) both;
}
@keyframes chili-metric-in{
  from{transform:scale(.975);filter:brightness(.92)}
  to{transform:scale(1);filter:brightness(1)}
}

/* Karten und Navigation: nur auf Geräten mit echter Hover-Funktion */
.card,
.page-nav > a,
.btn,
.gallery-card,
figure img,
.gallery img,
.media img{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease;
}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px);
    border-color:rgba(226,29,43,.42);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
  }
  .page-nav > a:hover{
    transform:translateY(-3px);
    border-color:rgba(226,29,43,.48);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
  .btn:hover{
    transform:translateY(-2px);
  }
  .gallery-card:hover,
  figure:hover{
    border-color:rgba(226,29,43,.38);
  }
  .gallery-card:hover img,
  figure:hover img,
  .gallery a:hover img,
  .media a:hover img{
    transform:scale(1.025);
    filter:brightness(1.04);
  }
}

/* Timeline/Updates erhalten beim Erscheinen einen kurzen roten Marker */
html.motion-capable .event.motion-reveal{
  position:relative;
}
html.motion-capable .event.motion-reveal::before{
  transform-origin:center;
  transition:transform 420ms var(--motion-ease),opacity 420ms ease;
  transform:scale(.55);
  opacity:.35;
}
html.motion-capable .event.motion-reveal.is-visible::before{
  transform:scale(1);
  opacity:1;
}

/* Topbar reagiert erst beim Scrollen – sehr subtil */
.topbar{
  transition:box-shadow 260ms ease,border-color 260ms ease,background-color 260ms ease;
}
.topbar.motion-scrolled{
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  border-bottom-color:rgba(226,29,43,.22);
}

/* Links mit klarer Bedienrückmeldung */
main a:not(.btn),
.footer a{
  text-underline-offset:3px;
  transition:color 180ms ease,text-decoration-color 180ms ease;
}

/* Accessibility: vollständig ruhig, wenn Nutzer reduzierte Bewegung wünscht */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.motion-capable body,
  html.motion-capable .hero .inner > *,
  html.motion-capable .hero::before,
  html.motion-capable .motion-reveal,
  html.motion-capable .motion-reveal.is-visible .metric,
  html.motion-capable .motion-reveal.is-visible .big{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .card,.page-nav>a,.btn,.gallery-card,figure img,.gallery img,.media img,.topbar{
    transition:none!important;
  }
}


/* V10.6 – einheitlicher QR-Code im Footer */
.footer-qr{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:18px;
}
.footer-qr img{
  box-sizing:border-box;
  width:82px!important;
  height:82px!important;
  padding:6px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.88);
  border-radius:11px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  object-fit:contain;
}
.footer-qr-copy{
  display:grid;
  gap:3px;
}
.footer-qr-copy b{
  color:#f0f2f4;
  font-size:.82rem;
}
.footer-qr-copy span{
  color:#8f969d;
  font-size:.75rem;
  line-height:1.38;
}


/* V10.7 – Footer auf Desktop sauber in vier Spalten */
@media (min-width: 901px){
  .footer .footergrid{
    display:grid!important;
    grid-template-columns:minmax(360px,1.55fr) repeat(3,minmax(150px,.78fr))!important;
    column-gap:54px!important;
    row-gap:24px!important;
    align-items:start!important;
  }
  .footer .footergrid > div{
    min-width:0;
  }
}

/* Tablet: Navigation in zwei Spalten, Projektblock über volle Breite */
@media (min-width: 651px) and (max-width: 900px){
  .footer .footergrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:32px 28px!important;
  }
  .footer .footergrid > div:first-child{
    grid-column:1/-1;
  }
}

/* Mobil bleibt alles gut lesbar untereinander */
@media (max-width: 650px){
  .footer .footergrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
}


/* V10.8 – Progressive Enhancement:
   Inhalte bleiben IMMER sichtbar. Die Animation wird nur beim Eintritt
   in den Viewport darübergelegt; sie darf nie leere Seitenbereiche erzeugen. */
html.motion-capable .motion-reveal,
html.motion-capable .motion-reveal.is-visible{
  opacity:1!important;
  transform:none!important;
  will-change:auto!important;
}

/* V11 SEO – kontextuelle interne Verlinkung */
.seo-related{padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
.seo-related h2{margin:6px 0 18px}
.seo-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seo-related-grid a{display:block;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.025);text-decoration:none;font-weight:700}
.seo-related-grid a:hover{border-color:rgba(226,29,43,.48);transform:translateY(-2px)}
@media(max-width:700px){.seo-related-grid{grid-template-columns:1fr}}