/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   hero-handy.css — DER STIL DES GERAETS (das Hero-Handy mit seinen zwei Kaertchen), EINE Datei fuer jede Seite, die es zeigt
   Stand: 09.10.2026 (Bahn web-angebote-nachzug, Teil 2B)

   WARUM ES SIE GIBT: Cyrill wollte im dunklen Bereich der Startseite «das neue Mockup von der Warteliste». Der Stil des
   Geraets lag bis dahin mitten in landing.css (66 Regeln zwischen den Regeln der App-Landing), und landing.css darf die
   Startseite nicht laden: 60 ihrer Klassen heissen wie Klassen der Startseite (lp-team*, lp-testimonial*, public-header*,
   btn*, team-modal*). Die Buehne (.k-buehne: Geraet und Kaertchen als EIN Bild auf jeder Breite) stand zweimal
   abgeschrieben in warteliste.html und warteliste/familyandfriends.html. Jetzt steht beides hier, einmal.

   WER SIE LAEDT (zaehlen: grep -l 'hero-handy.css' *.html warteliste/*.html app/index.html):
     app/index.html (App-Landing) · warteliste.html · warteliste/familyandfriends.html · index.html (Startseite, #reclaim)
   Auf Seiten MIT landing.css steht sie direkt DANACH: die Regeln hier standen frueher in landing.css, ihre Reihenfolge
   untereinander ist unveraendert (Teil 1 unten ist verschoben, nicht neu geschrieben).

   WAS DAZUGEHOERT: die Buehne selbst schreibt hero-handy.js (in jedes [data-hero-handy]); die Tiefe (3D) macht
   hero-phone-3d.js; was im Display steht, ist ein eigenes Programm (mock/ auf der Landing, mock-warteliste/ sonst).
   Wand: app/tests/hero-handy-aus-einer-quelle.test.mjs.

   WAS DIE LANDING NOCH BEISTEUERT: den Auftritt der Buehne ohne 3D (vsHeroFadeUp aus landing.css). Ohne landing.css
   steht die Buehne ohne Einblenden da; mit 3D schaltet hero-phone-3d.js diesen Auftritt ohnehin ab.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Die Bewegungskurve der Landing (landing.css :root, derselbe Wert): das Geraet bringt sie mit, damit seine Uebergaenge
   auch auf Seiten ohne landing.css gelten. */
.rcm-phone-stage { --land-easing: cubic-bezier(0.16, 1, 0.3, 1); }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   TEIL 1 — DAS GERAET (am 09.10.2026 unveraendert aus landing.css hierher verschoben)
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
   RECLAIM PHONE-MOCKUP (rcm-phone-*) — Hero auf reclaim/
   Homepage-Style Phone-Frame mit 2 Phasen:
   Phase 1: Such-Overlay (AXA/Helvetia/CSS werden gesucht)
   Phase 2: Dashboard (echte Versicherungen + Beträge)
   ═════════════════════════════════════════════════════════════════ */

.rcm-phone-stage {
  position: relative;
  width: 290px;
  max-width: 100%;
  margin: 0 auto;
  padding: 36px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  animation: vsHeroFadeUp 1s 0.15s var(--land-easing) both;
  overflow: visible;
}

/* Soft glows behind the phone */
.rcm-phone-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rcm-phone-glow-1 {
  width: 420px; height: 420px;
  top: 10%; left: -50px;
  background: radial-gradient(circle, rgba(126,217,87,0.24), transparent 70%);
  opacity: 0.85;
  animation: rcmGlow1 9s ease-in-out infinite alternate;
}
.rcm-phone-glow-2 {
  width: 320px; height: 320px;
  bottom: 5%; right: -40px;
  background: radial-gradient(circle, rgba(94,160,255,0.18), transparent 70%);
  opacity: 0.65;
  animation: rcmGlow2 12s ease-in-out infinite alternate-reverse;
}
@keyframes rcmGlow1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.12); }
}
@keyframes rcmGlow2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, 30px) scale(1.08); }
}
.rcm-phone-stage:hover .rcm-phone-glow-1 { opacity: 1; transform: translate(20px, -10px) scale(1.18); }
.rcm-phone-stage:hover .rcm-phone-glow-2 { opacity: 0.85; transform: translate(-20px, 20px) scale(1.14); }

