/* ═══════════════════════════════════════════════════════════ Design-Tokens · Haus Kristiania Werte eins zu eins aus design/final/index.html. Die Seite ist hell. Papierweiss ist die Grundflaeche, Schwarz kommt nur im Fuss und aus den Fotos. Im Markup steht keine feste Zahl. ═══════════════════════════════════════════════════════════ */ :root { /* ── Farben ───────────────────────────────────────────── */ /* Papier ohne Gelbstich, Text tiefer, Blau nur noch als Akzent. */ --pa: #F4F4F2; /* Papier */ --pa2: #EAEAE7; /* Papier, zweite Stufe */ --tx: #0C0D0F; /* Text */ /* .58 war zu hell fuer alles, was laenger als eine Zeile ist. Grau ist seit 3. September nur noch fuer Beitext unter 15 Pixel; siehe AUFTRAG_STIMME.md. */ --mu-papier: rgba(12, 13, 15, .66); /* Text, leise, auf Papier */ --mu: var(--mu-papier); /* Text, leise. Dunkle Umgebungen setzen es auf --mu-hell */ --mu-hell: rgba(244, 244, 242, .6); /* Text, leise, auf Foto und auf Dunkel. Dunkle Umgebungen setzen --mu darauf, siehe basis.css beim Kicker */ --ln: rgba(12, 13, 15, .12); /* Linie */ --ln-hell: rgba(244, 244, 242, .3); /* Linie auf Dunkel. Dunkle Umgebungen setzen --ln darauf */ /* Der Akzent. Er traegt genau drei Dinge: den Buchen-Knopf in der Kopfzeile, jeden Knopf "Verfuegbarkeit pruefen" und den Fokusring. Sonst nirgends: kein Kicker, kein Preis, keine Linie, kein Unterstrich beim Ueberfahren. Ein Akzent, der ueberall steht, ist keiner mehr. Weisse Schrift darauf misst 5,5 zu 1. */ --ak: #B8401C; /* Das Blau der Wortmarke. Es steht nur noch dort. */ --bl: #1B44D8; --dk: #0E0F11; /* nur Fuss */ /* Gefuellte Knoepfe sind schwarz, nicht blau. Blau als Flaeche nimmt dem Akzent die Wirkung, und auf Schwarz sitzt das Zeigerlicht besser. */ --kn: #0C0D0F; --knt: #F4F4F2; /* Weiss auf Fotos, dort traegt der Verlauf den Kontrast */ --we: #FFFFFF; --we70: rgba(255, 255, 255, .7); --we45: rgba(255, 255, 255, .45); /* ── Mass und Bewegung ────────────────────────────────── */ --m: clamp(18px, 4vw, 64px); /* Seitenrand und Grundmass */ --e: cubic-bezier(.16, 1, .3, 1); --breit: 1560px; /* ── Schrift ──────────────────────────────────────────── */ /* Eine Familie fuer alles: Instrument Sans, seit 13. August. Davor Schibsted Grotesk, die sich wie Helvetica las. Den Kontrast tragen Groesse und Laufweite, nicht das Gewicht: alles Grosse steht in 400. 500 nur fuer Knoepfe, Navigation und Kicker. 600 gibt es nur noch fuer ein einzelnes betontes Wort im Fliesstext, deshalb hat es kein Token. 700 laedt die Schrift nicht mehr. Siehe AUFTRAG_STIMME.md, Commit 1. */ --sans: "Instrument Sans", system-ui, sans-serif; --gw-normal: 400; --gw-halb: 500; /* Laufweite der grossen Grade. Eng gesetzt, sonst wirkt eine Grotesk in 100 Pixel auseinandergefallen. */ --lw-dis: -.04em; --lw-name: -.03em; --lw-preis: -.03em; --lw-text: -.008em; /* ── Typo-Skala ───────────────────────────────────────── */ /* Werte aus idee-stimme-b.html. */ --t-d1: clamp(2.75rem, 7vw, 6.25rem); --t-d2: clamp(2.25rem, 4.2vw, 4rem); --t-abschnitt: clamp(1.5rem, 2.4vw, 2.125rem); /* Titel im Abschnittskopf, idee-soelden.html .h2 */ --t-lead: clamp(1.0625rem, 1.35vw, 1.25rem); --t-basis: 1rem; --t-name: clamp(1.5rem, 2.2vw, 2rem); --t-zahl: clamp(30px, 3.2vw, 48px); /* Ein Preis ist nie groesser als eine h3. Vorher 108 Pixel in Blau, das groesste Element der Seite. */ --t-preis: var(--t-name); --t-kick: .6875rem; --t-mittel: 14.5px; --t-klein: 12.5px; --t-winzig: 10.5px; /* ── Abstandsskala ────────────────────────────────────── */ /* Neun Stufen, von acht Pixeln bis hundertzwoelf. Sie kommen aus 03_Design/final/idee-wissen.html und gelten fuer jeden senkrechten Abstand im ganzen Theme: Kicker zur Ueberschrift, Text zur Liste, Gruppe zu Gruppe, Abschnitt zu Abschnitt. Vorher standen hier fuenf --ab-Stufen fuer das Polster ganzer Abschnitte, und daneben rund zweihundert eigene Pixelzahlen in den Bausteinen. Eine Seite kam so auf sechsundzwanzig verschiedene Abstaende. Steht jetzt irgendwo eine eigene Zahl, ist das ein Fehler und keine Feinabstimmung. Unter acht Pixeln gilt die Skala nicht. Was dort steht, ist Fuge oder Haarlinie und gehoert zur Zeichnung, nicht zum Rhythmus. */ --s1: .5rem; /* 8px innerhalb einer Zeile */ --s2: .75rem; /* 12px Kicker zur Ueberschrift */ --s3: 1rem; /* 16px Ueberschrift zum Text */ --s4: 1.5rem; /* 24px Text zur Liste */ --s5: 2rem; /* 32px zwischen Gruppen */ --s6: 3rem; /* 48px zwischen Bausteinen */ --s7: 4rem; /* 64px grosse Trennung */ --s8: 5.5rem; /* 88px Abschnitt zu Abschnitt */ --s9: 7rem; /* 112px nur nach einem Bildband */ /* Abstaende, die mit der Fensterbreite wachsen. Sie tun das in Stufen, nicht fliessend. Ein clamp() zwischen zwei Stufen liefert bei jeder Fensterbreite eine andere Zahl: bei 1600 Pixeln kamen so 37, 39, 72, 97 und 104 Pixel heraus, alles Werte, die in der Skala nicht vorkommen. Eine Seite hatte dadurch zwangslaeufig mehr verschiedene Abstaende als die Skala Stufen hat. Gestuft trifft jeder Wert eine Stufe. Die Haltepunkte sind dieselben wie sonst im Theme, 760 und 1180 Pixel. */ /* Abstand eines Abschnitts nach oben, der eine Wert: --s5 am Handy, --s6 ab 760 Pixeln, AUFTRAG_FERTIGSTELLUNG.md Phase 2. Kein Abschnitt hat mehr, keiner weniger, keiner etwas unten. */ --abschnitt: var(--s5); --r-gross: var(--s4); /* Rampe: Spalten weit auseinander. Raster mit Text: --s4 am Handy, --s6 ab 760, nie mehr (Phase 2) */ --r-mittel: var(--s4); /* Rampe: Gruppen im Baustein */ --r-klein: var(--s2); /* Rampe: Zeilen in einer Gruppe */ /* Hoehe der festen Kopfleiste, gemessen. 68 Pixel: der Buchungsknopf ist 48 hoch, dazu zweimal 10 Polster. Nach dem Scrollen sind es 60. Hero und Seitenkopf setzen darunter an, sonst schiebt sich die Leiste ueber den Bildrand. */ --kopf: 68px; /* ── Barrierefreiheit und Geraet ──────────────────────── */ --tippflaeche: 44px; --sicher-unten: env(safe-area-inset-bottom, 0px); /* Hoehe der Klebeleiste am Handy, gemessen: 70,3 Pixel. Zehn Polster oben und unten, dazwischen die Preisangabe mit 50 Pixeln, die den Knopf mit seinen 48 knapp ueberragt. Der Fuss haelt diesen Abstand frei, sonst liegt die Leiste auf der letzten Zeile. */ --klebeleiste: calc(70px + var(--sicher-unten)); /* ── Ebenen ───────────────────────────────────────────── */ /* Ohne diese Ordnung liegt frueher oder spaeter irgendwo z-index 9999. */ --z-inhalt: 2; --z-leiste: 80; --z-kopf: 90; --z-korn: 100; /* Die Vollbildansicht liegt ueber allem, auch ueber dem Korn. Sonst liegt der Filmkornschleier auf dem Foto, das man sich gerade genau ansehen will. */ --z-lupe: 110; } /* Die Stufen der Rampen. Variablen wirken in Media Queries nicht, deshalb werden hier die Variablen selbst umgesetzt. */ @media (min-width: 760px) { :root { --abschnitt: var(--s6); --r-gross: var(--s6); --r-mittel: var(--s5); --r-klein: var(--s3); } } @media (min-width: 1180px) { :root { --r-mittel: var(--s6); --r-klein: var(--s4); } } /* ── Raster des Appartement-Index ─────────────────────────── Kein clamp() in grid-template-columns. Faellt die Regel in einem Renderer aus, bricht die ganze Zeile. Feste Werte: ab 1181px 40px 190px minmax(0,1fr) auto bis 1180px 40px 140px minmax(0,1fr) auto bis 760px 88px minmax(0,1fr), Preis in der zweiten Zeile Stehen ausgeschrieben in blocks/appartement-index.css. ───────────────────────────────────────────────────────── */ /* ── Haltepunkte ──────────────────────────────────────────── CSS-Variablen wirken in Media Queries nicht, deshalb stehen die Werte dort ausgeschrieben. Die Referenz nutzt drei: 1180px Appartementzeile wird schmaler 980px zweispaltige Raster werden einspaltig 760px Handy: Navigation weg, Klebeleiste an Andere Werte kommen nicht vor. ───────────────────────────────────────────────────────── */