/* ============================================================
   Wiesner Rohrfrei – Bewegung
   Übernommen aus dem Entwurf /entwurf/ (v4).

   Die Bewegung folgt drei Gesten, überall dieselben. Das ist
   der Unterschied zwischen viel Bewegung und Effektsalat:

     A  FREILEGEN   ein Wischer legt frei, was verdeckt war
                    → Hero-Überschrift, jede h2
     B  IMPULS      ein Lichtstoß läuft durch ein Rohr
                    → Sektionsränder, Hero-Hintergrund, Buttons
     C  SETZEN      etwas kommt an und beruhigt sich
                    → Textblöcke, Karten, Flansche

   Layout, Typografie und Farben bleiben unangetastet; hier
   steht ausschließlich Bewegung. Header und Footer sind
   bewusst ausgenommen.

   Alles, was Inhalt zunächst verbirgt, hängt an der Klasse
   `anim-js` am <html>-Element – ohne JavaScript ist die Seite
   sofort vollständig sichtbar.

   Jeder Block ist einzeln abschaltbar, die Nummern stehen in
   den Überschriften.
   ============================================================ */

:root {
  --anim-ease-release: cubic-bezier(0.62, 0, 0.15, 1);
  --anim-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-pipe: url("../img/rohr-line.png");
  --anim-schema: url("../img/rohre-hintergrund.png");

  /* Das Wasser im Hero-Rohrschema. Als RGB-Tripel, damit die
     Deckkraft im Verlauf frei bleibt. Aufgehelltes CI-Blau,
     leicht nach Cyan gezogen, damit es auf dem dunklen Grund
     als Wasser liest und nicht als grauer Schleier.
     Ruhiger: 110,150,205 · frischer: 140,205,255 */
  --anim-wasser: 125, 178, 232;
}

/* ------------------------------------------------------------
   0) Der pauschale fadeInUp aus animate.css tritt zurück
   Er liegt im Seiten-HTML auf .hero-layout. Solange JavaScript
   läuft, übernimmt die choreografierte Hero-Sequenz (Block 4).
   Ohne JS bleibt der fadeInUp wie bisher.
   ------------------------------------------------------------ */

.anim-js .hero-layout.animate__animated,
.anim-js .hero-copy.animate__animated {
  animation: none;
  opacity: 1;
}

/* ============================================================
   1) GESTE A – FREILEGEN
   Ein Wischer von links legt frei. Genau das tut die Firma.
   ============================================================ */

/* Die senkrechten Werte sind negativ: der Ausschnitt reicht
   über die Textbox hinaus, sonst schneidet er Unterlängen
   (p, g, ß) und Umlautpunkte ab. */
@keyframes wiesner-clear {
  from { clip-path: inset(-0.3em 100% -0.35em -0.1em); }
  to   { clip-path: inset(-0.3em -0.15em -0.35em -0.1em); }
}

/* jede Sektionsüberschrift wird freigelegt */
.anim-js .reveal-head h2 {
  clip-path: inset(-0.3em 100% -0.35em -0.1em);
}

.anim-js .reveal-head.is-visible h2 {
  animation: wiesner-clear 0.82s var(--anim-ease-release) forwards;
}

/* der Fließtext darunter kommt kurz danach nach */
.anim-js .reveal-head > p,
.anim-js .reveal-head > a {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--anim-ease-settle) 0.2s,
              transform 0.5s var(--anim-ease-settle) 0.2s;
}

.anim-js .reveal-head.is-visible > p,
.anim-js .reveal-head.is-visible > a {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2) GESTE B – IMPULS AM SEKTIONSRAND
   Das Theme legt an jeden Sektionsrand rohr-line.png, ein Rohr
   in Seitenansicht. Bisher rein dekorativ. Jetzt schießt ein
   Lichtstoß hindurch, sobald die Kante ins Bild kommt.

   Bewusst warm, nicht blau: rohr-line.png ist ein oranges Rohr.
   Hier läuft kein Wasser sichtbar durch, hier wandert ein
   Glanzlicht über die Rohroberfläche – blau darüber würde mit
   dem Orange nur zu Graubraun verrühren.
   ============================================================ */

