/* Farben und Schriften des Pub-Schilds, gemeinsam für TV, Handy und Admin. */
:root {
  --green: #1f6b3a;
  --green-deep: #12401f;
  --green-dark: #0b2a14;
  --cream: #f6efc4;
  --cream-soft: #fbf6d9;
  --gold: #d9a531;
  --gold-soft: #ecd085;
  --brown: #7a4a22;
  --fox: #d2691e;
  --ink: #12301a;
  --ink-soft: #4a6350;
  --danger: #a3311f;
  --font-display: 'Berkshire Swash', Georgia, 'Times New Roman', serif;
  --font-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;

  /* Kleeblatt als Maske für Zierzeichen und als blasses Muster für grüne Flächen. */
  --shamrock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 23c-5-9 2-15 6-10 4-6 12 1 4 8 9-2 12 8 4 9 5 6-4 11-9 3 1 5 2 9 5 12h-5c-2-3-3-7-3-11-5 8-14 3-9-3-8-1-5-11 4-9-8-7 0-14 4-8 4-5 11 1 6 10z'/%3E%3C/svg%3E");
  --clover-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23fff' fill-opacity='.045'%3E%3Cpath transform='translate(30 26) rotate(-14 24 24)' d='M24 23c-5-9 2-15 6-10 4-6 12 1 4 8 9-2 12 8 4 9 5 6-4 11-9 3 1 5 2 9 5 12h-5c-2-3-3-7-3-11-5 8-14 3-9-3-8-1-5-11 4-9-8-7 0-14 4-8 4-5 11 1 6 10z'/%3E%3Cpath transform='translate(140 132) rotate(22 24 24) scale(.8)' d='M24 23c-5-9 2-15 6-10 4-6 12 1 4 8 9-2 12 8 4 9 5 6-4 11-9 3 1 5 2 9 5 12h-5c-2-3-3-7-3-11-5 8-14 3-9-3-8-1-5-11 4-9-8-7 0-14 4-8 4-5 11 1 6 10z'/%3E%3C/g%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  -webkit-text-size-adjust: 100%;
  caret-color: var(--green);
  accent-color: var(--green);
}

::selection {
  background: var(--gold);
  color: var(--green-dark);
}

[hidden] {
  display: none !important;
}

/* Eingezogene Ecken wie beim Schild im Logo. --scoop ist der Radius, --inset der Abstand
   zur Außenkante, damit innere Lagen dieselbe Rundung in gleichem Abstand nachzeichnen. */
.scoop,
.scoop-frame::before,
.scoop-frame::after {
  --scoop: 28px;
  --inset: 0px;
  --hole: transparent calc(var(--scoop) + var(--inset)), #000 calc(var(--scoop) + var(--inset) + 1px);
  -webkit-mask:
    radial-gradient(circle at calc(0px - var(--inset)) calc(0px - var(--inset)), var(--hole)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% + var(--inset)) calc(0px - var(--inset)), var(--hole)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(0px - var(--inset)) calc(100% + var(--inset)), var(--hole)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% + var(--inset)) calc(100% + var(--inset)), var(--hole)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at calc(0px - var(--inset)) calc(0px - var(--inset)), var(--hole)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% + var(--inset)) calc(0px - var(--inset)), var(--hole)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(0px - var(--inset)) calc(100% + var(--inset)), var(--hole)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% + var(--inset)) calc(100% + var(--inset)), var(--hole)) 100% 100% / 51% 51% no-repeat;
}

/* Tafel mit goldenem Rand und eingezogenen Ecken: Gold außen, Creme innen. */
.scoop-frame {
  --frame: 6px;
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.32));
}

.scoop-frame::before,
.scoop-frame::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.scoop-frame::before {
  inset: 0;
  background: linear-gradient(155deg, #f3cf6a 0%, var(--gold) 38%, #b98426 100%);
}

.scoop-frame::after {
  --inset: var(--frame);
  inset: var(--frame);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--cream);
}