/* ==========================================================================
   Haustierschutzhelden, neue Website: Bewegung und Animation.
   Alles hier ist Zugabe. Ohne JavaScript oder mit "Bewegung reduzieren" im
   Betriebssystem bleibt die Seite vollstaendig benutzbar und ruhig.
   ========================================================================== */

/* ---------- Weicher Seitenwechsel zwischen den Unterseiten ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .16s cubic-bezier(.23, 1, .32, 1) both vt-raus; }
::view-transition-new(root) { animation: .3s cubic-bezier(.23, 1, .32, 1) both vt-rein; }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(10px); } }
.nav { view-transition-name: navigation; }
.dock { view-transition-name: leiste; }
.wa { view-transition-name: whatsapp; }

/* ---------- Ueberschriften: Wort fuer Wort ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .12em .05em .2em; margin: -.12em -.05em -.2em; }
.w > span { display: inline-block; transform: translateY(118%) rotate(5deg); transform-origin: 0 100%; transition: transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 35ms + var(--d, 0ms)); }
[data-in].is-in .w > span, .is-in .w > span { transform: none; }
.js .display .mark, .js .h2 .mark { vertical-align: bottom; }
/* Die Ueberschrift selbst blendet nicht mehr als Block ein, das machen die Woerter */
.js .display[data-in] { opacity: 1; transform: none; }

/* ---------- Fotos: Vorhang auf, dazu langsames Heranfahren ----------
   WICHTIG: Zugezogen wird das Bild IM Rahmen, nie der Rahmen selbst. Der Browser
   meldet einen komplett zugezogenen Rahmen als "nicht sichtbar", das Einblenden
   wuerde dann nie ausgeloest und das Foto bliebe fuer immer versteckt. */
.js .split__media[data-in] img, .js .kontakt__bild[data-in] img, .js .tile--photo[data-in] img {
  clip-path: inset(100% 0 0 0);
  scale: 1.24;
  transition: clip-path .9s var(--ease), scale 1.2s var(--ease), transform 1.4s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .split__media[data-in].is-in img, .js .kontakt__bild[data-in].is-in img, .js .tile--photo[data-in].is-in img { clip-path: inset(0 0 0 0); scale: 1.14; }
.js .karte--bild img { scale: 1.14; }

/* ---------- Karten: kommen mit leichtem Schwung ---------- */
.js .tile[data-in]:not(.tile--photo), .js .karte[data-in], .js .deck[data-in], .js .stufe[data-in], .js .plan[data-in], .js .wegkarte[data-in], .js .weg__schritt[data-in], .js .linkkarte[data-in] {
  transform: translateY(40px) scale(.95) rotate(-2deg);
  transition: opacity .5s var(--ease), transform .7s var(--spring), box-shadow .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .tile[data-in]:nth-child(even):not(.tile--photo), .js .karte[data-in]:nth-child(even), .js .deck[data-in]:nth-child(even), .js .stufe[data-in]:nth-child(even), .js .plan[data-in]:nth-child(even), .js .wegkarte[data-in]:nth-child(even) { transform: translateY(40px) scale(.95) rotate(2deg); }
.js .tile[data-in].is-in:not(.tile--photo), .js .karte[data-in].is-in, .js .deck[data-in].is-in, .js .stufe[data-in].is-in, .js .plan[data-in].is-in, .js .wegkarte[data-in].is-in, .js .weg__schritt[data-in].is-in, .js .linkkarte[data-in].is-in { transform: none; }
@media (hover: hover) and (pointer: fine) { .js .stufe[data-in].is-in:hover { transform: translateY(-8px); } }
@media (hover: hover) and (pointer: fine) { .js .linkkarte[data-in].is-in:hover { transform: translateY(-5px); } }

/* Kippen mit der Maus soll direkt folgen, nicht nachfedern */
@media (hover: hover) and (pointer: fine) { .js :is(.tile, .karte, .deck, .plan, .wegkarte)[data-in][data-tilt].is-in:hover { transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .25s ease; transition-delay: 0ms; } }

/* Listenpunkte ruecken nacheinander ein */
.js [data-in] .checks li, .js [data-in] .tier__list li, .js .hero__ticks[data-in] li, .js [data-in] .calc__list li { opacity: 0; transform: translateX(-18px); transition: opacity .4s var(--ease), transform .5s var(--spring); transition-delay: calc(var(--n, 0) * 55ms + var(--d, 0ms) + 80ms); }
.js [data-in].is-in .checks li, .js [data-in].is-in .tier__list li, .js .hero__ticks[data-in].is-in li, .js [data-in].is-in .calc__list li { opacity: 1; transform: none; }
.js [data-in] .checks li svg, .js .hero__ticks[data-in] li svg { scale: .6; opacity: 0; transition: scale .4s var(--spring), opacity .2s ease-out; transition-delay: calc(var(--n, 0) * 55ms + var(--d, 0ms) + 160ms); }
.js [data-in].is-in .checks li svg, .js .hero__ticks[data-in].is-in li svg { scale: 1; opacity: 1; }

/* Der Strich vor den kleinen Ueberschriften zeichnet sich */
.js [data-in] .eyebrow::before, .js .eyebrow[data-in]::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease) .1s; }
.js [data-in].is-in .eyebrow::before, .js .eyebrow[data-in].is-in::before { transform: none; }