.hero-section::after,
.section-pipe-end::after {
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 236, 224, 0.55) 34%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 236, 224, 0.55) 66%,
      rgba(255, 255, 255, 0) 100%),
    var(--anim-pipe);
  background-repeat: no-repeat, repeat-x;
  background-size: 42% 100%, auto 14px;
  background-position: -130% center, left bottom;
}

@keyframes wiesner-pipe-flow {
  from { background-position: -130% center, left bottom; }
  to   { background-position: 230% center, left bottom; }
}

.is-flowing::after {
  animation: wiesner-pipe-flow 6s var(--anim-ease-release) both;
}

/* ------------------------------------------------------------
   2b) DAS ROHR UNTER DEM HEADER ZEIGT DEN FORTSCHRITT
   Dasselbe rohr-line.png, diesmal als Füllstand: es läuft voll,
   während man die Seite hinunterfährt. Den Wert setzt das
   Skript als --anim-progress. Ohne JavaScript und bei
   reduzierter Bewegung bleibt er bei 0% – dann sieht das Rohr
   aus wie bisher.
   ------------------------------------------------------------ */

.site-header::after {
  background-image:
    linear-gradient(90deg,
      rgba(255, 240, 230, 0.92) 0%,
      rgba(255, 240, 230, 0.92) var(--anim-progress, 0%),
      rgba(255, 255, 255, 0) var(--anim-progress, 0%)),
    var(--anim-pipe);
  background-repeat: no-repeat, repeat-x;
  background-size: 100% 100%, auto 14px;
  background-position: left center, left bottom;
}

/* ============================================================
   3) GESTE B – DER HERO-HINTERGRUND FÜHRT DURCHFLUSS
   rohre-hintergrund.png ist ein Rohrschema mit Strängen links
   und rechts. Dasselbe Bild dient als Maske: sichtbar wird nur,
   was innerhalb der Rohre liegt. Darin wandert ein blaues Band
   nach unten – das Wasser im Rohr. Weil Maske und Hintergrund
   beide center/cover liegen, sitzt es immer passgenau.
   ============================================================ */

/* Die Tönung, die vorher auf ::before lag, wandert in den
   Hintergrundstapel – ::before wird für den Durchfluss frei.
   Das Ergebnis sieht identisch aus. */
.hero-section {
  background:
    linear-gradient(90deg, rgba(0, 14, 50, 0.18) 0%, rgba(0, 14, 50, 0.04) 100%),
    radial-gradient(circle at 82% 18%, rgba(230, 81, 30, 0.22), transparent 20%),
    linear-gradient(120deg, rgba(0, 14, 50, 0.98) 0%, rgba(7, 29, 86, 0.95) 58%, rgba(230, 81, 30, 0.18) 100%),
    #000e32 var(--anim-schema) center center no-repeat;
  background-size: auto, auto, auto, cover;
}

/* Der Durchfluss läuft endlos, deshalb ist er gekachelt statt
   als einzelnes Band geschoben: das Band beginnt und endet bei
   Deckkraft 0, also stoßen zwei Kacheln unsichtbar aneinander.
   Verschoben wird pro Runde um exakt eine Kachelhöhe – damit
   ist Bildende gleich Bildanfang und die Wiederholung hat
   keinen Ansatz.

   Die Rechnung dahinter, falls das Tempo oder die Dichte
   geändert werden soll: bei `background-size: 100% S` verschiebt
   ein Prozentwert p um (1 − S) · H · p. Eine Kachelhöhe ist
   S · H, also braucht es p = S / (1 − S).
   S = 80 %  →  p = 400 %  (hier)
   S = 50 %  →  p = 100 %  (dichter, zwei Pulse gleichzeitig)
   S = 90 %  →  p = 900 %  (ruhiger, ein Puls) */
