/* ============================================================
   Bewegung — Zusammenfuehrung A + B
   Weicher als A, lebendiger als B: Elemente steigen auf und skalieren
   dabei minimal. Runde Formen bewegen sich rund.
   Animiert werden nur transform, opacity und clip-path.

   Der Block ganz unten schaltet alles ab, wenn das System reduzierte
   Bewegung meldet. In der Testumgebung hebt der Schalter in der
   Variantenleiste das ueber .bewegung-an wieder auf.
   ============================================================ */
:root {
  --dur-kurz:   .35s;
  --dur-mittel: .65s;
  --dur-lang:   1s;
  --ease-weich: cubic-bezier(.22,1,.36,1);
  --ease-ruhig: cubic-bezier(.4,0,.2,1);
  --ease-zurueck: cubic-bezier(.34,1.56,.64,1);   /* leichtes Ueberschwingen */
  --verzug: 0ms;
}

.js [data-anim] { will-change: transform, opacity; }

/* ---------------------------------------------- Grundmuster */
.js [data-anim="auf"]   { opacity: 0; transform: translateY(24px); }
.js [data-anim="karte"] { opacity: 0; transform: translateY(28px) scale(.97); }
.js [data-anim="bild"]  { clip-path: inset(0 0 100% 0); }
.js [data-anim="linie"] { transform: scaleX(0); transform-origin: left; }

.js [data-anim="auf"].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-mittel) var(--ease-weich) var(--verzug),
              transform var(--dur-lang) var(--ease-weich) var(--verzug);
}
.js [data-anim="karte"].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-mittel) var(--ease-weich) var(--verzug),
              transform var(--dur-lang) var(--ease-zurueck) var(--verzug);
}
.js [data-anim="bild"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-lang) var(--ease-ruhig) var(--verzug);
}
.js [data-anim="linie"].is-in {
  transform: scaleX(1);
  transition: transform var(--dur-mittel) var(--ease-ruhig) var(--verzug);
}

/* ---------------------------------------------- Ueberschriften wortweise */
/* max-width und overflow-wrap sind noetig, weil ein inline-block sonst
   so breit wird wie sein laengstes Wort - und mit overflow:hidden waere
   der Ueberstand nicht einmal sichtbar, sondern abgeschnitten. */
.wort {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .1em; max-width: 100%; overflow-wrap: anywhere;
}
.wort > span { display: inline-block; }
.js [data-anim="worte"] .wort > span { transform: translateY(110%); }
.js [data-anim="worte"].is-in .wort > span {
  transform: none;
  transition: transform var(--dur-lang) var(--ease-weich);
}
.js [data-anim="worte"].is-in .wort:nth-child(1)  > span { transition-delay: 0ms; }
.js [data-anim="worte"].is-in .wort:nth-child(3)  > span { transition-delay: 60ms; }
.js [data-anim="worte"].is-in .wort:nth-child(5)  > span { transition-delay: 120ms; }
.js [data-anim="worte"].is-in .wort:nth-child(7)  > span { transition-delay: 180ms; }
.js [data-anim="worte"].is-in .wort:nth-child(9)  > span { transition-delay: 240ms; }
.js [data-anim="worte"].is-in .wort:nth-child(n+11) > span { transition-delay: 300ms; }

/* Abschnittsueberschriften bekommen eine Linie, die sich zieht */
.js .section__head h2 { position: relative; padding-bottom: .35em; }
.js .section__head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 3.5rem;
  background: var(--accent); border-radius: var(--radius-pill);
  transform: scaleX(0); transform-origin: left;
}
.js .section__head h2.is-in::after {
  transform: scaleX(1);
  transition: transform var(--dur-lang) var(--ease-ruhig) 220ms;
}

/* ---------------------------------------------- Bilder */
.js [data-anim="bild"] img { transform: scale(1.09); }
.js [data-anim="bild"].is-in img {
  transform: none;
  transition: transform 1.4s var(--ease-weich) var(--verzug);
}

