/* Variable Fonts: Bricolage Grotesque (opsz/wdth/wght) und Archivo (wdth/wght). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(../fonts/bricolage-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-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(../fonts/bricolage-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-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-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-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-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-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-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-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-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}

/* =========================================================================
   marcreinke.de — „Sonderheft"
   Ein Riso-gedrucktes Fanzine. Vollflächen in Leuchtfarben, Halbtonraster,
   geklebte Schnipsel, Stempel, Papierkorn. Kein Framework.

   1 Tokens · 2 Reset · 3 Typografie · 4 Raster & Flächen · 5 Bausteine
   6 Kopf · 7 Titelseite · 8 Sektionen · 9 Fußzeile · 10 Bewegung
   ========================================================================= */

/* ---------- 1 · Tokens ----------------------------------------------- */
:root {
  /* Vier Druckplatten, mehr hat eine Riso-Maschine hier nicht nötig. */
  --ink:    #16131f;
  --pink:   #ff3d8b;
  --blue:   #2b2bf0;
  --acid:   #e4ff3a;

  /* Papier */
  --paper:      #e7e3f2;   /* kaltes Kopierpapier, kein Cremeweiß */
  --card:       #fbfaff;   /* ausgeschnittenes Blatt, liegt obenauf */
  --ink-2-base:    #4b4560;
  --ink-3-base:    #635b7d;
  --hairline-base: #16131f;
  --ink-2:    var(--ink-2-base);
  --ink-3:    var(--ink-3-base);
  --hairline: var(--hairline-base);

  /* Textfarbe auf den Vollflächen */
  --on-pink: #16131f;
  --on-blue: #fbfaff;
  --on-acid: #16131f;

  /* Die dunkle Platte der Fußzeile dreht sich nie mit dem Thema mit. */
  --slab:      #16131f;
  --slab-text: #e7e3f2;

  /* Rosa und Blau brauchen als Kleintext mehr Tiefe als als Fläche. */
  --pink-ink: #c8115e;
  --blue-ink: #2b2bf0;

  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-text:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-meta:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --size-meta:  0.72rem;
  --size-small: 0.875rem;
  --size-text:  clamp(1rem, 0.95rem + 0.25vw, 1.0938rem);
  --size-lead:  clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  --h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --h2: clamp(2.4rem, 1.4rem + 4.2vw, 5rem);
  --h1: clamp(3.4rem, 0.5rem + 13.5vw, 11rem);

  --wrap-width: min(100% - (2 * var(--gutter)), 84rem);
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --rhythm: clamp(4rem, 8vw, 8rem);

  --edge: 3px;                        /* Standardstärke der Ränder */
  --shadow: 0.4rem 0.4rem 0 var(--ink);
  --shadow-lift: 0.75rem 0.75rem 0 var(--ink);

  --speed: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;
}

/* Nachtschicht: dieselben Druckfarben, anderes Papier. */
:root[data-theme='dark'] {
  --ink:      #f3f0fb;
  --paper:    #131120;
  --card:     #1e1b30;
  --ink-2-base:    #b0a9c9;
  --ink-3-base:    #948cb2;
  --hairline-base: #453e63;
  --ink-2:    var(--ink-2-base);
  --ink-3:    var(--ink-3-base);
  --hairline: var(--hairline-base);
  --pink:     #ff5c9e;
  --blue:     #6b6bff;
  --acid:     #e4ff3a;
  --pink-ink: #ff5c9e;
  --blue-ink: #9b9bff;
  --on-pink:  #16131f;
  --on-blue:  #0d0b16;
  --shadow:      0.4rem 0.4rem 0 #000;
  --shadow-lift: 0.75rem 0.75rem 0 #000;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink:      #f3f0fb;
    --paper:    #131120;
    --card:     #1e1b30;
    --ink-2-base:    #b0a9c9;
    --ink-3-base:    #948cb2;
    --hairline-base: #453e63;
    --ink-2:    var(--ink-2-base);
    --ink-3:    var(--ink-3-base);
    --hairline: var(--hairline-base);
    --pink:     #ff5c9e;
    --blue:     #6b6bff;
    --acid:     #e4ff3a;
    --pink-ink: #ff5c9e;
    --blue-ink: #9b9bff;
    --on-pink:  #16131f;
    --on-blue:  #0d0b16;
    --shadow:      0.4rem 0.4rem 0 #000;
    --shadow-lift: 0.75rem 0.75rem 0 #000;
    color-scheme: dark;
  }
}

/* ---------- 2 · Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--size-text);
  font-variation-settings: 'wdth' 100;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Papierkorn über allem – fängt die Sterilität des Bildschirms ab. */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] body::after { mix-blend-mode: screen; opacity: 0.2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body::after { mix-blend-mode: screen; opacity: 0.2; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:where(a) { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
::selection { background: var(--acid); color: var(--on-acid); }

/* ---------- 3 · Typografie ------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.meta {
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 32, 'wdth' 100;
  font-size: var(--size-lead);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.flow { color: var(--ink-2); max-width: 44ch; }
.flow p + p { margin-top: 0.9em; }

/* Textlink mit Marker-Streifen, der beim Zeigen aufgezogen wird. */
.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--acid), var(--acid));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.18em;
  box-decoration-break: clone;
  font-weight: 600;
  transition: background-size var(--speed) var(--ease);
}
.link:hover { background-size: 100% 0.72em; color: var(--on-acid); }

.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }

/* ---------- 4 · Raster & Flächen ------------------------------------- */
.wrap { width: var(--wrap-width); margin-inline: auto; }

/* Ein Spread ist eine Vollfläche über die ganze Breite. */
.spread { position: relative; }
.spread > .wrap { padding-block: var(--rhythm); position: relative; z-index: 1; }

.spread--pink { background: var(--pink); color: var(--on-pink); --ink-2: var(--on-pink); --ink-3: color-mix(in srgb, var(--on-pink) 94%, transparent); }
.spread--blue { background: var(--blue); color: var(--on-blue); --ink-2: var(--on-blue); --ink-3: color-mix(in srgb, var(--on-blue) 94%, transparent); --hairline: var(--on-blue); }
.spread--acid { background: var(--acid); color: var(--on-acid); --ink-2: var(--on-acid); --ink-3: color-mix(in srgb, var(--on-acid) 94%, transparent); --hairline: var(--on-acid); }

/* Halbtonraster auf den Vollflächen – der Riso-Punkt. */
.spread--pink::before, .spread--blue::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 9px 9px;
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}

.legacy-anchor { display: block; scroll-margin-top: 7rem; }
.spread[id], [id].wrap { scroll-margin-top: 5rem; }

.skip-link {
  position: absolute;
  left: var(--gutter); top: -5rem;
  z-index: 300;
  background: var(--acid); color: var(--on-acid);
  border: var(--edge) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-meta); font-size: var(--size-meta);
  text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Rubrikkopf: Titel riesig, daneben eine Notiz im Stempelsatz. */
.rubric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.rubric__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 72, 'wdth' 88;
  font-size: var(--h2);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.rubric__note {
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 42ch;
  padding-bottom: 0.35rem;
}

/* ---------- 5 · Bausteine -------------------------------------------- */

/* Knopf mit hartem Schatten, der beim Drücken einrastet. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: var(--edge) solid var(--ink);
  background: var(--acid);
  color: var(--on-acid);
  box-shadow: var(--shadow);
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
              background var(--speed) var(--ease);
}
.button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lift); background: var(--pink); color: var(--on-pink); }
.button:active { transform: translate(0.4rem, 0.4rem); box-shadow: 0 0 0 var(--ink); }
.button .icon { transition: transform var(--speed) var(--ease); }
.button:hover .icon { transform: translateX(4px); }

.button--ghost { background: var(--card); color: var(--ink); }
.button--ghost:hover { background: var(--blue); color: var(--on-blue); }

/* Auf farbigen Flächen bleibt der Rahmen schwarz, damit der Knopf klebt. */
.spread--blue .button { border-color: var(--on-blue); box-shadow: 0.4rem 0.4rem 0 var(--on-blue); }
.spread--blue .button:hover { box-shadow: 0.75rem 0.75rem 0 var(--on-blue); }
.spread--blue .button:active { box-shadow: 0 0 0 var(--on-blue); }

