/* Frag die Karte - Glas-Look auf Dunkelgrün
   Wird als letztes geladen (nach styles.css und motion.css).
   Weichzeichner (backdrop-filter) nur auf großen oder schwebenden Flächen.
   Viele kleine Karten bekommen den Glas-Look ohne Weichzeichner, damit es auf günstigen Handys flüssig bleibt. */

:root {
  --glass: linear-gradient(180deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.03));
  --glass-strong: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.045));
  --glass-edge: 1px solid rgb(255 255 255 / 0.12);
  --glass-blur: blur(24px) saturate(160%);
}

/* Hintergrund: weiche Lichtflecken, fest hinter der Seite */
html { background: var(--bg); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 8%, rgb(56 170 120 / 0.38), transparent 70%),
    radial-gradient(36% 32% at 92% 22%, rgb(80 150 210 / 0.22), transparent 70%),
    radial-gradient(40% 36% at 78% 88%, rgb(240 160 120 / 0.16), transparent 70%),
    radial-gradient(48% 42% at 6% 92%, rgb(36 140 108 / 0.3), transparent 70%),
    var(--bg);
}

/* Große und schwebende Glasflächen (mit Weichzeichner) */
.finder-panel,
.searchbar,
.phone,
.co,
.cell,
.price,
.form,
.contact-panel,
.owner-panel,
.lokal-hero,
.lokal-filters,
.lokal-ask,
.faq details,
.sheet-card,
.filters-body {
  background: var(--glass);
  border: var(--glass-edge);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Glas ohne Weichzeichner: viele kleine Elemente */
.venue,
.dish,
.ask,
.chip,
.seg,
.icon-btn,
.step-icon,
.cell-icon,
.empty {
  background: var(--glass);
  border-color: rgb(255 255 255 / 0.1);
}
.venue { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
.venue:hover { border-color: rgb(159 224 192 / 0.35); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 60px -28px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(159 224 192 / 0.08); }

.filters-body { padding: 22px; border-radius: var(--r-card); }
.filters fieldset:last-of-type { margin-bottom: 16px; }

/* Farbiges Glas: Pastell als Tönung */
.finder-panel {
  background:
    radial-gradient(55% 80% at 100% 0%, rgb(150 190 240 / 0.2), transparent 70%),
    radial-gradient(45% 70% at 90% 100%, rgb(250 180 140 / 0.16), transparent 70%),
    radial-gradient(60% 80% at 0% 0%, rgb(140 220 180 / 0.22), transparent 70%),
    var(--glass);
}
.showcase {
  background:
    radial-gradient(45% 55% at 12% 18%, rgb(150 190 240 / 0.22), transparent 70%),
    radial-gradient(50% 60% at 88% 88%, rgb(250 180 140 / 0.18), transparent 70%),
    radial-gradient(40% 45% at 88% 12%, rgb(240 220 140 / 0.14), transparent 70%),
    linear-gradient(180deg, rgb(140 220 180 / 0.14), rgb(140 220 180 / 0.06));
  border: var(--glass-edge);
  box-shadow: var(--shadow);
}
.cell-list { background: linear-gradient(160deg, rgb(240 220 140 / 0.18), rgb(255 255 255 / 0.03)); }
.cell-qr { background: linear-gradient(160deg, rgb(140 220 180 / 0.2), rgb(255 255 255 / 0.03)); }
.cell-find { background: linear-gradient(160deg, rgb(250 180 140 / 0.18), rgb(255 255 255 / 0.03)); }
.contact-panel { background: linear-gradient(160deg, rgb(140 220 180 / 0.18), rgb(255 255 255 / 0.03)); }
.owner-panel { background: linear-gradient(160deg, rgb(250 180 140 / 0.17), rgb(255 255 255 / 0.03)); }
.price-nums { background: linear-gradient(160deg, rgb(140 220 180 / 0.16), rgb(140 220 180 / 0.04)); }
.photo { background: linear-gradient(160deg, rgb(150 190 240 / 0.16), rgb(255 255 255 / 0.03)); border: var(--glass-edge); }
.why { background: transparent; border-block: 0; }
.demo-note { background: rgb(240 220 140 / 0.1); border-bottom: 1px solid rgb(240 220 140 / 0.16); }

/* Glänzende Lichtkante oben an großen Flächen */
.finder-panel, .cell, .price, .contact-panel, .owner-panel, .showcase, .lokal-hero { position: relative; }
.finder-panel::after, .cell::after, .price::after, .contact-panel::after, .owner-panel::after, .showcase::after, .lokal-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 28%);
}

/* Header und Sheet */
.site-header { background: rgb(10 25 19 / 0.55); }
.site-header.is-scrolled { border-bottom-color: rgb(255 255 255 / 0.08); }
.searchbar { background: linear-gradient(180deg, rgb(30 60 47 / 0.62), rgb(18 40 31 / 0.55)); }
.lokal-hero {
  background:
    radial-gradient(60% 90% at 0% 0%, rgb(140 220 180 / 0.2), transparent 70%),
    radial-gradient(50% 80% at 100% 100%, rgb(150 190 240 / 0.14), transparent 70%),
    var(--glass);
}
.phone { background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05)); }
.phone-screen { background: rgb(8 22 16 / 0.72); }

/* Bedienelemente */
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: rgb(159 224 192 / 0.55); color: var(--ink); }
.chip:hover { border-color: rgb(255 255 255 / 0.22); }
.btn-ghost { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.16); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.28); }
.btn-primary { box-shadow: 0 8px 28px -10px rgb(159 224 192 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4); }
.field input, .field textarea { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.22); }
.field input:focus, .field textarea:focus { background: rgb(255 255 255 / 0.08); }
.sb-select option, select option { background: var(--surface-solid); color: var(--ink); }
.sb-field:focus-within { background: rgb(255 255 255 / 0.06); }

/* Warnungen gut lesbar halten */
.dish-warn, .venue-warn { background: rgb(250 170 120 / 0.14); border: 1px solid rgb(250 170 120 / 0.22); color: var(--warn-ink); }
.answer { background: rgb(159 224 192 / 0.12); border: 1px solid rgb(159 224 192 / 0.18); }

/* Ohne Unterstützung für Weichzeichner: dichtere Flächen, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .searchbar, .site-header, .co, .filters-body { background: var(--surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .searchbar, .site-header, .co, .phone-screen, .finder-panel, .cell, .price, .form, .contact-panel, .owner-panel, .faq details, .filters-body {
    background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}