/* Unicum – Winterpause
   Dunkel, ein Akzent: Bronze. Die Streifen aus Tischset und Banner
   werden zum Absperrband – der Laden ist zu, bis zum neuen Jahr. */

@font-face { font-family: "Open Sans"; src: url("fonts/opensans-condensed.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/garamond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #120f0e;
  --bronze: #bb7a6c;
  --bronze-light: #e2b4a7;
  --brown: #574a46;
  --brown-deep: #2e2422;
  --ivory: #efe7e2;
  --muted: rgba(226, 180, 167, .62);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
::selection { background: var(--bronze); color: var(--night); }

body {
  margin: 0;
  color: var(--ivory);
  font-family: "Open Sans", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-stretch: 75%;
  background:
    radial-gradient(ellipse 60% 45% at 50% 32%, rgba(187,122,108,.12), transparent 70%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%),
    linear-gradient(rgba(18,15,14,.22), rgba(18,15,14,.22)),
    url("papier.webp") center / cover,
    var(--night);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* ---------- Logo & Dank ---------- */
.head {
  align-self: end;
  text-align: center;
  padding: clamp(3rem, 10vh, 6rem) 1.25rem clamp(2.5rem, 7vh, 4.5rem);
}
.title { margin: 0; font-weight: 400; }
.logo {
  display: block;
  width: min(84vw, 760px);
  aspect-ratio: 298 / 86;
  margin-inline: auto;
  background: linear-gradient(180deg, var(--bronze-light), var(--bronze) 60%);
  -webkit-mask: url("unicum-logo.svg") center / contain no-repeat;
          mask: url("unicum-logo.svg") center / contain no-repeat;
}
.thanks {
  margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--ivory);
}

/* ---------- Absperrband ---------- */
.tapes {
  position: relative;
  height: clamp(11rem, 26vh, 15rem);
}
.tape {
  --h: clamp(3.4rem, 7vw, 5.25rem);
  position: absolute;
  left: -10%;
  width: 120%;
  top: 50%;
  height: var(--h);
  margin-top: calc(var(--h) / -2);
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 1.2rem 2.4rem -1rem rgba(0,0,0,.7);
}
/* schmale Schrägstreifen an den Kanten, wie im Tischset */
.tape::before,
.tape::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: repeating-linear-gradient(115deg, var(--edge) 0 16px, transparent 16px 26px, var(--edge) 26px 28px, transparent 28px 40px);
  opacity: .35;
}
.tape::before { top: 5px; }
.tape::after  { bottom: 5px; }

.tape--front {
  --edge: var(--brown-deep);
  background: linear-gradient(180deg, #c98a7c, var(--bronze) 55%, #a86b5e);
  color: var(--brown-deep);
  transform: rotate(-5deg);
  z-index: 1;
}
.tape--back {
  --edge: var(--bronze);
  background: var(--brown);
  color: var(--bronze-light);
  transform: rotate(4deg);
}

.track {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  font-weight: 800;
  font-size: calc(var(--h) * .42);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.track span { padding: 0 .55em; }
.track i {
  width: .32em; height: .32em;
  background: currentColor;
  transform: rotate(45deg);
  opacity: .7;
}

@media (max-width: 640px) {
  .tapes { height: 15rem; }
  .tape { --h: 4.1rem; left: -25%; width: 150%; }
  .tape--front { transform: rotate(-11deg); }
  .tape--back  { transform: rotate(9deg); }
  .head { padding-bottom: 1.5rem; }
}

/* ---------- Fuß ---------- */
.foot {
  text-align: center;
  padding: clamp(1.5rem, 5vh, 3rem) 1rem max(1.5rem, env(safe-area-inset-bottom));
  font-size: .95rem;
  letter-spacing: .08em;
}
.foot a {
  display: inline-block;
  padding: .6rem .25rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.foot a:hover { color: var(--bronze-light); }
.foot a:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Band wird beim Laden einmal „angeklebt“ */
  .tape--front { animation: stick 1s var(--ease-out) .35s both; }
  .tape--back  { animation: stick 1s var(--ease-out) .15s both; }
  /* dann läuft der Text ruhig und endlos, gegenläufig */
  .tape--front .track { animation: run 48s linear infinite; }
  .tape--back  .track { animation: run 60s linear infinite reverse; }
  .head { animation: rise 1s var(--ease-out) both; }
}
@keyframes stick { from { clip-path: inset(0 100% 0 0); } }
@keyframes run  { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }