/* ================================================================
   KLANGZENTRALE — Base
   Reset · Body · Container · Type Scale · Utilities
   
   Lädt nach tokens.css. Keine Komponenten-Klassen hier.
   ================================================================ */

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; border-radius: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; }

/* ----------------------------------------------------------------
   BODY
   ---------------------------------------------------------------- */
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, li { text-wrap: pretty; }

/* ----------------------------------------------------------------
   CONTAINER
   ---------------------------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ----------------------------------------------------------------
   TYPE SCALE
   ---------------------------------------------------------------- */
.t-hero {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.t-h1 {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.t-h2 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.2;
}

.t-lead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.t-body {
  font-size: 0.9375rem;
  line-height: 1.8;
}

.t-mono {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.t-label {
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   TAPE DIVIDER
   ---------------------------------------------------------------- */
.tape {
  height: 3px;
  background: var(--yellow);
  width: 100%;
}

/* ----------------------------------------------------------------
   UTILITIES — Spacing
   ---------------------------------------------------------------- */
.mt-2  { margin-top: var(--s-2); }
.mt-3  { margin-top: var(--s-3); }
.mt-4  { margin-top: var(--s-4); }
.mt-6  { margin-top: var(--s-6); }
.mt-8  { margin-top: var(--s-8); }
.mt-12 { margin-top: calc(var(--s-8) * 1.5); }
.mt-20 { margin-top: calc(var(--s-8) * 2.5); }

.mb-2  { margin-bottom: var(--s-2); }
.mb-3  { margin-bottom: var(--s-3); }
.mb-4  { margin-bottom: var(--s-4); }
.mb-6  { margin-bottom: var(--s-6); }
.mb-8  { margin-bottom: var(--s-8); }

/* ----------------------------------------------------------------
   UTILITIES — Color
   ---------------------------------------------------------------- */
.text-yellow { color: var(--yellow); }
.text-violet { color: var(--violet); }
.text-muted  { color: var(--muted); }
.text-inv    { color: var(--text-inv); }

/* ----------------------------------------------------------------
   UTILITIES — Accessibility
   ---------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   PLACEHOLDER HATCHING
   Für Bild-Slots ohne echtes Foto
   ---------------------------------------------------------------- */
.placeholder-hatch {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px,
    transparent 0, transparent 50%
  );
  background-size: 14px 14px;
}

/* ----------------------------------------------------------------
   STATUS MODE
   Einziger Schalter: body[data-status="frei"] | body[data-status="voll"]
   CMS/GRAV: KZ_STATUS per Template-Variable in body-Tag schreiben.
   Beispiel Twig: <body data-status="{{ config.plugins.kz.status }}">
   ---------------------------------------------------------------- */

/* "frei"-only Elemente: standardmässig versteckt */
.kz-frei,
.kz-frei-block { display: none !important; }

/* Status "frei" aktivieren */
body[data-status="frei"] .kz-frei        { display: flex !important; }
body[data-status="frei"] .kz-frei-block  { display: block !important; }
body[data-status="frei"] .kz-voll        { display: none !important; }
body[data-status="frei"] .kz-voll-block  { display: none !important; }

/* ----------------------------------------------------------------
   REDUCED MOTION SAFEGUARD
   Alle Animationen / Transitions auf Minimum kürzen
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}