/* =========================================================
   RENTARO · Hero Carousel · FULL-REPLACE (responsive + knobs)
   =========================================================
   ► Stell NUR die KNOBS hier ein. Rest nicht anfassen.
   ► Wenn dein 24/7-Slide NICHT der 3. Slide ist:
     data-swiper-slide-index="2" unten auf den richtigen 0-basierten Index ändern.
*/

/* ================= KNOBS ================= */
:root{
  /* Bühne/Höhe */
  --hero-min: 320px;
  --hero-vw:  36vw;
  --hero-max: 560px;
  --hero-r:   22px;

  /* Brand-Akzente (neu) */
  --accent:      #f26609;   /* Orange */
  --accent-2:    #2b5fbf;   /* Blau, harmoniert mit Slide 3 */
  --frame-bg-1:  rgba(255,255,255,.88);
  --frame-bg-2:  rgba(255,255,255,.82);

  /* Slide 1 · Panel/Teaser-Position + Phone-Screen (Desktop) */
  --s1-panel-left:   clamp(14px, 2.4vw, 26px);
  --s1-panel-bottom: clamp(14px, 2.4vw, 26px);
  --s1-panel-maxw:   min(520px, 82%);
  --s1-teaser-left:  8%;
  --s1-teaser-top:   22%;
  --s1-d-left: 54.8%;
  --s1-d-top:  18.3%;
  --s1-d-w:    15.3%;
  --s1-d-h:    50.7%;
  --s1-d-r:    4%;

  /* Slide 1 · Phone-Screen (Tablet/Mid) */
  --s1-m-left: 54.2%;
  --s1-m-top:  14.6%;
  --s1-m-w:    17.6%;
  --s1-m-h:    68.9%;
  --s1-m-r:    6%;

  /* Slide 3 (24/7) · Bildausschnitt (kleiner = höher) */
  --s3y: 40%;

  /* Zentrale UI-Skalierung */
  --ui-scale: .78;
}

/* =============== BASE =============== */
.rentaro-hero-carousel{
  width:100%;
  height:100%;
  display:block;
  /* sanft etwas „rechtslastig“, ohne Layout zu sprengen */
  padding-right: clamp(8px, 2vw, 28px);
}

