/* 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 */
/* scroll-margin: sonst schiebt die klebende Kopfleiste beim Ankersprung
   die erste Zeile der Sektion unter sich */
section{padding:56px 0}
/* scroll-margin fuer JEDES Sprungziel, nicht nur fuer <section>: der Knopf
   "App laden" zeigt auf #laden an den Store-Badges — die verschwanden beim
   Sprung komplett hinter der klebenden Kopfleiste (Befund Sascha 15.08.).
   Bei #laden etwas grosszuegiger, damit die Badges samt Hinweiszeile stehen. */
section, [id]{scroll-margin-top:76px}
#laden{scroll-margin-top:118px}
/* Ueberschrift ueber die volle Containerbreite (Sascha 20.08.): Mit 640 px
   brach „Was Frauen nach dem Kurs schreiben" mitten im Satz um. Der
   Fliesstext darunter bleibt schmal — 1120 px lange Zeilen liest niemand
   gern, Ueberschriften dagegen duerfen die ganze Breite nehmen. */
.section-head{text-align:center; margin:0 auto 34px}
.section-head h2{max-width:none}
.section-head p{max-width:640px; margin-left:auto; margin-right:auto}
.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}

/* Stimmen — Spalten von Hand statt column-count.
   Zwei Anlaeufe mit CSS-Spalten sind in Safari gescheitert: mal riss es Loecher,
   mal starteten die Spalten auf unterschiedlicher Hoehe (Sascha 15.08., zweimal
   per Screenshot belegt). Der Fragmentierungsalgorithmus ist dort schlicht nicht
   verlaesslich. Drei feste Spalten mit je drei Karten rechnet kein Browser aus,
   die stehen ueberall gleich. Die Zuordnung im HTML ist nach Textlaenge sortiert,
   damit die Spalten unten etwa gleich enden.
   Schmale Schirme: display:contents loest die Spalten auf, dann liegen die neun
   Karten direkt im Raster und fliessen sauber in zwei bzw. eine Spalte. */
.voices{display:flex; gap:20px; align-items:flex-start; margin-top:34px}
.vcol{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px}
.voice{margin:0; padding:26px 28px 22px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:rgba(255,255,255,.78)}
@media(max-width:900px){
  .voices{display:grid; grid-template-columns:repeat(2,1fr); align-items:start}
  .vcol{display:contents}
}
@media(max-width:620px){.voices{grid-template-columns:1fr}}
/* Verlaufsstrich aus der Wortmarke statt Anfuehrungszeichen. Zwei Versuche
   davor: absolut positioniert landete das „ mitten im Text, und als eigene
   Zeile blieb es winzig — Antic Didone setzt Anfuehrungszeichen sehr klein. */
.voice .mark{display:block; width:34px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--tint),var(--tint-deep)); margin-bottom:18px}
.voice blockquote{margin:0 0 16px; font-size:15.5px; color:#3a3a42}
.voice .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid rgba(120,90,105,.12); padding-top:14px}
.voice .who{font-size:12.5px; font-weight:600; color:var(--muted)}
.kg{display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:999px;
  background:linear-gradient(135deg,rgba(232,127,156,.2),rgba(210,85,120,.12));
  border:1px solid rgba(210,85,120,.2); color:var(--tint-deep);
  font-size:12.5px; font-weight:700; white-space:nowrap}
.voices-note{text-align:center; font-size:12.5px; color:var(--muted2);
  max-width:640px; margin:30px auto 0; line-height:1.55}

/* Screenshot-Galerie */
.shots{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; justify-items:center}
.shots figure{margin:0; text-align:center}
.shots img{width:100%; max-width:260px; height:auto;
  filter:drop-shadow(0 18px 34px rgba(120,80,100,.26))}
.shots figcaption{margin-top:14px; font-size:13.5px; font-weight:600; color:var(--muted)}
@media(max-width:860px){
  .shots{grid-template-columns:repeat(2,1fr); gap:18px}
  .shots img{max-width:200px}
}
@media(max-width:420px){.shots{grid-template-columns:1fr}}

