/* ==========================================================================
   Atelier Noir — Grundlagen: Variablen, Reset, Typo-Skala, Raster-Utilities
   ========================================================================== */

:root{
  /* Markenfarben (fest, aus Design-Spec) */
  --ink:        #1A1714; /* Kohleschwarz */
  --paper:      #F3ECE1; /* Warmes Elfenbein */
  --brass:      #B08D4F; /* Gebürstetes Messing */

  /* abgeleitete Töne (oklch, aus den Markenfarben gerechnet) */
  --ink-soft:     oklch(23% 0.015 55);
  --ink-muted:    oklch(45% 0.02 55);
  --paper-dim:    oklch(91% 0.02 80);
  --paper-line:   oklch(85% 0.02 75);
  --brass-soft:   oklch(66% 0.09 75 / 0.55);
  --brass-dim:    oklch(66% 0.09 75 / 0.14);

  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --bg: var(--paper);
  --bg-dim: var(--paper-dim);
  --accent: var(--brass);
  --line: var(--paper-line);
  --radius: 2px;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Typo-Skala, Verhältnis 1.333 (perfect fourth), Basis 18px */
  --step--2: 0.633rem;
  --step--1: 0.844rem;
  --step-0:  1.125rem;
  --step-1:  1.5rem;
  --step-2:  2rem;
  --step-3:  clamp(1.85rem, 1.4rem + 2vw, 2.667rem);
  --step-4:  clamp(2.35rem, 1.7rem + 3vw, 3.556rem);
  --step-5:  clamp(2.7rem, 1.7rem + 4.6vw, 4.741rem);

  /* Sektions-Rhythmus: bewusst unterschiedliche Abstände, keine Wiederholung */
  --space-2xs: 0.75rem;
  --space-xs: 1.25rem;
  --space-sm: 2rem;
  --space-md: 4rem;
  --space-lg: 6rem;
  --space-xl: 8rem;
  --space-2xl: 10rem;

  --maxw: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur-med: 280ms;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

html{ overflow-x: hidden; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

img, svg, video, iframe{ max-width: 100%; height: auto; display: block; }
svg{ max-width: 100%; height: auto; }

.icon{
  width: 1.4em;
  height: 1.4em;
  max-width: 32px;
  max-height: 32px;
  flex: 0 0 auto;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
}

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

h1{ font-size: var(--step-5); font-weight: 500; }
h2{ font-size: var(--step-4); }
h3{ font-size: var(--step-3); }
h4{ font-size: var(--step-2); font-weight: 600; }

p{ margin: 0 0 1.2em; max-width: 62ch; text-wrap: pretty; }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before{
  content: "";
  display: block;
  width: 2.25em;
  height: 1px;
  background: currentColor;
}

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection{ background: var(--accent); color: var(--paper); }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.9em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn:active{ transform: scale(0.98); }

.btn--accent{ border-color: var(--accent); color: var(--ink); }
.btn--accent:hover{ background: var(--accent); color: var(--ink); }

.btn--on-dark{ color: var(--paper); border-color: var(--paper-line); }
.btn--on-dark:hover{ background: var(--paper); color: var(--ink); }

@media (max-width: 900px){
  :root{ --gutter: 1.25rem; }
}