/* IriFit Web — Markenstil aus der App (Antic Didone + Manrope, Rosé-Verlauf, Milchglas) */
:root{
  --ink:#1C1C21; --muted:rgba(60,60,67,.62); --muted2:rgba(60,60,67,.42);
  --tint:#E87F9C; --tint-deep:#D25578; --grey:#675C6C;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.86);
  --stroke:rgba(255,255,255,.8); --radius:22px; --radius-lg:30px;
  --head:'Antic Didone',serif; --body:'Manrope',system-ui,-apple-system,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(1100px 700px at 12% -8%, #FDE7EF 0%, transparent 60%),
    radial-gradient(900px 600px at 92% 4%, #EDE7F6 0%, transparent 55%),
    radial-gradient(800px 700px at 60% 100%, #FDEDE2 0%, transparent 60%),
    #FBF7F9;
  background-attachment:fixed;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
a{color:var(--tint-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head); font-weight:400; letter-spacing:.01em; line-height:1.15; margin:0}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(28px,4vw,42px); margin-bottom:14px}
h3{font-size:22px}
p{margin:0 0 16px}
.eyebrow{font-family:var(--body); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px}

/* Kopf */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%); background:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.7)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-family:var(--head); font-size:27px; line-height:1}
.brand .i{color:var(--tint-deep)} .brand .f{color:var(--grey)}
.nav-links{display:flex; gap:26px; align-items:center; font-size:14.5px; font-weight:600}
.nav-links a{color:var(--ink)} .nav-links a:hover{color:var(--tint-deep); text-decoration:none}
@media(max-width:720px){.nav-links{display:none}}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px;
  font-weight:700; font-size:15px; border:none; cursor:pointer; transition:transform .18s, box-shadow .18s}
.btn-primary{background:linear-gradient(135deg,var(--tint),var(--tint-deep)); color:#fff;
  box-shadow:0 10px 26px rgba(210,85,120,.32)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(210,85,120,.4); text-decoration:none}
.btn-ghost{background:var(--glass); border:1px solid var(--stroke); color:var(--ink);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.btn-ghost:hover{background:var(--glass-strong); text-decoration:none}

/* Karten */
.card{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 8px 30px rgba(120,90,105,.08); padding:30px}

/* Hero */
.hero{padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.hero h1{margin-bottom:8px}
.slogan{font-family:var(--head); font-size:clamp(19px,2.4vw,25px); color:var(--grey); margin-bottom:22px}
.hero-photo{position:relative; text-align:center}
.hero-photo img{width:100%; max-width:430px; height:auto; filter:drop-shadow(0 26px 46px rgba(120,80,100,.22))}
.hero-badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr; gap:24px} .hero{padding:40px 0 20px}
  .hero-photo{order:-1} .hero-photo img{max-width:290px}}

/* Store-Badges */
.store{display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff;
  padding:11px 20px; border-radius:14px; font-weight:600; transition:transform .18s, opacity .18s}
.store:hover{transform:translateY(-2px); text-decoration:none; color:#fff}
.store svg{width:24px; height:24px; flex:none; fill:currentColor}
.store small{display:block; font-size:10.5px; font-weight:500; opacity:.75; line-height:1.2}
.store b{display:block; font-size:15px; font-weight:700; line-height:1.2}
.store.soon{opacity:.55; pointer-events:none}

/* Sektionen */
section{padding:56px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 34px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
.feature{text-align:left}
.feature .ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--tint),var(--tint-deep)); margin-bottom:16px;
  box-shadow:0 8px 20px rgba(210,85,120,.26)}
.feature .ico svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin-bottom:8px}
.feature p{color:var(--muted); font-size:15px; margin:0}

/* Zahlen */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:center}
.stat b{display:block; font-family:var(--head); font-size:clamp(32px,4.6vw,46px); color:var(--tint-deep); line-height:1}
.stat span{font-size:13.5px; color:var(--muted); font-weight:600}
@media(max-width:640px){.stats{grid-template-columns:1fr; gap:12px}}

/* Über Irina */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center}
.about img{width:100%; max-width:360px; height:auto; filter:drop-shadow(0 22px 40px rgba(120,80,100,.2))}
@media(max-width:860px){.about{grid-template-columns:1fr; text-align:center}
  .about .about-photo{display:flex; justify-content:center} .about img{max-width:250px}}
.socials{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
@media(max-width:860px){.socials{justify-content:center}}
.social{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px;
  background:linear-gradient(135deg,var(--tint),var(--tint-deep)); color:#fff; font-weight:700; font-size:14.5px}
.social:hover{text-decoration:none; color:#fff; transform:translateY(-2px)}
.social svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.7}

/* FAQ */
details{background:var(--glass); border:1px solid var(--stroke); border-radius:16px; padding:18px 22px;
  margin-bottom:12px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
details summary{cursor:pointer; font-weight:700; font-size:16px; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:14px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+'; font-size:22px; color:var(--tint-deep); font-weight:400; line-height:1}
details[open] summary::after{content:'−'}
details p{margin:12px 0 0; color:var(--muted); font-size:15px}

/* CTA */
.cta{background:linear-gradient(135deg,rgba(232,127,156,.16),rgba(210,85,120,.1));
  border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:48px 34px; text-align:center}

/* Fuß */
footer{padding:44px 0 34px; border-top:1px solid rgba(120,90,105,.12); margin-top:40px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--muted)}
.foot a{color:var(--muted); font-weight:600}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}

/* Rechtstexte */
.legal{max-width:780px; margin:0 auto; padding:44px 0 20px}
.legal .card{padding:38px 40px}
.legal h2{font-size:26px; margin:34px 0 10px}
.legal h2:first-of-type{margin-top:8px}
.legal p{font-size:15.5px; color:#3a3a42}
.legal .meta{font-size:13.5px; color:var(--muted); margin-top:28px; padding-top:18px;
  border-top:1px solid rgba(120,90,105,.14)}
@media(max-width:640px){.legal .card{padding:26px 22px}}
.back{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px; margin-bottom:18px}