/* Phone frame — VIAC-Look (Cyrill 01.07.): weisses Gehäuse, dünne Bezel,
   keine Notch, weicher heller Schatten. Front weiss, Kante hell-grau. */
.rcm-phone-frame {
  position: relative;
  width: 290px;
  height: 600px;
  margin: 0 auto;
  border-radius: 44px;
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fc 100%);
  padding: 9px;
  box-shadow:
    inset 0 0 0 1px rgba(13,27,42,0.08),
    0 24px 60px -18px rgba(15,30,60,0.30),
    0 8px 20px -10px rgba(15,30,60,0.14);
  overflow: hidden;
  transform: perspective(1200px) rotateX(2deg) rotateY(-4deg);
  transition: transform 0.5s cubic-bezier(.2,1.2,.3,1), box-shadow 0.5s ease;
  z-index: 1;
  animation: rcmPhoneFloat 6s ease-in-out infinite;
}
@keyframes rcmPhoneFloat {
  0%, 100% { transform: perspective(1200px) rotateX(2deg) rotateY(-4deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateX(2deg) rotateY(-4deg) translateY(-6px); }
}
.rcm-phone-stage:hover .rcm-phone-frame {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-6px) scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(13,27,42,0.08),
    0 30px 70px -20px rgba(15,30,60,0.36),
    0 10px 26px -12px rgba(15,30,60,0.18);
  animation-play-state: paused;
}

/* ── Display-Inhalt = die echte iOS-App (seit 25.07.2026) ────────────────
   Der Bildschirm des Hero-Handys misst 272 x 582 (290 - 2x9 Bezel), die App
   402 x 874 iOS-Punkte. `zoom` passt sie ein: es skaliert den Platzbedarf MIT,
   anders als `transform: scale` — sonst stuende die App im Layout weiter
   402 breit da und liefe seitlich aus dem Display.                        */
.rcm-ios-host {
  position: absolute; inset: 0; overflow: hidden; border-radius: 35px;
  background: #F4F7FB;
}
.rcm-ios-host .ios {
  position: absolute; top: 0; left: 50%;
  width: 402px; height: 874px;
  /* ⚠️ An der HOEHE ausrichten, nicht an der Breite: 272/402 = 0.677 ergibt
     874 x 0.677 = 591 px — 9 px mehr als der 582 hohe Bildschirm. Genau die
     9 px fehlten unten, die Tab-Leiste wurde angeschnitten.
     582/874 = 0.666 passt in der Hoehe exakt; in der Breite bleiben 268 statt
     272, also 2 px Luft je Seite — darum die Zentrierung. */
  zoom: calc(582 / 874);
  transform: translateX(-50%);
}
.rcm-ios-host .ios-bg { inset: 0; }

.rcm-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #f8faf6 0%, #f1f4ee 100%);
  border-radius: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* App-Bar — erstes Element im Display (keine iOS-Statusbar mehr, wie VIAC) */
.rcm-appbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(20, 28, 40, 0.06);
}
@keyframes rcmLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 217, 87, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(126, 217, 87, 0); }
}

/* ──────────────────────────────────────────────
   PHASE 1: Such-Overlay
   ────────────────────────────────────────────── */
