/* Art.1 Gallery Brand — generated from tokens.json */
:root, [data-theme="light"] {
  --nachtblau: #202a36; /* Markenfarbe, 15 % jeder Gestaltung: Flächen, Turm, Posts, Text auf Hell (13,2 : 1 auf galeriepapier, 14,5 : 1 auf weiss). Auf nachtblau steht Schrift in weiss oder galeriepapier. */
  --signalrot: #e41d3c; /* Signal, höchstens 5 %: Flächen, Bänder, Buttons, Diagonale, Satzpunkt in Headlines ab 24 px auf Hell (4,2 : 1). Nie als Schrift auf nachtblau (3,1 : 1). Schrift darauf: weiss (4,6 : 1). */
  --leuchtrot: #ff5a6e; /* Rot als SCHRIFT auf dunklem Grund: Labels, Links, Satzpunkte auf nachtblau (4,8 : 1) und surface-raised dunkel (5,6 : 1). Nie auf Hell, nie als Fläche. */
  --bordeaux: #911d20; /* Tiefe: zweite, schmalere Diagonale neben signalrot; Details. Auf nachtblau nur als Fläche (1,7 : 1), auf galeriepapier auch als Schrift (8,0 : 1). */
  --one-rot: #a7242c; /* Logofarbe der ONE-Box im Original-Logo und roter Punkt für verkaufte Werke. Kleine rote Schrift auf Hell (6,5 : 1 auf galeriepapier, 7,2 : 1 auf weiss). */
  --logoschwarz: #0a0809; /* Wortmarke im Original-Logo auf weiss und galeriepapier. Nicht für Fließtext, dafür ink. */
  --galeriepapier: #f7f4ef; /* Heller Grund: Papier, Werkschilder, helle Posts, Seitenhintergrund. 80 % jeder Gestaltung sind weiss oder galeriepapier. */
  --weiss: #ffffff; /* Galeriewand, Passepartout, Schrift auf nachtblau und signalrot. */
  --surface: #f7f4ef; /* Seitengrund. Hell galeriepapier, dunkel nachtblau. */
  --surface-raised: #ffffff; /* Karten, Werkschild, Vitrinenfläche auf surface. Dunkel eine Stufe tiefer als nachtblau, damit leuchtrot lesbar bleibt. */
  --ink: #202a36; /* Text und Headlines auf surface und surface-raised (hell 13,2 : 1 / 14,5 : 1, dunkel 14,5 : 1 / 17,0 : 1). */
  --ink-muted: #5b6573; /* Sekundärtext, Bildunterschriften, Maße auf surface und surface-raised (hell 5,4 : 1 / 5,9 : 1, dunkel 9,4 : 1 / 11,0 : 1). */
  --rot-text: #a7242c; /* Kleine rote Schrift: Eyebrows, Links, Hinweise auf surface und surface-raised. Hell one-rot (6,5 : 1), dunkel leuchtrot (4,8 : 1 / 5,6 : 1). */
  --punkt: #e41d3c; /* Der rote Satzpunkt am Ende einer Headline ab 24 px, auf surface. Hell signalrot, dunkel leuchtrot. */
  --eins: #a7242c; /* Das Wort „Eins.“ am Ende jedes Claims, das wiederkehrende Markenzeichen. Hell one-rot wie die ONE-Box (6,5 : 1 auf surface), dunkel leuchtrot (4,8 : 1 auf surface). */
  --rot-flaeche: #e41d3c; /* Rote Flächen: Primär-Button, Unikat-Siegel, Band. Text darauf on-rot. */
  --on-rot: #ffffff; /* Text und Icons auf rot-flaeche (4,6 : 1). */
  --linie: #e2dcd2; /* Haarlinien und Trenner zur Gliederung, rein dekorativ (unter 3 : 1). Für Rahmen mit Bedeutung ink-muted nehmen. */
  --focus-ring: #202a36; /* Fokusrahmen: 2 px Abstand in surface, dann 2 px durchgehend (hell 13,2 : 1, dunkel 4,8 : 1). */
}
[data-theme="dark"] {
  --surface: #202a36;
  --surface-raised: #161d26;
  --ink: #ffffff;
  --ink-muted: #c9d1db;
  --rot-text: #ff5a6e;
  --punkt: #ff5a6e;
  --eins: #ff5a6e;
  --linie: #3a4656;
  --focus-ring: #ff5a6e;
}
:root {
  --space-1: 4px; /* Abstand Icon zu Text in Etiketten. */
  --space-2: 8px; /* Eyebrow zu Headline, Zeilen in Etiketten. */
  --space-3: 12px; /* Innenabstand Etikett vertikal. */
  --space-4: 16px; /* Innenabstand Buttons horizontal, Abstand in Listen. */
  --space-6: 24px; /* Innenabstand Werkschild und Karten. */
  --space-8: 32px; /* Abstand zwischen Blöcken. */
  --space-12: 48px; /* Abschnitte auf Webseiten und im Newsletter. */
  --space-16: 64px; /* Rand im Post 1080 px (rund 6 % der Breite). */
  --radius-0: 0px; /* Standard: Logo-Box, Turm, Werkschild, Karten, Posts. Die Marke ist eckig. */
  --radius-s: 2px; /* Buttons und Eingabefelder, nur gegen harte Kanten am Bildschirm. */
  --radius-full: 9999px; /* Nur der rote Punkt und kreisrunde Siegel. */
  --diagonale-winkel: 81.6deg; /* Neigung gegen die Waagerechte; die Bänder steigen nach rechts oben (nach vorn). */
  --diagonale-band: 8.9%; /* Breite des signalroten Bands, bezogen auf die Formatbreite. */
  --diagonale-bordeaux: 60%; /* Breite des Bordeaux-Bands im Verhältnis zum roten Band; links daneben, ab 58 % der Höhe. */
  --rand-format: 6%; /* Satzspiegel-Rand jeder Gestaltung, bezogen auf die kurze Seite. */
  --font-sans: Poppins, "Helvetica Neue", Arial, sans-serif;
  --text-headline-xl: 600 72px/0.95 var(--font-sans); /* Plakat, Turm, Post-Headline über drei Zeilen. Satzpunkt in punkt. */
  --text-headline-l: 600 48px/1 var(--font-sans); /* Post- und Seitentitel. */
  --text-headline-m: 600 32px/1.1 var(--font-sans); /* Abschnittstitel, Newsletter-Headline. */
  --text-headline-s: 600 24px/1.2 var(--font-sans); /* Werktitel auf Werkschild und Produktseite. */
  --text-body-l: 400 18px/28px var(--font-sans); /* Einleitungen, Newsletter-Text. */
  --text-body: 400 15px/24px var(--font-sans); /* Fließtext, höchstens 65 Zeichen breit. */
  --text-small: 400 13px/20px var(--font-sans); /* Technik, Maße, Rechtliches, Bildunterschriften in ink-muted. */
  --text-eyebrow: 600 12px/16px var(--font-sans); /* Dachzeile über Headlines, Versalien, in rot-text. */
  --text-label: 600 14px/20px var(--font-sans); /* Etiketten, Buttons, Künstlername. */
  --text-preis: 600 20px/28px var(--font-sans); /* Preise, Tabellenziffern. */
  --text-spiegelwort: italic 300 36px/1.2 var(--font-sans); /* Nur das Wort im Spiegel und seine Zitate. Einziger Einsatz von Light Italic. */
}
.headline-xl {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.headline-l {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.headline-m {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
}
.headline-s {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.preis {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.spiegelwort {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  font-style: italic;
}