/* ========================================================================== FARBE UND SCHRIFT - "Papier und Licht" ERZEUGT von build/farbschrift.mjs. Nicht von Hand aendern: jede Aenderung hier wird beim naechsten Lauf von build.mjs ueberschrieben. Wird nach site.css geladen und gilt fuer ALLE Routen, auch /impressum, /datenschutz, /kontakt und /404. ========================================================================== */ /* ============================ 1 TOKENS ================================== */ :root{ /* --- Papierleiter: EIN Farbwinkel, FUENF Helligkeiten. Je tiefer die Flaeche liegt, desto mehr Material zeigt sie (Buntheit steigt nach unten) - das ist die Lichtlogik von Papier, nicht Geschmack. Runde 16: Farbwinkel gemessen aus dem oberen Helligkeitsviertel der Bestandsmotive (1 : 0,9565 : 0,8406, Buntheit 0,159), Buntheit von der halben Messung oben auf den vollen Messwert unten. Beleg: abnahme/vorher25/papierton.json. */ --pap-hoch:#FBF6E7; /* erhoehte Flaeche: Karten, Tafel, Blatt L246 b0,080 */ --pap-grund:#F2ECDA; /* Grundflaeche: Seite, helle Sektionen L236 b0,099 */ --pap-tief:#EAE2CD; /* vertiefte Flaeche: Sockel, Tafelfuss L226 b0,124 */ --pap-kante:#DED5BD; /* Bildbett, Trennband, Blattbett L213 b0,149 */ --pap-sockel:#CEC5AD; /* tiefste Stufe: Materialkante, Sockel L197 b0,160 */ /* Dieselbe Grundflaeche als Kanaltripel. Runde 14: die Lichtbuehne wascht das Papier ueber die Aufnahme, dafuer braucht der Grundton eine Alpha-Form. Kein zweiter Farbwert - derselbe, nur rechenbar. */ --pap-rgb:242,236,218; --pap-hoch-rgb:251,246,231; /* --- Ink: der kuehle Gegenpol, Farbwinkel der Marke unveraendert ------- */ --ink:#40566A; --ink-2:#33475A; --ink-3:#22323F; /* Ink-Flaeche */ --ink-4:#182530; /* vertieftes Ink: Kontrastfeld, Fuss */ /* --- Textleiter auf Papier: drei Stufen, OPAK. Alpha rechnet gegen den Untergrund, deshalb hatte "fein" auf jeder Papierstufe einen anderen Kontrast. Opake Toene halten die Hierarchie ueberall messbar gleich. Gemessen auf Grund/tief/hoch: t1 12,1/11,1/13,2 - t2 8,4/7,6/9,1 - t3 5,9/5,4/6,4 : 1. */ --t1:#1E2F3B; /* primaer: Ueberschriften, Zahlen, strong */ --t2:#354858; /* sekundaer: Fliesstext, Lead, dd */ --t3:#465A6A; /* tertiaer: fein, Bildunterschrift, Beitexte */ /* --- Textleiter auf Ink: warmes Papierweiss, nie reines Weiss ---------- */ --i1:#FBF8F2; /* 12,4 : 1 auf #22323F */ --i2:#E6E1D5; /* 10,1 : 1 */ --i3:#CEC6B6; /* 8,0 : 1 */ /* --- Akzent: Orange bleibt die erste Druckfarbe des Logos und der Lack der echten Schranke und der Terminalsaeule ---------------------------- */ --akz:#F0882D; /* nur Flaechen und Marken, nie Fliesstext */ --akz-tief:#8C490D; /* Orange als Schrift auf Papier, 5,26 bis 5,81 */ --akz-hell:#FAC580; /* Orange als Schrift auf Ink, 8,37 */ --akz-ring:#B45608; /* Zustandsfarbe Fokus, 3,79 auf Papier, 5,18 Ink */ --besucht:#4E5A67; /* besuchter Textlink, 5,70 auf Grund */ /* --- Lichtkanal: gemessener Lichtmedian des Abendsonnen-Bandes. Dieselbe Farbe waermt die Papierflaechen von oben und leuchtet im Ink von unten links - dort steht in den Fotos die Abendsonne. */ --licht:252,225,185; --nacht:20,31,40; /* Basis jeder Bild-Ueberlagerung */ /* --- Linien aus dem Schotter (Kies-Tiefe #5B5240) ---------------------- */ --linie:rgba(91,82,64,.26); --linie-2:rgba(91,82,64,.14); --linie-hell:rgba(251,248,242,.20); /* --- Warmes Licht von oben: der Schatten traegt die Farbe der Erde aus den Fotos, nicht die des Himmels. Ein kalter Schatten auf warmem Papier ist der Bruch, der eine Flaeche "digital neutral" macht. */ --hebung:0 14px 30px -22px rgba(70,48,32,.30), 0 2px 6px -4px rgba(70,48,32,.10); --hebung-hoch:0 34px 66px -36px rgba(70,48,32,.34), 0 6px 14px -8px rgba(70,48,32,.12); /* Kante statt Schlagschatten: oben Lichtkante, unten Materialkante */ --kante-auf:inset 0 1px 0 rgba(255,253,248,.9), inset 0 -1px 0 rgba(91,82,64,.13); /* --- RADIEN- UND KANTENLEHRE (Runde 16, Inhaberbefund "zu kantig") ----- Gestuft nach Bauteilgroesse, EINE Regel: der Radius waechst mit der kuerzeren Kante des Bauteils und bleibt dabei unter 0,05 dieser Kante - weit vor der Pillenform (die braeuchte 0,5). Wer eine neue Flaeche baut, waehlt die Stufe nach ihrer Groesse, nicht nach Geschmack. fein < 32 px Marken, Ziffernkreise, Fokusring klein 32-88 Knoepfe, Formfelder, Registerzeilen mittel 88-260 Karten, Blaetter, Kacheln, Bildbetten gross 260-600 Bildfelder, Platten, Tafeln flaeche > 600 Kontrastflaechen, Sektionsplatten */ --r-fein:3px; --r-klein:6px; --r-mittel:10px; --r-gross:16px; --r-flaeche:20px; /* --- PAPIERSTRUKTUR (Runde 16, Inhaberbefund "zu weiss") --------------- Eine sehr feine, warme Koernung auf PAPIERflaechen - nicht auf Fotos, nicht auf Ink. Sie ist ausdruecklich KEIN Retro-Korn und kein Poster-Grading: die Amplitude ist so gewaehlt, dass die gemessene Helligkeitsstreuung einer Papierzelle von rund 0,3 auf 1,5 bis 2,5 Stufen steigt - sichtbar als Material, aber weit unter der Schwelle 7, ab der eine Zelle als Bildzeichnung zaehlt. Kein Textkontrast faellt dadurch messbar (nachgemessen in abnahme/probe25/). Erzeugt als feTurbulence, das nur in den ALPHA-Kanal geht: dadurch entsteht kein Grauschleier, der die Flaeche verwaschen wuerde. */ --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='k' filterUnits='userSpaceOnUse' x='0' y='0' width='256' height='256'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='1' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .30 0 0 0 0 .26 0 0 0 0 .19 .30 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23k)'/%3E%3C/svg%3E"); /* --- Schrift (Runde 13: Paarung gewechselt) --------------------------- Syne (Display) x Work Sans (Fliesstext), beide variabel 100-900, beide SIL OFL 1.1, self-hosted unter /assets/fonts/. Kein Google-CDN, kein @import. Herkunftsbelege im Kopf dieser Datei. */ --font-display:"Syne",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* Optischer Gewichtsausgleich je Untergrund (Irradiation: dunkel auf hell wirkt duenner als hell auf dunkel). Syne laeuft breit und traegt schon bei 600 - der Bestand brauchte 505 auf einer schmaleren Grotesk. */ --w-fliess:410; --w-fliess-ink:385; --w-titel:600; --w-titel-ink:560; --sperr-fliess:.001em; --sperr-fliess-ink:.008em; /* Titel-Laufweiten: Syne braucht weniger Negativsperrung als Switzer, weil die Buchstaben selbst breit sind. -.040em zerdrueckte die Wortform. */ --sp-h1:-.028em; --sp-h2:-.024em; --sp-h3:-.008em; /* Genau ZWEI gesperrte Versalstellen, wie im Logo (Claim-Balken). Mehr Sperrung zerlegt Syne, weil sie von Haus aus breit ist. */ --sperr-1:.13em; /* Kicker (Syne 600) */ --sperr-2:.11em; /* Tabellenkopf (Work Sans 600) */ --sperr-3:.09em; /* kleinste Hinweise */ } /* ============================ 2 FLAECHEN UND LICHTKANAL ================= Die Sektionen liegen weiter genau dort, wo die Ebenenarbeit sie hingestellt hat. Sie bekommen nur ihre Stufe in der Papierleiter und den Lichtkanal: einen sehr weiten, sehr flachen Verlauf in der Lichtrichtung der Fotos. Man sieht kein Licht, man sieht Raum. ========================================================================= */ html{color-scheme:light} body{background:var(--pap-grund);color:var(--t2)} /* Papierflaechen tragen ab Runde 16 ZWEI Bildebenen: die Koernung liegt oben, der Lichtkanal darunter. Die Reihenfolge ist Absicht - das Korn ist die Oberflaeche des Papiers, das Licht faellt darauf. Die Koernung ist auf 160 px gekachelt und laeuft mit der Flaeche, nicht mit dem Fenster. */ .abs{ background-color:var(--pap-grund); background-image:var(--korn),radial-gradient(120% 62% at 78% 0%, rgba(var(--licht),.50) 0%,rgba(var(--licht),.20) 42%,rgba(var(--licht),0) 78%); background-repeat:repeat,no-repeat; background-size:256px 256px,auto; } .abs--sand{ background-color:var(--pap-tief); background-image:var(--korn),radial-gradient(110% 58% at 22% 0%, rgba(var(--licht),.42) 0%,rgba(var(--licht),0) 74%); } .abs--weiss{ background-color:var(--pap-hoch); background-image:var(--korn),radial-gradient(120% 60% at 84% 0%, rgba(var(--licht),.44) 0%,rgba(var(--licht),0) 76%); } /* Die erhoehten Flaechen bekommen dieselbe Oberflaeche, sonst wirken sie wie Kunststoff auf Papier. Sie tragen nur das Korn, keinen zweiten Lichtkanal. */ .preis,.plattenreihe,.kachel,.blatt,.platte,.hb__blatt,.frb__blatt, .kblatt,.eventblatt,.auftakt{ background-image:var(--korn); background-repeat:repeat; background-size:256px 256px; } /* Ink traegt KEIN Korn: auf der dunklen Flaeche liest sich dieselbe Amplitude als Rauschen, nicht als Material. Die Ink-Regel steht deshalb NACH der Kornregel und setzt ihren eigenen Lichtkanal wieder ein (siehe unten). */ /* Ink-Flaechen: dasselbe Licht, von unten links */ .abs--ink,.auf-ink,.konv{ background-color:var(--ink-3); background-image:radial-gradient(104% 82% at 24% 108%, rgba(var(--licht),.17) 0%,rgba(var(--licht),.07) 44%,rgba(var(--licht),0) 80%); color:var(--i2); } .fuss{background-color:var(--ink-4); background-image:radial-gradient(96% 90% at 18% 112%, rgba(var(--licht),.13) 0%,rgba(var(--licht),.05) 46%,rgba(var(--licht),0) 82%); color:var(--i2)} /* Naht zwischen den Polen: warme Lichtkante statt hartem Sprung */ .abs.auf-ink{box-shadow:inset 0 1px 0 rgba(var(--licht),.22)} .plan{background-color:var(--pap-tief)} .bild,.blatt__i,.planblatt .bild{background-color:var(--pap-kante)} .trennband,.bildband{background-color:var(--pap-kante)} /* Erhoehte Flaechen: eine Stufe hoeher, Lichtkante oben, Materialkante unten. Der Schlagschatten ist Beiwerk - die Trennung macht die Stufe. */ .preis,.beleg,.plattenreihe,.kachel,.wahl__b,.blatt,.richtung__k,.platte,.hb__blatt{ background-color:var(--pap-hoch); box-shadow:var(--kante-auf); } .preis,.platte{box-shadow:var(--kante-auf),var(--hebung)} .hb__blatt{box-shadow:var(--kante-auf),var(--hebung-hoch)} .hb__blatt__b,.hb__blatt__f{background-color:var(--pap-kante)} .preis__fuss{background-color:var(--pap-tief);box-shadow:inset 0 1px 0 rgba(91,82,64,.13)} .preis__k{background-color:var(--ink-3);color:var(--i1)} /* Linien und Raender */ .reihe{border-top-color:var(--linie)} .reihe__z{border-bottom-color:var(--linie)} .auf-ink .reihe{border-top-color:rgba(var(--licht),.20)} .auf-ink .reihe__z{border-bottom-color:rgba(var(--licht),.20)} .preis__z{border-bottom-color:var(--linie-2)} .auf-ink .beleg{background:rgba(var(--licht),.055);border-color:rgba(var(--licht),.20)} /* ============================ 3 AKZENT UND ZUSTAENDE =================== Vier abgestimmte Zustaende statt Systemvorgaben. Sie folgen der Lichtlogik: Hover hebt eine Flaeche, Aktiv drueckt sie hinein, Fokus legt einen Ring in der Zustandsfarbe darum, Besucht nimmt dem Link Waerme, ohne unter 4,5 : 1 zu fallen. ========================================================================= */ /* Orange hatte sechs Rollen: Kicker, Groessenmarken, Schrittnummern, Wortmarke, Fokusring UND Primaerknopf. Es hat jetzt genau drei: Handlung - die Flaeche des Buchen-Knopfes Zustand - Fokus, Aktiv, Hover einer Textmarke Marke - Streifensonne und Kicker Alles Zaehlende (Groessenmarken S bis XXL, Schrittziffern) laeuft in der Textleiter. Damit ist das Orange wieder eine Aussage und keine Tapete. */ .marke{color:var(--akz-tief)} .auf-ink .marke{color:var(--akz-hell)} .preis__z i,.reihe__z .nr,.stufen b,.fahrt__st b,.plan__legende b{color:var(--t3)} .auf-ink .reihe__z .nr,.auf-ink .stufen b,.auf-ink .fahrt__st b{color:var(--i3)} /* Fokus: der Bestandsring lag bei 2,31 : 1 gegen hellen Grund. --akz-ring misst 3,79 auf Grund, 4,10 auf erhoehter Flaeche, auf Ink traegt --akz mit 5,18 (Anforderung 3,0 fuer nicht-textliche Bedienelemente). */ :focus-visible{ outline:2px solid var(--akz-ring); outline-offset:2px; box-shadow:0 0 0 4px rgba(var(--licht),.55); border-radius:2px; } .auf-ink :focus-visible,.konv :focus-visible,.fuss :focus-visible, .kopf :focus-visible,.hb :focus-visible{ outline-color:var(--akz); box-shadow:0 0 0 4px rgba(24,37,48,.75); } /* Textlinks im Fliesstext */ .abs__in p a:not(.knopf):not(.weg),.recht p a:not(.knopf):not(.weg){ color:var(--t1); text-decoration:underline; text-decoration-color:var(--akz-tief); text-underline-offset:.18em; text-decoration-thickness:1px; } .abs__in p a:not(.knopf):not(.weg):hover,.recht p a:not(.knopf):not(.weg):hover{ color:var(--akz-tief);text-decoration-thickness:2px; } .abs__in p a:not(.knopf):not(.weg):visited,.recht p a:not(.knopf):not(.weg):visited{color:var(--besucht)} .abs__in p a:not(.knopf):not(.weg):active,.recht p a:not(.knopf):not(.weg):active{color:var(--akz-ring)} .auf-ink .abs__in p a:not(.knopf):not(.weg){color:var(--i1);text-decoration-color:var(--akz-hell)} .auf-ink .abs__in p a:not(.knopf):not(.weg):hover{color:var(--akz-hell)} /* Textmarke auf einer Linie */ .weg{color:var(--t1)} .weg::after{background:var(--linie)} .weg::before{background:var(--akz-tief)} .weg:hover{color:var(--akz-tief)} .weg:visited{color:var(--besucht)} .weg:active{color:var(--akz-ring)} .auf-ink .weg{color:var(--i1)} .auf-ink .weg::before{background:var(--akz-hell)} .auf-ink .weg:hover{color:var(--akz-hell)} .auf-ink .weg::after{background:rgba(var(--licht),.22)} /* Knoepfe: EINE verlaessliche Handlungsfarbe. Der Buchen-Knopf ist auf JEDEM Untergrund orange - auf Papier, auf Ink und im Foto. Damit er auf Papier auch als Bedienelement erkennbar bleibt (WCAG 1.4.11: 3 : 1 fuer die Begrenzung), traegt er eine 1-px-Kante in der Zustandsfarbe: #C0600C gegen #F6F1E7 misst 4,42 : 1. Auf Ink traegt die Flaeche selbst 5,42 : 1. Knopftext #1B2A34 auf #F0882D misst 5,79 : 1, im Hover 4,93 : 1. Der zweite, ruhige Knopf ist Ink auf Papier und Papier auf Ink - er ist nicht die Handlung, sondern der Weg. */ .knopf{background:var(--ink-3);color:var(--i1);box-shadow:var(--hebung)} .knopf:hover{background:var(--ink-4);box-shadow:var(--hebung-hoch)} .knopf:active{background:var(--ink-4);box-shadow:inset 0 2px 4px rgba(0,0,0,.28)} .knopf__k{background:rgba(var(--licht),.16)} .knopf:hover .knopf__k{background:var(--akz)} .knopf--akz{background:var(--akz);color:#1B2A34; box-shadow:inset 0 0 0 1px var(--akz-ring),var(--hebung)} .knopf--akz:hover{background:#E27A1D; box-shadow:inset 0 0 0 1px var(--akz-ring),var(--hebung-hoch)} .knopf--akz:active{box-shadow:inset 0 0 0 1px var(--akz-ring),inset 0 2px 4px rgba(0,0,0,.28)} .knopf--akz .knopf__k{background:rgba(27,42,52,.16)} .knopf--akz:hover .knopf__k{background:var(--ink-3);color:var(--i1)} .knopf--hell{background:var(--pap-hoch);color:var(--t1);box-shadow:var(--kante-auf),var(--hebung)} .knopf--hell .knopf__k{background:rgba(91,82,64,.12)} .ruf{color:var(--i1);border-color:rgba(var(--licht),.28)} .ruf:hover{background:rgba(var(--licht),.14)} .wahl__b{color:var(--t1)} .wahl__b em{color:var(--t3)} .wahl__b:hover{background:var(--pap-hoch);border-color:var(--akz-tief)} .wahl__b[aria-pressed="true"]{background:var(--ink-3);color:var(--i1);border-color:var(--ink-3)} .wahl__b[aria-pressed="true"] em{color:var(--i3)} .skip{background:var(--ink-3);color:var(--i1)} ::selection{background:rgba(var(--licht),.85);color:var(--t1)} .bottombar{background:var(--ink-4);border-top-color:rgba(var(--licht),.16)} .bottombar__b{color:var(--i1)} .bottombar__b--haupt{background:var(--akz);color:#1B2A34} /* ============================ 4 SCHRIFT ================================ Runde 13: Familienwechsel auf Syne x Work Sans (Herkunftsbelege im Kopf von build/farbschrift.mjs). Was hier steht, ist die Abstimmung: a) Rollenverteilung: Syne traegt h1/h2/h3, Kicker, Fakten-, Register- und Kartentitel sowie die Groessenmarken S/M/XL/XXL/Zelt. Work Sans traegt jeden Satz, jede Zahl, Navigation, Schaltflaechen und das Formular. b) Gewichtsausgleich je Untergrund (410/385 Fliesstext, 600/560 Titel). c) Laufweitenausgleich: helle Schrift auf dunklem Grund laeuft optisch zu, auf Ink deshalb +0,008em statt +0,001em. d) Titel gestuft: h1 -.028em, h2 -.024em, h3 -.008em. e) KEINE Zahl in der Display-Schrift (Abschnitt 4c) - Syne-Ziffern sitzen bei 0,79 Versalhoehe und laufen proportional, Work Sans steht auf Versalhoehe und wird mit tnum exakt gleich breit. f) Glaettung: dunkel auf hell ohne Subpixel-Entzug, hell auf dunkel mit. ========================================================================= */ body{ font-weight:var(--w-fliess); letter-spacing:var(--sperr-fliess); -webkit-font-smoothing:auto; } .auf-ink,.abs--ink,.konv,.fuss,.menu,.bottombar{ font-weight:var(--w-fliess-ink); letter-spacing:var(--sperr-fliess-ink); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-weight:var(--w-titel)} h1{font-weight:var(--w-titel);letter-spacing:var(--sp-h1)} h2{font-weight:var(--w-titel);letter-spacing:var(--sp-h2)} h3{font-weight:560;letter-spacing:var(--sp-h3)} .auf-ink h1,.auf-ink h2,.auf-ink h3,.hb__wort h1,.konv h2{ font-weight:var(--w-titel-ink);letter-spacing:-.026em; } .auf-ink h2,.konv h2{letter-spacing:-.022em} /* Kicker: die eine gesperrte Versalstelle, die auch das Logo hat. Syne ist von Haus aus breit; ueber .13em zerfaellt die Wortform. */ .marke{font-family:var(--font-display);font-weight:600; letter-spacing:var(--sperr-1);font-size:.78rem} .lead{font-weight:400} .auf-ink .lead,.hb__wort .lead{font-weight:375} .fein,figcaption{font-weight:410} .auf-ink .fein,.auf-ink figcaption{font-weight:390} /* --- 4c ZIFFERNBAU: keine Zahl in der Display-Schrift ------------------- Syne-Ziffern sitzen bei 0,79 Versalhoehe (52 zu 66 Einheiten) und laufen proportional (Spanne 63,6 bei 200 px, "1" 73 gegen "0" 136,6). Work Sans steht auf Versalhoehe (1,008) und wird mit tnum exakt gleich breit (60,41). Alles, was zaehlt oder kostet, laeuft deshalb in Work Sans mit tabellarischen Versalziffern - sonst steht die Preisspalte nicht. Die Display-Schrift traegt in der Tabelle nur den Buchstaben (Groessenmarke S/M/XL/XXL/Zelt). */ .preis__z b,.preis__fuss b,.tafel__preis b,.fakten__f b,.zahlen__z b, .tafeltab__z b,.ftab__z b,.steintab dt,.stufen > li > b,.fahrt__st b, .plan__legende b,.register__z b,.blatt__nord span,.platte__f b{ font-family:var(--font-body); font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; letter-spacing:-.004em; font-weight:600; } /* Die Groessenmarke ist ein Buchstabe, keine Zahl - sie bleibt Display. */ .preis__z i{font-family:var(--font-display);font-weight:615;letter-spacing:.06em} /* Tabellenkopf: die ZWEITE und letzte gesperrte Versalstelle der Seite. */ .preis__k{font-family:var(--font-body);font-weight:600;letter-spacing:var(--sperr-2)} .preis__z span{font-weight:410} /* Navigation und Schaltflaechen tragen Work Sans: sie sind Bedienung, nicht Stimme. Syne in einem 15-px-Menuepunkt liest als Zierschrift. */ .knopf,.weg,.kopf__nav a,.menu nav a,.sprache{ font-family:var(--font-body);font-weight:580;letter-spacing:.004em} .reihe__z dt{font-weight:600;letter-spacing:-.006em} .auf-ink .reihe__z dt{font-weight:560} /* Textleiter: die Stufen, die site.css nicht selbst setzt */ .fein,figcaption{color:var(--t3)} .auf-ink .fein,.auf-ink figcaption{color:var(--i3)} .tafeltab__k,.ftab__k,.plan__legende b,.blatt__nord{color:var(--t3)} .js [data-staffel] > .fakten__f b{color:var(--t3)} .js [data-staffel] > .fakten__f.an b{color:var(--t1)} .js .stufen--weg > li > b{color:var(--t3)} /* ============================ 5 BILDGUSS =============================== Zwei Motive lagen ausserhalb der Papierfamilie (gemessen mit varianten4/richtung-papier/mess/bildguss.cjs): a) Die Sanitaer-Innenserie steht unter warmem Kunstlicht. Der Bestandsfilter drehte den Farbwinkel ins Minus und landete bei 22,5 Grad - auf neutralem Off-White unauffaellig, auf warmem Papier ein Rosastich. Neu gemessen 36,9 Grad bei Buntheit 22,4, also dieselbe Familie wie das Papier. b) Das Waldband im Kontrastfeld lag bei 44,9 Grad und Buntheit 46,9, also als Gelbgruen gegen das Papier. Neu 38,5 Grad, Buntheit 34. Kein anderes Motiv wird angefasst: die Aussenaufnahmen tragen das Abendlicht, aus dem die Papierleiter abgeleitet ist, bereits selbst. ========================================================================= */ .kuehl img{filter:saturate(.26) hue-rotate(14deg) brightness(1.07) contrast(1.06)} /* Runde 15: derselbe Farbwinkel, aber nicht mehr die halbe Buntheit. Gemessen im Inhaberbefund: das Waldband stand "sichtbar matter und kaelter" als die ungefilterten Nachbarfotos derselben Seite - saturate(.48) nimmt dem Motiv mehr als die Haelfte seiner Farbe, waehrend die Aufnahme direkt darunter (Einfahrt) ungefiltert im vollen Abendlicht steht. Die Korrektur des Farbwinkels bleibt (sie war gemessen, siehe oben), die Entsaettigung geht auf ein Mass zurueck, das neben den Nachbarn nicht auffaellt. */ .preisfeld__band img{filter:saturate(.86) hue-rotate(-7deg) contrast(1.04) brightness(1.02)} /* ============================ 6 BREAKPOINTS ============================ Nur Farb- und Schriftwerte, die sich mit der Breite aendern muessen. Nach diesem Block steht keine nackte Regel mehr (FEHLER-019). ========================================================================= */ @media (max-width:699px){ /* Am Telefon steht der Text im Hero enger am Foto: eine Spur mehr Gewicht und Laufweite, damit die Glyphen im bewegten Grund nicht zulaufen. */ .hb__wort .lead{font-weight:400;letter-spacing:.010em} .hb__wort h1{letter-spacing:-.024em} } @media (max-width:899px){ /* Unter 900 px steht die Preissektion nicht mehr neben dem Ink. Waere sie weiter die erhoehte Stufe, laege die Preistafel farbgleich auf ihr und muesste sich wieder ueber einen Schatten abheben. */ .abs--weiss{background-color:var(--pap-grund)} .abs--sand{background-color:var(--pap-tief)} } @media (min-width:900px){ /* Auf der breiten Buehne stehen Papier und Ink direkt nebeneinander. Dort darf der Lichtkanal auf dem Papier weiter greifen, sonst kippt die Flaeche neben dem Ink ins Graue. */ .abs--weiss{ background-image:radial-gradient(96% 74% at 30% 0%, rgba(var(--licht),.52) 0%,rgba(var(--licht),.18) 48%,rgba(var(--licht),0) 82%); } } @media print{ /* Papier auf Papier: der Lichtkanal und die Ink-Flaechen entfallen. */ .abs,.abs--sand,.abs--weiss,.abs--ink,.auf-ink,.konv,.fuss{ background-image:none !important;background-color:#fff !important;color:#22323F !important; } }