.hero-section::before {
  background: linear-gradient(180deg,
    rgba(var(--anim-wasser), 0) 0%,
    rgba(var(--anim-wasser), 0.22) 22%,
    rgba(var(--anim-wasser), 0.78) 50%,
    rgba(var(--anim-wasser), 0.22) 78%,
    rgba(var(--anim-wasser), 0) 100%);
  background-repeat: repeat-y;
  background-size: 100% 80%;
  background-position: 0 0;
  -webkit-mask-image: var(--anim-schema);
  mask-image: var(--anim-schema);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Dauer für eine Kachel, also für einen Puls durch das Rohr.
     Kleiner = schneller; unter ~7s wird es unruhig. */
  animation: wiesner-schema-flow 5s linear infinite;
  /* Läuft nur, solange der Hero im Bild ist – eine endlose
     Bewegung über die volle Sektionsfläche kostet sonst
     dauerhaft Rechenzeit. */
  animation-play-state: paused;
}

.hero-section.is-onscreen::before {
  animation-play-state: running;
}

/* linear ist Pflicht: jede Beschleunigungskurve würde an der
   Nahtstelle als Ruck sichtbar. */
@keyframes wiesner-schema-flow {
  from { background-position: 0 0%; }
  to   { background-position: 0 400%; }
}

/* ============================================================
   4) GESTE C – HERO-AUFTRITT
   Eine choreografierte Sequenz statt eines pauschalen
   fadeInUp über den ganzen Block. Greift nur mit JS.
   ============================================================ */