/* Stempel: das Genre einer Leseprobe, schief aufgedrückt. */
.stamp {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  padding: 0.2rem 0.55rem;
  transform: rotate(-2.5deg);
  color: var(--ink);
}
.stamp--pink { color: var(--pink-ink); }
.stamp--blue { color: var(--blue-ink); }
.stamp--ink  { color: var(--ink); }

/* Aufkleber: schief geklebt, harter Rand, fasst eine einzelne Tatsache. */
.sticker {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0.7rem 1rem 0.8rem;
  transform: rotate(var(--tilt, -2deg));
  transition: transform var(--speed) var(--ease-back);
}
.sticker:hover { transform: rotate(0deg) scale(1.04); }
.sticker__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 40, 'wdth' 92;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.sticker__label {
  font-family: var(--font-meta);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  hyphens: auto;
  overflow-wrap: anywhere;
}
.sticker { max-width: 14rem; }
.sticker--pink { background: var(--pink); }
.sticker--pink .sticker__value, .sticker--pink .sticker__label { color: var(--on-pink); }
.sticker--acid { background: var(--acid); }
.sticker--acid .sticker__value, .sticker--acid .sticker__label { color: var(--on-acid); }
.sticker--blue { background: var(--blue); }
.sticker--blue .sticker__value, .sticker--blue .sticker__label { color: var(--on-blue); }

/* Klebestreifen, der Bilder und Karten aufs Papier heftet. */
.tape {
  position: absolute;
  width: 7rem; height: 2rem;
  background: color-mix(in srgb, var(--acid) 78%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* Alles, was als ausgeschnittenes Blatt auf einer Farbfläche liegt, muss
   die Textfarben des Papiers zurückholen – sonst erbt es das Weiß der Fläche. */
.patch, .clipping, .station, .card, .snapshot, .sticker, .wallpaper,
dialog, .notice, .icon-button, .nav__list--open {
  color: var(--ink);
  --ink-2: var(--ink-2-base);
  --ink-3: var(--ink-3-base);
  --hairline: var(--hairline-base);
}
.sticker--pink, .sticker--blue, .notice--error { --ink-3: inherit; }

/* ---------- 6 · Kopf -------------------------------------------------- */
.progress {
  position: fixed; inset: 0 auto auto 0;
  height: 5px; width: 100%;
  background: var(--pink);
  transform-origin: 0 50%;
  transform: scaleX(var(--ratio, 0));
  z-index: 120;
}

/* Laufschrift wie der Aufkleber-Streifen auf einem Heftumschlag. */
.marquee {
  background: var(--acid);
  color: var(--on-acid);
  border-bottom: var(--edge) solid var(--ink);
  overflow: hidden;
  padding-block: 0.45rem;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: slide 34s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.masthead {
  position: sticky; top: 0; z-index: 110;
  background: var(--paper);
  border-bottom: var(--edge) solid var(--ink);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.6rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 24, 'wdth' 84;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.brand__dot {
  width: 0.85rem; height: 0.85rem;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: background var(--speed), transform var(--speed) var(--ease-back);
}
.brand:hover .brand__dot { background: var(--blue); transform: scale(1.35) rotate(20deg); }

.nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.nav__list { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); }
.nav__link {
  position: relative;
  display: block;
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.3rem 0.15rem;
  transition: color var(--speed);
}
.nav__link::before {
  content: '';
  position: absolute; inset: -0.1rem -0.35rem;
  background: var(--pink);
  z-index: -1;
  transform: scaleY(0) rotate(-1.5deg);
  transform-origin: 50% 100%;
  transition: transform var(--speed) var(--ease-back);
}
.nav__link:hover::before,
.nav__link[aria-current]::before { transform: scaleY(1) rotate(-1.5deg); }
.nav__link:hover, .nav__link[aria-current] { color: var(--on-pink); }

.icon-button {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--speed), transform var(--speed) var(--ease-back);
}
.icon-button:hover { background: var(--acid); color: var(--on-acid); transform: rotate(-6deg); }
.icon-button .icon { width: 1.1rem; height: 1.1rem; }

:root[data-theme='dark'] .icon-button__day,
:root:not([data-theme='light']) .icon-button__day { display: none; }
:root[data-theme='dark'] .icon-button__night,
:root:not([data-theme='light']) .icon-button__night { display: block; }
.icon-button__night { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .icon-button__day { display: none; }
  :root:not([data-theme]) .icon-button__night { display: block; }
}
:root[data-theme='light'] .icon-button__day { display: block; }
:root[data-theme='light'] .icon-button__night { display: none; }

.nav__toggle { display: none; }
@media (max-width: 54rem) {
  .nav__list { display: none; }
  .nav__toggle { display: grid; }
  .nav__list--open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card);
    border-bottom: var(--edge) solid var(--ink);
    box-shadow: 0 0.75rem 0 rgb(0 0 0 / 0.12);
    padding: 0 var(--gutter) 0.75rem;
    max-height: calc(100dvh - 9rem);
    overflow-y: auto;
    z-index: 115;
  }
  .nav__list--open .nav__link {
    font-size: 1rem; padding-block: 1rem;
    border-bottom: 2px solid var(--hairline);
  }
  .nav__list--open li:last-child .nav__link { border-bottom: 0; }
}

/* ---------- 7 · Titelseite -------------------------------------------- */
.splash {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* Große Farbfläche, die hinter dem Porträt aus dem Satzspiegel läuft. */
.splash::before {
  content: '';
  position: absolute;
  top: 12%; right: -8vw;
  width: 46vw; aspect-ratio: 1;
  background: var(--blue);
  opacity: 0.9;
  z-index: 0;
  clip-path: polygon(12% 0, 100% 6%, 88% 100%, 0 92%);
}
@media (max-width: 60rem) { .splash::before { display: none; } }

.splash__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.splash__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

/* --- Die Signatur: der fehlregistrierte Name ------------------------- */
.name {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 82;
  font-size: var(--h1);
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.plates {
  position: relative;
  z-index: 0;
  display: block;
  width: max-content;
  max-width: 100%;
}
/* Zwei zusätzliche Druckplatten, die nicht ganz im Passer sitzen. */
.plates::before, .plates::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plates::before { color: var(--pink); }
.plates::after  { color: var(--blue); }
:root[data-theme='dark'] .plates::before,
:root[data-theme='dark'] .plates::after { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plates::before,
  :root:not([data-theme='light']) .plates::after { mix-blend-mode: screen; }
}

/* Beim Laden fahren die Platten in den Stand. Danach hält der Endwert und
   folgt --drift, das beim Scrollen nachgeführt wird. */
.plates::before { animation: register-pink 900ms var(--ease) both; }
.plates::after  { animation: register-blue 900ms var(--ease) both; }
.plates--b::before { animation-delay: 90ms; }
.plates--b::after  { animation-delay: 90ms; }

@keyframes register-pink {
  from { transform: translate(-0.6em, 0.18em) rotate(-1.6deg); opacity: 0; }
  to   { transform: translate(calc(-0.028em - var(--drift, 0px)), 0.02em); opacity: 1; }
}
@keyframes register-blue {
  from { transform: translate(0.55em, -0.16em) rotate(1.4deg); opacity: 0; }
  to   { transform: translate(calc(0.03em + var(--drift, 0px)), -0.022em); opacity: 1; }
}

.name__last { margin-left: 0.055em; }

.splash__standfirst {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 32ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 28, 'wdth' 100;
  font-size: var(--size-lead);
  line-height: 1.24;
  letter-spacing: -0.02em;
}
.splash__standfirst mark {
  background: var(--acid);
  color: var(--on-acid);
  padding: 0 0.15em;
  box-decoration-break: clone;
}

.splash__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Porträt: als Halbton aufs Papier gedruckt und mit Klebeband fixiert. */
.portrait {
  position: relative;
  align-self: end;
  transform: rotate(2deg);
  background: color-mix(in srgb, var(--pink) 62%, #fff);
  border: var(--edge) solid var(--ink);
  box-shadow: var(--shadow-lift);
  transition: transform 500ms var(--ease-back);
}
.portrait:hover { transform: rotate(-1.5deg) scale(1.02); }
.portrait__tape { top: -1rem; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.portrait img {
  width: 100%;
  mix-blend-mode: luminosity;
  filter: contrast(1.25) saturate(0);
}
.portrait::after {          /* Halbtonraster über dem Bild */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.3px);
  background-size: 5px 5px;
}
.portrait__caption {
  position: absolute; left: -0.5rem; bottom: -1.1rem;
  background: var(--ink); color: var(--paper);
  padding: 0.25rem 0.6rem;
  font-family: var(--font-meta); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-2deg);
  z-index: 3;
}

@media (max-width: 60rem) {
  .splash__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 17rem; order: -1; margin-bottom: 1.5rem; }
}

/* Aufkleberleiste mit den Kennzahlen. */
.stickers {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.stickers > li { display: flex; }
.sticker__value, .sticker__label { display: block; }

/* ---------- 8 · Sektionen --------------------------------------------- */

/* 8.1 Profil ---------------------------------------------------------- */
.profile .lead {
  font-variation-settings: 'opsz' 64, 'wdth' 92;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) { .profile { grid-template-columns: 1fr; } }

/* Redaktionen als Aufnäher-Sammlung, wie auf einer Messejacke. */
.patches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 62rem) { .patches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .patches { grid-template-columns: 1fr; } }
.patch {
  position: relative;
  display: flex; flex-direction: column; gap: 0.6rem;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0.75rem 0.75rem 0.9rem;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--speed) var(--ease-back), box-shadow var(--speed) var(--ease);
}
.patch:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: var(--shadow-lift); }
.patch__mark {
  display: block;
  border: 2px solid var(--ink);
  background: #fff;
  aspect-ratio: 175 / 108;
  overflow: hidden;
}
.patch__mark img { width: 100%; height: 100%; object-fit: cover; }
.patch__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 24, 'wdth' 88;
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.patch__name .icon { color: var(--ink-3); }
.patch__foot {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem;
  align-items: center; justify-content: space-between;
  font-family: var(--font-meta); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.patch__years { color: var(--on-acid); background: var(--acid); padding: 0.1rem 0.4rem; }

/* 8.2 Arbeiten — Leseproben als ausgeschnittene Cover ------------------ */
.clippings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.clipping {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--speed) var(--ease-back), box-shadow var(--speed) var(--ease);
}
.clipping:hover, .clipping:focus-visible {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-lift);
}
.clipping__shot { display: block; position: relative; overflow: hidden; border-bottom: var(--edge) solid var(--ink); }
.clipping__shot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  filter: saturate(0.9) contrast(1.02) brightness(1.08);
  transition: transform 500ms var(--ease), filter var(--speed);
}
.clipping:hover .clipping__shot img { transform: scale(1.06); filter: saturate(1.1) contrast(1.15); }
.clipping__shot::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.1px);
  background-size: 4px 4px;
  pointer-events: none;
}
.clipping__stamp { position: absolute; left: 0.7rem; top: 0.7rem; z-index: 2; background: var(--card); }
.clipping__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1rem 1.1rem; flex: 1; }
.clipping__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 32, 'wdth' 92;
  font-size: var(--h3);
  line-height: 1.02;
  letter-spacing: -0.03em;
  flex: 1;
}
.clipping__foot {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-meta); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  border-top: 2px solid var(--hairline);
  padding-top: 0.7rem;
}
/* Die Textlänge als Balken – drei Stufen, so wie sie in den Daten steht. */
.gauge { display: inline-flex; gap: 2px; }
.gauge i { width: 0.55rem; height: 0.55rem; border: 2px solid var(--ink); background: transparent; }
.gauge i.is-on { background: var(--pink); }
.clipping__arrow { margin-left: auto; color: var(--ink); }
.clipping__arrow .icon { width: 1.2rem; height: 1.2rem; transition: transform var(--speed) var(--ease); }
.clipping:hover .clipping__arrow .icon { transform: translateX(5px); }

/* 8.3 Vita — zwei Spuren an einer Linie -------------------------------- */
.timeline { position: relative; padding-left: clamp(1.75rem, 5vw, 3.5rem); }
.timeline::before {
  content: '';
  position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem;
  width: 3px;
  background: repeating-linear-gradient(currentColor 0 8px, transparent 8px 14px);
}

.station, .note { position: relative; }
.station::before, .note::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 5vw, 3.5rem) + 0.45rem);
  top: 1.1rem;
  width: 3px; height: 3px;
}

/* Nebenspur: Lebensdaten als knappe Randnotiz. */
.note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem;
  padding-block: 0.55rem;
  color: var(--ink-2);
}
.note::before {
  width: 0.7rem; height: 0.7rem;
  left: calc(-1 * clamp(1.75rem, 5vw, 3.5rem) + 0.1rem);
  top: 1rem;
  background: transparent;
  border: 3px solid currentColor;
}
.note__year {
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.1em; color: var(--ink-3); min-width: 3.5rem;
}
.note__text { font-size: var(--size-small); }
.note__meta {
  font-family: var(--font-meta); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--acid); color: var(--on-acid); padding: 0.05rem 0.4rem;
}

/* Hauptspur: die Redaktionen als geklebte Karten. */
.station {
  max-width: 54rem;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-block: 1.25rem;
  transform: rotate(var(--tilt, 0deg));
}
.station::before {
  width: 1.1rem; height: 1.1rem;
  left: calc(-1 * clamp(1.75rem, 5vw, 3.5rem) - 0.1rem);
  top: 1.4rem;
  background: var(--pink);
  border: 3px solid currentColor;
  transform: rotate(45deg);
}
.station__year {
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.14em; color: var(--ink-3);
}
.station__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 40, 'wdth' 86;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.station__role { font-weight: 600; margin-top: 0.35rem; }
.station__text { color: var(--ink-2); margin-top: 0.7rem; max-width: 62ch; }
.station__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.9rem; }
.now {
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--pink); color: var(--on-pink);
  border: 2px solid var(--ink);
  padding: 0.1rem 0.5rem;
  transform: rotate(-2deg);
  display: inline-block;
}

