/* ITN Marina App 3.0 – Fenster „Vor dem Start“ (16.10.2026, bootsnavi.de). Markup: inc/startfenster.php, Bedienung: assets/js/startfenster.js.
   Kopf im App-Blau wie die Titelleiste, weiße Fläche, große Haken – auf dem Handy fast bildschirmfüllend, am Rechner mittig. */
html.sf-offen { overflow: hidden; }
.sf-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 24, 40, .55); display: flex; align-items: center; justify-content: center;
  padding: 16px; }
.sf-box { width: 100%; max-width: 600px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  background: #fff; color: #1d2b3a; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.sf-head { background: #0b4f8a; color: #fff; padding: 14px 20px; flex: none; }
.sf-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; color: #fff; }
.sf-head .ic { width: 24px; height: 24px; }
.sf-body { padding: 18px 20px 6px; overflow-y: auto; font-size: 15px; line-height: 1.55; }
.sf-body p { margin: 0 0 12px; }
.sf-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #e3e9ef; cursor: pointer; }
.sf-check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: #12a150; cursor: pointer; }
.sf-check a { color: #0b4f8a; font-weight: 600; }
.sf-note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 12px !important; padding: 10px 12px; border-radius: 10px;
  background: #eef5f9; color: #3b5568; font-size: 13.5px; }
.sf-note .ic { color: #0b6e91; margin-top: 2px; }
.sf-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 20px 16px; border-top: 1px solid #e3e9ef;
  flex-wrap: wrap; }
.sf-hint { color: #6b7c8c; font-size: 13px; margin-right: auto; }
.sf-hint[hidden] { display: none; }
.sf-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) {
  .sf-bg { padding: 8px; align-items: stretch; }
  .sf-box { max-height: none; border-radius: 12px; }
  .sf-foot .btn { width: 100%; }
}
/* dunkles Design */
html[data-theme="dark"] .sf-box { background: #13202d; color: #e6eef6; }
html[data-theme="dark"] .sf-check { border-top-color: #22313f; }
html[data-theme="dark"] .sf-check a { color: #6cc4e8; }
html[data-theme="dark"] .sf-note { background: rgba(58, 166, 207, .14); color: #b9cddd; }
html[data-theme="dark"] .sf-foot { border-top-color: #22313f; }
html[data-theme="dark"] .sf-head { background: #0c2c4d; }