.rhc-swiper{
  width:100%;
  height:clamp(var(--hero-min), var(--hero-vw), var(--hero-max));
  border-radius:var(--hero-r);
  overflow:hidden;
  position:relative;
  /* wirkt weniger wie „geklebter Kasten“: leichter Rahmen + zarte Fläche */
  background: linear-gradient(180deg, var(--frame-bg-1) 0%, var(--frame-bg-2) 100%);
  border:1px solid rgba(15,23,32,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Ambient Color Wash (macht’s „verschmolzen“ mit dem Hintergrund) */
.rhc-swiper::before{
  content:"";
  position:absolute; inset:-2%;
  border-radius:inherit;
  background:
    radial-gradient(120% 90% at 12% 85%, rgba(242,102,9,.14) 0%, rgba(242,102,9,0) 60%),
    radial-gradient(95% 70% at 88% 8%,  rgba(43,95,191,.12) 0%, rgba(43,95,191,0) 58%);
  filter: blur(18px);
  z-index:0;
  pointer-events:none;
}

.rhc-swiper .swiper-wrapper{ position:relative; z-index:1; }
.rhc-swiper .swiper-slide{ position:relative; overflow:hidden; }
.rhc-swiper picture, .rhc-swiper img{ display:block; width:100%; height:100%; }
.rhc-swiper img{ object-fit:cover; filter:saturate(1.03) contrast(1.02); }

/* Layering */
.rhc-slide picture{ position:relative; z-index:0; }
.rhc-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.rhc-panel{ position:absolute; z-index:3; }
.rhc-phone-hero{ position:absolute; inset:0; z-index:2; }
.rhc-phone-hero picture,
.rhc-phone__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

/* Schutz: Phone-/UI-Bilder nie covern */
.rhc-phone-hero img,
.rhc-phone-hero picture > img{
  object-fit:contain !important;
  object-position:50% 50% !important;
}

/* =============== SLIDE 1 (App/Mail) =============== */
.rhc-slide--app .rhc-panel{
  left: var(--s1-panel-left);
  bottom: var(--s1-panel-bottom);
  max-width: var(--s1-panel-maxw);
  padding:clamp(12px,1.8vw,18px) clamp(14px,2vw,20px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.20);
  /* etwas wärmer, weicher */
  background:linear-gradient(180deg, rgba(18,22,27,.58) 0%, rgba(18,22,27,.72) 100%);
  backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 6px 24px rgba(15,23,32,.25);
}
.rhc-panel h3{
  margin:0 0 6px;
  font-size:clamp(18px,1.8vw,26px);
  line-height:1.2;
  font-weight:800;
}
.rhc-panel p{ margin:0 0 12px; opacity:.92; font-size:clamp(14px,1.2vw,16px); }

/* Teaser (Mail + Badges) */
.rhc-app-teaser{
  position:absolute; left:var(--s1-teaser-left); top:var(--s1-teaser-top);
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  max-width:360px; padding:.6rem .7rem; border-radius:16px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 10px 28px rgba(15,23,32,.12);
}
.rhc-app-item{
  display:inline-flex; align-items:center; gap:.45rem;
  height:40px; padding:0 .8rem; border-radius:12px; text-decoration:none;
  background:#fff; border:1px solid rgba(15,23,32,.06);
  box-shadow:0 2px 8px rgba(15,23,32,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rhc-app-item:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,32,.12); }
.rhc-icon-mail{
  width:18px; height:18px; display:inline-block; flex:0 0 18px; background:#1b1f24;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z"/></svg>') center/contain no-repeat;
}
.rhc-app-label{ font-weight:700; font-size:14px; color:#1b1f24; }
.rhc-badge-play, .rhc-badge-apple{ display:block; height:40px; width:auto; }

/* Phone-Screen im Mock */
@media (min-width:1024px){
  .rhc-phone__screen{
    position:absolute; overflow:hidden; background:#fff;
    box-shadow:inset 0 0 .5px rgba(0,0,0,.12);
    left:var(--s1-d-left); top:var(--s1-d-top);
    width:var(--s1-d-w); height:var(--s1-d-h);
    border-radius:var(--s1-d-r);
  }
}
@media (max-width:1023px){
  .rhc-phone__screen{
    position:absolute; overflow:hidden; background:#fff;
    box-shadow:inset 0 0 .5px rgba(0,0,0,.12);
    left:var(--s1-m-left); top:var(--s1-m-top);
    width:var(--s1-m-w); height:var(--s1-m-h);
    border-radius:var(--s1-m-r);
  }
}

/* UI im Screen */
.rhc-ui{
  position:absolute; inset:0;
  padding:12% 6% 7.5%;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:calc(14px * var(--ui-scale));
  line-height:1.28;
  color:#0f1418;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.rhc-ui__title{ margin:0 0 .55em; font-size:calc(1.05em * var(--ui-scale)); line-height:1.18; font-weight:800; }
.rhc-ui__title strong{ color:var(--accent); font-weight:900; }
.rhc-ui__lead{ margin:.2em 0 .85em; font-size:calc(.95em * var(--ui-scale)); color:#2b3238; }
.rhc-list{ list-style:none; margin:0 0 .85em; padding:0; }
.rhc-li{ margin:.55em 0; }
.rhc-li__title{ font-weight:800; margin:0 0 .12em; font-size:calc(1em * var(--ui-scale)); }
.rhc-li__sub{ color:var(--accent-2); font-size:calc(0.95em * var(--ui-scale)); }
.rhc-li__sub a{ color:var(--accent-2); text-decoration:none; }
.rhc-li__sub a:hover{ text-decoration:underline; }
.rhc-actions{ margin:.3em 0 .2em; }
.rhc-phone__screen .rhc-btn,
.rhc-phone__screen .rhc-btn:link,
.rhc-phone__screen .rhc-btn:visited {
  display:flex; align-items:center; justify-content:center;
  margin:0 auto; max-width:90%;
  height:calc(34px * var(--ui-scale));
  padding:0 10px;
  border-radius:10px; border:none;
  font-size:calc(.9em * var(--ui-scale));
  font-weight:700; white-space:nowrap;
  text-align:center; text-decoration:none;
}
.rhc-phone__screen .rhc-btn + .rhc-btn{ margin-top:.45em; }
.rhc-btn.rhc-btn--primary{ background:var(--accent); color:#101417; }
.rhc-btn.rhc-btn--dark{ background:#1f2328; color:#fff; }
.rhc-todos__title{ font-weight:900; margin:.8em 0 .3em; font-size:calc(.95em * var(--ui-scale)); }
.rhc-todos__list{ margin:0; padding-left:1.05em; font-size:calc(.90em * var(--ui-scale)); }
.rhc-todos__list li{ margin:.22em 0; }

/* =============== Overlays (Optik) =============== */
/* App-Slide: dezente Orange/Blau-Glows (Match zu Slide 3) */
.rhc-overlay--app{
  background:
    radial-gradient(120% 70% at 50% 92%, rgba(242,102,9,.40) 0%, rgba(242,102,9,.20) 38%, rgba(242,102,9,0) 66%),
    radial-gradient(100% 80% at 88% 12%, rgba(43,95,191,.26) 0%, rgba(43,95,191,0) 58%),
    linear-gradient(180deg, rgba(15,23,32,.08) 0%, rgba(15,23,32,.22) 45%, rgba(15,23,32,0) 70%);
  filter: blur(16px);
  opacity:.96;
}
.rhc-overlay--quality{
  background:
    radial-gradient(115% 70% at 50% 100%, rgba(242,102,9,.22) 0%, rgba(242,102,9,.12) 36%, rgba(242,102,9,0) 64%),
    linear-gradient(180deg, rgba(15,23,32,.16) 0%, rgba(15,23,32,.08) 34%, rgba(15,23,32,0) 62%),
    radial-gradient(58% 48% at 50% 56%, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 66%, rgba(0,0,0,.10) 100%);
  filter: blur(16px);
  opacity:.95;
}

/* =============== Navigation =============== */
.rhc-nav .swiper-button-prev,
.rhc-nav .swiper-button-next{
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.rhc-nav .swiper-button-prev::after,
.rhc-nav .swiper-button-next::after{ font-size:16px; color:#fff; }
.rhc-nav .swiper-pagination{
  --swiper-pagination-bullet-inactive-opacity:.35;
  --swiper-pagination-color:var(--accent);
  bottom:14px !important;
}

/* =============== Mobile Tweaks (optional auskommentiert) =============== */
/*
@media (max-width:940px){
  .rentaro-hero-carousel{ display:none !important; }
}
*/

/* ---------- NOTCH + KAMERALINSE ---------- */
.rhc-phone__screen::before{
  content:""; position:absolute;
  top:var(--notch-top,.7%); left:50%; transform:translateX(-50%);
  width:var(--notch-w,31%); height:var(--notch-h,7.6%);
  background:#0d0d0d; border-radius:0 0 var(--notch-radius,16px) var(--notch-radius,16px);
  pointer-events:none; z-index:5;
}
.rhc-phone__screen::after{
  content:""; position:absolute;
  top:calc(var(--notch-top,.7%) + (var(--notch-h,7.6%) / 2));
  left:50%; transform:translate(-50%, -50%);
  width:clamp(6px, 1.2vw, 10px); height:clamp(6px, 1.2vw, 10px); border-radius:50%;
  background:
    radial-gradient(40% 40% at 35% 35%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(60% 60% at 65% 65%, rgba(0,160,255,.35), transparent 60%),
    #0a0a0a;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 6px rgba(0,0,0,.35) inset;
  z-index:6; pointer-events:none;
}


@media (max-width: 940px){
  .rentaro-hero-carousel{ display: none !important; }
}


/* =========================================================
   FIX: Slide 3 (24/7) vertikale Position stabil – auch bei Loop
   ========================================================= */
.rhc-slide--s3 picture img,
.swiper-slide-duplicate.rhc-slide--s3 picture img {
  object-fit: cover !important;
  object-position: 50% var(--s3y) !important;
  transition: object-position .35s ease;
}