/* ══════════════════════════════════════════════════════ designs/hitzner-net/tokens.css — Erscheinungsbild der Marke Abgeleitet aus dem Regelwerk, nicht hier entschieden: brands/hitzner-net/constitution.md die Zusagen brands/hitzner-net/layout.md die Beziehungen brands/hitzner-net/types/htmlpage/values.md die Werte tenants/hit/elements.md das Vokabular Wer hier einen Wert ändert, ändert ein Artefakt. Die Quelle steht in Markdown (ADR 0011) — diese Datei zieht nach, nicht umgekehrt. HEUTE VON HAND, SPAETER ERZEUGT Bis der Designer die Kette schliesst, wird dieser Ordner gepflegt wie eine Quelle. Das ist ein Uebergang und kein Zustand; jeder Wert hier hat oben eine Fundstelle. MEDIENZWEIGE Jede Marke hat alle. Screen ist belegt, Print ist leer — bis auf weiteres, nicht bewusst (Verfassung). Eine Print-Anfrage liefert ein leeres Blatt, keine Ablehnung. ══════════════════════════════════════════════════════ */ /* ── DIE BEIDEN ENDEN ── Keine Palette. Schwarz und Weiss sind die beiden Enden, und sie waren da, bevor es ein Zeichen gab: das eine traegt die Stage, das andere den Traeger der Information. Das Zeichen benutzt dieselben zwei Werte — deshalb bekommt die Marke durch das Zeichen keine Farben dazu. */ :root { --ende-dunkel: #000; --ende-hell: #fff; /* Die Schrift auf dem Traeger. Der einzige dritte Wert, gemessen aus der Fassung, in der der Chip noch Teil des Fotos war. */ --fg-information: #5f5f5f; } /* ── DIE MASSEINHEIT ── u ist ein Prozent der Breite des groessten 16:9-Rahmens, der ins Fenster passt. Ohne sie skalierte jede Achse fuer sich: auf einem Hochformat- Telefon zoege es alles Aufgesetzte in die Breite und drueckte es flach. Die Einheit haelt die Form, egal wie das Fenster steht. ZWEI EINHEITEN, MIT ABSICHT Traeger und Schrift haengen an u, Raender und Zeichen an vh. Das ist geprueft und bleibt: haengt der Traeger an vh, waechst er auf einem Telefon mit der Hoehe und passt nicht mehr in die Breite — auf 390x844 waere er dreimal zu breit. u schrumpft dort mit der Breite und tut damit, wofuer es erfunden wurde. Der Preis sind Widerspruchsfaelle. Die faengt die Rangfolge in layout.md auf. */ :root { --u: min(1vw, 1.7778vh); } /* ── STAGE ── */ :root { --stage-grund: var(--ende-dunkel); } /* ── PANEL — DER TRAEGER DER INFORMATION ── Breite gibt es nicht: der Kasten ist so breit, wie die Zeile lang ist, plus Polster. Der Radius bezieht sich auf die HOEHE, nicht auf die Kante. Ein border-radius: 30% bezoege sich je Achse auf die eigene Kantenlaenge — bei 1062 x 141 waeren das 319 gegen 42 Punkte, und die Ecken wuerden zu langgezogenen Ellipsen. */ :root { --panel-hoehe: calc(4.9 * var(--u)); --panel-polster: calc(1.7 * var(--u)); --panel-radius: calc(0.3 * var(--panel-hoehe)); --panel-grund: var(--ende-hell); } /* ── TEXT — DIE INFORMATION ── */ :root { --text-grad: calc(3.75 * var(--u)); --text-farbe: var(--fg-information); } /* ── LOGO — DAS ZEICHEN ── Zwei Fassungen: Quadrat oder Kreis, immer weiss. Die Seite waehlt bei jedem Aufbau, ohne Gedaechtnis. Bis zum 2026-08-08 gab es auch schwarze und damit vier. Gestrichen: der Grund der Stage ist schwarz, ein schwarzes Zeichen lag auf der eigenen Farbe der Flaeche. Der Kreis ist groesser, damit er gleich gross WIRKT: bei gleichem Mass haette er nur 78,5 % der Flaeche eines Quadrats — er verliert die Ecken. Gleiche Flaeche heisst Durchmesser = Kante * sqrt(4/pi). 15 * 1.1284 = 16.93 Gleiche Flaeche und kein Aufschlag aus der Konvention: die laesst sich nachrechnen, jene muss man nachschlagen. KEIN TRAEGER, KEINE KANTE. Faellt das Zeichen mit dem Grund zusammen — weiss auf hellem Himmel —, verschwindet es. Das ist beschlossen und nicht uebersehen — siehe Verfassung. DER ORT IST FEST, DIE FASSUNG NICHT. Gewuerfelt wird nur noch, was das Zeichen zeigt — nicht mehr, wo es steht. */ :root { --logo-quadrat: 15vh; --logo-kreis: 16.93vh; --logo-farbe: var(--ende-hell); } /* ── ANORDNUNG ── Eine Bedingung an den Mittelpunkt, kein Abstand zu einer Ecke. logo x > 50 % und y < 50 % panel punktgespiegelt daraus MEHR SAGT DIE REGEL NICHT — und deshalb steht hier kein Wert. Ein Ort waere eine Wahl innerhalb der Bedingung, und eine Wahl ist eine Entscheidung. Ein Artefakt entscheidet nichts, es folgt (ADR 0011, ADR 0018). Bis die Position aus Format, Elementgroesse und der Lage der Elemente zueinander gerechnet wird, waehlt das Handstueck — sites/hitzner-net/site/index.html —, und zwar sichtbar als Wahl. Das ist eine Schuld und kein Zustand. EINE ANGABE UND NICHT ZWEI. Beide stehen punktsymmetrisch zur Mitte: wo das Zeichen liegt, folgt der Traeger gespiegelt. Bis zum 2026-08-08 standen hier vier Werte fuer eine Aussage, und die Beziehung zwischen beiden war nur zufaellig richtig. NICHT INS BILD SCHAUEN. Die Anordnung ist durch Type, Format und Kontext bestimmt, nicht durch den Inhalt. Kein Erzeuger sucht die dunkelste Ecke des Fotos. Die Annaeherung laeuft ueber Format, Elementgroesse und die Lage der Elemente zueinander. DIE POSITION BEZEICHNET DEN MITTELPUNKT des Elements, nicht seine Kante — und sagt nichts ueber seine Groesse. Kein Abstand zum Rand ist mitgesagt, und ein Element darf ueber seine Zone hinausragen. Position und Groesse sind zwei Aussagen. Deshalb translate(-50%, -50%) am Element: der Ort bezeichnet den Mittelpunkt, unabhaengig davon, wie gross das Element ist. KEINE REGEL GEGEN UEBERDECKUNG. Die Mittelpunkte liegen auf beiden Achsen weit auseinander, und die Elemente sind dafuer zu klein. Eine Regel dagegen waere eine Regel gegen etwas, das die Anordnung nicht erzeugen kann. */ /* ── SCHRIFT ── Asap, mitgeliefert. Kein local() — Safari laesst selbst installierte Schriften auf Webseiten nicht zu, gemessen am 2026-08-08 auch ueber 127.0.0.1. Ausgeliefert wird immer. Zwei Schnitte, kein simuliertes Fett: ein Browser, der nur Regular findet und 700 sieht, verdickt die Striche selbst — das ist eine andere Zeichnung, nicht dieselbe in fett. Die Dateien liegen seit dem 2026-08-08 hier, in ``fonts/`` daneben. Vorher lagen sie im Bauplan der Site -- ein Design, das seine Schriften nicht haelt, ist unvollstaendig, und designs/toolbox hielt seine laengst selbst. */ @font-face { font-family: "Asap"; src: url("fonts/asap-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Asap"; src: url("fonts/asap-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-information: "Asap", "Trebuchet MS", Tahoma, system-ui, -apple-system, sans-serif; /* Zweite Funktion, seit dem 2026-08-11: der Satz im Zeichen. Dieselbe Familie, anderes Gewicht -- der Unterschied ist das Gewicht und nicht die Groesse (typography.md). */ --font-detail: "Asap", "Trebuchet MS", Tahoma, system-ui, -apple-system, sans-serif; } /* ── KEIN KURSIVSCHNITT ── Ausgeliefert wird keiner. Ohne diese Regel stellt der Browser die Glyphen selbst schraeg — dieselbe Zeichnung in Schraeglage, mit falschen Anschluessen. */ :root { font-synthesis: none; } em, i, cite, dfn, var, address { font-style: normal; }