/* ==========================================================================
   Gästebuch. Lädt nach tickets.css, nutzt .field/.alert aus steel.css und .hint aus shop.css.
   ========================================================================== */
.guestbook { padding: 48px var(--gutter) 64px; }
.guestbook__grid { max-width: 1184px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 56px; align-items: start; }

/* ---------- Formular ---------- */
.gb-form { position: sticky; top: calc(var(--header-h) + 16px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: radial-gradient(ellipse 70% 40% at 20% 0%, rgba(215, 16, 27, .28) 0%, rgba(215, 16, 27, 0) 70%),
              radial-gradient(ellipse 60% 30% at 100% 100%, rgba(143, 227, 255, .08) 0%, rgba(143, 227, 255, 0) 70%), var(--graphite); }
.gb-form .alert { margin-top: 20px; border-radius: var(--radius); }
.gb-form .field { margin: 20px 0 0; }
.gb-form .field label { font-family: var(--font-mono); font-weight: 600; font-size: .875rem; letter-spacing: .16em; color: var(--ice); }
.gb-form .field input, .gb-form .field textarea { background: var(--steel-black); }
.gb-form textarea { resize: vertical; min-height: 140px; }
.field__hint { margin: 6px 0 0; color: var(--ash); font-size: .875rem; }
.gb-form__sum { color: var(--gold); font-family: var(--font-mono); letter-spacing: .08em; }
.gb-form > .btn { margin-top: 24px; }
.gb-form .hint { margin: 14px 0 0; color: var(--ash); font-size: .9375rem; }
.gb-form .hint a { color: var(--ice); }

/* ---------- Einträge ---------- */
.gb-list__head { margin-bottom: 20px; }
.gb-count { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 12px; border: 1px solid var(--ice-edge); border-radius: 999px;
  color: var(--ice); font-family: var(--font-mono); font-weight: 600; font-size: .875rem; letter-spacing: .08em; }
.gb-empty { padding: 24px; border: 1px dashed var(--ice-edge); border-radius: var(--radius-l); color: var(--bone-dim); }
.gb-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--graphite); transition: border-color .15s, background .15s; }
.gb-entry + .gb-entry { margin-top: 14px; }
.gb-entry:hover { border-color: #4A4A4F; background: rgba(143, 227, 255, .04); }
.gb-entry__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fire-grad); color: var(--on-fire);
  font-weight: 900; font-stretch: 80%; font-size: 1.375rem; box-shadow: 0 0 16px -2px rgba(255, 98, 0, .45); }
.gb-entry__body { min-width: 0; }
.gb-entry__body header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.gb-entry__body h3 { margin: 0; font-weight: 800; font-stretch: 80%; font-size: 1.1875rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.gb-entry__body time { color: var(--ash); font-family: var(--font-mono); font-weight: 500; font-size: .8125rem; letter-spacing: .08em; }
.gb-entry__body p { margin: 10px 0 0; color: var(--bone-dim); overflow-wrap: anywhere; }

@media (max-width: 60em) {
  .guestbook__grid { grid-template-columns: 1fr; }
  .gb-form { position: static; }
}
@media (max-width: 30em) {
  .gb-form { padding: 20px 16px; }
  .gb-entry { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .gb-entry__avatar { width: 40px; height: 40px; font-size: 1.125rem; }
}