@keyframes wiesner-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes wiesner-settle {
  from { opacity: 0; transform: translateY(30px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes wiesner-frame {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.anim-js .hero-media-frame {
  animation: wiesner-frame 0.7s var(--anim-ease-settle) both;
}

.anim-js .hero-media-frame img {
  animation: wiesner-settle 0.85s var(--anim-ease-settle) 0.12s both;
}

/* Die Überschrift wird freigelegt – dieselbe Geste wie bei
   jeder h2, nur als Auftritt statt beim Scrollen. */
.anim-js .hero-copy h1 {
  animation: wiesner-clear 0.78s var(--anim-ease-release) 0.28s both;
}

.anim-js .hero-subtitle { animation: wiesner-rise 0.5s var(--anim-ease-settle) 0.62s both; }
.anim-js .lead-text     { animation: wiesner-rise 0.5s var(--anim-ease-settle) 0.72s both; }
.anim-js .hero-actions  { animation: wiesner-rise 0.5s var(--anim-ease-settle) 1.02s both; }

/* die Vorteile kommen einzeln, nicht als Block */
.anim-js .hero-points li {
  animation: wiesner-rise 0.48s var(--anim-ease-settle) both;
}

.anim-js .hero-points li:nth-child(1) { animation-delay: 0.82s; }
.anim-js .hero-points li:nth-child(2) { animation-delay: 0.90s; }
.anim-js .hero-points li:nth-child(3) { animation-delay: 0.98s; }
.anim-js .hero-points li:nth-child(4) { animation-delay: 1.06s; }
.anim-js .hero-points li:nth-child(n + 5) { animation-delay: 1.14s; }

/* Tiefe beim Scrollen: die Figur läuft etwas langsamer mit.
   Liegt auf .hero-media, damit es nicht mit dem Auftritt auf
   Rahmen und Bild kollidiert. */
.hero-media {
  will-change: transform;
}

/* ============================================================
   5) GESTE C – EINBLENDEN BEIM SCROLLEN
   Kurz und knapp; der Versatz erzeugt Leserichtung.
   ============================================================ */

.anim-js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--anim-ease-settle), transform 0.5s var(--anim-ease-settle);
}

.anim-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   6) DER FLANSCH SETZT SICH
   Beim Einblenden zieht sich der Ring fest. backwards, damit
   danach der Hover greifen kann.
   ============================================================ */

@keyframes wiesner-seat {
  from { transform: rotate(-16deg) scale(0.9); }
  to   { transform: none; }
}

.service-card-media {
  transition: transform 0.55s var(--anim-ease-settle);
}

.anim-js .service-card.is-visible .service-card-media {
  animation: wiesner-seat 0.8s var(--anim-ease-settle) 0.1s backwards;
}

/* Ein Flansch dreht sich, wenn man ihn anfasst.
   Das Foto dreht gegen und bleibt aufrecht. */
.service-card:hover .service-card-media,
.service-card:focus-within .service-card-media {
  transform: rotate(6deg);
}

.service-card-media-clip {
  transition: box-shadow 0.45s ease;
}

.service-card:hover .service-card-media-clip,
.service-card:focus-within .service-card-media-clip {
  box-shadow: 0 22px 46px rgba(230, 81, 30, 0.3);
}

.service-card-media-clip img {
  transition: transform 0.55s var(--anim-ease-settle);
}

.service-card:hover .service-card-media-clip img,
.service-card:focus-within .service-card-media-clip img {
  transform: rotate(-6deg) scale(1.1);
}

/* ============================================================
   7) GESTE B – IMPULS AUF DEN BUTTONS
   Derselbe Lichtstoß wie im Rohr, nur kürzer. Damit ist auch
   der Hover Teil des Systems und kein Extraeffekt.
   ============================================================ */

.hero-button-primary,
.hero-button-secondary,
.about-button,
.service-card-link,
.section-call-button,
.hotline-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-button-primary::after,
.hero-button-secondary::after,
.about-button::after,
.service-card-link::after,
.section-call-button::after,
.hotline-button::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

@keyframes wiesner-sheen {
  0%   { left: -45%; opacity: 0; }
  14%  { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

.hero-button-primary:hover::after,
.hero-button-primary:focus-visible::after,
.hero-button-secondary:hover::after,
.hero-button-secondary:focus-visible::after,
.about-button:hover::after,
.about-button:focus-visible::after,
.service-card-link:hover::after,
.service-card-link:focus-visible::after,
.section-call-button:hover::after,
.section-call-button:focus-visible::after,
.hotline-button:hover::after,
.hotline-button:focus-visible::after {
  animation: wiesner-sheen 0.8s var(--anim-ease-release);
}

/* Das Telefon klingelt kurz an, wenn man den Hotline-Knopf
   berührt. */
@keyframes wiesner-ring {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(-16deg); }
  30%      { transform: rotate(13deg); }
  45%      { transform: rotate(-9deg); }
  60%      { transform: rotate(6deg); }
  75%      { transform: rotate(-3deg); }
}

.hotline-button i {
  display: inline-block;
}

.hotline-button:hover i,
.hotline-button:focus-visible i {
  animation: wiesner-ring 0.7s ease-in-out;
}

/* ------------------------------------------------------------
   7b) KEIN ANHEBEN BEIM HOVER
   style.css hebt jeden Button um translateY(-1px) an. Das legt
   ihn auf eine eigene Compositing-Ebene, und weil -1px auf
   nicht-ganzzahligen Gerätepixeln zwischen zwei Rasterpunkten
   landet, wird die Schrift dabei unscharf. Rückmeldung geben
   stattdessen der Lichtstoß und der Schatten – beide ohne
   Neurasterung.
   ------------------------------------------------------------ */

.hero-button-primary:hover,
.hero-button-primary:focus-visible,
.hero-button-secondary:hover,
.hero-button-secondary:focus-visible,
.about-button:hover,
.about-button:focus-visible,
.service-card-link:hover,
.service-card-link:focus-visible,
.section-call-button:hover,
.section-call-button:focus-visible,
.hotline-button:hover,
.hotline-button:focus-visible {
  transform: none;
}

/* Der Schatten trägt die Rückmeldung jetzt allein. */
.hero-button-primary:hover,
.hero-button-primary:focus-visible {
  box-shadow: 0 18px 40px rgba(230, 81, 30, 0.4);
}

.hotline-button:hover,
.hotline-button:focus-visible {
  box-shadow: 0 16px 36px rgba(230, 81, 30, 0.42);
}

.about-button:hover,
.about-button:focus-visible,
.service-card-link:hover,
.service-card-link:focus-visible,
.section-call-button:hover,
.section-call-button:focus-visible {
  box-shadow: 0 18px 38px rgba(230, 81, 30, 0.36);
}

/* ============================================================
   8) WEITERE MIKROINTERAKTIONEN
   Bewusst ohne Hover: .vorsorge-item, .info-card und
   .contact-card sind keine Links. Ein Element, das auf den
   Zeiger reagiert, verspricht Klickbarkeit, die es nicht
   einlöst.
   ============================================================ */

/* Die Split-Card blendet ein UND reagiert auf Hover. Beides
   braucht eine gemeinsame Übergangsliste – sonst überschreibt
   die Einblend-Regel (Block 5) die Hover-Übergänge, weil
   `transition` als Ganzes ersetzt wird. Deshalb steht dieser
   Block hinter Block 5 und trägt dieselbe Spezifität. */
.split-card,
.anim-js .split-card {
  transition: opacity 0.5s var(--anim-ease-settle),
              transform 0.45s var(--anim-ease-settle),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.split-card:hover,
.split-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(230, 81, 30, 0.26);
  box-shadow: 0 26px 50px rgba(0, 14, 50, 0.13);
}

.split-card-media img {
  transition: transform 0.6s var(--anim-ease-settle);
}

.split-card:hover .split-card-media img,
.split-card:focus-within .split-card-media img {
  transform: scale(1.045);
}

.service-card-link i {
  transition: transform 0.3s var(--anim-ease-settle);
}

.service-card-link:hover i,
.service-card-link:focus-visible i {
  transform: translateX(4px);
}

/* ============================================================
   9) RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
  /* Auf Schmalgeräten steht das Bild unter dem Text – dann
     darf es nicht mehr als Erstes auftreten. */
  .anim-js .hero-media-frame {
    animation-delay: 0.5s;
  }

  .anim-js .hero-media-frame img {
    animation-delay: 0.62s;
  }

  /* Parallax auf Touchgeräten aus */
  .hero-media {
    transform: none !important;
    will-change: auto;
  }
}

@media (max-width: 767.98px) {
  /* style.css nennt hier drei background-size-Werte, passend
     zum früheren Dreier-Stapel. Der Stapel hat durch die
     eingewanderte Tönung (Block 3) jetzt vier Ebenen – ohne
     den vierten Wert läge das Rohrschema nicht mehr auf cover. */
  .hero-section {
    background-size: auto, auto, auto, cover;
  }
}

/* ============================================================
   10) BEWEGUNG AUS
   Vollständig: Auftritt, Durchfluss, Freilegen, Einblenden,
   Hover, Parallax, Hintergrund.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .anim-js .hero-media-frame,
  .anim-js .hero-media-frame img,
  .anim-js .hero-copy h1,
  .anim-js .hero-subtitle,
  .anim-js .lead-text,
  .anim-js .hero-points li,
  .anim-js .hero-actions,
  .anim-js .service-card.is-visible .service-card-media {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .hero-section::before,
  .is-flowing::after {
    animation: none;
  }

  .hero-section::before {
    opacity: 0;
  }

  .anim-js .reveal-head h2 {
    clip-path: none;
  }

  .anim-js .reveal-head.is-visible h2 {
    animation: none;
  }

  .anim-js .reveal-head > p,
  .anim-js .reveal-head > a,
  .anim-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-media {
    transform: none !important;
  }

  .hero-button-primary:hover::after,
  .hero-button-secondary:hover::after,
  .about-button:hover::after,
  .service-card-link:hover::after,
  .section-call-button:hover::after,
  .hotline-button:hover::after,
  .hotline-button:hover i {
    animation: none;
  }

  .service-card:hover .service-card-media,
  .service-card:hover .service-card-media-clip img,
  .split-card:hover .split-card-media img,
  .split-card:hover {
    transform: none;
  }
}