/* Design für Emi's Cut – gilt nur für die Buchungsseite /b/emis-cut und /manage (nicht im Widget auf emiscut.de).
   Wie die Website emiscut.de (Glas-Entwurf, live seit 01.11.2026): Schablonenschrift, Glasflächen, Schwarz-Weiß-Grau,
   Weiß als Akzent, kein Gold – gleiche Werte wie die Widget-Variablen in emiscut.de/style.css. Neuer Betrieb mit eigenem Look: Datei /themes/<slug>.css nach diesem Muster anlegen
   (docs/WIDGET.md). Schrift: Stardos Stencil (SIL OFL, fonts/OFL-StardosStencil.txt), selbst gehostet. */
@font-face { font-family: "Stardos Stencil"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/StardosStencil-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Stardos Stencil"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/StardosStencil-700-latin.woff2) format("woff2"); }

html body { background: #0b0a09; color-scheme: dark; }
/* Computer mit klassischer Bildlaufleiste: immer eine (dunkle) Leiste zeigen – die Glaskarte springt beim
   Schrittwechsel nicht seitlich, und es bleibt kein flacher Streifen ohne Lichtflecken frei. Handys: ohne Wirkung. */
html { overflow-y: scroll; color-scheme: dark; }
booking-widget, booking-manage {
  --booking-primary: #F2F0EC;
  --booking-primary-text: #0B0A09;
  --booking-accent: #F2F0EC;
  --booking-accent-text: #F2F0EC;
  --booking-background: transparent;
  --booking-surface: rgba(255, 255, 255, .08);
  --booking-card: rgba(255, 255, 255, .055);
  --booking-card-edge: rgba(255, 255, 255, .24);
  --booking-text: #F2F0EC;
  --booking-muted: #A8A197;
  --booking-border: rgba(255, 255, 255, .12);
  --booking-success: #F2F0EC;
  --booking-danger: #B8503F;
  --booking-success-text: #F2F0EC;
  --booking-danger-text: #E0877B;
  --booking-radius: 0;
  --booking-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --booking-heading-font: "Stardos Stencil", Impact, "Arial Narrow", sans-serif;
  --booking-heading-weight: 700;
  --booking-heading-transform: uppercase;
  --booking-heading-tracking: .03em;
}

/* Hintergrund wie auf emiscut.de: fast schwarz, zwei weiche Lichtflecken (beide farblos) und eine feine Steinstruktur */
html body::before, html body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html body::before {
  background:
    radial-gradient(70vmax 55vmax at 100% -5%, rgba(138, 128, 118, .32), transparent 62%),
    radial-gradient(55vmax 45vmax at -10% 80%, rgba(242, 240, 236, .06), transparent 62%);
}
html body::after {
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html body footer { color: #A8A197; }

/* Ab Tablet: Buchung als Glasfläche in der Mitte */
@media (min-width: 640px) {
  html body booking-widget, html body booking-manage {
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .11);
    border-top-color: rgba(255, 255, 255, .24);
    box-shadow: none;
  }
}