/* ===== Schrift (lokal, keine Google-Server) ===== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff') format('woff')}

/* ===== Farben & Grundwerte (aus Flyer und Visitenkarte) ===== */
:root{
  --sand:#f1e7d6; --sand-2:#e8dac2; --paper:#fffaf2;
  --ink:#3b3634; --muted:#6d625a;
  --caramel:#b8732a; --caramel-dk:#8f5418;
  --pink:#d6338a; --pink-dk:#c0287a; --red:#d42a2a; --yellow:#f2c41b; --sky:#2fb7e0;
  --blue:#1f7fc0; --orange:#ef8a2b; --orange-dk:#c25e0c; --green:#8cbf3f; --green-dk:#3f7d1c; --purple:#7a4fa3;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --shadow:0 10px 28px rgba(120,70,20,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--sand);color:var(--ink);font-family:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink-dk)}
h1,h2,h3{line-height:1.2;font-weight:700}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ===== Kopfzeile ===== */
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 16px;background:rgba(241,231,214,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:box-shadow .3s,padding .3s}
.topbar.is-scrolled{box-shadow:0 6px 22px rgba(120,70,20,.13);padding:.45rem 16px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--caramel-dk);font-weight:700;font-size:1.12rem}
.brand img{width:44px;height:44px;transition:transform .5s var(--ease-pop)}
.brand:hover img{transform:rotate(-14deg) scale(1.08)}
.topbar nav{display:flex;align-items:center;gap:1.3rem}
.topbar nav a:not(.btn){position:relative;isolation:isolate;color:var(--ink);text-decoration:none;font-weight:500}
.topbar nav a:not(.btn)::after{content:"";position:absolute;left:-5px;right:-5px;bottom:.05em;height:.5em;z-index:-1;
  background:var(--yellow);border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.topbar nav a:not(.btn):hover::after,.topbar nav a:not(.btn):focus-visible::after{transform:scaleX(1)}
@media (max-width:640px){.topbar nav a:not(.btn){display:none}.brand span{display:none}}

/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--pink-dk);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:500;font-size:1rem;line-height:1.3;padding:.9rem 1.6rem;border-radius:999px;box-shadow:0 5px 0 #8e1b59;
  transition:transform .25s var(--ease-pop),box-shadow .2s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8e1b59;transition-duration:.08s}
