/* ============================================================================
   Verzeichnis — Frontend (Themenwochen-Landingpage)
   gm-Designsystem: nutzt die Marken-Tokens aus tokens.css; Karten-Sektion nutzt
   die geteilten .gm-map-*-Klassen (gm-content.css). Ein Radius, eine Schattenstufe.
   WCAG 2.2 AA. Kein Dark Mode (gm = Light).
   ============================================================================ */

.vzf-app { max-width: 1200px; margin: 0 auto; }

/* Hero */
.vzf-hero { text-align: center; padding: 1rem 0 1.5rem; }
.vzf-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--gm-sea, #3E8DAE); }
.vzf-hero h1 { color: var(--gm-heading, #323E52); margin: .3rem 0 .5rem; }
.vzf-lead { color: var(--gm-text, #45505f); max-width: 46rem; margin: 0 auto; font-size: 1.05rem; }

/* Filterleiste */
.vzf-filters { background: var(--gm-cream, #F5F1E9); border-radius: var(--gm-radius, .25rem); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.vzf-filter-cats { border: 0; padding: 0; margin: 0 0 .75rem; }
.vzf-filter-cats legend { font-size: .82rem; font-weight: 700; color: var(--gm-text, #45505f); padding: 0; margin-bottom: .4rem; }
.vzf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.vzf-chip-radio { display: inline-flex; align-items: center; gap: .3em; padding: .35em .8em; border: 1px solid var(--gm-border, #dee2e6); border-radius: 2rem; background: #fff; cursor: pointer; font-size: .9rem; }
.vzf-chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vzf-chip-radio.is-active { background: var(--gm-primary, #323E52); color: #fff; border-color: var(--gm-primary, #323E52); }
.vzf-filter-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
.vzf-field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--gm-text, #45505f); }
.vzf-field select { padding: .4em .6em; border: 1px solid var(--gm-border, #dee2e6); border-radius: var(--gm-radius, .25rem); background: #fff; font-weight: 400; min-height: 40px; }
.vzf-check { display: inline-flex; align-items: center; gap: .4em; font-size: .9rem; color: var(--gm-text, #45505f); cursor: pointer; }
.vzf-check input { width: 18px; height: 18px; }
.vzf-filter-go { margin-left: auto; }
.vzf-reset { align-self: center; color: var(--gm-accent, #3E8DAE); font-size: .88rem; }

.vzf-count { color: var(--gm-text, #45505f); font-weight: 600; margin: 0 0 1rem; }

/* Karten-Sektion: nur Abstände; Optik kommt aus .gm-home-map (gm-content.css) */
.vzf-mapsection { margin: 1.5rem 0 2rem; }

/* Card-Grid */
.vzf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.vzf-empty { grid-column: 1 / -1; text-align: center; color: var(--gm-text, #45505f); padding: 2.5rem 1rem; background: var(--gm-cream, #F5F1E9); border-radius: var(--gm-radius, .25rem); }

.vzf-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gm-border, #dee2e6); border-radius: var(--gm-radius, .25rem); box-shadow: var(--gm-shadow-card, 0 1px 3px rgba(20,30,45,.08)); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.vzf-card:hover, .vzf-card:focus-within { box-shadow: var(--gm-shadow-card-hover, 0 4px 14px rgba(20,30,45,.12)); transform: translateY(-3px); }
.vzf-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--gm-cream, #F5F1E9); overflow: hidden; }
.vzf-card-media img { width: 100%; height: 100%; object-fit: cover; }
.vzf-card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gm-green, #5A9077); font-size: 2.5rem; }
.vzf-siegel { position: absolute; left: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35em; background: var(--gm-green-dark, #34624D); color: #fff; font-size: .74rem; font-weight: 600; padding: .25em .6em; border-radius: var(--gm-radius, .25rem); }
.vzf-card-body { display: flex; flex-direction: column; gap: .45rem; padding: .9rem 1rem 1rem; flex: 1; }
.vzf-chip { display: inline-flex; align-items: center; gap: .35em; align-self: flex-start; font-size: .78rem; padding: .2em .6em; border-radius: var(--gm-radius, .25rem); color: var(--c, #34624D); background: color-mix(in srgb, var(--c, #34624D) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c, #34624D) 35%, #fff); }
.vzf-card-title { font-size: 1.15rem; margin: 0; }
.vzf-card-title a { color: var(--gm-heading, #323E52); text-decoration: none; }
.vzf-card-title a:hover { color: var(--gm-accent, #3E8DAE); }
.vzf-card-loc { color: var(--gm-text, #45505f); font-size: .88rem; margin: 0; }
.vzf-card-dishes { list-style: none; padding: 0; margin: .1rem 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.vzf-card-dishes li { font-size: .8rem; background: var(--gm-cream, #F5F1E9); padding: .2em .55em; border-radius: var(--gm-radius, .25rem); color: var(--gm-ink, #232E3C); }
.vzf-card-dishes .vzf-more { background: transparent; color: var(--gm-text, #45505f); }
.vzf-card-cta { margin-top: auto; padding-top: .3rem; font-weight: 600; color: var(--gm-accent, #3E8DAE); text-decoration: none; }
.vzf-card-cta:hover { text-decoration: underline; }

/* Einladungs-Card »So könnte Ihr Eintrag aussehen« */
.vzf-card-demo { border: 2px dashed var(--gm-green, #5A9077); }
.vzf-card-demo .vzf-card-media { position: relative; }
.vzf-demo-badge { position: absolute; top: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .35em; background: var(--gm-sun, #FFCC00); color: var(--gm-ink, #232E3C); font-size: .78rem; font-weight: 700; padding: .3em .75em; border-radius: var(--gm-radius, .25rem); box-shadow: var(--gm-shadow-card, 0 1px 3px rgba(20,30,45,.12)); }
.vzf-demo-msg { color: var(--gm-text, #45505f); font-size: .92rem; margin: 0; }
.vzf-demo-features { list-style: none; padding: 0; margin: .2rem 0 .3rem; display: flex; flex-direction: column; gap: .45rem; }
.vzf-demo-features li { display: flex; align-items: flex-start; gap: .55em; font-size: .88rem; color: var(--gm-ink, #232E3C); }
.vzf-demo-features li i { color: var(--gm-green, #5A9077); margin-top: .15em; flex: none; width: 1.1em; text-align: center; }
/* Karten-Popup (dunkler gm-popup): Link immer hell/lesbar */
.gm-popup .maplibregl-popup-content a { color: #fff !important; text-decoration: underline; }
.vzf-demo-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.vzf-demo-cta { align-self: flex-start; }

/* Detailseite */
.vzf-detail { max-width: 960px; margin: 0 auto; }
.vzf-back { display: inline-flex; align-items: center; gap: .4em; color: var(--gm-accent, #3E8DAE); text-decoration: none; margin-bottom: .8rem; }
.vzf-detail-head h1 { color: var(--gm-heading, #323E52); margin: .3rem 0; }
.vzf-detail-adr { color: var(--gm-text, #45505f); }
.vzf-detail-hero { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--gm-radius, .25rem); margin: 1rem 0 1.5rem; }
.vzf-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
.vzf-detail-main h2 { color: var(--gm-heading, #323E52); font-size: 1.35rem; }
.vzf-dishes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.vzf-dish { border: 1px solid var(--gm-border, #dee2e6); border-radius: var(--gm-radius, .25rem); padding: .9rem 1rem; }
.vzf-dish-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.vzf-dish-head h3 { margin: 0; font-size: 1.05rem; color: var(--gm-heading, #323E52); }
.vzf-dish-price { font-weight: 700; color: var(--gm-green-dark, #34624D); white-space: nowrap; }
.vzf-dish p { color: var(--gm-text, #45505f); margin: .4rem 0; }
.vzf-dish-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.vzf-tag { font-size: .78rem; padding: .2em .6em; border-radius: var(--gm-radius, .25rem); background: var(--gm-cream, #F5F1E9); color: var(--gm-ink, #232E3C); }
.vzf-tag-veg { background: color-mix(in srgb, var(--gm-green, #5A9077) 18%, #fff); color: var(--gm-green-dark, #34624D); }
.vzf-tag-herkunft { background: color-mix(in srgb, var(--gm-green-dark, #34624D) 14%, #fff); color: var(--gm-green-dark, #34624D); }
.vzf-detail-side { background: var(--gm-cream, #F5F1E9); border-radius: var(--gm-radius, .25rem); padding: 1rem 1.1rem; }
.vzf-facts { margin: 0 0 1rem; }
.vzf-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--gm-border, #dee2e6); }
.vzf-facts div:last-child { border-bottom: 0; }
.vzf-facts dt { font-weight: 600; color: var(--gm-text, #45505f); margin: 0; }
.vzf-facts dd { margin: 0; text-align: right; color: var(--gm-ink, #232E3C); }
.vzf-web, .vzf-menu { display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; margin-top: .6rem; }
.vzf-404 { text-align: center; padding: 3rem 1rem; }
.vzf-404 h1 { color: var(--gm-heading, #323E52); }
.vzf-note { color: var(--gm-text, #45505f); }

/* Fokus (WCAG 2.4.7) */
.vzf-app :focus-visible, .vzf-detail :focus-visible { outline: 3px solid var(--gm-primary, #323E52); outline-offset: 2px; }

/* Responsive */
@media (max-width: 768px) {
  .vzf-detail-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .vzf-filter-go { margin-left: 0; }
}
@media (max-width: 400px) {
  .vzf-grid { grid-template-columns: 1fr; }
  .vzf-field, .vzf-check { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vzf-card { transition: none; }
  .vzf-card:hover, .vzf-card:focus-within { transform: none; }
}