/* TM EVENT – Vorgespräch buchen (baut auf verwaltung/app.css und kunde/kunde.css auf) */
.vg-raster { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .vg-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .vg-raster > .card:first-child { grid-row: span 2; }
}
.vg-raster > .card + .card { margin-top: 0; }
.vg-schmal { max-width: 640px; margin-inline: auto; }

.vg-tage { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 0 .6rem; scroll-snap-type: x proximity; }
.vg-tag { flex: 0 0 auto; display: grid; justify-items: center; gap: .05rem; min-width: 76px; padding: .6rem .5rem; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); scroll-snap-align: start; font: inherit; }
.vg-tag small { font-size: .74rem; color: var(--ink-soft); }
.vg-tag b { font-size: 1.05rem; }
.vg-tag[aria-checked="true"] { background: var(--violet); color: #fff; box-shadow: none; }
.vg-tag[aria-checked="true"] small { color: rgba(255,255,255,.8); }
.vg-uhrzeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; margin-top: .6rem; }
.vg-uhrzeit { border: 0; border-radius: 12px; padding: .75rem .5rem; font: 700 1rem var(--body); cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.vg-uhrzeit:hover { box-shadow: inset 0 0 0 1.5px var(--pink); }
.vg-uhrzeit[aria-checked="true"] { background: var(--pink); color: #fff; box-shadow: none; }
.vg-auswahl { margin-top: .9rem; font-weight: 600; color: var(--violet); }
.vg-tag:focus-visible, .vg-uhrzeit:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }