/* assets/mobile.css – Ergänzungen zu style.php
   Smartphone (≤ 820 px): schmale Kopfleiste, Navigationsleiste unten, Fußzeile im Fluss,
   „Location vorschlagen“/„Kontakt“ im Menü statt schwebend. Desktop bleibt unverändert.
   Bei Änderungen den Versionsstempel in _header.php (?v=) erhöhen. */

.m-brand, .m-online, .tabbar { display: none; }
.footer-spacer { height: 56px; }

/* Menü schließen: echtes ✕ statt gedrehter Burger-Linien */
.close-x { position: relative; display: block; width: 20px; height: 20px; color: var(--text, #111); }
.close-x::before, .close-x::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 9px; height: 2px;
  border-radius: 2px; background: currentColor;
}
.close-x::before { transform: rotate(45deg); }
.close-x::after  { transform: rotate(-45deg); }

/* Uhrzeit-Felder wie Datumsfelder */
input[type="time"] {
  width: 100%; max-width: 360px; font-size: 1.1rem; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  margin-top: 8px;
}

@media (max-width: 820px) {
  /* --- Kopf: eine schmale Leiste statt Grafik + Menüleiste --- */
  .hero-header { display: none !important; }
  /* height:auto, sonst zählt padding-bottom (Platz für die Leiste unten) nicht zur Scrollhöhe.
     overflow-x:clip: Ist eine Seite auch nur wenige Pixel zu breit, vergrößert der Browser den Layout-Viewport –
     dann rutschen die festen Leisten aus dem Bild. Lieber abschneiden (html-Wert geht an den Viewport, body schneidet selbst). */
  html { overflow-x: clip; }
  body { height: auto; min-height: 100%; padding-top: 54px; padding-bottom: 0; overflow-x: clip; }
  .navbar {
    top: 0 !important; height: 54px; padding: 0 10px 0 14px; gap: 8px;
    background-color: var(--hero-bg1, #0581BF);
    background-image: url("/assets/header.png"), linear-gradient(90deg, var(--hero-bg1, #0581BF), var(--hero-bg2, #13A3EC));
    background-repeat: no-repeat, no-repeat;
    background-size: auto 44px, cover;
    background-position: right -60px bottom 0, 0 0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .18);
  }
  .nav-left { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .m-brand {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .2px; text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  }
  #burgerBtn { order: 2; margin: 0 0 0 auto; background: rgba(255, 255, 255, .92); border-color: transparent; }
  body.has-tabbar #burgerBtn { display: none !important; }
  .m-online {
    display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #0F5289; font-weight: 700; font-size: 14px; text-decoration: none;
  }

  /* --- Inhalt etwas breiter, weniger Leerraum unten --- */
  .wrap { padding: 12px; margin-bottom: 16px; }
  .footer-spacer { height: 0; }

  /* --- Fußzeile am Seitenende statt fest angeheftet --- */
  .site-footer {
    position: static; height: auto; padding: 14px 12px 18px; margin-top: 8px;
    flex-wrap: wrap; line-height: 1.5; font-size: 13px;
  }

  /* „Location Vorschlag“/„Kontaktiere uns“ stehen im Menü */
  .fab { display: none !important; }

  /* --- Navigationsleiste unten (nur angemeldet) --- */
  body.has-tabbar { padding-bottom: 62px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
    height: 60px;
    background: var(--surface, #fff); border-top: 1px solid var(--border, #e5e5e5);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 0 4px; border: 0; background: none; cursor: pointer;
    color: var(--muted, #666); font: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tab.active { color: var(--primary, #e67e22); }
  .tab.active::before {
    content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--primary, #e67e22);
  }
  .tab:active { background: rgba(0, 0, 0, .04); }
  .tab-badge {
    position: absolute; top: 4px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; background: #d50000; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface, #fff);
  }

  /* --- Nichts breiter als der Bildschirm: Raster/Flex-Kinder dürfen schrumpfen --- */
  .grid-2, .wrap.grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .card > *, .row > *, .two-col > * { min-width: 0; }

  /* Firefox für Android verschiebt feste Leisten, sobald seine Adressleiste ein-/ausfährt
     (Mozilla-Bug 2012733). Die Adressleiste fährt nur, wenn das Fenster scrollt – also scrollt dort der body. */
  html.ff-android { height: 100%; overflow: hidden; }
  html.ff-android body { height: 100%; height: 100dvh; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  html.ff-android body.no-scroll { overflow: hidden; }
}

/* iPhone: Leiste über dem Home-Indikator (env() nur dort – Firefox/Android meldet falsche Werte, Mozilla-Bug 2057232) */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) {
    body.has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
    .tabbar { height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  }
}

@media (max-width: 640px) {
  /* Lange Knopf-/Linktexte umbrechen statt die Seite zu verbreitern */
  .btn, .wrap .navlink { white-space: normal; max-width: 100%; }
  /* Formulare mit Inline-Raster (z. B. Datum | Uhrzeit): Spalten dürfen schmaler werden als ihr Inhalt */
  [style*="display:grid"] > *, [style*="display: grid"] > *, input, select, textarea { min-width: 0; }

  /* Location: Bewertungsblock untereinander statt zweispaltig */
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col [style*="text-align:right"] { text-align: left !important; }
  .two-col [style*="justify-content:flex-end"] { justify-content: flex-start !important; }

  /* Umfrage-Ergebnis: lange Location-Namen umbrechen */
  .opt-left .navlink { white-space: normal; padding: 0; }

  /* Umfragen-Übersicht: Tabelle wird zur Liste */
  .poll-head { flex-wrap: wrap; }
  .poll-head > div:first-child { flex: 1 1 100%; }
  .poll-thead { display: none !important; }
  .poll-row { flex-wrap: wrap; }
  .poll-row > .poll-title, .poll-row > .poll-actions { flex: 1 1 100% !important; }
  .poll-row > .poll-status, .poll-row > .poll-kind { flex: 0 0 auto !important; }
  .poll-actions form { order: 0; width: auto; margin-top: 0; }
  .poll-actions form .btn { width: auto; }
  .section-head { flex-wrap: wrap; }
}

@media (max-width: 820px) and (prefers-color-scheme: dark) {
  .m-online, #burgerBtn { background: rgba(255, 255, 255, .14); color: #e9e9e9; }
  .tab:active { background: rgba(255, 255, 255, .06); }
  .close-x { color: #eee; }
}