.btn-small{padding:.5rem 1.05rem;font-size:.95rem;box-shadow:0 4px 0 #8e1b59}
.btn-ghost{background:#fff;color:var(--purple);box-shadow:0 5px 0 #d9c7a9}
.btn-ghost:active{box-shadow:0 2px 0 #d9c7a9}

/* ===== Startbereich ===== */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:1.5rem 16px 5rem}
.hero-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.splat{position:absolute;display:block;overflow:visible}
.sp-1{width:clamp(170px,26vw,320px);top:-70px;left:-80px}
.sp-2{width:clamp(90px,12vw,150px);top:-30px;left:clamp(70px,14vw,200px)}
.sp-3{width:clamp(180px,24vw,300px);bottom:-110px;right:-60px}
.sp-4{width:clamp(90px,11vw,140px);bottom:30px;right:clamp(130px,19vw,260px)}
.sp-5{width:clamp(80px,9vw,120px);bottom:-30px;left:-24px}

.stripes{position:absolute;top:-35%;right:-4%;height:170%;display:flex;transform:rotate(-27deg);transform-origin:top right}
.stripes span{display:block;height:100%}
.stripes span:nth-child(1){width:clamp(34px,5vw,70px);background:#9b5a12}
.stripes span:nth-child(2){width:clamp(26px,3.5vw,48px);background:linear-gradient(#c9782a,#f2a66b)}
.stripes span:nth-child(3){width:clamp(44px,6.5vw,92px);background:#f7c7a3}
.stripes span:nth-child(4){width:clamp(14px,2vw,28px);background:#fbe1cc}

.hero-inner{position:relative;max-width:1120px;margin:0 auto;display:grid;gap:.5rem;
  grid-template-areas:"dog" "text";justify-items:center;text-align:center}
.hero-text{grid-area:text;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero-dog{grid-area:dog;position:relative;width:var(--dog);aspect-ratio:1;--dog:min(250px,62vw)}
.wordmark{margin:.4rem 0 0;width:min(520px,100%)}
.byline{letter-spacing:.42em;text-transform:uppercase;margin:.5rem 0 1.1rem;font-size:.92rem}
.claim{font-size:clamp(1.35rem,3.6vw,1.75rem);color:var(--caramel-dk);font-weight:700;margin:0}
.transform{margin:.6rem 0 .3rem}
.transform-lead{display:block;font-size:1.1rem;color:var(--muted)}
.rotator{display:inline-grid;overflow:hidden;padding:.04em .22em .14em;margin:0 -.22em;font-weight:700;font-size:clamp(2.2rem,7vw,3.7rem);line-height:1.15;letter-spacing:-.015em}
.word{grid-area:1/1;justify-self:center;position:relative;isolation:isolate;color:var(--wc);opacity:0;
  transform:translateY(55%) rotate(5deg);transition:opacity .3s .14s,transform .55s var(--ease-pop) .14s}
.word::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.1em;height:.3em;z-index:-1;background:var(--wc);opacity:.2;
  border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out) .15s}
.word.is-on{opacity:1;transform:none}
.word.is-on::after{transform:scaleX(1)}
.word.is-out{opacity:0;transform:translateY(-55%) rotate(-5deg);transition:opacity .2s,transform .28s ease-in}
.w1{--wc:var(--blue)}.w2{--wc:var(--pink-dk)}.w3{--wc:var(--orange-dk)}.w4{--wc:var(--purple)}.w5{--wc:var(--green-dk)}.w6{--wc:var(--red)}
.lead{max-width:34ch;margin:.2rem 0 1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1rem}

.dog-splat{top:-36%;left:-36%;width:172%;height:172%}
.dog{position:relative;width:100%;height:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dog-img{width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 12px 18px rgba(90,50,10,.22))}

@media (min-width:900px){
  .hero{padding:2.5rem 24px 6rem}
  .hero-inner{grid-template-columns:1.08fr .92fr;grid-template-areas:"text dog";align-items:center;text-align:left;gap:2rem}
  .hero-text{align-items:flex-start}
  .hero-dog{--dog:min(400px,34vw);justify-self:center}
  .word{justify-self:start}
  .dog-splat{top:-52%;left:-52%;width:204%;height:204%}
  .hero-actions{justify-content:flex-start}
  .stripes{right:7%;top:-40%}
}

/* Einmalige Lade-Choreografie des Startbereichs */
.stripes{animation:stripes-in .9s var(--ease-out) both}
.splat.sp-1{animation:splat-in .7s var(--ease-pop) .1s both}
.splat.sp-2{animation:splat-in .6s var(--ease-pop) .25s both}
.splat.sp-3{animation:splat-in .7s var(--ease-pop) .2s both}
.splat.sp-4{animation:splat-in .6s var(--ease-pop) .35s both}
.splat.sp-5{animation:splat-in .6s var(--ease-pop) .45s both}
.dog-splat{animation:splat-in .7s var(--ease-pop) .45s both}
.dog{animation:dog-drop .95s var(--ease-out) .3s both,float 6s ease-in-out 1.6s infinite}
.wordmark{animation:pop .7s var(--ease-pop) .55s both}
.byline{animation:rise .5s var(--ease-out) .8s both}
.claim{animation:rise .5s var(--ease-out) .9s both}
.transform{animation:rise .5s var(--ease-out) 1s both}
.lead{animation:rise .5s var(--ease-out) 1.1s both}
.hero-actions{animation:rise .5s var(--ease-out) 1.2s both}
@media (hover:hover){.dog:hover .dog-img{animation:wiggle .7s ease-in-out}}
.dog-img.boing{animation:boing .6s var(--ease-pop)}

@keyframes stripes-in{from{transform:rotate(-27deg) translate(30%,-30%);opacity:0}to{transform:rotate(-27deg);opacity:1}}
@keyframes splat-in{0%{transform:scale(0) rotate(-30deg);opacity:0}55%{transform:scale(1.12) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes dog-drop{0%{transform:translateY(-70%) rotate(-14deg);opacity:0}45%{opacity:1}62%{transform:translateY(5%) rotate(4deg)}80%{transform:translateY(-3%) rotate(-2deg)}100%{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes pop{0%{transform:scale(.5) rotate(-6deg);opacity:0}70%{transform:scale(1.04) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(.88,1.1)}55%{transform:scale(1.1,.9)}75%{transform:scale(.97,1.03)}100%{transform:scale(1)}}

/* Glitzerspur (nur Maus, nur im Startbereich – per main.js) */
.sparkle{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;z-index:5;background:var(--c);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:sparkle .85s ease-out forwards}
@keyframes sparkle{0%{transform:scale(0) rotate(0);opacity:1}30%{transform:scale(var(--s)) rotate(45deg);opacity:1}
  100%{transform:translate(var(--dx),28px) scale(0) rotate(140deg);opacity:0}}

/* ===== Laufband ===== */
.ribbon{position:relative;z-index:3;width:106%;margin:-2.2rem -3% 0;transform:rotate(-2deg);background:var(--caramel-dk);color:#fff;
  overflow:hidden;padding:.85rem 0;box-shadow:0 7px 0 rgba(143,84,24,.22)}
.ribbon-track{display:flex;align-items:center;width:max-content;animation:marquee 34s linear infinite;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.35rem);white-space:nowrap}
.ribbon-track>*{margin-right:1.4rem}
.ribbon b{font-size:1.2em;display:inline-block;animation:spin 6s linear infinite}
.ribbon:hover .ribbon-track,.ribbon:hover b{animation-play-state:paused}
.st-pink{color:#ff7bc0}.st-yellow{color:var(--yellow)}.st-sky{color:#7fd9f5}.st-green{color:#b6e07a}.st-orange{color:#ffb36b}.st-purple{color:#c9a6ee}
@keyframes marquee{to{transform:translateX(-20%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Abschnitte ===== */
.section{position:relative;padding:4.5rem 16px;max-width:1120px;margin:0 auto}
.section .heading{text-wrap:balance;text-align:center;margin:0 auto 1.6rem;max-width:22ch;font-size:clamp(1.65rem,4.2vw,2.5rem);color:var(--caramel-dk)}
.brush{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:0 88%;
  background-size:100% .42em;padding:0 .12em;transition:background-size .9s var(--ease-out) .1s}
.js .heading:not(.is-visible) .brush{background-size:0% .42em}
.hl-yellow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 10C22 5 58 7 96 6C136 5 170 3 196 7L199 11L193 13L198 16C172 20 130 19 98 20C60 21 26 20 5 18L1 14L6 13Z' fill='%23f2c41b' fill-opacity='0.75'/%3E%3C/svg%3E")}
.hl-pink{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 10C22 5 58 7 96 6C136 5 170 3 196 7L199 11L193 13L198 16C172 20 130 19 98 20C60 21 26 20 5 18L1 14L6 13Z' fill='%23d6338a' fill-opacity='0.32'/%3E%3C/svg%3E")}
.hl-sky{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 10C22 5 58 7 96 6C136 5 170 3 196 7L199 11L193 13L198 16C172 20 130 19 98 20C60 21 26 20 5 18L1 14L6 13Z' fill='%232fb7e0' fill-opacity='0.42'/%3E%3C/svg%3E")}
.hl-green{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 10C22 5 58 7 96 6C136 5 170 3 196 7L199 11L193 13L198 16C172 20 130 19 98 20C60 21 26 20 5 18L1 14L6 13Z' fill='%238cbf3f' fill-opacity='0.55'/%3E%3C/svg%3E")}
.section .section-intro{text-align:center;max-width:52ch;margin:-.6rem auto 2rem;color:var(--muted)}

/* Abschnitte mit dunklerem Sand und „tropfenden“ Farbkanten */
.band{max-width:none;background:var(--sand-2);padding-top:6.5rem;padding-bottom:5.5rem;z-index:1}
:where(.band)>*{max-width:960px;margin-left:auto;margin-right:auto}
.band::before,.band::after,.site-footer::before{content:"";position:absolute;left:0;right:0;height:72px;background-repeat:repeat-x;background-size:600px 72px;pointer-events:none}
.band::before{top:-1px;background-position:-90px 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 72'%3E%3Cpath d='M0 0H600V6.4L593.9 7.0L587.7 7.7Q566.7 22.3 545.7 8.3L522.3 10.2L498.9 12.9Q489.9 12.3 488.9 19.3C488.9 16.3 488.8 17.3 488.8 20.3A6.9 6.9 0 1 1 477.3 20.3C477.3 17.3 477.2 16.3 477.2 19.3Q476.2 12.3 467.2 9.9L453.1 7.9L439.0 7.2Q419.9 20.8 400.7 7.7L391.3 7.1L381.9 6.4Q372.9 6.4 371.9 13.4C371.9 20.7 371.8 32.1 371.8 35.1A7.2 7.2 0 1 1 359.8 35.1C359.8 32.1 359.6 20.7 359.6 13.4Q358.6 6.4 349.6 8.3L344.2 9.3L338.9 10.3Q329.9 12.5 328.9 19.5C328.9 18.9 328.3 22.2 328.3 25.2A9.6 9.6 0 1 1 312.1 25.2C312.1 22.2 311.6 18.9 311.6 19.5Q310.6 12.5 301.6 11.8L297.7 11.4L293.8 10.9Q273.9 22.4 253.9 9.6L228.3 8.6L202.7 5.4Q182.5 14.1 162.3 8.9L163.6 8.7L164.8 8.5Q155.8 10.4 154.8 17.4C154.8 15.0 154.9 16.7 154.9 19.7A5.8 5.8 0 1 1 145.2 19.7C145.2 16.7 145.3 15.0 145.3 17.4Q144.3 10.4 135.3 10.8L119.1 10.3L103.0 10.2Q94.0 11.2 93.0 18.2C93.0 16.8 93.0 19.4 93.0 22.4A6.1 6.1 0 1 1 82.8 22.4C82.8 19.4 82.9 16.8 82.9 18.2Q81.9 11.2 72.9 11.8L59.0 11.0L45.2 8.9Q36.2 6.1 35.2 13.1C35.2 10.1 34.9 11.1 34.9 14.1A8.3 8.3 0 1 1 21.0 14.1C21.0 11.1 20.7 10.1 20.7 13.1Q19.7 6.1 10.7 5.6L5.3 5.9L0.0 6.4L0 0Z' fill='%23f1e7d6'/%3E%3C/svg%3E")}
.band::after{bottom:-71px;background-position:-300px 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 72'%3E%3Cpath d='M0 0H600V9.0L581.5 9.3L563.0 11.3Q544.4 28.3 525.7 11.3L515.2 9.6L504.8 7.9Q484.5 22.0 464.2 7.5L445.8 7.7L427.3 6.8Q418.3 7.5 417.3 14.5C417.3 18.7 416.5 27.0 416.5 30.0A11.3 11.3 0 1 1 397.5 30.0C397.5 27.0 396.7 18.7 396.7 14.5Q395.7 7.5 386.7 10.7L379.8 11.7L372.9 12.5Q363.9 12.2 362.9 19.2C362.9 25.7 362.2 36.1 362.2 39.1A10.8 10.8 0 1 1 344.1 39.1C344.1 36.1 343.4 25.7 343.4 19.2Q342.4 12.2 333.4 9.9L316.6 8.8L299.8 9.0Q280.6 22.5 261.5 6.5L246.7 5.3L231.9 5.8Q222.9 8.4 221.9 15.4C221.9 12.4 221.7 13.4 221.7 16.4A7.4 7.4 0 1 1 209.3 16.4C209.3 13.4 209.1 12.4 209.1 15.4Q208.1 8.4 199.1 10.8L175.2 11.1L151.4 10.2Q142.4 11.1 141.4 18.1C141.4 21.8 140.4 29.5 140.4 32.5A12.0 12.0 0 1 1 120.3 32.5C120.3 29.5 119.4 21.8 119.4 18.1Q118.4 11.1 109.4 10.8L105.9 10.4L102.3 9.9Q93.3 7.3 92.3 14.3C92.3 27.3 92.2 44.4 92.2 47.4A7.1 7.1 0 1 1 80.3 47.4C80.3 44.4 80.2 27.3 80.2 14.3Q79.2 7.3 70.2 5.3L54.5 5.6L38.8 7.5Q29.8 8.9 28.8 15.9C28.8 14.6 28.8 17.3 28.8 20.3A6.6 6.6 0 1 1 17.7 20.3C17.7 17.3 17.6 14.6 17.6 15.9Q16.6 8.9 7.6 9.1L3.8 9.1L0.0 9.0L0 0Z' fill='%23e8dac2'/%3E%3C/svg%3E")}
.band+.section{padding-top:7.5rem}

/* ===== Leistungen als Farbkleckse ===== */
.blobs{display:grid;grid-template-columns:1fr;gap:2.2rem;max-width:940px;margin:0 auto}
.blob{background:var(--bg);color:var(--fg);padding:2.8rem 2.7rem 3.4rem;border-radius:50% 42% 46% 44%/40% 44% 38% 42%;
  animation:morph 16s ease-in-out infinite alternate;box-shadow:var(--shadow)}
.blob h3{font-size:1.35rem;margin:.3rem 0 .45rem}
.blob p{margin:0;max-width:34ch}
.blob-icon{display:inline-grid;place-items:center;width:3.6rem;height:3.6rem;font-size:1.9rem;background:rgba(255,255,255,.88);
  border-radius:46% 54% 50% 50%/55% 45% 55% 45%;transition:transform .5s var(--ease-pop)}
.blob:hover .blob-icon{transform:rotate(-12deg) scale(1.12)}
.blob-pink{--bg:var(--pink-dk);--fg:#fff;rotate:-1.2deg}
.blob-purple{--bg:var(--purple);--fg:#fff;rotate:1.4deg;animation-duration:19s;animation-delay:-6s}
.blob-sky{--bg:var(--sky);--fg:var(--ink);rotate:1deg;animation-duration:17s;animation-delay:-3s}
.blob-yellow{--bg:var(--yellow);--fg:var(--ink);rotate:-1.5deg;animation-duration:21s;animation-delay:-9s}
@media (min-width:720px){
  .blobs{grid-template-columns:1fr 1fr;gap:2.4rem 2.8rem}
  .blob{padding:3.2rem 3.4rem 3.6rem}
  .blob:nth-child(even){translate:0 3rem}
  #leistungen{padding-bottom:7rem}
}
@keyframes morph{
  0%{border-radius:50% 42% 46% 44%/40% 44% 38% 42%}
  50%{border-radius:42% 50% 40% 50%/44% 38% 44% 36%}
  100%{border-radius:46% 46% 50% 40%/36% 42% 40% 44%}}

/* Erscheinen beim Scrollen (nur mit JavaScript) */
.js .reveal{opacity:0;scale:.6;transition:opacity .45s ease,scale .75s var(--ease-pop)}
.js .reveal.is-visible{opacity:1;scale:1}
.js .blob.reveal:nth-child(2){transition-delay:.1s}
.js .blob.reveal:nth-child(3){transition-delay:.2s}
.js .blob.reveal:nth-child(4){transition-delay:.3s}

/* ===== Ablauf ===== */
.steps-wrap{position:relative}
.squiggle{display:none}
.steps{list-style:none;margin:0 auto;padding:0;display:grid;gap:2.2rem;max-width:880px;position:relative}
.steps li{text-align:center;display:flex;flex-direction:column;align-items:center}
.steps h3{margin:.6rem 0 .3rem;font-size:1.25rem}
.steps p{margin:0;color:var(--muted);max-width:28ch}
.num{position:relative;display:grid;place-items:center;width:96px;height:96px}
.num svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.num b{position:relative;color:#fff;font-size:2rem;line-height:1}
.js .steps-wrap:not(.is-visible) .num{scale:0;rotate:-40deg}
.num{transition:scale .6s var(--ease-pop),rotate .6s var(--ease-pop)}
.steps li:nth-child(2) .num{transition-delay:.35s}
.steps li:nth-child(3) .num{transition-delay:.7s}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr);gap:1.6rem}
  .squiggle{display:block;position:absolute;left:0;right:0;top:0;width:100%;height:96px;max-width:880px;margin:0 auto;overflow:visible}
  .squiggle path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
  .js .steps-wrap:not(.is-visible) .squiggle path{stroke-dashoffset:1}
}

/* ===== Galerie (Polaroids) ===== */
.polaroids{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 1.4rem;margin:0 auto 2.4rem;max-width:900px}
.polaroid{margin:0;background:#fff;padding:10px 10px 0;width:min(260px,42vw);box-shadow:var(--shadow);border-radius:4px;
  transition:rotate .45s var(--ease-pop),scale .45s var(--ease-pop),transform .7s var(--ease-pop),opacity .4s}
.polaroid figcaption{text-align:center;padding:.6rem 0 .8rem;font-weight:500;font-size:clamp(.85rem,3.4vw,1rem)}
.pol-1{rotate:-4deg}.pol-2{rotate:3deg}.pol-3{rotate:-2deg}
.polaroid:hover{rotate:0deg;scale:1.05;z-index:2}
.pic{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.pic svg{position:absolute;width:86%;height:86%;overflow:visible}
.pic span{position:relative;font-size:clamp(2.6rem,10vw,4.2rem);transition:transform .5s var(--ease-pop)}
.polaroid:hover .pic span{transform:scale(1.15) rotate(-8deg)}
.pic-pink{background:#fbe0ee}.pic-orange{background:#fde8d2}.pic-purple{background:#ece2f6}
.js .reveal-toss:not(.is-visible){opacity:0;transform:translateY(-50px) rotate(-12deg)}
.pol-2{transition-delay:0s,0s,.12s,.12s}.pol-3{transition-delay:0s,0s,.24s,.24s}

/* ===== Formular ===== */
.form{position:relative;background:var(--paper);border-radius:28px;padding:1.6rem;display:grid;gap:1.05rem;box-shadow:var(--shadow);max-width:760px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.form .row{grid-template-columns:1fr}.form{padding:1.25rem}}
.form label{display:grid;gap:.3rem;font-weight:500;font-size:.95rem}
.form .narrow{max-width:calc(50% - .5rem)}
@media (max-width:640px){.form .narrow{max-width:none}}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:.72rem .85rem;border:2px solid var(--sand-2);border-radius:14px;background:#fff;color:var(--ink);width:100%;
  transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(47,183,224,.2)}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-weight:500;font-size:.95rem;padding:0;margin-bottom:.45rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:.55rem 1rem;border-radius:999px;border:2px solid var(--sand-2);background:#fff;cursor:pointer;font-weight:500;
  transition:background .2s,border-color .2s,color .2s,transform .35s var(--ease-pop)}
.chip:hover span{border-color:var(--pink)}
.chip input:checked+span{background:var(--pink-dk);border-color:var(--pink-dk);color:#fff;transform:scale(1.06) rotate(-2deg)}
.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.form .consent{display:flex;align-items:flex-start;gap:.6rem;font-weight:400;font-size:.88rem;color:var(--muted)}
.consent input{width:1.15rem;height:1.15rem;margin-top:.2rem;flex:none;accent-color:var(--pink-dk)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-send{justify-self:start;font-size:1.05rem}
.form-msg{margin:0;font-weight:500;min-height:1.6em}
.form-msg.ok{color:var(--green-dk)}.form-msg.err{color:var(--red)}
.confetti{position:fixed;width:9px;height:13px;border-radius:2px;pointer-events:none;z-index:100}

/* ===== Kontakt ===== */
.contact-list{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.contact-list a,.contact-plain{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.2rem .6rem .6rem;background:#fff;border-radius:999px;
  color:var(--ink);text-decoration:none;font-weight:500;box-shadow:0 5px 0 #d9c7a9;transition:transform .3s var(--ease-pop)}
.contact-list a:hover{transform:translateY(-3px) rotate(-1.5deg)}
.ci{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;font-size:1.15rem}
.ci-pink{background:#fbe0ee}.ci-sky{background:#d9f2fb}.ci-purple{background:#ece2f6}.ci-green{background:#e6f2d6}

/* ===== Fußzeile ===== */
.site-footer{position:relative;text-align:center;padding:6rem 16px 2.4rem;background:var(--caramel-dk);color:#f6ead6;font-size:.95rem;margin-top:2rem}
.site-footer::before{top:-1px;background-position:-170px 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 72'%3E%3Cpath d='M0 0H600V6.4L593.9 7.0L587.7 7.7Q566.7 22.3 545.7 8.3L522.3 10.2L498.9 12.9Q489.9 12.3 488.9 19.3C488.9 16.3 488.8 17.3 488.8 20.3A6.9 6.9 0 1 1 477.3 20.3C477.3 17.3 477.2 16.3 477.2 19.3Q476.2 12.3 467.2 9.9L453.1 7.9L439.0 7.2Q419.9 20.8 400.7 7.7L391.3 7.1L381.9 6.4Q372.9 6.4 371.9 13.4C371.9 20.7 371.8 32.1 371.8 35.1A7.2 7.2 0 1 1 359.8 35.1C359.8 32.1 359.6 20.7 359.6 13.4Q358.6 6.4 349.6 8.3L344.2 9.3L338.9 10.3Q329.9 12.5 328.9 19.5C328.9 18.9 328.3 22.2 328.3 25.2A9.6 9.6 0 1 1 312.1 25.2C312.1 22.2 311.6 18.9 311.6 19.5Q310.6 12.5 301.6 11.8L297.7 11.4L293.8 10.9Q273.9 22.4 253.9 9.6L228.3 8.6L202.7 5.4Q182.5 14.1 162.3 8.9L163.6 8.7L164.8 8.5Q155.8 10.4 154.8 17.4C154.8 15.0 154.9 16.7 154.9 19.7A5.8 5.8 0 1 1 145.2 19.7C145.2 16.7 145.3 15.0 145.3 17.4Q144.3 10.4 135.3 10.8L119.1 10.3L103.0 10.2Q94.0 11.2 93.0 18.2C93.0 16.8 93.0 19.4 93.0 22.4A6.1 6.1 0 1 1 82.8 22.4C82.8 19.4 82.9 16.8 82.9 18.2Q81.9 11.2 72.9 11.8L59.0 11.0L45.2 8.9Q36.2 6.1 35.2 13.1C35.2 10.1 34.9 11.1 34.9 14.1A8.3 8.3 0 1 1 21.0 14.1C21.0 11.1 20.7 10.1 20.7 13.1Q19.7 6.1 10.7 5.6L5.3 5.9L0.0 6.4L0 0Z' fill='%23f1e7d6'/%3E%3C/svg%3E")}
.site-footer p{margin:.3rem 0}
.site-footer a{color:#fff}
.footer-links{display:flex;justify-content:center;gap:1.4rem}

/* ===== Unterseiten (Impressum, Datenschutz, 404) ===== */
.legal{max-width:800px;margin:0 auto;padding:2.5rem 16px 4rem}
.legal h1{color:var(--caramel-dk);font-size:clamp(1.8rem,5vw,2.4rem)}
.legal h2{font-size:1.25rem;margin-top:2rem;color:var(--caramel-dk)}
.note{background:#fff3c4;border-left:5px solid var(--yellow);padding:.8rem 1rem;border-radius:8px}
.notfound{text-align:center}
.notfound img{margin:0 auto 1rem;width:160px;animation:wiggle 1.2s ease-in-out .3s 2}

/* ===== Weniger Bewegung, wenn im System eingestellt ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .sparkle{display:none}
}