/* cafe.php, Welle 7: Tischtischglocke neben dem Anrufknopf. Endbild ohne Bewegung: Glocke steht da. */
.reserve-call.hat-tischglocke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.reserve-call.hat-tischglocke > p { flex-basis: 100%; }

.tischglocke {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 76px;
  min-height: 76px;
  padding: 6px 8px 4px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-3) 18%, var(--surface));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tischglocke:hover { background: color-mix(in srgb, var(--accent-3) 34%, var(--surface)); }
.tischglocke:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.tischglocke-svg { display: block; width: 64px; height: auto; overflow: visible; pointer-events: none; }

.tischglocke-text { font-size: .9rem; font-weight: 700; line-height: 1.1; }

.tischglocke-fuss { fill: var(--ink); }
.tischglocke-kuppel { fill: var(--accent-3); stroke: var(--ink); stroke-width: 3.4; stroke-linejoin: round; }
.tischglocke-knopf { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.tischglocke-stiel { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.tischglocke-glanz { fill: none; stroke: var(--surface); stroke-width: 4; stroke-linecap: round; opacity: .75; }
.tischglocke-wellen path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; opacity: .55; }

/* Tische decken (Rundgang) */
.tische { display: block; width: 100%; max-width: 360px; height: auto; margin: 6px 0 14px; overflow: visible; }
.tisch-platte { fill: color-mix(in srgb, var(--accent-3) 55%, var(--surface)); stroke: var(--ink); stroke-width: 2.6; }
.tisch-stuhl { fill: var(--accent-2); stroke: var(--ink); stroke-width: 2; }