/* Grundsystem: Tokens, Planraster, Schriftfeld, Bemassung.
   Die ganze Seite ist als technische Zeichnung gedacht, deshalb liegt fast
   alles auf einem sichtbaren Raster aus Haarlinien. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:root {
  --papier:       #EDEDE8;
  --papier-tief:  #E3E3DC;
  --papier-kante: #D6D6CD;
  --tinte:        #232628;
  --tinte-matt:   #5E6469;
  --beton:        #7C8085;
  --stahl:        #C3C8CB;
  --schatten:     #191C1E;
  --schatten-2:   #23272A;
  --signal:       #CE1126;
  --natrium:      #E39B3C;

  --linie:       rgba(35, 38, 40, .20);
  --linie-stark: rgba(35, 38, 40, .46);
  --linie-hell:  rgba(237, 237, 232, .22);

  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --body:    "Schibsted Grotesk", system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, monospace;

  --rundung: 6px;
  --rundung-klein: 4px;

  --rand: clamp(1.15rem, 4vw, 3.5rem);
  --spalte: 1560px;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .18vw, 1.09rem);
  line-height: 1.62;
  font-weight: 400;
}

.huelle { max-width: var(--spalte); margin-inline: auto; padding-inline: var(--rand); }

/* ---- Typografie ---------------------------------------------------- */

.titel-xl, .titel-l, .titel-m {
  font-family: var(--display);
  font-weight: 800;
  line-height: .92;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.titel-xl { font-size: clamp(3rem, 1.4rem + 6.2vw, 7rem); }
.titel-l  { font-size: clamp(2.2rem, 1.1rem + 4.6vw, 5rem); }
.titel-m  { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); }

.vorlauf {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-matt);
  font-weight: 500;
}
.fliess { max-width: 62ch; }
.fliess + .fliess { margin-top: 1rem; }
.matt { color: var(--tinte-matt); }
.gross { font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem); line-height: 1.5; }

/* ---- Schriftfeld (Zeichnungskopf) ---------------------------------- */

.schriftfeld {
  position: sticky; top: 0; z-index: 60;
  background: var(--schatten);
  color: var(--papier);

}
.schriftfeld__raster {
  max-width: var(--spalte); margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
}
.zeichen {
  display: flex; align-items: center;
  padding: .5rem var(--rand);
}
.zeichen img { width: clamp(94px, 12vw, 130px); height: auto; }

.kopf-nav {
  display: flex; align-items: center;
  gap: clamp(.8rem, 2.6vw, 2.4rem);
  justify-content: flex-end;
  padding-inline: clamp(.75rem, 2vw, 1.6rem);
}
.kopf-nav a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(237, 237, 232, .68);
  padding: .35rem 0;
  position: relative;
  transition: color .25s;
}
.kopf-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.16, .84, .28, 1);
}
.kopf-nav a:hover, .kopf-nav a:focus-visible { color: var(--papier); }
.kopf-nav a:hover::after, .kopf-nav a[aria-current]::after { transform: scaleX(1); }
.kopf-nav a[aria-current] { color: var(--papier); }

/* Schmal: Menue als natives Popover, laeuft ohne JS.
   Breit wird das Popover-Verhalten wieder zur normalen Leiste. */
.menue-knopf { display: none; }
@supports selector(:popover-open) {
  @media (min-width: 761px) {
    .kopf-nav[popover] {
      display: flex; position: static; inset: auto; margin: 0;
      width: auto; height: auto; overflow: visible;
      border: 0; background: none; color: inherit;
    }
  }
  @media (max-width: 760px) {
    .menue-knopf {
      display: inline-flex; align-items: center; justify-self: end; align-self: center;
      margin-right: var(--rand);
      min-height: 44px; padding: 0 1rem;
      font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--papier); background: none;
      border: 1px solid rgba(237,237,232,.36); border-radius: var(--rundung-klein);
      cursor: pointer;
      transition: border-color .16s ease, transform .12s ease-out;
    }
    .menue-knopf:active { transform: scale(.97); }
    /* die Basisregel display:flex wuerde das geschlossene Popover sonst zeigen */
    .kopf-nav[popover]:not(:popover-open) { display: none; }
    .kopf-nav[popover]:popover-open {
      position: fixed; inset: var(--kopfhoehe, 64px) 0 auto 0;
      margin: 0; width: 100%; height: auto;
      display: flex; flex-direction: column; align-items: stretch; gap: 0;
      padding: .4rem var(--rand) 1.2rem;
      border: 0; background: var(--schatten); color: var(--papier);
      box-shadow: 0 18px 30px -12px rgba(10,12,13,.5);
      opacity: 1; transform: none;
      transition: opacity .2s cubic-bezier(.2,.8,.3,1), transform .2s cubic-bezier(.2,.8,.3,1);
    }
    @starting-style {
      .kopf-nav[popover]:popover-open { opacity: 0; transform: translateY(-6px); }
    }
    .kopf-nav[popover] a { padding: .95rem 0; font-size: .86rem; }
    .kopf-nav[popover] a::after { bottom: .6rem; right: auto; width: 2.4rem; }
  }
}

/* ---- Knoepfe -------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  padding: .92rem 1.5rem;
  border-radius: var(--rundung);
  border: 1px solid var(--tinte);
  background: var(--tinte); color: var(--papier);
  transition: background .3s cubic-bezier(.16,.84,.28,1), color .3s, border-color .3s;
}
.knopf:hover, .knopf:focus-visible { background: var(--signal); border-color: var(--signal); }
.knopf--offen { background: transparent; color: var(--tinte); }
.knopf--offen:hover, .knopf--offen:focus-visible { background: var(--tinte); color: var(--papier); }
.knopf--linie { background: transparent; color: var(--papier); border-color: rgba(237,237,232,.42); }
.knopf--linie:hover, .knopf--linie:focus-visible { background: var(--papier); color: var(--schatten); border-color: var(--papier); }

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

/* ---- Dunkle Kapitel ------------------------------------------------- */

.kapitel-dunkel {
  background: var(--schatten); color: var(--papier);
  --tinte: #EDEDE8; --tinte-matt: #969CA1;
  --linie: rgba(237,237,232,.16); --linie-stark: rgba(237,237,232,.34);
}
.kapitel-dunkel .knopf { border-color: var(--papier); background: var(--papier); color: var(--schatten); }
.kapitel-dunkel .knopf:hover, .kapitel-dunkel .knopf:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--papier); }
.kapitel-dunkel .knopf--offen { background: transparent; color: var(--papier); border-color: rgba(237,237,232,.42); }

.abschnitt { padding-block: clamp(3rem, 8vw, 7rem); }
.abschnitt--eng { padding-block: clamp(2.6rem, 6vw, 5rem); }

/* ---- Bewegung zuruecknehmen ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}