@charset "UTF-8";

/*
 * Schriften und Paletten der oeffentlichen Website (U62).
 *
 * ==========================================================================
 * WARUM DIESE DATEI GETRENNT VON site.css LIEGT
 * ==========================================================================
 *
 * `site.css` beschreibt, WIE die Seite gebaut ist. Hier steht, WOMIT sie
 * gemalt wird - und das ist die eine Entscheidung, die noch offen ist. Der
 * Entwurf (Klassisch.dc.html) kam mit einem Schieberegler fuer sechs
 * Paletten und fuenf Schriftpaare; welche es am Ende wird, ist nicht
 * entschieden. Also steht hier alles nebeneinander, und die Wahl ist ein
 * Attribut am <html>-Element.
 *
 * ==========================================================================
 * DIE SCHRIFTEN LIEGEN HIER UND NICHT BEI GOOGLE
 * ==========================================================================
 *
 * Der Entwurf laedt sie von `fonts.googleapis.com`. Das geht hier nicht:
 * das Geruest dieser Website loest keine fremde Anfrage aus - kein
 * Schriftdienst, kein Analysewerkzeug, kein CDN (siehe layout.php). Der
 * Grund ist kein Geschmack, sondern dass jede solche Anfrage die
 * IP-Adresse einer Besucherin an einen Dritten traegt, und die Besucherin
 * hier oft ein Kind ist.
 *
 * Alle acht Familien stehen unter der SIL Open Font License und duerfen
 * darum mitgeliefert werden (public/assets/schriften/OFL.txt). Geladen
 * werden nur `latin` und `latin-ext` - dieselbe Beschneidung wie bei
 * Hanken Grotesk, und aus demselben Grund: Kyrillisch und Griechisch
 * kommen auf dieser Seite nicht vor.
 *
 * Der Browser holt eine Datei erst, wenn sie WIRKLICH gebraucht wird. Es
 * liegen also acht Familien bereit, aber eine Besucherin laedt nur die
 * zwei des eingestellten Paares.
 */

/* ---------------------------------------------- Anton */
@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/anton-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: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/anton-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;
}

/* ---------------------------------------------- Archivo Black */
@font-face {
    font-family: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/archivo-black-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 Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/archivo-black-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;
}

/* ---------------------------------------------- Barlow */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("schriften/barlow-300-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: "Barlow";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("schriften/barlow-300-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: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/barlow-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-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/barlow-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-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("schriften/barlow-500-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: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("schriften/barlow-500-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: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("schriften/barlow-600-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: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("schriften/barlow-600-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;
}

/* ---------------------------------------------- Bebas Neue */
@font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/bebas-neue-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: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/bebas-neue-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;
}

/* ---------------------------------------------- Jost */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 200 600;
    font-display: swap;
    src: url("schriften/jost-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: "Jost";
    font-style: normal;
    font-weight: 200 600;
    font-display: swap;
    src: url("schriften/jost-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;
}

/* ---------------------------------------------- Karla */
@font-face {
    font-family: "Karla";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("schriften/karla-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: "Karla";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("schriften/karla-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;
}

/* ---------------------------------------------- Space Grotesk */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/space-grotesk-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: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/space-grotesk-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;
}

/* ---------------------------------------------- Syne */
@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("schriften/syne-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: "Syne";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("schriften/syne-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;
}


/* ======================================================================
 * DIE PALETTEN
 * ======================================================================
 *
 * Sechs Stueck, wie im Entwurf. Jede hat vier Toene, und die Namen sagen,
 * wofuer sie da sind - nicht, wie sie aussehen:
 *
 *   --klang       der Akzent. Verweise, Ueberschriften, der Knopf.
 *   --klang-tief  seine dunklere Fassung, fuer Hover und Gedruecktes.
 *   --klang-hauch der helle Ton, fuer Flaechen hinter Text.
 *   --klang-satt  der tiefe Ton, fuer Text AUF dem Hauch.
 *
 * Gesetzt wird die Palette mit `data-palette` am <html>-Element. Ohne
 * Attribut gilt die erste - so bleibt die Seite auch dann vollstaendig,
 * wenn das Attribut einmal fehlt.
 */

/*
 * GRAPHIT IST DIE VORGABE, und das ist eine Entscheidung ueber diese
 * Website und nicht ueber Geschmack: ihr Inhalt sind fast ausschliesslich
 * Portraits von Kindern. Eine Akzentfarbe ist in so einem Bildteppich eine
 * zweite Stimme in jedem Ausschnitt. Graphit haelt die Farbe in den
 * Bildern und ueberlaesst dem Satz die Gliederung.
 *
 * Sie steht darum an `:root` - was ohne Attribut geladen wird, ist
 * Graphit. Die uebrigen bleiben erreichbar, ein Wort in `config.php`
 * genuegt.
 */
:root,
[data-palette="graphit"] {
    --klang:       #1c1c1c;
    --klang-tief:  #000000;
    --klang-hauch: #dcdcdc;
    --klang-satt:  #111111;
}

[data-palette="teal"] {
    --klang:       #0f8a8f;
    --klang-tief:  #0b6d71;
    --klang-hauch: #a8dcdc;
    --klang-satt:  #14494b;
}

[data-palette="signalrot"] {
    --klang:       #d6432f;
    --klang-tief:  #a63321;
    --klang-hauch: #f4c9c0;
    --klang-satt:  #5c1d13;
}

[data-palette="kobalt"] {
    --klang:       #2f4bd6;
    --klang-tief:  #22389f;
    --klang-hauch: #c9d2f7;
    --klang-satt:  #161f4d;
}

[data-palette="oliv"] {
    --klang:       #6b7a2f;
    --klang-tief:  #4e5a21;
    --klang-hauch: #dde3bd;
    --klang-satt:  #2c3212;
}

[data-palette="pflaume"] {
    --klang:       #8b3a86;
    --klang-tief:  #682a64;
    --klang-hauch: #eccdea;
    --klang-satt:  #3a1338;
}

/* ======================================================================
 * DIE SCHRIFTPAARE
 * ======================================================================
 *
 * Immer zwei: eine fuer den FLIESSTEXT und eine fuer die AUSZEICHNUNG -
 * die grossen, versalen Zeilen des Entwurfs. Beide mit einer
 * Systemschrift als Rueckfall, damit die Seite auch dann lesbar bleibt,
 * wenn eine Datei nicht ankommt.
 */

:root,
[data-schrift="jost-archivo"] {
    --lauf:    Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --auszug:  "Archivo Black", Impact, "Helvetica Neue", sans-serif;
}

[data-schrift="barlow-anton"] {
    --lauf:    Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --auszug:  Anton, Impact, "Helvetica Neue", sans-serif;
}

[data-schrift="karla-bebas"] {
    --lauf:    Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --auszug:  "Bebas Neue", Impact, "Helvetica Neue", sans-serif;
}

[data-schrift="grotesk"] {
    --lauf:    "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --auszug:  "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-schrift="jost-syne"] {
    --lauf:    Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --auszug:  Syne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}