/* ---------------------------------------------- Normmarker: Punkt springt auf */
.marker { transition: background var(--dur-kurz) var(--ease-ruhig); }
.js [data-anim] .marker::before { transform: scale(0); }
.js [data-anim].is-in .marker::before {
  transform: scale(1);
  transition: transform var(--dur-mittel) var(--ease-zurueck) calc(var(--verzug) + 180ms);
}

/* ---------------------------------------------- Fortschrittsbalken */
.scroll-fortschritt {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  pointer-events: none;
}

/* ---------------------------------------------- Kopfzeile */
.site-header {
  transition: background var(--dur-kurz) var(--ease-ruhig),
              border-color var(--dur-kurz) var(--ease-ruhig),
              box-shadow var(--dur-kurz) var(--ease-ruhig);
}
.site-header__inner { transition: min-height var(--dur-kurz) var(--ease-ruhig); }
.logo img { transition: width var(--dur-kurz) var(--ease-ruhig); }
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(20,22,27,.06);
}
.site-header.is-scrolled .site-header__inner { min-height: 62px; }
.site-header.is-scrolled .logo img { width: 122px; }
/* Die Navigationsleiste bleibt immer sichtbar - sie rueckt beim Scrollen
   lediglich enger zusammen. */

/* ---------------------------------------------- Navigation */
.nav__list a { transition: background var(--dur-kurz) var(--ease-ruhig), color var(--dur-kurz) var(--ease-ruhig); }
@media (min-width: 980px) {
  .nav__list a.is-aktiv { background: var(--surface-warm); color: var(--accent-text); }
}
.nav__toggle span { transition: transform var(--dur-kurz) var(--ease-weich), opacity .2s; }
.nav__list.is-open > li { animation: menue-auf var(--dur-mittel) var(--ease-weich) backwards; }
.nav__list.is-open > li:nth-child(2) { animation-delay: 40ms; }
.nav__list.is-open > li:nth-child(3) { animation-delay: 80ms; }
.nav__list.is-open > li:nth-child(4) { animation-delay: 120ms; }
.nav__list.is-open > li:nth-child(5) { animation-delay: 160ms; }
.nav__list.is-open > li:nth-child(6) { animation-delay: 200ms; }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-10px); } }

/* ---------------------------------------------- Schaltflaechen */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-kurz) var(--ease-weich),
              box-shadow var(--dur-kurz) var(--ease-weich),
              border-color var(--dur-kurz) var(--ease-ruhig),
              background var(--dur-kurz) var(--ease-ruhig);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at var(--zeiger-x, 50%) var(--zeiger-y, 50%),
              rgba(255,255,255,.55), transparent 62%);
  opacity: 0; transition: opacity var(--dur-kurz) var(--ease-ruhig);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 12px 30px rgba(255,143,14,.45); }
.btn--primary:hover::after { opacity: 1; }
.btn--ghost:hover { border-color: var(--ink-3); box-shadow: var(--schatten-1); }
.on-dark .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.btn svg { transition: transform var(--dur-kurz) var(--ease-zurueck); }
.btn:hover svg { transform: translateX(4px); }

/* Welle beim Klick */
.welle {
  position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: rgba(255,255,255,.5);
  transform: scale(0); opacity: .8; pointer-events: none;
  animation: welle-aus 600ms var(--ease-ruhig) forwards;
}
@keyframes welle-aus { to { transform: scale(28); opacity: 0; } }

