/* =========================================================
   KULTURKAUFHALLE — Prototyp
   Gemeinsame Styles / Design-Tokens
   ========================================================= */

@font-face {
  font-family: 'Kaufhalle';
  src: url('fonts/Kaufhallefont1-normal.woff2') format('woff2'),
       url('fonts/Kaufhallefont1-normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Artist- / Akzentfarben (Reihenfolge aus Referenz links->rechts) --- */
  --c-dunkelgruen:   #343a37;
  --c-hellgruen:     #84997c;
  --c-dunkelbraun:   #6b5840;
  --c-hellbraun:     #a09280;
  --c-blassorange:   #cb7c67;
  --c-frechetorange: #ef6659;
  --c-hellorange:    #f7931e;
  --c-lila:          #b271bc;
  --c-weiss:         #ffffff;
  --c-schwarz:       #000000;

  /* --- Innenansicht (Kaufhalle) --- */
  --c-rot:           #e30613;   /* Standard-Rot der Innenansicht */
  --c-magenta:       #9e005d;
  --c-gruen:         #39b54a;
  --c-gelb:          #d9e021;

  /* --- Struktur / UI --- */
  --bg-grau:         #666666;   /* Seitenhintergrund Ladescreen/Hub */
  --hell:            #cccccc;   /* heller Logo-Teil / Platzhalter */
  --weiss:           #ffffff;
  --schwarz:         #111111;

  --font: 'Kaufhalle', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg-grau);
  color: var(--schwarz);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Font auf möglichst alle Textelemente */
h1, h2, h3, h4, p, a, button, span, li, div, label {
  font-family: var(--font);
}

/* ---------- generische Screen-Zentrierung ---------- */
.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font);
  font-size: 1.4rem;
  letter-spacing: .04em;
  padding: .55em 1.4em;
  border: none;
  border-radius: 4px;
  background: var(--c-blassorange);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }

/* kleiner Top-Toggle (bunt/rot) */
.toggle-bar {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex; gap: 8px;
  background: rgba(0,0,0,.35);
  padding: 6px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.toggle-bar button {
  font-family: var(--font);
  font-size: 1rem;
  padding: .3em 1em;
  border: none; border-radius: 999px;
  background: transparent; color: #fff;
  cursor: pointer; opacity: .6;
  transition: opacity .15s, background .15s;
}
.toggle-bar button.active { opacity: 1; background: rgba(255,255,255,.2); }

/* kleines Kaufhalle-Logo oben links (zurück zum Hub) */
.home-logo {
  position: fixed;
  top: 14px; left: 14px;
  width: 84px; height: auto;
  z-index: 50;
  cursor: pointer;
  transition: transform .15s ease;
}
.home-logo:hover { transform: scale(1.06) rotate(-2deg); }

/* ---------- Ladescreen-Logo ---------- */
.loader { width: min(78vw, 440px); max-width: 440px; }
.loader svg { display: block; width: 100%; height: auto; }
@media (min-width:768px){ .loader { width:min(38vw,520px); max-width:520px; } }

.logo-color { color: var(--c-dunkelgruen); }

/* Farbwechsel-Animation (10 Farben, je 1s) */
@keyframes colorswitch {
  0%   { color: var(--c-dunkelgruen); }
  10%  { color: var(--c-hellgruen); }
  20%  { color: var(--c-dunkelbraun); }
  30%  { color: var(--c-hellbraun); }
  40%  { color: var(--c-blassorange); }
  50%  { color: var(--c-frechetorange); }
  60%  { color: var(--c-hellorange); }
  70%  { color: var(--c-lila); }
  80%  { color: var(--c-weiss); }
  90%  { color: var(--c-schwarz); }
  100% { color: var(--c-dunkelgruen); }
}
.animate-colors { animation: colorswitch 10s step-end infinite; }

/* ---------- Navigation / Footer-Links ---------- */
.footer-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  justify-content: center;
  padding: 10px;
  background: rgba(0,0,0,.4);
  z-index: 40;
}
.footer-nav a {
  color: #fff; text-decoration: none; font-size: .95rem; opacity: .8;
}
.footer-nav a:hover { opacity: 1; text-decoration: underline; }