/* Schriften selbst ausgeliefert – keine Verbindung zu Google Fonts */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url("Schriften/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"),url("Schriften/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url("Schriften/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations"),url("Schriften/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-display:swap;font-weight:400;src:url("Schriften/figtree-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Figtree";font-display:swap;font-weight:400;src:url("Schriften/figtree-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-display:swap;font-weight:500;src:url("Schriften/figtree-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Figtree";font-display:swap;font-weight:500;src:url("Schriften/figtree-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-display:swap;font-weight:600;src:url("Schriften/figtree-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Figtree";font-display:swap;font-weight:600;src:url("Schriften/figtree-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02FF,U+1E00-1E9F,U+A720-A7FF}

:root{
  --creme:#F3ECE6; --rose:#E9DAD3; --wein:#7A1622; --tief:#3A0D14; --erde:#74605A;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tief);font:400 1.0625rem/1.6 var(--ui);-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
a{color:var(--wein);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--wein);outline-offset:4px;border-radius:6px}

.bar{display:flex;justify-content:space-between;align-items:center;max-width:1040px;margin:0 auto;padding:18px 22px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tief);font:700 1.25rem var(--display);letter-spacing:-.01em}
.langs{display:flex;gap:2px}
.langs button{font:600 .8125rem var(--ui);color:var(--erde);background:none;border:0;padding:8px 10px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{color:var(--creme);background:var(--wein)}

main{max-width:1040px;margin:0 auto;padding:0 22px}

/* Das Herz ist der eine laute Moment der Seite */
.hero{text-align:center;padding:4vh 0 11vh}
.heart{position:relative;display:inline-grid;place-items:center;width:min(78vw,380px);aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.heart img{width:84%;height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--wein);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;opacity:0;transition:opacity .2s}
.heart.holding .ring circle{opacity:.55;animation:fill 1.6s linear forwards}
.heart.holding img{transform:scale(.95)}
.heart.knotted img{animation:knot .9s cubic-bezier(.2,.9,.25,1.3)}
.heart.knotted .ring circle{opacity:0}
@keyframes fill{to{stroke-dashoffset:0}}
@keyframes knot{0%{transform:scale(.95)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.hint{min-height:1.6em;margin:6px 0 0;color:var(--erde);font-size:.9375rem}
.hint.done{color:var(--wein);font-weight:600}
h1{font:700 clamp(2.1rem,6.2vw,4rem)/1.04 var(--display);letter-spacing:-.025em;font-variation-settings:"opsz" 96;max-width:15ch;margin:4vh auto 0;text-wrap:balance}
.sub{max-width:34ch;margin:18px auto 0;font-size:1.1875rem;color:var(--erde);text-wrap:pretty}

/* So funktioniert es – der Faden verbindet die drei Schritte */
.how{max-width:620px;margin:0 auto;padding:0 0 12vh}
.how h2,.soon h2{font:700 clamp(1.6rem,3.6vw,2.2rem)/1.15 var(--display);letter-spacing:-.02em;margin:0 0 28px}
.thread{list-style:none;margin:0;padding:0;counter-reset:s}
.thread li{position:relative;padding:0 0 34px 54px;counter-increment:s}
.thread li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--creme);border:1.6px solid var(--wein);
  color:var(--wein);font:600 .9375rem/29px var(--ui);text-align:center;z-index:1}
.thread li::after{content:"";position:absolute;left:15.2px;top:32px;bottom:0;width:1.6px;background:var(--wein);opacity:.35}
.thread li:last-child{padding-bottom:0}
.thread li:last-child::after{display:none}
.thread li:last-child::before{background:var(--wein);color:var(--creme)}
.thread h3{font:600 1.1875rem/1.3 var(--ui);margin:3px 0 4px}
.thread p{margin:0;color:var(--erde);max-width:46ch}

/* Das Versprechen */
.promise{background:var(--rose);border-radius:28px;padding:clamp(34px,7vw,72px) clamp(24px,6vw,64px);margin:0 auto 12vh;max-width:820px}
.promise .big{font:600 clamp(1.5rem,3.6vw,2.25rem)/1.2 var(--display);letter-spacing:-.015em;margin:0 0 14px;max-width:22ch;text-wrap:balance}
.promise p{margin:0;max-width:52ch;color:var(--tief)}

.soon{max-width:620px;margin:0 auto;padding:0 0 12vh}
.soon>p{margin:0 0 14px;color:var(--erde);max-width:48ch}
.social{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px!important}
.social a{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--wein);color:var(--creme);text-decoration:none;font-weight:600}
.social a:hover{background:var(--tief)}
.mail a{font-weight:600}
.tester{font-size:.875rem}

.foot{max-width:1040px;margin:0 auto;padding:26px 22px 40px;display:flex;flex-wrap:wrap;gap:22px;font-size:.875rem;color:var(--erde);border-top:1px solid rgba(116,96,90,.2)}
.foot a{color:var(--erde)}
.foot span{margin-left:auto}

/* Rechtstexte */
.legal{max-width:680px;margin:0 auto;padding:10px 22px 60px;line-height:1.65}
.legal h1{font-size:clamp(1.9rem,5vw,2.6rem);max-width:none;margin:10px 0 18px;text-align:left}
.legal h2{font:700 1.3rem/1.3 var(--display);margin:34px 0 8px}
.legal h3{font:600 1.05rem/1.35 var(--ui);margin:22px 0 6px}
.legal ul{padding-left:1.2em}.legal li{margin:3px 0}
.legal .site{background:var(--rose);border-radius:20px;padding:22px 24px;margin:0 0 30px}
.legal .site h2{margin-top:0}
.back{display:inline-block;margin:0 0 8px;font-weight:600;text-decoration:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .heart.holding .ring circle{animation-duration:.01s}
  .heart.knotted img,.heart img{animation:none;transition:none}
}