/* Natural High · Der Hinweis, sie auf den Bildschirm zu legen
   ---------------------------------------------------------------------------
   Kein Modal. Nichts, was den Bildschirm zuhält und einen Klick erzwingt –
   das wäre das Gegenteil dessen, was diese Seite ist. Er kommt von unten,
   steht in der Ecke, und man kann ihn überlesen.

   Auf dem Handy über die Breite, auf dem Rechner unten rechts.            */

.nh-install{
  position:fixed;
  left:50%; bottom:max(1rem, env(safe-area-inset-bottom));
  transform:translate(-50%, 130%);
  z-index:60;
  width:min(92vw, 22rem);
  padding:1.5rem 1.4rem 1.2rem;
  border-radius:18px;
  background:rgba(11,13,16,.97);
  border:1px solid #252c34;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 64px rgba(0,0,0,.62);
  text-align:center;
  opacity:0;
  transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.nh-install.da{ transform:translate(-50%, 0); opacity:1 }

@media (min-width: 780px){
  .nh-install{
    left:auto; right:clamp(1.2rem, 3vw, 2.4rem);
    transform:translate(0, 130%);
  }
  .nh-install.da{ transform:translate(0, 0) }
}

/* Der Ring, wie überall. Er atmet mit – dasselbe Tempo wie das Zeichen
   oben auf der Seite, damit der Kasten dazugehört und nicht dazwischenfährt. */
.nh-install-kopf{ display:block; margin:0 auto .9rem; width:38px }
.nh-install-ring{ display:block; width:100%; height:auto; overflow:visible }
.nh-install-ring circle{
  stroke:#ece8e1; stroke-width:1.4; opacity:.5;
  transform-origin:50% 50%;
  animation:nh-install-atem 11.5s cubic-bezier(.37,0,.63,1) infinite;
}
@keyframes nh-install-atem{
  0%   {transform:scale(.86); opacity:.34}
  45.2%{transform:scale(1);   opacity:.62}
  100% {transform:scale(.86); opacity:.34}
}

.nh-install-gross{
  margin:0 0 .5rem;
  font-size:1.02rem; font-weight:300; line-height:1.35; color:#ece8e1;
}
.nh-install-klein{
  margin:0 0 1.2rem;
  font-size:.85rem; line-height:1.6; color:#9aa1a9;
}

/* Der Weg nach vorn – wie überall bei uns: warmes Weiß, dunkle Schrift, dünn. */
.nh-install-los{
  display:block; width:100%;
  padding:.85rem 1rem;
  border:0; border-radius:14px;
  background:#e8e4dc; color:#0b0d10;
  font:inherit; font-size:.96rem; font-weight:400;
  cursor:pointer;
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.nh-install-los:hover{ opacity:.9; transform:translateY(-1px) }

/* Auf dem iPhone gibt es keinen Knopf, nur den Weg. */
.nh-install-weg-so{
  margin:0; padding:.7rem 0 0;
  font-size:.85rem; line-height:1.7; color:#c3c8cd;
}
.nh-install-weg-so b{ color:#ece8e1; font-weight:400 }
.nh-install-teilen{
  display:inline-block; width:1.05em; height:1.05em;
  vertical-align:-.2em; margin:0 .1em; color:#c3c8cd;
}

.nh-install-spaeter{
  display:block; margin:.9rem auto 0;
  padding:.3rem .2rem;
  background:none; border:0;
  font:inherit; font-size:.8rem; color:#5b6670;
  cursor:pointer;
  transition:color .35s ease;
}
.nh-install-spaeter:hover{ color:#9aa1a9 }

@media (prefers-reduced-motion: reduce){
  .nh-install{ transition:opacity .01s }
  .nh-install-ring circle{ animation:none }
}

/* ---- Danach: der letzte Schritt ----
   Ein Haken statt des Rings – der Ring atmet und lädt ein, der Haken sagt,
   dass etwas fertig ist. Zwei verschiedene Sätze brauchen zwei Zeichen. */
.nh-install-haken{
  display:block; width:34px; height:34px; margin:0 auto;
  color:#8ce8cd; opacity:.85;
}
.nh-install.fertig .nh-install-kopf{ width:auto }