/* Standlinie unter Irinas Freistellern (Sascha 15.08.): ein duenner Strich in
   den Markenfarben, der nach aussen ausblendet. Die Beine sind unten hart
   beschnitten — die Linie gibt ihnen einen Boden, statt sie abbrechen zu lassen.
   inline-block, damit sich der Rahmen exakt auf die gerenderte Bildbreite zieht;
   feste Pixelwerte je Breakpoint waeren bei srcset sofort falsch. */
.photo-strip{position:relative; display:inline-block; line-height:0; max-width:100%}
/* Nicht ueber die volle Bildbreite: der Freisteller hat links und rechts
   transparenten Rand, ein Strich ueber die ganze Box haengt neben ihr in der
   Luft. 8 % Einzug je Seite, und er sitzt buendig auf der Unterkante (Sascha 15.08.). */
.photo-strip::after{
  content:''; position:absolute; left:8%; right:8%; bottom:0; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, rgba(232,127,156,0) 0%, rgba(232,127,156,.9) 18%,
    var(--tint-deep) 50%, rgba(232,127,156,.9) 82%, rgba(232,127,156,0) 100%);
  pointer-events:none;
}

/* Einblenden beim Scrollen (Sascha 15.08.).
   Die Klasse .reveal setzt NUR das Skript — ohne JavaScript bleibt die Seite
   sichtbar statt leer. Wer im System "Bewegung reduzieren" gesetzt hat,
   bekommt gar keine Animation; bei einer Abnehm-App sitzen genug Nutzerinnen
   mit Migraene oder Schwindel, das ist keine Kosmetik. */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(20px);
    transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1; transform:none}
  /* Bilder kommen etwas tiefer und minimal kleiner herein */
  .reveal-img{opacity:0; transform:translateY(26px) scale(.97);
    transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1)}
  .reveal-img.in{opacity:1; transform:none}
  /* Auf dem Handy kuerzere Wege, sonst wirkt es zaeh */
  @media(max-width:620px){
    .reveal{transform:translateY(12px)} .reveal-img{transform:translateY(16px) scale(.985)}
  }
}

/* Kontaktformular */
.kontakt{max-width:620px; margin:0 auto; padding:32px}
.kontakt .feld{margin-bottom:16px}
.kontakt label{display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px}
/* Rand bewusst NICHT --stroke: das ist weiss und verschwindet auf der
   weissen Karte spurlos. Ein warmes Grau zeichnet die Felder ab, ohne den
   weichen Eindruck der Seite zu brechen. */
.kontakt input, .kontakt textarea{
  width:100%; font-family:var(--body); font-size:15.5px; color:var(--ink);
  background:rgba(255,255,255,.92); border:1px solid rgba(120,90,105,.18);
  border-radius:14px; padding:13px 15px; outline:none;
  box-shadow:inset 0 1px 2px rgba(120,90,105,.05);
  transition:border-color .18s, box-shadow .18s}
.kontakt input::placeholder, .kontakt textarea::placeholder{color:var(--muted2)}
.kontakt textarea{resize:vertical; min-height:130px; line-height:1.55}
.kontakt input:focus, .kontakt textarea:focus{
  border-color:var(--tint); box-shadow:0 0 0 3px rgba(232,127,156,.16)}
.kontakt button{width:100%; justify-content:center; margin-top:4px}
/* Honigtopf: nicht display:none — manche Skripte ueberspringen versteckte
   Felder. So steht es ausserhalb des Bildes, wird aber mit ausgefuellt. */
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.kontakt-hinweis{margin:14px 0 0; font-size:14.5px; font-weight:600; color:var(--muted)}
.kontakt-hinweis.ok{color:#2E7D5B}
.kontakt-hinweis.fehler{color:var(--tint-deep)}
.kontakt-klein{margin:16px 0 0; font-size:12.5px; color:var(--muted2); line-height:1.5}
@media(max-width:520px){.kontakt{padding:24px 20px}}