/* karin-schlatter.com — Redesign 2026 (TYPO3 v14 sitepackage). Self-hosted fonts, no external resources. */
@font-face{font-family:"Fraunces";src:url(../Fonts/fraunces-latin.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url(../Fonts/fraunces-latinext.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url(../Fonts/Hanken-Grotesk-wght-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../Fonts/Hanken-Grotesk-wght-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../Fonts/Hanken-Grotesk-wght-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../Fonts/Hanken-Grotesk-wght-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#1c2430;
  --ink-soft:#4b5563;
  --blue:#2b5a8f;        /* primary: structure, links, pins, contact band (Karin's favourite colour) */
  --blue-d:#1b3d63;
  --blue-l:#d6e3f2;
  --sky:#e9f0f8;         /* light section background */
  --cream:#f8f9fb;       /* page background */
  --paper:#fff;
  --slate:#4d5e73;       /* secondary: dates, small labels */
  --sun:#e0a23c;         /* CTA buttons (dark text), label hairline */
  --sun-d:#c98b2a;
  --line:#dbe2ea;
  --font:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --r:14px;
  --shadow:0 10px 30px -18px rgba(27,61,99,.45);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em;font-variation-settings:"opsz" 96,"SOFT" 60}
h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.3rem;font-variation-settings:"opsz" 30,"SOFT" 40}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.lbl{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.lbl::before{content:"";width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0a23c'%3E<path d='M12 11.6c-3.6 0-6.7 2.7-7.3 6.2-.3 2 1.2 3.6 3.2 3.4 1.4-.2 2.7-.6 4.1-.6s2.7.4 4.1.6c2 .2 3.5-1.4 3.2-3.4-.6-3.5-3.7-6.2-7.3-6.2z'/><ellipse cx='4.6' cy='10.4' rx='2.1' ry='2.9' transform='rotate(-22 4.6 10.4)'/><ellipse cx='19.4' cy='10.4' rx='2.1' ry='2.9' transform='rotate(22 19.4 10.4)'/><ellipse cx='9' cy='5.3' rx='2.2' ry='3.1' transform='rotate(-8 9 5.3)'/><ellipse cx='15' cy='5.3' rx='2.2' ry='3.1' transform='rotate(8 15 5.3)'/>%3C/svg%3E") no-repeat center/contain}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--sun);color:var(--ink);text-decoration:none;font-weight:800;padding:15px 26px;border-radius:999px;font-size:1.02rem;border:2px solid var(--sun);transition:background .15s;box-shadow:0 6px 16px -8px rgba(224,162,60,.9)}
.btn:hover{background:var(--sun-d);border-color:var(--sun-d)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--blue);box-shadow:none}
.btn.ghost:hover{background:var(--blue-l)}
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.7)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}
body:not(.hero-a) .hero .btn.ghost.light{color:var(--blue);border-color:var(--blue)}
body:not(.hero-a) .hero .btn.ghost.light:hover{background:var(--blue-l)}
.btn svg{width:20px;height:20px;fill:currentColor}
section{padding:88px 0}
section.alt{background:var(--sky)}

/* header */
body>header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
body>header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px}
.brand img.logo{height:46px;width:auto}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.35rem;display:block;line-height:1.05}
.brand small{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:1rem;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.on{border-bottom-color:var(--sun)}
nav .btn{padding:11px 20px;font-size:.95rem}
nav .btn:hover{border-bottom-color:var(--sun-d)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:8px}
.burger span{display:block;height:3px;background:var(--ink);margin:6px 0;border-radius:2px}

/* hero */
.hero{padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.status{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:11px 22px 11px 16px;border-radius:999px;font-weight:700;font-size:1.06rem;margin-bottom:24px}
.status i{width:14px;height:14px;flex:none;border-radius:50%;background:#3f9a4a;box-shadow:0 0 0 5px #d6efd9}
.status.wait i{background:var(--sun);box-shadow:0 0 0 5px #f6e5c6}
.status.full i{background:#c8373a;box-shadow:0 0 0 5px #f3d3d3}
.hero h1 span{color:var(--blue)}
.hero .cta .btn{font-size:1.12rem;padding:17px 30px}
.hero .lead{margin-bottom:28px}
.hero .cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero .cta .tel{color:var(--ink-soft);font-weight:500}
.hero .cta .tel a{color:var(--ink);text-decoration:none;font-weight:700}
.hero .photo{position:relative}
.hero .photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 30%;border-radius:22px;box-shadow:var(--shadow)}
.hero .photo .cap{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.92);padding:8px 14px;border-radius:10px;font-size:.88rem;font-weight:600}

/* hero Variante A (default): photo right, solid blue left. Variante B (?hero=b): split layout */
body.hero-a .hero{position:relative;padding:0;color:#fff;overflow:hidden;background:var(--blue-d)}
body.hero-a .hero .wrap{position:static;grid-template-columns:1fr;min-height:640px;align-items:center;padding-top:72px;padding-bottom:88px}
body.hero-a .hero .wrap>div:first-child{max-width:640px;position:relative;z-index:1}
body.hero-a .hero .photo{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:0}
body.hero-a .hero .photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:60% 30%;border-radius:0;box-shadow:none}
body.hero-a .hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,61,99,1) 0%,rgba(27,61,99,.85) 14%,rgba(27,61,99,.25) 32%,rgba(27,61,99,0) 44%)}
body.hero-a .hero .photo .cap{display:none}
body.hero-a .hero h1{color:#fff}
body.hero-a .hero h1 span{color:#f3d08a}
body.hero-a .hero .lead{color:#dce7f3}
body.hero-a .hero .cta .tel{color:#dce7f3}
body.hero-a .hero .cta .tel a{color:#fff}
body.hero-a .facts{margin-top:-44px;position:relative;z-index:2}

/* sell stripe */
.sell{background:var(--blue);color:#fff;padding:56px 0}
.sell .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sell h2{margin:0 0 6px;color:#fff}
.sell p{margin:0;color:#dce7f3;font-size:1.1rem;max-width:56ch}
.sell .cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sell .cta .btn{font-size:1.12rem;padding:17px 30px;white-space:nowrap}
.sell .cta .tel{color:#dce7f3;font-weight:500}
.sell .cta .tel a{color:#fff;text-decoration:none;font-weight:700}

/* facts */
.facts{padding:0 0 72px}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facts li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.facts svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.facts b{display:block;font-size:1.02rem}
.facts span{color:var(--ink-soft);font-size:.92rem}

/* tiles (Kacheln) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tile img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tile .tx{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tile h3{min-height:2.6em}
.tile p{color:var(--ink-soft);flex:1}
.tile .price{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;color:var(--slate);border-top:1px solid var(--line);padding-top:12px;margin-top:8px;cursor:help}
.tile .price .bones{display:inline-flex;gap:4px}.tile .price .bones svg{width:26px;height:26px;fill:var(--line)}.tile .price .bones svg.on{fill:var(--sun)}
.tile .price small{font-weight:500;color:var(--ink-soft);margin-left:auto}

/* steps */
.steps-head{margin-top:72px}.steps-head h3{font-size:1.7rem;margin:0}
.steps{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding:26px 26px 26px 26px;border-radius:var(--r);background:var(--sky)}
.step .num{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--blue);line-height:1;margin-bottom:10px}
.step h3{font-size:1.15rem}
.step p{margin:0;color:var(--ink-soft)}

/* area + map */
.area .wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.92rem;font-weight:500}
.chips span.home{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700}
.map{position:relative;container-type:inline-size;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#e7ebe3}
.map img{width:100%;aspect-ratio:16/10;object-fit:fill}
.map .ring{position:absolute;left:50%;top:50%;width:48.3%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--blue);background:rgba(43,90,143,.14);pointer-events:none}
.map .km{position:absolute;left:12px;top:12px;background:var(--blue);color:#fff;font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.pin i{width:clamp(12px,3.5cqw,20px);height:clamp(12px,3.5cqw,20px);border-radius:50% 50% 50% 0;background:var(--blue);transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pin b{background:#fff;color:var(--ink);font-size:clamp(.6rem,2.4cqw,.9rem);font-weight:800;padding:.2em .7em;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap;order:-1;margin-bottom:6px}
.map .l{position:absolute;transform:translate(-50%,-50%);font-size:clamp(.56rem,2cqw,.82rem);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#1b3d63;text-shadow:0 0 6px #fff,0 0 3px #fff,0 0 2px #fff;pointer-events:none;white-space:nowrap}
.map .credit{position:absolute;right:8px;bottom:6px;font-size:.68rem;color:#333;background:rgba(255,255,255,.8);padding:1px 7px;border-radius:4px}
.note{background:#fff;border-left:4px solid var(--sun);padding:14px 18px;border-radius:0 10px 10px 0;color:var(--ink-soft);font-size:.98rem}
.note+.note{margin-top:12px}.note b{color:var(--ink)}
.note.main{background:var(--sun);border-left-color:var(--blue-d);color:var(--ink);font-size:1.05rem;padding:18px 20px;box-shadow:0 10px 30px -18px rgba(224,162,60,.9)}
.note.main b{color:var(--ink);display:block;font-family:var(--serif);font-size:1.25rem;margin-bottom:4px}

/* testimonials */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.ref{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.ref img{aspect-ratio:4/3;object-fit:cover;width:100%}
.ref .tx{padding:20px 22px 22px}
.ref .who{margin-bottom:10px}
.ref .who b{display:block;font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--blue);line-height:1.15;font-variation-settings:"opsz" 30,"SOFT" 80}
.ref .who span{display:block;margin-top:6px;color:var(--slate);font-size:.86rem;font-weight:700}
.ref p{margin:0;color:var(--ink-soft);font-size:.98rem}
.refs-foot{margin-top:28px;color:var(--ink-soft);font-size:.95rem}

/* about */
.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.about .portrait img{border-radius:22px;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;box-shadow:var(--shadow)}
.about ul{padding-left:1.2em;color:var(--ink-soft);margin:0 0 24px}
.about li{margin-bottom:6px}
.media{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:8px}
.media img{border-radius:10px;aspect-ratio:1;object-fit:cover}
.media b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:4px}
.media p{margin:0 0 8px;color:var(--ink-soft);font-size:.95rem}
.media a{font-weight:700}

/* faq */
.faq .wrap{max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.05rem;padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.6rem;color:var(--blue);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--ink-soft)}

/* contact */
.contact{background:var(--blue);color:#fff}
.contact .lbl{color:#f3d08a}

.contact .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.contact .lead{color:#dce7f3}
.contact .ways{display:grid;gap:12px;margin-top:8px}
.contact .ways a{display:flex;align-items:center;gap:16px;background:#fff;color:var(--ink);text-decoration:none;padding:16px 20px;border-radius:12px;font-weight:700;font-size:1.05rem}
.contact .ways a small{display:block;font-weight:500;color:var(--ink-soft);font-size:.9rem}
.contact .ways svg{width:26px;height:26px;fill:var(--blue);flex:none}
.contact .side img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;border-radius:18px;box-shadow:var(--shadow);margin-bottom:22px}
.contact .addr{line-height:1.8}
.contact .addr b{font-family:var(--serif);font-weight:600;font-size:1.3rem;display:block;margin-bottom:6px}

/* footer */
body>footer{background:var(--blue-d);color:#c6d3e3;padding:34px 0;font-size:.92rem}
body>footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
body>footer a{color:#fff;text-decoration:none;margin-left:18px}
body>footer .brand b{color:#fff}body>footer .brand small{color:#c6d3e3}
body>footer .brand img.logo{background:#fff;border-radius:10px;padding:4px 6px;height:48px}

/* mobile */
@media (max-width:980px){
  section{padding:64px 0}
  nav{display:none}
  .burger{display:block}
  body.menu nav{display:block;position:fixed;inset:78px 0 0 0;background:#fff;z-index:40;padding:28px}
  body.menu nav ul{flex-direction:column;align-items:flex-start;gap:6px}
  body.menu nav a{font-size:1.35rem;font-family:var(--serif);padding:10px 0;display:block;border:0}
  body.menu nav li.cta{margin-top:18px;width:100%}
  body.menu nav .btn{font-family:var(--font);font-size:1.05rem;display:flex;justify-content:center;text-align:center;width:100%}
  .hero{padding:36px 0 40px}
  .hero .wrap,.area .wrap,.about .wrap,.contact .wrap{grid-template-columns:1fr;gap:32px}
  .hero .photo{order:-1}
  body.hero-a .hero .wrap{min-height:0;padding-top:48px;padding-bottom:72px}
  body.hero-a .hero .photo{width:100%}
  body.hero-a .hero .photo img{object-position:64% 22%}
  body.hero-a .hero .photo::after{background:linear-gradient(180deg,rgba(27,61,99,.15) 0%,rgba(27,61,99,.35) 30%,rgba(27,61,99,.9) 52%,rgba(27,61,99,.96) 100%)}
  body.hero-a .hero .wrap>div:first-child{padding-top:300px}
  body.hero-a .facts{margin-top:-36px}
  .sell .cta .btn{white-space:normal}
  .hero .photo img{aspect-ratio:4/3}
  .facts ul{grid-template-columns:1fr 1fr}
  .tiles,.steps,.refs{grid-template-columns:1fr}
  .tile h3{min-height:0}
  .about .portrait{max-width:320px}
}
@media (max-width:560px){
  .facts ul{grid-template-columns:1fr}
  .wrap{padding:0 20px}
  .media{grid-template-columns:90px 1fr}
  footer .wrap{flex-direction:column;align-items:flex-start}
  footer a{margin:0 18px 0 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* text pages (Impressum, Datenschutz, 404) */
.textpage{padding:72px 0 96px}
.textpage .wrap{max-width:860px}
.textpage h1{margin-bottom:.8em}
.textpage h2{font-size:1.5rem;margin:1.6em 0 .5em}
.textpage h3{margin:1.4em 0 .4em}
.textpage p,.textpage li{color:var(--ink-soft)}
.textpage a{font-weight:700}
.textpage .frame+.frame{margin-top:2em}

/* ───────── Blend-in effects (feature/blend-in) ─────────
   Active only when <html class="anim"> — set by an inline head script when the site setting wsc.animations is on
   AND the visitor has not asked for reduced motion. Without the class the page is exactly the static design.
   Everything plays once; the only loop is the soft pulse of the green status dot. */
.anim :where(section:not(.hero) .lbl, section:not(.hero) h2, section:not(.hero) .wrap>.lead, section:not(.hero) .wrap>div>.lead, .steps-head,
  .facts li, .tile, .step, .ref, .chips span, .note, .map, .portrait, .about ul, .media, .faq details, .ways a, .contact .side, .sell .cta, .textpage .wrap>*){
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0s) + var(--i,0)*80ms)}
.anim .in.in{opacity:1;transform:none}
.anim .facts li{--d:.55s}
.anim .chips span{transition-duration:.35s;transition-delay:calc(var(--i,0)*35ms)}
.anim .done.done{transition-delay:0s}

/* hero: sequence on load, photo settles (Variante A) */
@keyframes wsc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wsc-settle{from{transform:scale(1.045)}to{transform:none}}
.anim .hero .status{animation:wsc-rise .6s .05s both}
.anim .hero h1{animation:wsc-rise .6s .16s both}
.anim .hero .lead{animation:wsc-rise .6s .3s both}
.anim .hero .cta{animation:wsc-rise .6s .44s both}
/* the scaled photo must not peek out left of its gradient overlay */
.anim body.hero-a .hero .photo{overflow:hidden}
.anim body.hero-a .hero .photo img{animation:wsc-settle 1.4s cubic-bezier(.2,.7,.2,1) both}

/* status: the green dot breathes — only in the «freie Plätze» state */
@keyframes wsc-pulse{0%,100%{box-shadow:0 0 0 5px #d6efd9}50%{box-shadow:0 0 0 9px rgba(214,239,217,.35)}}
.anim .status:not(.full):not(.wait) i{animation:wsc-pulse 2.6s ease-in-out 1.2s infinite}

/* section label: the paw steps in */
.anim section:not(.hero) .lbl::before{transform:scale(0) rotate(-28deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .15s}
.anim section:not(.hero) .lbl.in::before{transform:none}

/* Preisstufe: bones fill one by one */
.anim .tile .bones svg.on{fill:var(--line);transition:fill .3s ease}
.anim .tile .bones svg:nth-child(1){transition-delay:calc(.55s + var(--i,0)*80ms)}
.anim .tile .bones svg:nth-child(2){transition-delay:calc(.75s + var(--i,0)*80ms)}
.anim .tile .bones svg:nth-child(3){transition-delay:calc(.95s + var(--i,0)*80ms)}
.anim .tile.in .bones svg.on{fill:var(--sun)}

/* Ablauf: numbers pop */
.anim .step .num{opacity:0;transform:scale(.4);transform-origin:left bottom;transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.25s + var(--i,0)*80ms)}
.anim .step.in .num{opacity:1;transform:none}

/* map: pin drops on Schlieren, the ring grows from it, names follow */
.anim .map .ring{transform:translate(-50%,-50%) scale(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .55s}
.anim .map.in .ring{transform:translate(-50%,-50%) scale(1)}
.anim .map .pin{opacity:0;transform:translate(-50%,-170%);transition:opacity .25s ease .25s,transform .55s cubic-bezier(.3,1.5,.5,1) .25s}
.anim .map.in .pin{opacity:1;transform:translate(-50%,-100%)}
.anim .map .l,.anim .map .km{opacity:0;transition:opacity .5s ease 1.2s}
.anim .map.in .l,.anim .map.in .km{opacity:1}

/* Kacheln: lift on hover (pointer devices only) */
@media (hover:hover){
  .anim .tile.done,.anim .ref.done{transition:transform .25s ease,box-shadow .25s ease}
  .anim .tile.done:hover,.anim .ref.done:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(27,61,99,.55)}
  .anim .tile img,.anim .ref img{transition:transform .45s ease}
  .anim .tile:hover img,.anim .ref:hover img{transform:scale(1.03)}
}

/* FAQ: answers open smoothly (where the browser can), text fades in everywhere */
@keyframes wsc-fade{from{opacity:0}to{opacity:1}}
.anim{interpolate-size:allow-keywords}
.anim .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
.anim .faq details[open]::details-content{block-size:auto}
.anim .faq details[open] p{animation:wsc-fade .35s ease both}

/* header: shadow once the page is scrolled, menu underline grows */
.anim body>header{transition:box-shadow .25s ease}
.anim body.scrolled>header{box-shadow:0 8px 22px -14px rgba(27,61,99,.55)}
.anim nav a:not(.btn){border-bottom-color:transparent;background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 100%/0 2px;background-origin:border-box;transition:background-size .28s ease}
.anim nav a:not(.btn):hover,.anim nav a:not(.btn).on{background-size:100% 2px}

@media print{.anim *{opacity:1!important;transform:none!important;animation:none!important}}