/* =========================================================================
   app-extra.css — Ergänzungen zum v1-style.css für die Multi-Guide-WebApp:
   Bottom-Tab-Bar (mykiosk-Muster), Favoriten-Stern-States, Guide-Bibliothek.
   ========================================================================= */

/* ---------- Cleaner, responsiver Header ---------- */
/* iPhone Dynamic Island / Notch: Header in die obere Safe-Area schieben,
   damit der Inhalt nicht mit der Insel kollidiert (braucht viewport-fit=cover). */
.site-header{ padding-top: env(safe-area-inset-top); }

/* Markenleiste (immer einzeilig) */
.site-header .topbar{
  display:flex; align-items:center; gap:.8rem; justify-content:space-between;
  max-width:var(--maxw); margin-inline:auto;
  padding:.62rem var(--gap);
}
.site-header .brand{
  flex:1 1 auto; min-width:0;            /* erlaubt Ellipsis */
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  color:#fff; text-decoration:none;
}
.site-header .brand:hover{color:#fff; text-decoration:none}
.site-header .brand .compass{width:24px; height:24px; flex:none}
.site-header .brand .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Stopp-Chips: horizontal scrollbar, kein Umbruch, kein Hamburger */
.subnav{
  display:flex; gap:.4rem; align-items:center;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gap) .5rem;
  overflow-x:auto; scroll-behavior:smooth; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* sanftes Ausblenden am rechten Rand als Scroll-Hinweis */
  -webkit-mask-image:linear-gradient(to right,#000 92%,transparent);
          mask-image:linear-gradient(to right,#000 92%,transparent);
}
.subnav::-webkit-scrollbar{display:none}
.subnav-link{
  flex:none; white-space:nowrap; text-decoration:none;
  color:var(--moewe); font-size:.86rem; font-weight:500; line-height:1;
  padding:.46rem .8rem; border-radius:999px; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.subnav-link:hover{color:#fff; background:rgba(255,255,255,.1); text-decoration:none}
.subnav-link.is-active{color:var(--tief); background:var(--sand); font-weight:600}
@media (max-width:760px){
  .site-header .brand{font-size:.98rem}
  .subnav{padding-bottom:.55rem}
}

/* ---------- Bottom-Tab-Bar (global) ---------- */
body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    display: flex; justify-content: space-around;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid var(--moewe);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 64px; padding: 6px 14px; border-radius: 12px;
    color: var(--text-leise); text-decoration: none;
    font: 600 10.5px var(--font-body); letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background .15s ease;
}
.bottom-nav__item:hover     { color: var(--tief); text-decoration: none; }
.bottom-nav__item.is-active { color: var(--tief); }
.bottom-nav__icon { display: flex; }
.bottom-nav__icon svg { width: 22px; height: 22px; display: block; }
/* Offline-Tab nur in der installierten PWA */
html:not(.is-standalone) .bottom-nav__item--downloads { display: none; }

/* ---------- Favoriten-Stern ---------- */
.fav-toggle { transition: transform .12s ease, background .15s ease; }
.fav-toggle:hover  { transform: scale(1.08); }
.fav-toggle:active { transform: scale(.92); }
.fav-toggle.is-fav .fav-toggle__fill    { display: block !important; }
.fav-toggle.is-fav .fav-toggle__outline { display: none !important; }
.fav-toggle:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.port-card { position: relative; } /* damit der Stern korrekt liegt */

/* ---------- Guide-Bibliothek (Home) ---------- */
.lib-head { margin-bottom: 1.4rem; }
.type-badge {
    display: inline-flex; align-items: center; gap: .35em;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    padding: .2em .6em; border-radius: 999px;
    background: var(--tipp-bg); color: var(--tief);
}
.type-badge.is-stationary { background: #f3ead8; color: var(--sand-d); }
.guide-empty {
    text-align: center; color: var(--text-leise);
    padding: 3rem 1rem; border: 1px dashed var(--moewe); border-radius: var(--radius);
}

/* ---------- Karten-Hintergrund offline (Vorbereitung Phase 3) ---------- */
.leaflet-container { background: var(--nebel); }

/* ---------- Besucht/Erledigt ---------- */
.port-card .visit-badge{
  position:absolute; top:8px; left:8px; z-index:5;
  width:24px; height:24px; border-radius:50%; display:none;
  align-items:center; justify-content:center;
  background:#2e8b57; color:#fff; font-size:14px; font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.port-card.is-visited .visit-badge{ display:inline-flex; }
.port-card.is-visited .thumb img{ filter:saturate(.6) brightness(.96); }
.btn.visit-toggle.is-visited{ background:#2e8b57; color:#fff; border-color:#2e8b57; }
.visit-bar{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.4rem 0 0; }

/* ---------- Offline-Download-Liste ---------- */
.dl-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--schaum);border:1px solid var(--moewe);border-radius:var(--radius);
  padding:1rem 1.2rem;box-shadow:var(--shadow)}

/* ---------- Offline-Speichern-Knopf (Guide-Übersicht) ---------- */
.dl-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- Audio-Player (Podcast) ---------- */
.audio-player{
  display:flex; align-items:center; gap:.9rem; margin:1.3rem 0;
  background:var(--schaum); border:1px solid var(--moewe); border-radius:var(--radius);
  padding:.8rem 1rem; box-shadow:var(--shadow);
}
.ap-play{
  flex:none; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--petrol); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .1s ease;
}
.ap-play:hover{ background:var(--petrol-h); }
.ap-play:active{ transform:scale(.94); }
.ap-play .ap-icon-pause{ display:none; }
.audio-player.is-playing .ap-play .ap-icon-play{ display:none; }
.audio-player.is-playing .ap-play .ap-icon-pause{ display:inline; }
.ap-body{ flex:1; min-width:0; }
.ap-title{ display:flex; align-items:center; gap:.4rem; font-weight:600; color:var(--tief); font-size:.95rem; margin-bottom:.35rem; }
.ap-seek{ width:100%; accent-color:var(--petrol); cursor:pointer; }
.ap-time{ font-size:.8rem; color:var(--text-leise); margin-top:.25rem; }

/* ---------- Kostenliste ---------- */
.cost-list { margin: .6rem 0 1rem; padding-left: 1.2rem; }
.cost-list li { margin-bottom: .35em; }

/* ---------- Login ---------- */
.login-wrap {
    max-width: 380px; margin: 0 auto; padding: 3rem 1.2rem;
    min-height: 70vh; display: flex; flex-direction: column; justify-content: center;
}
.login-wrap h1 { font-family: var(--font-display); color: var(--tief); margin: 0 0 .3em; }
.login-wrap .field { margin: 1rem 0; }
.login-wrap label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--tief); }
.login-wrap input[type=password] {
    width: 100%; padding: .7rem .9rem; font-size: 1rem;
    border: 1px solid var(--moewe); border-radius: var(--radius-s); background: var(--schaum);
}
.login-error { color: var(--warn-bd); font-weight: 600; margin: .6rem 0; }