:root{
  --nacht:#0c1d16; --nacht2:#06110c; --moos:#163a2b; --laterne:#ffcf6b;
  --holz:#7b4a24; --holz2:#56300f; --holz3:#9b6232; --eisen:#7f8a84; --eisen2:#3e4743;
  --gold:#f0bf45; --gold2:#ffe39a; --gold3:#9c6d12;
  --gruen:#29b47a; --gruen2:#11704a; --text:#dbe8e0; --grau:#93ad9f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;display:flex;justify-content:center;padding:0 16px 24px;
  font:400 16px/1.5 "Alegreya Sans",system-ui,sans-serif;color:var(--text);
  background:
    radial-gradient(circle at 50% 30%,rgba(255,207,107,.16) 0,transparent 40%),
    linear-gradient(180deg,var(--moos),var(--nacht) 55%,var(--nacht2));
}
.gasse{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}
/* wooden beam at the top of the viewport */
.balken{
  position:relative;width:calc(100% + 32px);max-width:560px;height:22px;margin:0 -16px;
  background:repeating-linear-gradient(90deg,var(--holz2) 0 3px,var(--holz) 3px 40px),var(--holz);
  border-bottom:3px solid #2e1906;border-radius:0 0 6px 6px;box-shadow:0 6px 14px rgba(0,0,0,.5)
}
.balken-end{display:none}
.balken::before,.balken::after{content:"";position:absolute;top:5px;width:12px;height:12px;border-radius:50%;background:var(--eisen)}
.balken::before{left:24px}.balken::after{right:24px}
.schild-wrap{position:relative;width:100%;padding-top:58px;transform-origin:50% 0;animation:schwing 5s ease-in-out infinite}
@keyframes schwing{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@media (prefers-reduced-motion:reduce){.schild-wrap{animation:none}}
.kette{
  position:absolute;top:0;width:10px;height:66px;
  background:repeating-linear-gradient(180deg,transparent 0 2px,var(--eisen) 2px 9px,var(--eisen2) 9px 11px,transparent 11px 13px);
  border-radius:4px
}
.kette::before{content:"";position:absolute;inset:0 3px;background:repeating-linear-gradient(180deg,var(--eisen2) 0 6px,transparent 6px 13px)}
.kette-l{left:18%}.kette-r{right:18%}
.schild{
  position:relative;text-align:center;padding:26px 20px 22px;border-radius:20px/30px;
  background:
    repeating-linear-gradient(176deg,rgba(0,0,0,.08) 0 2px,transparent 2px 12px),
    linear-gradient(180deg,var(--holz3),var(--holz) 40%,var(--holz2));
  border:5px solid #3a2009;box-shadow:inset 0 0 0 3px var(--gold3),inset 0 0 26px rgba(0,0,0,.45),0 22px 40px rgba(0,0,0,.55)
}
.schild::before,.schild::after{ /* gold corner brackets */
  content:"";position:absolute;width:24px;height:24px;border:3px solid var(--gold)
}
.schild::before{top:9px;left:9px;border-right:0;border-bottom:0}
.schild::after{bottom:9px;right:9px;border-left:0;border-top:0}
.schild-fuchs{width:64px;margin:-62px auto 4px;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.schild-kopf{font:22px/1 "Pirata One",serif;color:var(--gold2);letter-spacing:1px}
.schild-h{font-weight:400;margin:8px 0 4px}
.schild-zahl{
  display:block;font:96px/.95 "Pirata One",serif;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 50%,var(--gold3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2b1505) drop-shadow(0 0 12px rgba(255,207,107,.35))
}
.schild-bis{display:block;font:34px/1.1 "Pirata One",serif;color:#fff3d6;text-shadow:0 2px 0 #2b1505}
.schild-art{font:800 12px/1 "Alegreya Sans",sans-serif;letter-spacing:3px;text-transform:uppercase;color:#f6dea2;margin-top:8px}

.tafel{
  width:88%;margin-top:22px;text-align:center;padding:16px 16px 14px;border-radius:12px;
  background:#132d22;border:1px solid #2a5a45;box-shadow:0 10px 24px rgba(0,0,0,.35)
}
.tafel p{color:var(--text);margin-bottom:12px;font-size:15px}
.tafel-btn{
  display:inline-block;padding:13px 30px;border-radius:999px;color:#fff;text-decoration:none;
  font:800 17px/1 "Alegreya Sans",sans-serif;letter-spacing:.5px;text-transform:uppercase;
  background:linear-gradient(180deg,#42d495,var(--gruen2));border:2px solid var(--gold);
  box-shadow:0 0 0 3px rgba(156,109,18,.4),0 0 24px rgba(255,207,107,.25)
}
.tafel-btn:hover{filter:brightness(1.1)}
.tafel small{display:block;font-size:12px;color:var(--grau);margin-top:9px}
.kunde{font-size:15px;color:var(--grau);margin:18px 0 14px;text-align:center}
.kunde a{color:var(--gold2);font-weight:800}
.fuss{text-align:center;font-size:12px;color:var(--grau);border-top:1px solid #23493a;padding-top:10px;width:100%}
.fuss p+p{margin-top:3px}
.fuss a{color:var(--text)}
@media (max-width:380px){.schild-zahl{font-size:78px}.schild-bis{font-size:28px}.tafel{width:100%}}