/* ==========================================================================
   theme.css — MARKE. Das Einzige, was bei einer neuen Person neben links.js
   und fonts/ getauscht wird. Struktur liegt in style.css.
   Werte 1:1 aus dem Sonneborn Design System (tokens/colors.css,
   tokens/typography.css, tokens/effects.css) und assets/site.css der
   Website martin.sonnelink.de.

   Diese Datei wird NACH style.css geladen: unten stehen wenige Regeln, die
   Sonneborn-Signaturen der Website nachbauen (Marker-Block, Wortmarke).
   ========================================================================== */

/* Alle drei Familien: SIL Open Font License 1.1 — keine Domainbindung.
   unicode-range wie auf der Website: latin-ext wird nur geladen, wenn ein
   Zeichen daraus wirklich vorkommt. */

@font-face {
  font-display: block;
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: block;
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  src: url('fonts/libre-franklin-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  src: url('fonts/libre-franklin-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Grundfarben des Design Systems — GRAU · WEISS · ROT.
     Zeitungspapier, echte Tinte, ein lautes Agitprop-Rot, das alles Schreien
     übernimmt. */
  --red-500: #981436;          /* PARTEI-Logo-Rot — primär */
  --red-600: #7f102d;          /* Hover */
  --red-700: #630a22;          /* gedrückt */
  --ink-900: #141210;          /* Überschriften-Tinte, Hero-Grund */
  --ink-600: #5b5651;          /* Nebentext */
  --ink-200: #e4ded4;          /* Haarlinien */
  --paper: #f6f3ec;            /* warmes Zeitungspapier */
  --black: #0e0d0c;            /* Fußleiste */
  --on-dark: #f3efe8;          /* Schrift auf Dunkel */

  /* Rollen — hier greift die Seite zu */
  --ground: var(--ink-900);                    /* Seitenfläche = der dunkle Hero der Website */
  --ground-ink: #ffffff;                       /* Schrift auf der Fläche (hero-name ist #fff) */
  --ground-ink-soft: rgb(243 239 232 / 0.72);  /* Nebenzeilen auf Dunkel — aus Papier getönt */

  --header: var(--paper);                      /* die Papierleiste der Website */
  --header-ink: var(--ink-900);
  --header-ink-soft: var(--red-600);           /* „Krawall & Satire“ steht in Rot */
  --header-accent: var(--red-600);             /* SONNEBORN in der Wortmarke */
  --header-rule: var(--ink-200);               /* Haarlinie unter der Leiste */
  --header-pad-y: 0.9rem;                      /* Leiste ~82 px hoch wie .site-header (86) */
  --main-pad-top: calc(var(--outer-spacing) * 1.25); /* Luft zwischen Papierleiste und Blatt */

  --sheet: var(--paper);                       /* das Blatt: Zeitungspapier */
  --sheet-ink: var(--ink-900);
  --sheet-ink-soft: var(--ink-600);
  --sheet-rule: var(--ink-200);
  --sheet-shadow: 6px 6px 0 var(--red-500);    /* Siebdruck-Versatz, die Signatur des Systems */

  --banner: var(--red-500);                    /* das rote EU-Band der Website */
  --banner-ink: #ffffff;
  --banner-ink-soft: rgb(255 255 255 / 0.85);
  --banner-active: var(--red-700);             /* Band ist schon rot: Hover dunkelt deutlich ab (1,6:1) */

  --active: var(--red-500);                    /* Berührung = Rot (Button-Grammatik) */
  --active-ink: #ffffff;

  --footer: var(--black);
  --footer-ink: rgb(243 239 232 / 0.78);
  --footer-rule: rgb(243 239 232 / 0.15);      /* Haarlinie über dem Fuß, wie footer-bar */
  --footer-sep: transparent;                   /* keine Trennstriche zwischen Kanälen */

  /* Drei Stimmen: Plakat (Anton), Zeitung (Libre Franklin), Kolumne (Spectral) */
  --font-sans: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;   /* Riesenwörter, Banner, Blatt-Titel */
  --font-headline: var(--font-sans);                               /* Wortmarke, Zeilen-Titel */
  --font-note: 'Spectral', Georgia, 'Times New Roman', serif;      /* Notizzeilen = hero-lead */
  --weight-body: 400;
  --weight-strong: 700;
  --weight-display: 400;       /* Anton hat nur einen Schnitt */
  --weight-headline: 900;      /* Franklin Black wie brand-name / btn-cta */
  --tracking-display: 0.005em; /* --ls-poster */
  --leading-display: 0.9;      /* Anton sitzt eng, wie hero-name (.86) */
}

/* --------------------------------------------------------------------------
   Sonneborn-Signaturen — Regeln, die über die Rollen hinausgehen.
   -------------------------------------------------------------------------- */

/* Wortmarke wie .brand der Website: Name über der Unterzeile („Krawall & Satire“) */
.logo-container {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.25rem;
}

.logo {
  letter-spacing: 0.02em;
}

.logo-sub {
  letter-spacing: 0.2em;
}

/* Die Marke „Links“ rechts im Kopf: Tinte statt Rot, damit das Rot der Unterzeile gehört */
.section-mark {
  border-left-color: var(--ink-200);
  color: var(--ink-600);
  padding-left: 0.8rem;
}

/* Icon-Reihe wie .site-header .social der Website: Tinte-700, Berührung Rot */
.channel {
  color: #3a3634;
}

/* Anton ist schmal: Banner- und Blatt-Titel eine Stufe größer als in der
   Berg-Grammatik, damit sie das Gewicht der Website-Titel (≥ 24 px) halten */
.banner-label {
  font-size: 1.5rem;
}

.sheet-title {
  font-size: 1.5rem;
}

@media (min-width: 500px) {
  .banner-label { font-size: 1.9rem; }
  .sheet-title { font-size: 1.75rem; }
}

/* Notizen in der Kolumnenstimme: Spectral hat eine kleine x-Höhe, eine Stufe größer */
.row-note,
.banner-note {
  font-size: 1rem;
}

/* Riesenwörter: Berührung füllt rot (Marker-Grammatik) statt zu unterstreichen —
   Anton hat keinen Platz für eine Unterstreichung, sie liefe in die URL-Zeile.
   Das Polster steht immer, damit beim Hover nichts springt — alle Wörter
   teilen die Blockkante mit dem Marker-Wort. */
.menu-label {
  border-radius: 8px 16px 9px 15px;
  padding: 0.14em 0.2em 0.1em;
  transition: background-color 0.11s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu-item:hover .menu-label,
.menu-item:focus-visible .menu-label,
.menu-item:active .menu-label {
  background: var(--red-500);
  text-decoration: none;
}

/* Der rot gewischte Marker-Block des Heros („SONNEBORN“): leicht schräg,
   organisch gerundet, mit hartem Schlagschatten. Ein Wort pro Seite. */
.menu-item--accent .menu-label {
  background: var(--red-500);
  box-shadow: 5px 6px 0 rgb(20 18 16 / 0.32);
  margin-top: 0.15em;
  transform: rotate(-1.8deg);
  transform-origin: left center;
}

.menu-item--accent:hover .menu-label,
.menu-item--accent:focus-visible .menu-label,
.menu-item--accent:active .menu-label {
  background: var(--red-600);
}

/* Anton ist schmal: ab Desktop auf das Maß des Hero-Namens (Website: clamp 52–120 px).
   7.2vw statt 8.8vw, damit PARLAMENT bei 1024 px (Menüspalte 370 px) auf einer
   Zeile bleibt — ein Signaturwort im Marker-Block trennt nie (hyphens: manual). */
.menu-label {
  hyphens: manual;
  overflow-wrap: normal;
}

@media (min-width: 1024px) {
  .menu-label {
    font-size: clamp(4rem, 7.2vw, 7.5rem);
  }
}

/* Das Band der Website (.eu .wrap) setzt den Pfeil an die rechte Kante */
@media (min-width: 1024px) {
  .banner {
    justify-content: space-between;
  }
}

/* Anton hat kaum Unterlänge: die URL-Zeile braucht Luft zum Wort (Berg: 0.05rem) */
.menu-url {
  margin-top: 0.35rem;
  padding-left: 0.35rem;
}

@media (min-width: 1024px) {
  .menu-url { margin-top: 0.25rem; }
}

.menu-item--accent .menu-url {
  margin-top: 0.55rem;
}

/* Website: Hover dunkelt ab, Druck rückt in den Schatten („stempelt“) */
.row:active,
.banner:active,
.social:active {
  background-color: var(--red-700);
}

/* Fokus auf dem roten Band: weißer Ring innen — Rot auf Rot sähe niemand */
.banner:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}