/* Installieren und der eigenständige Modus.
   Der Hinweis sitzt links unten, der Meldeknopf bleibt rechts. */

.sf-pwa{
  font-family:Inter, system-ui, sans-serif;
  color:#f7f1e3;
  background:rgba(36,22,12,.96);
  border:1px solid rgba(212,168,75,.55);
  border-radius:18px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7);
  padding:14px 16px 12px;
  max-width:min(360px, calc(100vw - 32px));
}
.sf-pwa-float{
  position:fixed;
  z-index:45;
  left:calc(env(safe-area-inset-left, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.sf-pwa-inline{margin:0 0 12px}
.sf-pwa-title{
  font-family:Fraunces, Georgia, serif;
  font-weight:700;
  font-size:1.12rem;
  line-height:1.25;
  margin:0 36px 10px 0;
}
.sf-pwa-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sf-pwa-steps li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  line-height:1.3;
}
.sf-pwa-steps b{font-weight:700}
.sf-pwa-ico{
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(212,168,75,.16);
  color:#e9c977;
  border:1px solid rgba(233,201,119,.45);
}
.sf-pwa-ico svg{display:block}
.sf-pwa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.sf-pwa-install,
.sf-pwa-later{
  font:700 .95rem/1.2 Inter, system-ui, sans-serif;
  cursor:pointer;
}
.sf-pwa-install{
  color:#3a2a0c;
  background:linear-gradient(180deg,#e9c977,#d4a84b);
  border:0;
  border-radius:999px;
  padding:.7em 1.15em;
  box-shadow:0 8px 22px -8px rgba(212,168,75,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.sf-pwa-install:hover{filter:brightness(1.05)}
.sf-pwa-later,
.sf-pwa-x{
  color:#e9c977;
  background:transparent;
  border:0;
  padding:6px 4px;
}
.sf-pwa-x{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border-radius:999px;
  font:700 1.2rem/1 Inter, system-ui, sans-serif;
}
.sf-pwa-x:hover,.sf-pwa-later:hover{color:#fff6dc}
.sf-pwa-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-right:28px}
.sf-pwa-inline{position:relative}
.sf-pwa-bar .sf-pwa-actions{margin-top:0}

@media (display-mode:standalone), (display-mode:fullscreen){
  #sf-pwa{display:none !important}
}

@media print{
  #sf-pwa{display:none !important}
}

/* Eigenständige App: Statusleiste und Home-Anzeige lassen die Karten frei.
   Der Kopf bleibt eine Zeile, sonst schiebt er den Filz unter die Falz.
   Die Punkteliste bleibt unter dem Filz und lässt sich weiter scrollen. */
html.sf-standalone body:not(:has(.app)){
  padding-top:env(safe-area-inset-top, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
}
html.sf-standalone .app{
  box-sizing:border-box;
  height:auto;
  min-height:100dvh;
  padding-right:env(safe-area-inset-right, 0px);
  padding-left:env(safe-area-inset-left, 0px);
}
html.sf-standalone .topbar,
html.sf-standalone .topbar:has(.sf-report),
html.sf-standalone .topbar:has([data-sf-account]){
  height:52px;
  min-height:52px;
  max-height:52px;
  margin-top:env(safe-area-inset-top, 0px);
  flex-wrap:nowrap;
  align-items:center;
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
}
html.sf-standalone .topbar-actions,
html.sf-standalone .topbar:has(.sf-report) .topbar-actions,
html.sf-standalone .topbar:has([data-sf-account]) .topbar-actions{
  flex-wrap:nowrap;
  min-width:0;
  overflow-x:auto;
}
html.sf-standalone .lbl-long{display:none}
html.sf-standalone .lbl-short{display:inline}
html.sf-standalone .table-area{
  height:calc(100dvh - 52px - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height:0;
  max-height:calc(100dvh - 52px - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
html.sf-standalone .tbtn.sf-report{
  right:calc(env(safe-area-inset-right, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);
}