/* ---------------------------------------------- Karten */
.service, .checklist li, .contact__data > div {
  position: relative;
  transition: transform var(--dur-kurz) var(--ease-weich),
              box-shadow var(--dur-kurz) var(--ease-weich),
              border-color var(--dur-kurz) var(--ease-ruhig);
}
/* Ein weiches Licht folgt dem Zeiger ueber der Karte */
.service::after, .contact__data > div::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--zeiger-x, 50%) var(--zeiger-y, 50%),
              rgba(255,143,14,.10), transparent 65%);
  opacity: 0; transition: opacity var(--dur-mittel) var(--ease-ruhig);
}
.service:hover::after, .contact__data > div:hover::after { opacity: 1; }
.service:hover, .contact__data > div:hover {
  transform: translateY(-5px);
  box-shadow: var(--schatten-2);
  border-color: #D8D2C8;
}
.checklist li:hover { transform: translateX(5px); border-color: #D8D2C8; }

/* ---------------------------------------------- Haken zeichnen sich */
.js .checklist li[data-anim]::before { transform: rotate(-45deg) scale(0); }
.js .checklist li[data-anim].is-in::before {
  transform: rotate(-45deg) scale(1);
  transition: transform var(--dur-mittel) var(--ease-zurueck) calc(var(--verzug) + 160ms);
}

/* ---------------------------------------------- Listenpunkte im Angebot */
.js .service ul li { opacity: 0; transform: translateX(-8px); }
.js .service[data-anim].is-in ul li {
  opacity: 1; transform: none;
  transition: opacity var(--dur-mittel) var(--ease-ruhig), transform var(--dur-mittel) var(--ease-weich);
}
.js .service[data-anim].is-in ul li:nth-child(1) { transition-delay: calc(var(--verzug) + 200ms); }
.js .service[data-anim].is-in ul li:nth-child(2) { transition-delay: calc(var(--verzug) + 260ms); }
.js .service[data-anim].is-in ul li:nth-child(3) { transition-delay: calc(var(--verzug) + 320ms); }
.js .service[data-anim].is-in ul li:nth-child(n+4) { transition-delay: calc(var(--verzug) + 380ms); }

/* ---------------------------------------------- Textlinks */
.prose a, .lead a, .site-footer a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-kurz) var(--ease-ruhig), color var(--dur-kurz);
}
.prose a:hover, .lead a:hover, .site-footer a:hover { background-size: 100% 1px; }

/* ---------------------------------------------- Schalter in der Variantenleiste */
.bewegung-schalter {
  font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--surface-dark); background: var(--accent);
  border: 0; border-radius: var(--radius-pill);
  padding: .3rem .85rem; cursor: pointer; margin-left: .5rem;
  transition: filter var(--dur-kurz) var(--ease-ruhig);
}
.bewegung-schalter[aria-pressed="false"] {
  color: var(--ink-invert); background: rgba(255,255,255,.14);
}
.bewegung-schalter:hover { filter: brightness(1.1); }

/* ============================================================
   Bewegung abbestellt — ausser der Schalter hebt es auf
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-an).js [data-anim],
  html:not(.bewegung-an).js [data-anim].is-in,
  html:not(.bewegung-an).js [data-anim="worte"] .wort > span,
  html:not(.bewegung-an).js [data-anim="bild"] img,
  html:not(.bewegung-an).js .service ul li {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  html:not(.bewegung-an) .scroll-fortschritt { display: none; }
  html:not(.bewegung-an).js [data-anim] .marker::before,
  html:not(.bewegung-an).js [data-anim].is-in .marker::before { transform: none !important; }
  html:not(.bewegung-an).js .checklist li[data-anim]::before,
  html:not(.bewegung-an).js .checklist li[data-anim].is-in::before { transform: rotate(-45deg) !important; }
  html:not(.bewegung-an).js .section__head h2::after { transform: scaleX(1) !important; transition: none !important; }
  html:not(.bewegung-an) .btn:hover,
  html:not(.bewegung-an) .service:hover,
  html:not(.bewegung-an) .contact__data > div:hover,
  html:not(.bewegung-an) .checklist li:hover { transform: none !important; }
  html:not(.bewegung-an) .welle { display: none; }
  html:not(.bewegung-an) .btn,
  html:not(.bewegung-an) .btn::after,
  html:not(.bewegung-an) .btn svg,
  html:not(.bewegung-an) .service,
  html:not(.bewegung-an) .service::after,
  html:not(.bewegung-an) .checklist li,
  html:not(.bewegung-an) .contact__data > div,
  html:not(.bewegung-an) .site-header,
  html:not(.bewegung-an) .site-header__inner,
  html:not(.bewegung-an) .logo img,
  html:not(.bewegung-an) .nav__list a,
  html:not(.bewegung-an) .nav__toggle span,
  html:not(.bewegung-an) .marker {
    transition: none !important;
  }
  html:not(.bewegung-an) .nav__list.is-open > li { animation: none !important; }
}

/* ============================================================
   Scrollgekoppelte Bewegung
   --fortschritt liefert das Skript fortlaufend: 0 beim Eintreten von unten,
   1 beim Verlassen nach oben. Bewusst ueber die eigenstaendigen
   Eigenschaften translate und scale, damit sie sich nicht mit dem
   transform des Einblendens ins Gehege kommen - beide werden kombiniert.
   ============================================================ */
