/* =========================================================
   SHOWROOM — Basis-Designsystem
   Konzept: privater Vorführraum / Akkreditierung
   ========================================================= */

@font-face {
  font-family: 'Fraunces';
  src: local('Fraunces');
}

:root {
  /* Farbe */
  --ink:        #15151a;   /* Bühnenschwarz, Basis-Hintergrund */
  --ink-2:      #1e1e26;   /* leicht angehobene Fläche */
  --ink-3:      #2a2a34;   /* Karten / Rahmen */
  --paper:      #eee9e2;   /* warmes Off-White für Text */
  --paper-dim:  #b9b4ac;   /* gedämpfter Text */
  --brass:      #b08d57;   /* Messing-Akzent */
  --brass-bright: #d4af74;
  --signal:     #8a3324;   /* gedämpftes Rot — Warnung / vertraulich */
  --signal-bright: #c9512f;

  /* Typografie */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* Layout */
  --radius: 3px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(176,141,87,0.06), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(176,141,87,0.05), transparent 50%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; line-height: 1.6; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--brass); color: var(--ink); }

/* Sichtbarer Fokus für Tastaturnutzung */
:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Perforation — Signatur-Element, wiederkehrend als "Ticket"-Trenner */
.perf {
  height: 14px;
  background-image: radial-gradient(circle, var(--ink) 3.5px, transparent 3.6px);
  background-size: 20px 14px;
  background-position: center;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}