/* Infobox (Auftrag O 29.10.2026): schmaler Streifen ganz oben, über dem klebenden Kopf, gefüllt von /js/infobox.js aus
   settings/infobox («Unser Sushi-Koch ist krank …», «Folge uns auf Instagram und Facebook …»).
   Eigene Datei, weil HTML, JS und CSS eine Stunde gecacht sind (firebase.json): eine Änderung in components.css erreicht
   wiederkehrende Gäste nicht, eine neue Datei schon. Nur Tokens aus tokens.css, keine festen Farben.
   - Selbst nicht klebend (position bleibt static): die Kopfhöhe, die static-menu.js misst, und die Kategorie-Leiste
     darunter ändern sich nicht; der Kopf klebt beim Scrollen weiter bei top: 0.
   - art «hinweis» in den Warnfarben wie «heute nicht bestellbar» (menu.css, .menu-category__closed): dunkle Schrift,
     Warnfarbe nur als Fläche und Rand. art «info» und die Folge-uns-Zeile allein sind neutral.
   - Auf dem Handy mehrzeilig, auch bei 320 px ohne seitlichen Überlauf (lange Wörter brechen um). */

.infobox {
  position: static;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
}

/* display setzt sich sonst über das Attribut hidden hinweg: ohne Inhalt darf der Streifen keinen Platz brauchen */
.infobox[hidden] { display: none; }

.infobox--hinweis {
  background: var(--color-warning-soft);
  border-bottom: 3px solid var(--color-warning);
}

.infobox__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter-mobile);
}

@media (min-width: 768px) {
  .infobox__inner { padding-inline: var(--gutter-desktop); }
}

.infobox p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.infobox__text { font-weight: var(--weight-semibold); }

.infobox a {
  color: var(--color-accent-ink);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.infobox a:hover { color: var(--color-accent-hover); }