:root {
  --red: #c8161d;
  --black: #111;
  --white: #f4f4f4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--black);
  background-color: var(--white);
  /* Sticker als Kachelmuster ueber die ganze Seite, mit hellem Schleier darueber.
     Beides liegt im Hintergrund selbst, ohne fixiertes Element, damit es auf Handys
     beim Scrollen und bei ein- und ausfahrender Adressleiste gleich aussieht. */
  background-image:
    linear-gradient(rgba(244, 244, 244, 0.9), rgba(244, 244, 244, 0.9)),
    url("../assets/Zaboraner.svg");
  background-size: auto, 120px 120px;
  background-repeat: no-repeat, repeat;
}

h1, h2, h3 {
  font-family: Impact, "Arial Narrow Bold", "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--black);
  border-bottom: 4px solid var(--red);
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 600; }
.topbar nav { display: flex; gap: 16px; }
.topbar nav a:hover { color: var(--red); }
.brand { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.06em; }

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 16px 80px;
}
.logo {
  width: min(70vw, 420px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  animation: spin 40s linear infinite;
}
.hero h1 { font-size: clamp(2.2rem, 8vw, 4.5rem); margin-top: 24px; }
.hero p { font-size: 1.2rem; max-width: 32ch; margin: 0 auto 24px; }

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  border: 3px solid var(--black);
  border-radius: 999px;
  transition: transform 0.15s;
}
.btn:hover { transform: scale(1.06) rotate(-2deg); }

/* schwebende Sticker im Hero */
.float { position: absolute; opacity: 0.9; z-index: 0; }
.hero > :not(.float) { position: relative; z-index: 1; }
.f1 { width: 110px; top: 6%;  left: 4%;  animation: bob 6s ease-in-out infinite; }
.f2 { width: 80px;  top: 14%; right: 6%; animation: bob 7s ease-in-out infinite 1s; }
.f3 { width: 140px; bottom: 8%; left: 10%; animation: bob 8s ease-in-out infinite 2s; }
.f4 { width: 100px; bottom: 12%; right: 8%; animation: bob 5s ease-in-out infinite 0.5s; }

.panel {
  max-width: 1000px;
  margin: 32px auto;
  padding: 32px 20px;
  background: rgba(244, 244, 244, 0.95);
  border: 4px solid var(--black);
  border-radius: 16px;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.cards article {
  padding: 16px;
  border: 3px solid var(--red);
  border-radius: 12px;
  background: #fff;
}
.cards img { width: 72px; height: 72px; }


footer {
  margin-top: 48px;
  padding: 24px 16px;
  text-align: center;
  background: var(--black);
  color: var(--white);
  border-top: 4px solid var(--red);
}
footer p { margin: 8px 0 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-18px) rotate(8deg); } }

@media (max-width: 560px) {
  .float { display: none; }
  .topbar nav { gap: 10px; font-size: 0.9rem; }
  .brand { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .float { animation: none; }
  html { scroll-behavior: auto; }
}