.rcm-search-overlay {
  position: absolute;
  inset: 50px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 18px;
  background: linear-gradient(180deg, #f8faf6 0%, #f1f4ee 100%);
  z-index: 4;
  transition: opacity 0.5s var(--land-easing);
}
.rcm-phone-stage[data-phase="dashboard"] .rcm-search-overlay {
  opacity: 0;
  pointer-events: none;
}

@keyframes rcmOrbPulse {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes rcmDotBounce {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

.rcm-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rcm-search-prov {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(20, 28, 40, 0.06);
  border-radius: 12px;
  transition: all 0.4s var(--land-easing);
  opacity: 0;
  transform: translateY(8px);
  animation: rcmProvIn 0.45s var(--land-easing) forwards;
}
.rcm-search-prov:nth-child(1) { animation-delay: 0.20s; }
.rcm-search-prov:nth-child(2) { animation-delay: 0.40s; }
.rcm-search-prov:nth-child(3) { animation-delay: 0.60s; }
@keyframes rcmProvIn {
  to { opacity: 1; transform: translateY(0); }
}
.rcm-search-prov[data-status="found"] {
  border-color: rgba(126, 217, 87, 0.5);
  background: rgba(241, 250, 232, 0.7);
}

@keyframes rcmSpin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────
   PHASE 2: Dashboard
   ────────────────────────────────────────────── */
.rcm-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 18px;
  opacity: 0;
  transition: opacity 0.6s var(--land-easing);
}
.rcm-phone-stage[data-phase="dashboard"] .rcm-dashboard {
  opacity: 1;
}

.rcm-balance {
  background: #0f1729;
  border-radius: 18px;
  padding: 16px 18px;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 41, 0.18);
}

.rcm-section-head {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0c1015;
  margin: 0 0 10px;
  letter-spacing: -0.1px;
}

.rcm-policies {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rcm-policy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(20, 28, 40, 0.06);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--land-easing), transform 0.45s var(--land-easing);
}
.rcm-policy.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   Schwebende Notification-Cards (wie auf Homepage)
   ───────────────────────────────────────────── */
.rcm-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(20, 28, 40, 0.06);
  border-radius: 14px;
  box-shadow:
    0 14px 32px -10px rgba(20, 28, 40, 0.22),
    0 4px 12px -4px rgba(20, 28, 40, 0.10),
    0 0 24px rgba(126, 217, 87, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: rcmFloatIn 0.55s cubic-bezier(.2,1.2,.3,1) forwards,
             rcmFloatBob 5s ease-in-out infinite;
  pointer-events: none;
}
.rcm-float-1 {
  top: 14%;
  right: -150px;
  animation-delay: 3.2s, 3.7s;
}
.rcm-float-2 {
  bottom: 18%;
  left: -150px;
  animation-delay: 3.7s, 4.2s;
}
@keyframes rcmFloatIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rcmFloatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
/* Chip-Icons pastell statt satt gefüllt (Cyrill: «das Grün zu fest») */
.rcm-float-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(126, 217, 87, 0.16);
  color: #7ed957;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.rcm-float-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rcm-float-amount {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0c1015;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rcm-float-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem;
  color: #6b7588;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rcm-phone-stage { max-width: 340px; padding: 36px 40px; }
  .rcm-phone-frame {
    width: 260px;
    height: 540px;
  }
  .rcm-float-1 { right: -52px; top: 14%; }
  .rcm-float-2 { left: -52px; bottom: 18%; }
}