.js .split__media, .js .service__media, .js .entry__media { overflow: clip; }

/* Bilder wandern langsamer als die Seite und atmen leicht */
.js .split__media img,
.js .service__media img,
.js .entry__media img {
  --fortschritt: .5;
  translate: 0 calc((var(--fortschritt) - .5) * -36px);
  scale: calc(1.06 - var(--fortschritt) * .04);
  will-change: translate, scale;
}

/* Der hervorgehobene Satz schiebt sich sanft mit */
.js .statement-panel, .js .notice, .js .statement {
  --fortschritt: .5;
  translate: 0 calc((var(--fortschritt) - .5) * -24px);
  will-change: translate;
}

/* Abschnittskoepfe treten leicht heran */
.js .section__head {
  --fortschritt: .5;
  translate: 0 calc((var(--fortschritt) - .5) * -14px);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-an).js .split__media img,
  html:not(.bewegung-an).js .service__media img,
  html:not(.bewegung-an).js .entry__media img,
  html:not(.bewegung-an).js .statement-panel,
  html:not(.bewegung-an).js .notice,
  html:not(.bewegung-an).js .statement,
  html:not(.bewegung-an).js .section__head {
    translate: none !important;
    scale: none !important;
  }
}

/* ============================================================
   Native scrollgesteuerte Bewegung
   Wo der Browser animation-timeline beherrscht, laeuft die Bewegung im
   Compositor: keine Scroll-Ereignisse, kein Nachziehen, ruhiger als die
   Rechnung im Skript. Die --fortschritt-Variante darueber bleibt als
   Rueckfalloption fuer aeltere Browser bestehen.
   ============================================================ */
@supports (animation-timeline: view()) {
  .js .split__media img,
  .js .service__media img,
  .js .entry__media img {
    translate: none; scale: none;
    animation: bild-mitlaufen linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes bild-mitlaufen {
    from { translate: 0 20px;  scale: 1.07; }
    to   { translate: 0 -20px; scale: 1.01; }
  }

  .js .statement-panel, .js .notice, .js .statement {
    translate: none;
    animation: satz-mitlaufen linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes satz-mitlaufen {
    from { translate: 0 26px; }
    to   { translate: 0 -26px; }
  }

  .js .section__head {
    translate: none;
    animation: kopf-mitlaufen linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes kopf-mitlaufen {
    from { translate: 0 14px; }
    to   { translate: 0 -14px; }
  }

  /* Der Hero taucht beim Weiterscrollen leicht ab */
  .js .hero__panel {
    animation: hero-abtauchen linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
    transform-origin: top center;
  }
  @keyframes hero-abtauchen {
    from { scale: 1;   filter: brightness(1); }
    to   { scale: .965; filter: brightness(.82); }
  }


  /* Der Fortschrittsbalken kommt ohne Skript aus */
  .scroll-fortschritt {
    animation: fortschritt linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    html:not(.bewegung-an).js .split__media img,
    html:not(.bewegung-an).js .service__media img,
    html:not(.bewegung-an).js .entry__media img,
    html:not(.bewegung-an).js .statement-panel,
    html:not(.bewegung-an).js .notice,
    html:not(.bewegung-an).js .statement,
    html:not(.bewegung-an).js .section__head,
    html:not(.bewegung-an).js .hero__panel,
    html:not(.bewegung-an) .scroll-fortschritt {
      animation: none !important;
      translate: none !important;
      scale: none !important;
      opacity: 1 !important;
      filter: none !important;
    }
  }
}