/* 8.4 Schnappschüsse — überlappend aufs Papier geklebt ----------------- */
.snapshots {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.snapshot {
  position: relative;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0.5rem 0.5rem 1.6rem;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--speed) var(--ease-back), box-shadow var(--speed) var(--ease);
}
.snapshot:hover { transform: rotate(0deg) scale(1.05); box-shadow: var(--shadow-lift); z-index: 2; }
.snapshot img {
  width: clamp(7rem, 15vw, 11rem); aspect-ratio: 1; object-fit: cover;
  filter: saturate(0.85) contrast(1.08);
}
.snapshot figcaption {
  position: absolute; left: 0.5rem; bottom: 0.4rem;
  font-family: var(--font-meta); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

/* 8.5 Kontakt ---------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) { .contact { grid-template-columns: 1fr; } }

.channel {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.55rem 0.4rem;
  text-decoration: none;
  border-bottom: 2px solid var(--hairline);
  transition: background var(--speed), padding-left var(--speed) var(--ease);
}
.channel:hover { background: var(--acid); color: var(--on-acid); padding-left: 1rem; }
.channel__service {
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  min-width: 6rem; color: var(--ink-3);
}
.channel:hover .channel__service { color: var(--on-acid); }
.channel__value { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 34rem) {
  .channel { flex-direction: column; gap: 0.1rem; }
  .channel__service { min-width: 0; }
}

.copy-row { margin-top: 1.5rem; }

/* Formular auf einer Karteikarte, Felder als beschriftete Linien. */
.card {
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: var(--ink-2);
}
.field label span { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%;
  border: 2px solid var(--ink);
  background: transparent;
  padding: 0.6rem 0.7rem;
  font-size: var(--size-text);
  transition: box-shadow var(--speed) var(--ease), border-color var(--speed);
}
.field input:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0.25rem 0.25rem 0 var(--blue);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field--error input, .field--error textarea { border-color: var(--pink); box-shadow: 0.25rem 0.25rem 0 var(--pink); }
.field__error { color: var(--pink-ink); font-size: var(--size-small); font-weight: 600; margin-top: 0.4rem; }

.honeypot {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

.consent { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.5rem; }
.consent input { margin-top: 0.25rem; accent-color: var(--blue); width: 1.1rem; height: 1.1rem; }
.consent label { font-size: var(--size-small); color: var(--ink-2); }

.notice {
  border: var(--edge) solid var(--ink);
  background: var(--acid); color: var(--on-acid);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.75rem;
  font-weight: 600;
}
.notice--error { background: var(--pink); color: var(--on-pink); }

/* 8.6 Dialoge ---------------------------------------------------------- */
dialog {
  margin: auto;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  color: var(--ink);
  padding: 0;
  width: min(62rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: min(92dvh, 58rem);
  box-shadow: 1rem 1rem 0 var(--ink);
}
dialog::backdrop { background: color-mix(in srgb, var(--blue) 55%, rgb(10 8 20 / 0.85)); }
.dialog__head {
  display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: var(--edge) solid var(--ink);
}
.dialog__title {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 32, 'wdth' 90;
  font-size: var(--h3); line-height: 1.02; letter-spacing: -0.03em;
  margin-top: 0.3rem;
}
.dialog__body { background: var(--paper); }
.dialog__body object, .dialog__body iframe, .dialog__body img {
  width: 100%; height: min(62dvh, 42rem); border: 0; display: block;
}
.dialog__body img { object-fit: contain; background: var(--ink); }
.dialog__foot {
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.5rem; align-items: center;
  padding: 1rem 1.15rem;
  border-top: var(--edge) solid var(--ink);
}

/* ---------- 9 · Fußzeile ---------------------------------------------- */
.footer {
  background: var(--slab);
  color: var(--slab-text);
  --ink-2: color-mix(in srgb, var(--slab-text) 84%, var(--slab));
  --ink-3: color-mix(in srgb, var(--slab-text) 66%, var(--slab));
  --hairline: color-mix(in srgb, var(--slab-text) 32%, var(--slab));
  border-top: 6px solid var(--pink);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.footer__title {
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 1rem;
}
.footer__claim {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 40, 'wdth' 86;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  line-height: 0.95; letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 14ch;
}
.footer__list li { padding-block: 0.3rem; }
.footer__list a { text-decoration: none; color: var(--ink-2); transition: color var(--speed); }
.footer__list a:hover { color: var(--acid); }
.footer .link { color: var(--slab-text); }
.footer .link:hover { color: var(--on-acid); }
.legal-line {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  border-top: 2px solid var(--hairline);
  padding-block: 1.25rem;
  font-family: var(--font-meta); font-size: var(--size-meta);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 52rem) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* Inhaltsseiten (Impressum, Wallpapers, 404) --------------------------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3rem); }
.page-head h1 {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 82;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: 0.84; letter-spacing: -0.05em;
  text-transform: uppercase;
}
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 48, 'wdth' 88;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase;
  margin: 2.5rem 0 0.75rem;
}
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--h3); margin: 2rem 0 0.5rem; letter-spacing: -0.02em; }
.prose p { margin-bottom: 1rem; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 700; }

/* Wallpaper-Kacheln als Aushang. */
.wallpapers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.wallpapers > li { display: flex; }
.wallpaper {
  flex: 1;
  border: var(--edge) solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--speed) var(--ease-back), box-shadow var(--speed) var(--ease);
}
.wallpaper:hover, .wallpaper:focus-visible {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-lift);
}
.wallpaper img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--edge) solid var(--ink); }
.wallpaper__text { padding: 0.8rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.wallpaper__name {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 24, 'wdth' 90;
  font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.05;
}

/* ---------- 10 · Bewegung --------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px) rotate(var(--tilt, 0deg));
  transition: opacity 550ms var(--ease), transform 550ms var(--ease-back);
}
.reveal[data-visible='true'] { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  .marquee__track { animation: none; }
}

@media print {
  .masthead, .marquee, .progress, .nav, dialog, .snapshots { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .spread--pink, .spread--blue, .spread--acid { background: #fff; color: #000; }
}