/* ---------- Hero: alles lebt ein bisschen ---------- */
.hero__bubble { animation: schaukeln 7s ease-in-out infinite; }
.hero__bubble--pferd { animation-duration: 9s; animation-delay: -3s; }
@keyframes schaukeln { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }
@keyframes wippen { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.4deg; } }
.hero__chip { animation: wippen 8s ease-in-out -2s infinite; transform-origin: 100% 0; }

/* Schwebende Pfoten im Hintergrund heller Abschnitte */
.deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deko + .wrap, .section > .wrap, .phero > .wrap { position: relative; z-index: 1; }
.deko svg { position: absolute; width: var(--g, 80px); height: var(--g, 80px); left: var(--x); top: var(--y); color: var(--blue); opacity: .07; rotate: var(--r, 20deg); animation: treiben var(--t, 14s) ease-in-out infinite alternate; }
.section--peach .deko svg, .section--cream .deko svg:nth-child(even) { color: var(--peach-deep); opacity: .09; }
@keyframes treiben { to { transform: translate(24px, -30px) rotate(18deg); } }

/* ---------- Knoepfe: Lichtreflex und Pfoten beim Klick ---------- */
.btn--peach { overflow: hidden; }
.nav .btn--peach::after { animation: none; }
.btn--peach::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-160%) skewX(-20deg); animation: reflex 5s ease-in-out infinite; pointer-events: none; }
@keyframes reflex { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(340%) skewX(-20deg); } }
.funke { position: fixed; z-index: 300; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--peach-deep); pointer-events: none; animation: funke .9s var(--ease) forwards; }
.funke:nth-child(odd) { color: var(--blue); }
@keyframes funke { from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } to { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.1) rotate(var(--fr)); } }

/* ---------- Lichtkegel, der in dunklen Bereichen der Maus folgt ---------- */
.lichtkegel { position: absolute; left: 0; top: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(90, 160, 255, .2), transparent 62%); opacity: 0; transition: opacity .6s; will-change: transform; }
.foot { position: relative; overflow: hidden; }
.hat-zeiger > .lichtkegel { opacity: 1; }
.section--ink > .wrap, .foot > .wrap { position: relative; }

/* ---------- Zahlen, die sich aendern: Neuvermessen auf das Kaestchen begrenzen ---------- */
.kosten__big, .kosten__vs, .hero__price, .pricebox, .deck, .stufe, .plan__preis, .calc__price, .result-card .calc__price { contain: layout; }

