/* 16-schluss.css — Hochformat-Sperre + Deckende Listen (stehen bewusst ganz am Ende). Teil der geordneten Kaskade: in index.html in Nummern-Reihenfolge geladen; Regeln NICHT zwischen Dateien verschieben, ohne die Reihenfolge zu bedenken. */
/* ═══════════════ HOCHFORMAT-SPERRE (Portrait-Lock) ═══════════════
   iOS-PWA/Safari ignoriert manifest "orientation":"portrait" → im Querformat legt sich
   #rotateGuard über die ganze App und bittet, zurück ins Hochformat zu drehen.
   Bewusst NUR auf Touch-Geräten (pointer:coarse + hover:none): Desktop-Browser und die
   localhost-Vorschau sind immer „Landscape" und dürfen NICHT blockiert werden. Android
   ist bereits übers Manifest gesperrt → dort dreht die App gar nicht.
   Sehr hoher z-index, damit die Schicht über allem liegt (höchster App-z-index ~9300). */
#rotateGuard { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (hover: none) {
  #rotateGuard {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
    background: #020617;
    color: #e2e8f0;
    text-align: center;
    padding: 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  /* Inhalt hinter der Sperre stilllegen (kein Durchscroll im Querformat) */
  html, body { overflow: hidden; }
}
.rotate-guard-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 340px; }
.rotate-guard-inner svg { width: 62px; height: 62px; color: rgb(var(--cell-glow-rgb, 96 165 250)); opacity: 0.95; }
.rotate-guard-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.rotate-guard-sub { font-size: 14px; color: #94a3b8; line-height: 1.5; }

/* ═══════════════ Deckende Listen (html.klar) ═══════════════
   Die schwebenden Flächen der Einkaufsliste sind nur durch die Unschärfe lesbar:
   ihr eigener Hintergrund hat lediglich 4–10 % Deckkraft. Mit Glas aus
   (html.no-glass) schien die Liste darunter zu 90 % durch das Vorschlags-Dropdown —
   Produktnamen lagen Text-auf-Text übereinander (gemessen).
   html.klar legt eine deckende --card-Basis darunter. --card wird von den Themes
   umdefiniert, passt sich also der gewählten Farbe an. Unabhängig vom Glas-
   Schalter: mit Glas an wirkt es wie ein ruhigerer, voller Hintergrund. */
html.klar .autocomplete-list,
html.klar .voice-modal-card,
html.klar .shop-photo-sheet-card,
html.klar .folder-modal-card {
  background: var(--card);
  border-color: rgba(255,255,255,0.18);
}
/* Trennlinien und Treffer-Hervorhebung auf der vollen Fläche etwas kräftiger,
   sonst verschwimmen die Zeilen auf dem ruhigeren Untergrund. */
html.klar .autocomplete-item + .autocomplete-item { border-top-color: rgba(255,255,255,0.10); }
html.klar .autocomplete-item:hover,
html.klar .autocomplete-item:active { background: rgba(255,255,255,0.08); }