/* Anti Matcha Club – alles in einer Datei, kein Build-Schritt */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-expanded.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --blau: #0000dd;
  --blau-hell: #eef0ff;
  --weiss: #ffffff;
  --text: #0b0b3a;
  --rand: clamp(16px, 4vw, 48px);
  --sprung: cubic-bezier(.34, 1.56, .64, 1);
  --sanft: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--blau); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Instagram oben rechts ---------- */
.insta-ecke {
  position: fixed;
  top: var(--rand);
  right: var(--rand);
  z-index: 10;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .55em 1em;
  border: 2px solid var(--blau);
  border-radius: 999px;
  background: var(--weiss);
  transition: background .2s, color .2s;
}
.insta-ecke:hover { background: var(--blau); color: var(--weiss); }

/* ---------- Intro mit Logo-Animation ---------- */
.intro {
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(8px, 2vh, 24px);
  padding: calc(var(--rand) + 48px) var(--rand) calc(var(--rand) + 40px);
  position: relative;
  overflow: clip;
}
.wortmarke {
  width: min(92vw, 1100px, 82svh);
  height: auto;
  overflow: visible;
  fill: var(--blau);
  transform-origin: 50% 45%;
  animation: rauszoomen 1.1s var(--sanft) 1.25s both;
}
.buchstabe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: reinspringen .7s var(--sprung) calc(var(--i, 0) * 70ms + 150ms) both;
}
.signatur {
  animation: wischen .9s var(--sanft) 2.2s both;
}
/* Slogan in der Originalschrift aus dem Logo */
.slogan {
  margin: clamp(8px, 2svh, 24px) 0 0;
  line-height: 0;
}
.slogan svg {
  display: block;
  width: min(84vw, 640px, 58svh);
  height: auto;
  fill: var(--blau);
  animation: wischen 1.2s cubic-bezier(.45, .05, .35, 1) 2.7s both;
}
.runter {
  position: absolute;
  bottom: var(--rand);
  left: 50%;
  translate: -50% 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  animation: einblenden .8s ease 4.2s both, wippen 2.4s ease-in-out 5s infinite;
}

@keyframes reinspringen {
  from { opacity: 0; transform: translateY(70%) scale(.3) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes rauszoomen {
  from { transform: scale(1.55); }
  to   { transform: none; }
}
@keyframes wischen {
  from { clip-path: inset(-20% 100% -20% 0); }
  to   { clip-path: inset(-20% -5% -20% 0); }
}
@keyframes einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wippen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- Shop ---------- */
.shop {
  padding: clamp(48px, 10vw, 140px) var(--rand);
}
.produkt {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 820px) {
  .produkt { grid-template-columns: 1.05fr 1fr; }
}
.produkt-bild {
  background: var(--blau-hell);
  border-radius: clamp(20px, 3vw, 36px);
  padding: clamp(20px, 5vw, 64px);
}
.produkt-bild img {
  transition: transform .6s var(--sanft);
}
.produkt-bild:hover img { transform: rotate(-2deg) translateY(-6px); }
.kicker {
  margin: 0 0 .4em;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blau);
}
.produkt-text h2 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1;
  font-weight: 800;
  color: var(--blau);
  text-transform: uppercase;
}
.preis {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--blau);
  margin: .5em 0 .4em;
}
.fakten {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 1.6em;
  border-top: 2px solid var(--blau);
}
.fakten li {
  padding: .6em 0;
  border-bottom: 1px solid #d7daf7;
  font-size: .92rem;
}
.kaufen {
  display: grid;
  gap: 12px;
}
.bestand {
  margin: 0 0 4px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blau);
}
.knopf {
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 1.05em 1.4em;
  border: 2px solid var(--blau);
  border-radius: 999px;
  color: var(--blau);
  background: var(--weiss);
  transition: transform .2s var(--sprung), background .2s, color .2s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf-voll { background: var(--blau); color: var(--weiss); }
.knopf[hidden] { display: none; }
.knopf[aria-disabled="true"] {
  pointer-events: none;
  opacity: .45;
}
.klein { font-size: .85rem; margin-top: 1.4em; }

/* ---------- Instagram gross ---------- */
.insta {
  padding: clamp(40px, 8vw, 120px) var(--rand);
  text-align: center;
  border-top: 2px solid var(--blau);
}
.insta a {
  text-decoration: none;
  display: inline-block;
}
.insta-klein {
  display: block;
  margin-bottom: .8em;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.insta-gross {
  display: block;
  font-size: clamp(1.3rem, 6vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transition: letter-spacing .4s var(--sanft);
}
.insta a:hover .insta-gross { letter-spacing: .03em; }

/* ---------- Fuss ---------- */
.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px var(--rand) 28px;
  font-size: .8rem;
  background: var(--blau);
  color: var(--weiss);
}
.fuss a { color: var(--weiss); }
.fuss nav a + a { margin-left: 1.2em; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.seite {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(96px, 14vw, 160px) var(--rand) 80px;
}
.seite h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  color: var(--blau);
  text-transform: uppercase;
  margin: 0 0 .8em;
}
.seite h2 { font-size: 1.05rem; margin: 2em 0 .4em; color: var(--blau); }
.zurueck {
  position: fixed;
  top: var(--rand);
  left: var(--rand);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Ohne Bewegung: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Fehlerseite mit Spiel ---------- */
.fehler {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(88px, 12vw, 140px) var(--rand) 64px;
  text-align: center;
}
.fehler h1 {
  margin: 0 0 .3em;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05;
  font-weight: 800;
  color: var(--blau);
  text-transform: uppercase;
}
.fehler-text { margin: 0 auto 28px; max-width: 34em; }
.spiel {
  position: relative;
  border: 2px solid var(--blau);
  border-radius: clamp(14px, 2vw, 24px);
  overflow: hidden;
  background: var(--weiss);
}
.spiel canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 260;
  touch-action: manipulation;
  cursor: pointer;
}
.spiel-knopf {
  position: absolute;
  left: 50%;
  top: 58%;
  translate: -50% -50%;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: .8em 2em;
  border: 2px solid var(--blau);
  border-radius: 999px;
  background: var(--blau);
  color: var(--weiss);
  cursor: pointer;
}
.spiel-knopf[hidden] { display: none; }
.spiel-hilfe { font-size: .8rem; opacity: .7; margin: 12px 0 32px; }
.fehler-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.fehler-links .knopf { min-width: 200px; }
@media (max-width: 600px) {
  .spiel-knopf { font-size: .8rem; padding: .55em 1.3em; top: 62%; }
}