/* ---------- Preise, die sich aendern, springen kurz ---------- */
/* Dauerhaft inline-block, damit der Wechsel beim Huepfen keinen Satz neu umbricht.
   Die Preiszeile im Kurzrechner bleibt dabei flex (dort springt nur die Zahl, siehe style.css). */
:is([data-preis], [data-limit], #tier-op, #tier-voll, #tier-haft, #kosten-beitrag, #r-preis) { display: inline-block; }
.is-tick:not(.calc__price) { animation: huepf .55s var(--spring); }
@keyframes huepf { 0% { transform: translateY(.35em) scale(.9); opacity: .2; } }

/* ---------- Pfote am Ende des Lesefortschritts ---------- */
.scrollpfote { position: fixed; top: -2px; left: 0; will-change: transform; z-index: 121; width: 22px; height: 22px; margin-left: -11px; color: var(--peach-deep); pointer-events: none; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 2px 4px rgba(10, 27, 61, .3)); }
.scrollpfote.is-an { opacity: 1; }
.scrollpfote svg { width: 100%; height: 100%; rotate: 90deg; }
.scrollpfote.is-laeuft svg { animation: tappen .25s ease-in-out infinite alternate; }
@keyframes tappen { to { translate: 0 3px; } }

/* ---------- Navigation wird beim Scrollen kompakter ---------- */
.nav__inner { transition: box-shadow .3s ease, background-color .3s ease; }
/* Kein transform/translate auf .nav: Das wuerde das Handy-Menue (position: fixed) in die Navigation einsperren */
.nav.is-klein .nav__inner { background: rgba(255, 255, 255, .9); box-shadow: 0 10px 34px rgba(10, 27, 61, .16), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.brand__mark { transform-origin: 0 50%; transition: transform .5s var(--spring), scale .3s cubic-bezier(.23, 1, .32, 1); }
.nav.is-klein .brand__mark { scale: .86; }

/* ---------- Ablauf: die Linie fuellt sich beim Scrollen ---------- */
.steps::after { content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--peach)); transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }
.step.is-dran .step__num { background: var(--blue); color: #fff; transform: scale(1.12); box-shadow: 0 10px 24px rgba(10, 120, 255, .4), 0 0 0 8px var(--sky); }
.step.is-dran .step__num::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--blue); animation: ring 1s var(--ease) forwards; }
@keyframes ring { from { opacity: .8; transform: scale(.8); } to { opacity: 0; transform: scale(1.7); } }


.ist-weg, .ist-weg *, .ist-weg *::before, .ist-weg *::after { animation-play-state: paused !important; }

/* ---------- Kleinigkeiten ---------- */
.switch__btn svg, .seg button svg, .choice label svg { transition: transform .5s var(--spring), color .25s; }
@media (hover: hover) and (pointer: fine) { .switch__btn:hover svg, .seg button:hover svg, .choice label:hover svg { transform: translateY(-3px) rotate(-8deg) scale(1.12); } }
.switch__btn[aria-selected="true"] svg, .seg button[aria-pressed="true"] svg, .choice input:checked + label svg { animation: nicken .6s var(--spring); }
@keyframes nicken { 0% { transform: scale(.6) rotate(-20deg); } }
.tile__icon svg, .karte__icon svg, .wegkarte__icon svg, .upgrade__icon svg { transition: transform .6s var(--spring); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__icon svg, .karte:hover .karte__icon svg, .wegkarte:hover .wegkarte__icon svg { transform: scale(1.2) rotate(-10deg); } }
.karte__nr, .weg__nr { transition: transform .6s var(--spring); }
@media (hover: hover) and (pointer: fine) { .karte:hover .karte__nr { transform: scale(1.15) rotate(-6deg); transform-origin: 0 100%; } }
@media (hover: hover) and (pointer: fine) { .weg__schritt:hover .weg__nr { transform: scale(1.15) rotate(-10deg); } }
.foot__top a:not(.brand) { position: relative; }
.stamp { transition: scale .5s var(--spring); }
@media (hover: hover) and (pointer: fine) { .stamp:hover { scale: 1.12; } }
.wa svg { animation: klingeln 6s ease-in-out infinite; }
@keyframes klingeln { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -14deg; } 94% { rotate: 12deg; } 97% { rotate: -6deg; } }
.finale .display .w > span { transition-duration: .85s; }

