/* ============================================================
   Holding-Mode-Styles: statischer, bunter Apple-Health-artiger
   Hintergrund + eine zentrierte weiße Karte. Bewusst eigenständig
   (lädt NICHT das große health.css) und ohne Animation.
   Genutzt von coming-soon.html sowie den Platzhalter-Seiten
   datenschutz.html / agb.html.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1d1d1f;
  /* Voller Viewport, Karte mittig */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Statischer, bunter dunkler Hintergrund (gleiche Farbwelt wie der Hero,
   aber ohne Bewegung): dunkle Grundfarbe + ein paar weiche Farbflecken. */
.bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background-color: #0c2f3a;
  pointer-events: none;
}
.bg span {
  position: absolute; border-radius: 50%;
  filter: blur(58px); opacity: 0.55;
}
.bg .b1 { width: 44vw; height: 44vw; left: -8vw; top: -6vh;
  background: radial-gradient(circle, rgba(42,147,255,0.90), transparent 68%); }
.bg .b2 { width: 38vw; height: 38vw; right: -6vw; top: -4vh;
  background: radial-gradient(circle, rgba(52,199,89,0.85), transparent 68%); }
.bg .b3 { width: 40vw; height: 40vw; left: 14vw; top: 46vh;
  background: radial-gradient(circle, rgba(191,90,242,0.82), transparent 68%); }
.bg .b4 { width: 34vw; height: 34vw; right: 4vw; top: 50vh;
  background: radial-gradient(circle, rgba(255,159,10,0.82), transparent 68%); }

/* Weiße Karte, angelehnt an .tile aus health.css */
.card {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  background: #fff;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.card .app-icon {
  width: 104px; height: 104px;
  border-radius: 23px;            /* iOS-Squircle-Anmutung */
  margin: 0 0 24px;
}

.card h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.card .soon {
  margin: 6px 0 0;
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 600;
  color: #86868b;
  letter-spacing: -0.01em;
}

.card .desc {
  margin: 20px auto 0;
  max-width: 38ch;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.5;
  font-weight: 600;        /* wie der Lead-Text in der Index-Karte: dunkel & kräftig */
  color: #1d1d1f;
}