/* ============================================================
   Roots Daily Meditation · Handy-Mockup (Kolja, 03.11.2026)
   EINE Komponente für beginn, begleitung, rootsofbirth.com und
   die exportierten PNGs (systeme.io-Embed). Gestaltung nach dem
   Ads-Mockup „Roots_Schreibaby_B6_Meditation“.

   Einbau (überall identisch):
     <div class="rob-mockup" aria-hidden="true">
       <div class="rm-phone"><div class="rm-screen">
         <span class="rm-label">Roots of Birth</span>
         <span class="rm-ring"><span class="rm-leaf"></span></span>
         <span class="rm-title">Roots Daily<br>Meditation</span>
         <span class="rm-sub">12 Minuten · Hand am Bauch</span>
         <span class="rm-badge">geschenkt</span>
         <span class="rm-bar"></span>
         <span class="rm-play"></span>
       </div></div>
     </div>

   Größe: nur die Breite des .rob-mockup setzen (Seitenverhältnis
   323:640 ist fest, alle Maße innen skalieren mit, cqw-Einheiten).
   Badge-Text: „geschenkt“ auf beginn (kostenfreie Meditation),
   „für jeden Tag“ dort, wo sie im 12-€-Paket verkauft wird.
   Farben/Schatten/Schriften über die --rm-Variablen überschreibbar.
   leaf-gold.png (Roots-Zweig im Gold-Verlauf) liegt neben dieser CSS.
   ============================================================ */
.rob-mockup{
  --rm-white:#FFFFFF;
  --rm-screen-top:#F6EFE9;
  --rm-screen-bottom:#EFE6DA;
  --rm-espresso:#242121;
  --rm-bronze:#936638;
  --rm-grau:#4F4843;
  --rm-rose:#C99C86;
  --rm-sand:#E5D8C9;
  --rm-gold:linear-gradient(135deg,#9C7420 0%,#F3D98B 30%,#C9A23A 50%,#FFF3C9 70%,#B08A2A 100%);
  --rm-shadow:0 7.4cqw 18.6cqw rgba(36,33,33,.18); /* = 0 24px 60px bei 323 px Breite, skaliert mit */
  --rm-serif:'Caudex',Georgia,serif;
  --rm-sans:'Assistant','Segoe UI',-apple-system,sans-serif;
  --rm-head:'ROBHead','Assistant','Segoe UI',sans-serif;
  --rm-leaf:url(leaf-gold.png);
  --rm-progress:38%;
  display:block; width:100%; aspect-ratio:323/640; container-type:inline-size;
  box-sizing:border-box; margin:0; padding:0; border:0;
  font-family:var(--rm-sans); font-weight:400; font-style:normal; color:var(--rm-espresso);
  line-height:1.2; text-align:center; letter-spacing:0; text-transform:none;
  -webkit-font-smoothing:antialiased; text-shadow:none;
}
.rob-mockup *,.rob-mockup *::before,.rob-mockup *::after{box-sizing:border-box;}

/* Handy-Rahmen: Weiß, stark gerundet (16 % der Breite), feiner Goldrahmen als Verlauf */
.rob-mockup .rm-phone{
  display:block; margin:0;
  width:100%; height:100%; padding:3.5cqw;
  border:clamp(1px,.62cqw,3px) solid transparent; border-radius:16cqw;
  background:linear-gradient(var(--rm-white),var(--rm-white)) padding-box, var(--rm-gold) border-box;
  box-shadow:var(--rm-shadow);
}

/* Bildschirm: Verlauf von oben nach unten, Text Espresso */
.rob-mockup .rm-screen{
  margin:0; position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:12.5cqw;
  background:linear-gradient(180deg,var(--rm-screen-top) 0%,var(--rm-screen-bottom) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:10.5cqw 7cqw 9.5cqw;
}

/* Label oben */
.rob-mockup .rm-label{
  display:block; margin:0; padding:0; flex:none;
  font-family:var(--rm-head); font-weight:700; font-size:4.1cqw; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rm-bronze); white-space:nowrap;
}

/* Kreis: dünner Bronze-Ring, Innenfläche radialer Verlauf mit feinem Innenschatten */
.rob-mockup .rm-ring{
  padding:0;
  width:54cqw; height:54cqw; margin-top:9.5cqw; border-radius:50%;
  border:4.5cqw solid var(--rm-bronze);
  background:radial-gradient(circle at 50% 42%,#FFFDF6 0%,#F6EFE9 100%);
  box-shadow:inset 0 .6cqw 1.9cqw rgba(156,116,32,.35);
  display:flex; align-items:center; justify-content:center; flex:none;
}
/* Roots-Zweig im Gold-Verlauf (PNG mit transparentem Hintergrund, neben dieser CSS) */
.rob-mockup .rm-leaf{
  display:block; margin:0; padding:0; flex:none;
  width:66%; aspect-ratio:720/397; height:auto;
  background:var(--rm-leaf) center/contain no-repeat;
}

/* Titel: Caudex, Espresso */
.rob-mockup .rm-title{
  display:block; padding:0; flex:none; letter-spacing:0; text-transform:none;
  margin-top:8.5cqw; font-family:var(--rm-serif); font-weight:400; font-style:normal;
  font-size:10.6cqw; line-height:1.12; color:var(--rm-espresso); white-space:nowrap;
}
/* Unterzeile: Assistant, warmes Grau */
.rob-mockup .rm-sub{
  display:block; padding:0; flex:none; font-weight:400; letter-spacing:0; text-transform:none;
  margin-top:3.4cqw; font-family:var(--rm-sans); font-size:5.1cqw; line-height:1.3;
  color:var(--rm-grau); white-space:nowrap;
}
/* Badge: Rosé-Pill, Espresso, fett */
.rob-mockup .rm-badge{
  display:inline-block; flex:none; text-transform:none; margin-top:5.8cqw; padding:2.3cqw 6.4cqw 2.5cqw; border-radius:999cqw;
  background:var(--rm-rose); color:var(--rm-espresso); font-family:var(--rm-sans);
  font-weight:700; font-size:4.5cqw; line-height:1.15; letter-spacing:.03em; white-space:nowrap;
}
/* Fortschrittsbalken: Spur Sand, Füllung Rosé (38 %) */
.rob-mockup .rm-bar{
  display:block; padding:0; position:relative; width:76cqw; height:1.9cqw; margin-top:10.5cqw; border-radius:2cqw;
  background:var(--rm-sand); overflow:hidden; flex:none;
}
.rob-mockup .rm-bar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--rm-progress);
  border-radius:inherit; background:var(--rm-rose);
}
/* Play-Knopf: Kreis Espresso, Dreieck Weiß */
.rob-mockup .rm-play{
  padding:0;
  width:19cqw; height:19cqw; margin-top:auto; border-radius:50%; flex:none;
  background:var(--rm-espresso); display:flex; align-items:center; justify-content:center;
}
.rob-mockup .rm-play::before{
  content:""; width:0; height:0; margin-left:1.4cqw; border-style:solid;
  border-width:3.7cqw 0 3.7cqw 6.4cqw; border-color:transparent transparent transparent #FFFFFF;
}