/* ---------- Druck-Rueckmeldung: alles, was man antippt, gibt kurz nach ----------
   Eigene Eigenschaft "scale", damit es sich nicht mit vorhandenen transform-Werten beisst. */
.dock a, .burger, .qa summary, .mehr summary, .ergebnis__link { transition: scale .12s cubic-bezier(.23, 1, .32, 1); }
.switch__btn { transition: color .3s, scale .12s cubic-bezier(.23, 1, .32, 1); }
.miniswitch button { transition: background .25s, color .25s, scale .12s cubic-bezier(.23, 1, .32, 1); }
:is(.seg button, .choice label, .filter button, .miniswitch button, .switch__btn, .dock a, .burger, .pauseknopf, .ergebnis__link, .wa):active { scale: .96; }
:is(.qa summary, .mehr summary, .linkkarte, .wegkarte):active { scale: .985; }

@media (max-width: 900px) {
  .steps::after { display: none; }
  .deko svg { --g: 56px; }
}

/* ---------- Sparmodus ---------- */
.sparsam .deko, .sparsam .hero__trail, .sparsam .lichtkegel, .sparsam .scrollpfote { display: none; }
.sparsam .hero__bubble, .sparsam .hero__chip, .sparsam .hero__blob,
.sparsam .btn--peach::after, .sparsam .wa svg, .sparsam .upgrade__icon svg,
.sparsam .hero__chip-icon svg, .sparsam .dot::after, .sparsam .fehler__zahl svg { animation: none; }
.sparsam .btn--peach::after { display: none; }
.sparsam .split__media[data-in] img, .sparsam .kontakt__bild[data-in] img, .sparsam .tile--photo[data-in] img, .sparsam .karte--bild img { clip-path: none !important; scale: 1 !important; translate: none !important; will-change: auto; }
.sparsam .hero__arch, .sparsam .tile, .sparsam .calc, .sparsam .bill, .sparsam .formkarte, .sparsam .rechner__panel, .sparsam .result-card { box-shadow: 0 8px 24px rgba(10, 27, 61, .12); }
.sparsam .hero__arch { box-shadow: 0 8px 24px rgba(10, 27, 61, .12), 0 0 0 10px #fff; }

/* ---------- Wer Bewegung abgeschaltet hat, bekommt eine ruhige Seite ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .w > span { transform: none !important; }
  .js .split__media[data-in] img, .js .kontakt__bild[data-in] img, .js .tile--photo[data-in] img { clip-path: none; scale: 1; }
  .js [data-in] .checks li, .js [data-in] .tier__list li, .js .hero__ticks[data-in] li, .js [data-in] .calc__list li, .js [data-in] .checks li svg, .js .hero__ticks[data-in] li svg { opacity: 1; transform: none; scale: 1; }
  .deko, .scrollpfote, .funke { display: none; }
  .btn--peach::after { display: none; }
}


/* ---------- Erster Bildschirm: nicht auf JavaScript warten ----------
   Der Kopfbereich ist beim Laden schon zu sehen. Er blendet per CSS kurz ein,
   statt unsichtbar auf das Skript am Seitenende zu warten. Das Handy (Sparmodus)
   zeigt die Ueberschrift ohne Wort-fuer-Wort-Effekt. */
.js .hero [data-in], .js .phero [data-in] { opacity: 1; transform: none; animation: erstes-bild .6s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.js .hero .hero__ticks[data-in] li, .js .hero .hero__ticks[data-in] li svg { opacity: 1; transform: none; scale: 1; }
.sparsam .hero .w > span, .sparsam .phero .w > span { transform: none; transition: none; }
@keyframes erstes-bild { from { opacity: .01; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .js .hero [data-in], .js .phero [data-in] { animation: none; } }