@media (max-width: 420px) {
  .rcm-phone-stage { max-width: 320px; padding: 36px 30px; }
  .rcm-phone-frame { width: 240px; height: 500px; }
  .rcm-float { padding: 8px 10px; gap: 8px; }
  .rcm-float-icon { width: 24px; height: 24px; font-size: 0.78rem; }
  .rcm-float-amount { font-size: 0.7rem; }
  .rcm-float-label { font-size: 0.56rem; }
  .rcm-float-1 { right: -36px; top: 12%; }
  .rcm-float-2 { left: -36px; bottom: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  .rcm-phone-frame, .rcm-phone-glow-1, .rcm-phone-glow-2,
  .rcm-float, .rcm-search-prov, .rcm-policy {
    animation: none !important;
  }
  .rcm-float, .rcm-search-prov, .rcm-policy { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .rcm-phone-stage {
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    margin-top: -104px;
    margin-bottom: -64px;
    overflow: visible;
  }
  .rcm-phone-frame {
    width: 240px !important;
    height: 500px !important;
    transform: none !important;
    animation: none !important;
    border-radius: 38px;
    box-shadow:
      inset 0 0 0 1px rgba(13,27,42,0.08),
      0 18px 48px -16px rgba(15,30,60,0.28),
      0 6px 16px -8px rgba(15,30,60,0.12);
  }
  /* Ohne Weichzeichner (Bildrate Handy, Cyrill 04.09.): filter: blur() auf einer Schicht in der 3D-Buehne rechnet der
     Compositor auf dem Telefon in JEDEM Bild neu. Dieselbe weiche Wolke malt ein Verlauf mit weichen Stufen einmal;
     der Kasten ist um die alte Unschaerfe (2 x 40 / 2 x 35 px) groesser, damit der Saum gleich weit reicht. */
  .rcm-phone-glow-1 {
    width: 360px !important;
    height: 360px !important;
    top: calc(5% - 40px) !important;
    left: 50% !important;
    transform: translateX(-50%);
    opacity: 0.5 !important;
    animation: none !important;
    filter: none;
    background: radial-gradient(circle closest-side, rgba(126,217,87,0.24) 0%, rgba(126,217,87,0.19) 30%, rgba(126,217,87,0.09) 58%, rgba(126,217,87,0.02) 82%, transparent 100%);
  }
  .rcm-phone-glow-2 {
    width: 290px !important;
    height: 290px !important;
    bottom: calc(8% - 35px) !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    opacity: 0.35 !important;
    animation: none !important;
    filter: none;
    background: radial-gradient(circle closest-side, rgba(94,160,255,0.18) 0%, rgba(94,160,255,0.14) 30%, rgba(94,160,255,0.07) 58%, rgba(94,160,255,0.015) 82%, transparent 100%);
  }
}

@media (max-width: 380px) {
  .rcm-phone-frame {
    width: 220px !important;
    height: 460px !important;
  }
}

@media (max-width: 760px) {
  .rcm-section-head { font-size: 0.78rem !important; margin: 8px 0 6px !important; }
  .rcm-policy { padding: 8px 10px !important; gap: 8px !important; }
  .rcm-appbar { padding: 14px 14px 8px !important; }
}

@media (hover: none) {
  .rcm-phone-stage:hover .rcm-phone-frame,
  .rcm-phone-stage:hover .rcm-phone-glow-1,
  .rcm-phone-stage:hover .rcm-phone-glow-2 {
    transform: none !important;
    box-shadow: inherit;
  }

  /* Phone-Frame: keine Tilt-Änderung bei Touch */
  .rcm-phone-stage:hover .rcm-phone-frame {
    animation-play-state: running !important;
  }
}

@media (max-width: 760px) {
  .rcm-phone-frame {
    padding: 8px !important;
    border-radius: 34px !important;
  }
  .rcm-phone-screen {
    border-radius: 26px !important;
  }
}

@media (max-width: 380px) {
  .rcm-phone-frame {
    padding: 6px !important;
    border-radius: 30px !important;
  }
  .rcm-phone-screen {
    border-radius: 24px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CYRILL 2026-05-12 v10 — RECLAIM POLISH (Loading-Animation, Floats off
   Mobile, Klick-Section, Use-Cases-Chat sichtbar, Team-Card 1-Zeile)
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. PHONE-MOCKUP LOADING-PHASE ─────────────────────────────────── */
.rcm-loading-overlay {
  position: absolute;
  inset: 50px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 18px;
  background: linear-gradient(180deg, #f8faf6 0%, #f1f4ee 100%);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--land-easing);
}
.rcm-phone-stage[data-phase="loading"] .rcm-loading-overlay {
  opacity: 1;
}
.rcm-phone-stage[data-phase="loading"] .rcm-search-overlay {
  opacity: 0;
  pointer-events: none;
}
@keyframes rcmSpin {
  to { transform: rotate(360deg); }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   TEIL 2 — DIE BUEHNE (.k-buehne): das Geraet mit seinen Kaertchen als EIN Bild
   (am 09.10.2026 aus warteliste.html und warteliste/familyandfriends.html hierher verschoben; dort stand sie doppelt)

   EIN Regler: --sc (die Seite setzt ihn, je Breite). Er treibt die Skalierung des Moduls (--r3-sc) UND die Hoehe, die
   das Geraet im Fluss braucht. transform laesst den Platzbedarf NICHT mitwachsen: ohne die zweite Haelfte reisst unter
   dem Geraet ein Loch auf (oder es ueberlappt den naechsten Block). Setzt eine Seite ihn nicht, gilt 1.
   Was die SEITE bestimmt und darum bei ihr steht: --sc, der Abstand der Buehne, ihr Platz im Raster, ihr eigenes Licht.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.k-buehne {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: calc(600px * var(--sc, 1));
  /* Das Geraet ist ein Bild: Satz und Zeilenhoehe der Seite erben nicht hinein. Gemessen am 09.10.2026 auf der
     Startseite: der Abschnitt setzt am Handy mittig und die Seite 1.6 Zeilenhoehe, damit standen die Texte im Display
     mittig und die Kaertchen wurden hoeher als auf /warteliste (dort galten diese zwei Werte schon von der Seite her). */
  text-align: start; line-height: normal;
}
.k-buehne .rcm-phone-stage {
  /* Die Kaertchen haengen an den Kanten der BUEHNE. Eine feste Buehnenbreite von 290 px (= Geraetebreite) ist deshalb
     der zweite Teil desselben Reglers: sie haelt den Abstand der Kaertchen zum Geraet konstant, statt ihn an die
     Bildschirmbreite zu koppeln. */
  width: 290px !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
  --r3-sc: var(--sc, 1) !important;
  --r3-shiftx: 0px !important;
}
/* ACHTUNG: Das Display ist hier ein BILD, kein Bedienfeld: sonst scrollt bei einem Fingertipp die Vertragsliste im
   Geraet statt der Seite. NICHT zusaetzlich overflow: hidden auf den Inhalt legen, das quetscht den Chat zusammen
   (das Drehbuch scrollt ihn selbst). */
.k-buehne .rcm-phone-screen { pointer-events: none; }

/* Die zwei Kaertchen gehoeren dazu (Cyrill: «bring die 2 Elemente zurueck»). Auf der Buehne sitzen sie IMMER nah am
   Geraet, also so, wie das Modul sie im Handy-Modus setzt: Das Geraet ist das Hauptmotiv, die Kaertchen sind seine
   Etiketten. Am Rechner stehen sie sonst 150 px daneben und ragen in einer zweispaltigen Anordnung entweder aus dem
   Bild oder quer ueber den Nachbarn. EIN Verhaeltnis fuer alle Breiten, gemessen statt geschaetzt. */
.k-buehne .rcm-float { --r3-far: 46px !important; }
.k-buehne .rcm-float-1 { right: -82px !important; top: 15% !important; }
/* bottom 17 statt 12 Prozent: bei 12 lag das Kaertchen an jeder Handybreite 4 px UNTER der Kartenoberkante und wurde
   von ihr angeschnitten; 17 gibt gemessen 20 bis 24 px Luft (Gegner A und C). */
.k-buehne .rcm-float-2 { left: -46px !important; bottom: 17% !important; }
/* Notnagel: bootet das 3D-Modul einmal nicht (Ausnahme im Aufbau), ist die Buehne nur 290 px breit; die Kaertchen
   staenden dann mit ihrer vollen Breite ausserhalb und wuerden die Seite seitlich aufziehen. Dann lieber ohne
   Kaertchen als mit kaputter Seite. */
.k-buehne .rcm-phone-stage:not(.rph3d) .rcm-float { display: none; }
/* Ganz schmale Geraete (320 bis 344 px): das linke Kaertchen ragte 1 px ueber den Rand. */
@media (max-width: 344px) {
  .k-buehne .rcm-float-2 { left: -40px !important; }
}

/* DIE RUHIGE BUEHNE (.k-buehne--ruhig): das Geraet ohne Schein. Cyrill 09.10.2026 zum dunklen Bereich der Startseite:
   «das neue Mockup von der Warteliste, einfach nicht so shiny um das Telefon». Aus sind die zwei Lichter am Geraet
   (rcm-phone-glow), der Farbnebel, den hero-phone-3d.js hinter die Buehne legt (rph3d-nebel), und der weisse Halo
   ums Gehaeuse. Geraet, Kaertchen und der Schatten unter dem Geraet bleiben. !important, weil hero-phone-3d.js seinen Stil erst beim Start anhaengt
   und damit spaeter in der Reihe steht. */
.k-buehne--ruhig .rcm-phone-glow,
.k-buehne--ruhig .rph3d-nebel { display: none !important; }
/* Der weisse Halo ums Gehaeuse (hero-phone-3d.js, Regler --r3-halo) ist auf dunklem Grund ein greller Schein: aus. */
.k-buehne--ruhig .rcm-phone-stage { --r3-halo: 0 0 0 0 transparent; }