/* Landingpage, Abschnitt „Rundum ansehen. Und einsteigen.“ (AUFTRAG-LANDING-360.md)
   Heller Abschnitt mit hellem Browser-Rahmen (Handy-Rahmen unter 760 px), Viewer im hellen Thema (?thema=hell).
   Zusatz 3 (10.11.2026): kein Grau-in-Grau mehr, das Foto füllt das Fenster randlos.
   Rollen: Rahmen weiß #fff · Leiste #F7F6F9 · Linien #E9E7EE · Akzent var(--akzent). Radien wie Bestand: Gerät 22/44px, Karten 20px. */

.r-abschnitt{max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(16px,4vw,48px) clamp(40px,5vw,72px)}
.r-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:8px clamp(20px,4vw,64px);align-items:end}
.r-dach{grid-column:1/-1;margin:0;font-weight:700;font-size:.9rem;color:var(--akzent-dunkel);display:flex;align-items:center;gap:10px}
.r-dach::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.r-kopf h2{font-size:clamp(2rem,1.2rem + 3.2vw,4rem);letter-spacing:-.035em;font-stretch:112%;line-height:1.02;margin:0}
.r-kopf > p:last-child{color:var(--text2);font-size:1.1rem;margin:0;max-width:44ch}

/* Gerät */
.r-demo{margin-top:clamp(28px,4vw,48px)}
.r-geraet{max-width:1120px;margin:0 auto;border-radius:22px;padding:8px;background:#fff;box-shadow:0 0 0 1px #E9E7EE inset,0 1px 2px rgb(22 23 42/.05),0 40px 80px -40px rgb(60 30 70/.32)}
.r-browser{border-radius:15px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 0 1px #EEEDF2}
.r-leiste{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:#F7F6F9;color:#6B6E80;font-size:.8rem;border-bottom:1px solid #EEEDF2}
.r-punkte{display:flex;gap:7px}
.r-punkte span{width:11px;height:11px;border-radius:50%;background:#E2E0E7}
.r-adresse{flex:1;max-width:440px;margin:0 auto;height:26px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #E9E7EE;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;overflow:hidden}
.r-adresse svg{width:12px;height:12px;flex:none}
.r-fenster{position:relative;aspect-ratio:16/9;max-height:680px;width:100%;background:#fff;overflow:hidden}
.r-poster,.r-fenster iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.r-poster{object-fit:cover;transition:opacity .5s var(--ease)}
.r-fenster iframe{opacity:0;transition:opacity .45s var(--ease);background:#fff}
.r-fenster.da iframe{opacity:1}
.r-fenster.da .r-poster{opacity:0}
.r-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 22px 8px 9px;border-radius:999px;border:0;background:rgb(13 14 16/.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font:650 1rem/1 var(--fliess);cursor:pointer;transition:transform .14s var(--ease)}
.r-start:active{transform:translate(-50%,-50%) scale(.97)}
.r-start[hidden]{display:none}

/* Steuerung unter dem Gerät */
.r-steuer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin:22px auto 0;max-width:1120px}
.r-wahl{display:flex;padding:4px;border-radius:14px;background:#fff;gap:4px;box-shadow:0 0 0 1px #E9E7EE inset,0 6px 18px -10px rgb(60 30 70/.25)}
.r-wahl button{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border:0;border-radius:10px;background:none;color:#5D6072;font:650 .98rem/1 var(--fliess);cursor:pointer;transition:background .25s var(--ease),color .2s,transform .12s var(--ease)}
.r-wahl button:hover{color:#16172A}
.r-wahl button:active{transform:scale(.97)}
.r-wahl button[aria-pressed=true]{background:var(--akzent);color:var(--akzent-text)}
.r-wahl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-wahl button:focus-visible,.r-start:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.r-anleitung{display:flex;align-items:center;gap:10px;margin:0;color:var(--text2);font-weight:600}
.r-hand{width:34px;height:34px;border-radius:50%;background:var(--akzent-weich);color:var(--akzent-dunkel);display:grid;place-items:center}
.r-hand svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.r-hinweis{text-align:center;color:var(--text3);font-size:.9rem;margin:14px auto 0;max-width:62ch}
.r-hinweis b{color:var(--text2)}

@media (prefers-reduced-motion:no-preference){
  .r-abschnitt.laeuft .r-hand svg{animation:r-ziehen 1.8s cubic-bezier(.45,0,.25,1) infinite}
  @keyframes r-ziehen{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
}

/* So entsteht die Ansicht */
.r-entstehen{margin-top:clamp(56px,7vw,96px)}
.r-entstehen > h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);letter-spacing:-.03em;font-stretch:108%}
.r-reihe{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);counter-reset:rs}
.r-schritt{background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten);padding:20px 20px 24px;display:flex;flex-direction:column;gap:14px}
.r-schritt h4{font-size:1.2rem;display:flex;gap:10px;align-items:baseline;margin:0}
.r-schritt h4::before{counter-increment:rs;content:counter(rs);flex:none;width:28px;height:28px;border-radius:8px;background:var(--akzent-weich);color:var(--akzent-dunkel);display:grid;place-items:center;font-size:.9rem;font-weight:750;transform:translateY(-2px)}
.r-schritt p{color:var(--text2);margin:0}
.r-bild{height:176px;border-radius:var(--r-kachel);background:var(--flaeche);position:relative;overflow:hidden;display:grid;place-items:center}

/* Szene 1: Rundgang ums Auto, 8 Standpunkte leuchten nacheinander */
.rs1{position:relative;width:150px;height:150px}
.rs1::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed var(--linie)}
.rs1-auto{position:absolute;left:50%;top:50%;width:34px;height:68px;transform:translate(-50%,-50%);fill:var(--karte);stroke:var(--text3);stroke-width:2}
.rs1-auto path{fill:var(--linie);stroke:none}
.rs1 span{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--karte);border:2px solid var(--text3);transform:rotate(calc(var(--i) * 45deg)) translateY(-69px)}
.rs1 em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.75rem;font-weight:650;color:var(--text2)}
.r-bild:has(.rs1){padding-bottom:18px}

/* Szene 2: Fotos ordnen sich nach Blickwinkel */
.rs2{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px;width:100%}
.rs2 figure{margin:0;display:grid;gap:6px}
.rs2 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#0d0e10;display:block}
.rs2 figcaption{font-size:.7rem;font-weight:650;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Szene 3: Fahrzeugkarte mit 360°-Knopf */
.rs3{width:min(220px,80%);background:var(--karte);border-radius:12px;padding:8px;box-shadow:0 1px 2px rgb(22 23 42/.06),0 10px 24px -14px rgb(40 42 80/.3)}
.rs3-karte{position:relative}
.rs3-karte img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}
.rs3-knopf{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgb(255 255 255/.94);font-size:.7rem;font-weight:700;color:var(--text)}
.rs3-knopf i{width:16px;height:16px;border-radius:50%;background:var(--akzent)}
.rs3-zeile{display:grid;gap:6px;padding:9px 4px 2px}
.rs3-zeile span{height:7px;border-radius:4px;background:var(--linie)}
.rs3-zeile span:last-child{width:55%}

@media (prefers-reduced-motion:no-preference){
  .r-bild.laeuft .rs1 span{animation:rs1-blitz 4s steps(1,end) infinite;animation-delay:calc(var(--i) * .4s)}
  @keyframes rs1-blitz{0%{background:var(--akzent);border-color:var(--akzent);box-shadow:0 0 0 6px var(--akzent-weich)}12%,100%{background:var(--akzent-weich);border-color:var(--akzent);box-shadow:none}}
  .r-bild.laeuft .rs2 figure{animation:rs2-ein 4.8s var(--ease) infinite;animation-delay:calc(var(--i) * .22s)}
  @keyframes rs2-ein{0%{opacity:0;transform:translateY(10px) rotate(calc((var(--i) - 1.5) * 4deg))}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
  .r-bild.laeuft .rs3-knopf i{animation:rs3-puls 2.2s ease-out infinite}
  @keyframes rs3-puls{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--akzent) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
}

/* Nutzen */
.r-nutzen{list-style:none;padding:0;margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border-top:1px solid var(--linie);padding-top:28px}
.r-nutzen li{display:grid;gap:6px;align-content:start}
.r-nutzen strong{font-size:1.05rem;display:flex;align-items:center;gap:10px}
.r-nutzen strong::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--akzent);flex:none}
.r-nutzen span{color:var(--text2)}
.r-weiter{margin:28px 0 0;color:var(--text2)}
.r-weiter a{color:var(--akzent-dunkel);font-weight:650}

@media (max-width:900px){
  .r-kopf{grid-template-columns:1fr}
  .r-reihe{grid-template-columns:1fr}
  .r-nutzen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Handy-Rahmen */
@media (max-width:760px){
  .r-geraet{max-width:360px;border-radius:46px;padding:10px;background:#fff;box-shadow:0 0 0 1px #E4E2EA inset,0 0 0 5px #F4F3F7 inset,0 30px 60px -28px rgb(60 30 70/.35)}
  .r-browser{border-radius:36px;position:relative}
  .r-leiste{height:auto;padding:32px 14px 8px;position:relative}
  .r-leiste::before{content:"";position:absolute;top:9px;left:50%;width:84px;height:22px;transform:translateX(-50%);border-radius:12px;background:#16172A}
  .r-punkte{display:none}
  .r-adresse{font-size:.74rem;max-width:100%}
  .r-fenster{aspect-ratio:auto;height:min(600px,70vh);min-height:480px}
  .r-wahl{width:100%;max-width:360px}
  .r-wahl button{flex:1;justify-content:center;padding:0 10px}
  .r-nutzen{grid-template-columns:1fr}
}