/* ================================================================== KEOH030 · marke.css · das gemeinsame Fundament Angelegt 27.08.2026. WARUM ES DIESE DATEI GIBT Vorher hatten sieben Seiten sechs eigene Token-Blöcke, und zwei Konventionen standen sich gegenüber: Startseite, /welten, 404, Impressum, Datenschutz --ink = #F5F1EA ist der TEXT /fotografen, Brand Book --ink = #0B0E13 ist der HINTERGRUND Derselbe Name meinte auf derselben Website das Gegenteil. Wer eine Regel von der einen Seite auf die andere kopiert, bekommt unsichtbaren Text. Genau das ist die Falle, die diese Datei schließt. DIE REGEL AB JETZT Namen beschreiben die FUNKTION, nie die Farbe: --grund Hintergrund der Seite --flaeche erhobene Fläche: Karte, Kachel, Feld --text Haupttext --text-leise Nebentext, Fliesstext zweiter Ordnung --text-still Metadaten, Bildunterschriften --akzent die eine Signalfarbe --akzent-hell dieselbe Farbe, lesbar in kleiner Schrift --zustand Zustand statt Signal: Fokus, Überfahren, aktiv, Verbindung zwischen zwei Welten, Etikett Demo und In Arbeit. NIE Fließtext, NIE grosse Fläche. Herkunft: die einzige deklarierte Blauoption der gezeichneten Welt (anime.keoh030.com, accentColor). --zustand-hell derselbe Ton, lesbar in kleiner Schrift auf dunkel --linie Haarlinie --linie-stark sichtbare Kante --linie-raum Grenze zwischen zwei Abschnitten DREI RÄUME, EINE SPRACHE Die Seiten sind alle dunkel, aber nicht gleich dunkel. Das bleibt so · ein gemeinsames System heißt nicht, dass jede Seite gleich aussieht. Der Unterschied steht ab jetzt an EINER Stelle statt in sechs Dateien: Raum WELT Startseite, Werkschau, 404, Impressum, Datenschutz Raum ANGEBOT /fotografen Raum BUCH Brand Book Jeder Raum setzt dieselben Namen auf eigene Werte. Kein Raum darf irgendwo anders noch einmal gesetzt werden · bauen.mjs bricht ab, wenn eine Seite einen geteilten Wert lokal überschreibt. ALTLASTEN Ganz unten stehen die alten Namen als dünne Verweise auf die neuen. Sie existieren, damit hunderte bestehende Regeln unverändert weiterlaufen und A keine sichtbare Änderung erzeugt. Neuer Code benutzt sie nicht. Sie verschwinden im späteren Design-Auftrag. ================================================================== */ :root{ /* ---- Raum WELT · Startseite, Werkschau, 404, Rechtsseiten ---- */ --grund:#0B0A09; --flaeche:#17181C; --flaeche-ruhig:#141210; --flaeche-hoch:#1B1815; --text:#F5F1EA; --text-leise:rgba(245,241,234,.76); --text-still:rgba(245,241,234,.48); --akzent:#C4341A; --akzent-hell:#E0684A; /* Dieselbe Farbe, acht Prozent tiefer · NUR als Fläche unter kleiner heller Schrift (Knopf, Sprungmarke). Warum es sie gibt, gemessen am 28.08.2026 an echten Glyphpixeln, nicht an den reinen Farbwerten: #F5F1EA auf #C4341A rechnet sich zu 4,84:1 und besteht damit auf dem Papier. Gerendert kam der Knopf auf 3,14:1, weil 12,64px DM Mono in Regular so dünn sind, dass das mittlere Glyphpixel nur zu rund 70 Prozent gedeckt ist · gemessen wird die Mischung, nicht die Farbe. Tiefer als acht Prozent muss es nicht sein, weil die Kantenglättung der eigentliche Hebel ist (siehe GEMEINSAMER KOPF). --akzent selbst bleibt unangetastet, Rust ist und bleibt #C4341A. */ --akzent-tief:#B43018; --gold:#BFA27A; /* Anime-Blau · zweiter Akzent, nur fuer Zustaende. Regeln im Styleguide. ACHTUNG, gemessen: Blau und Rost haben fast dieselbe Helligkeit (1,02:1 zueinander). Sie duerfen nie nebeneinander das EINZIGE Unterscheidungsmerkmal sein · es braucht immer noch Wort oder Form. */ --zustand:#2E6FA3; --zustand-hell:#5C8FB7; /* Anime-Blau · zweiter Akzent, nur fuer Zustaende. Regeln im Styleguide. ACHTUNG, gemessen: Blau und Rost haben fast dieselbe Helligkeit (1,02:1 zueinander). Sie duerfen nie nebeneinander das EINZIGE Unterscheidungsmerkmal sein · es braucht immer noch Wort oder Form. */ --zustand:#2E6FA3; --zustand-hell:#5C8FB7; /* Anime-Blau · zweiter Akzent, nur fuer Zustaende. Regeln im Styleguide. ACHTUNG, gemessen: Blau und Rost haben fast dieselbe Helligkeit (1,02:1 zueinander). Sie duerfen nie nebeneinander das EINZIGE Unterscheidungsmerkmal sein · es braucht immer noch Wort oder Form. */ --zustand:#2E6FA3; --zustand-hell:#5C8FB7; --linie:rgba(245,241,234,.10); --linie-stark:rgba(245,241,234,.22); --linie-raum:rgba(191,162,122,.22); /* ---- Mass und Zeit, geteilt ---- */ --steg:min(1160px,90vw); --rund:6px; --rund-voll:999px; --ziel:44px; /* kleinste Klickfläche */ --ruhig:cubic-bezier(.16,1,.3,1); } [data-raum="angebot"]{ /* ---- Raum ANGEBOT · /fotografen und Brand Book ---- Eigene Werte, gleiche Namen. Die Zahlen sind unverändert die, die diese Seiten vorher lokal hatten. */ --grund:#0B0E13; --flaeche:#141a23; --flaeche-ruhig:#141a23; --flaeche-hoch:#141a23; --text:#F0EBE3; --text-leise:rgba(240,235,227,.72); --text-still:rgba(240,235,227,.5); --akzent:#C4341A; --akzent-hell:#E0684A; --gold:#C6A15B; --linie:rgba(240,235,227,.10); --linie-stark:rgba(240,235,227,.2); --linie-raum:rgba(240,235,227,.10); } [data-raum="buch"]{ /* ---- Raum BUCH · das Brand Book ---- Hier liegen Buchseiten auf einem Tisch. Der Tisch ist schwarz, die Seite ist das dunkle Blau · das sind zwei verschiedene Dinge, und genau deshalb bekommt das Buch einen eigenen Raum. --grund der Tisch, auf dem die Seiten liegen --flaeche die Seite selbst */ --grund:#000; --flaeche:#0B0E13; --flaeche-ruhig:#0B0E13; --flaeche-hoch:#141a23; --text:#F5F1ED; --text-leise:#C9C2B6; --text-still:#8A8378; --akzent:#C4341A; --akzent-hell:#E0684A; --gold:#C6A15B; --linie:rgba(245,241,237,.14); --linie-stark:rgba(245,241,237,.24); --linie-raum:rgba(245,241,237,.14); } /* ================================================================== GEMEINSAMER KOPF Fünf Ziele, überall dieselben, überall in derselben Reihenfolge. Erzeugt von bauen.mjs zwischen den Markierungen KOPF:START/ENDE · von Hand geändert wird hier nichts. ================================================================== */ .k-kopf{ position:sticky;top:0;z-index:40; display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.7rem clamp(16px,5vw,40px); background:color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); } /* Auf der Startseite liegt der Auftakt darunter · dort schiebt sich der Kopf erst herein, wenn man ihn braucht. Gleiche Leiste, anderes Verhalten, damit der erste Bildschirm frei bleibt. */ .k-kopf[data-kopf="auftakt"]{ position:fixed;left:0;right:0;top:0; transform:translateY(-102%); transition:transform .45s var(--ruhig); } .k-kopf[data-kopf="auftakt"].zeigt{transform:none} .k-mark{display:inline-flex;align-items:center;justify-content:center; min-height:var(--ziel);min-width:var(--ziel);line-height:0} .k-mark img{height:26px;width:auto;display:block} .k-nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem)} .k-nav a{ display:inline-flex;align-items:center;min-height:var(--ziel); font-family:var(--schrift-zahl);font-size:.79rem;letter-spacing:.08em; color:var(--text-leise);text-decoration:none; transition:color .25s;white-space:nowrap; } .k-nav a:hover{color:var(--zustand-hell)} /* Die aktuelle Seite ist erkennbar, ohne dass sie anklickbar aussieht. */ .k-nav a[aria-current="page"]{ color:var(--text); border-bottom:1px solid var(--akzent); } /* .k-nav a steht davor und ist staerker · ohne diese Schaerfe erbt der Knopf die 76 Prozent Deckkraft der Nav-Links und faellt auf 3,38 zu 1. Gemessen am 27.08.2026, nicht vermutet. */ .k-nav a.k-cta{ display:inline-flex;align-items:center;min-height:var(--ziel); font-family:var(--schrift-zahl);font-size:.79rem;letter-spacing:.1em; text-transform:uppercase;text-decoration:none; color:#FFF;background:var(--akzent-tief); /* Der body setzt seitenweit -webkit-font-smoothing:antialiased. Auf macOS macht das helle Schrift auf dunkler Fläche spürbar dünner · für Fließtext gewollt, für 12,64px Versalien auf einer gesättigten Fläche der Grund, warum dieser Knopf am 28.08.2026 mit 3,14:1 durch die Messung fiel, obwohl seine Farben 4,84:1 ergeben. Hier gilt wieder die normale Kantenglättung. Das ist der Hebel, nicht die Farbe: dieselbe Fläche ohne diese Zeile misst 3,89:1, mit ihr 5,51:1. Gemessen an echten Glyphpixeln, nicht gerechnet. */ -webkit-font-smoothing:subpixel-antialiased; padding:.65em 1.3em;border-radius:var(--rund-voll); transition:transform .25s;white-space:nowrap; } .k-nav a.k-cta:hover{transform:translateY(-2px);color:#FFF} @media (max-width:660px){ .k-nav a.k-schmal-aus{display:none} } /* Schmale Geräte · gemessen stand die Leiste bei 320 und 375 px über. Sie darf umbrechen, statt Ziele zu verstecken oder Text zu kürzen: auf sehr kleinen Schirmen steht die Marke oben, die Wege darunter. Alle fünf Ziele bleiben erreichbar, nur die Zeile wird zwei. */ @media (max-width:430px){ /* Zwei Zeilen sind 119 px hoch · das wären 15 Prozent eines Telefon- Schirms, dauerhaft belegt. Deshalb klebt die Leiste hier nicht: sie scrollt weg und kostet nach dem ersten Bildschirm nichts mehr. Alle Ziele bleiben, nur das Kleben fällt weg. */ .k-kopf{position:static;flex-wrap:wrap;justify-content:center;gap:.5rem .9rem;padding-inline:12px} .k-nav{flex:1 1 100%;justify-content:center;gap:.9rem;flex-wrap:wrap} /* Weil die Leiste hier umbricht, ist Platz fuer alle fuenf Ziele. Die 660er-Regel oben gilt nur im Zwischenband 431 bis 660 px. */ .k-nav a.k-schmal-aus{display:inline-flex} .k-nav a{font-size:.76rem;letter-spacing:.05em} .k-nav a.k-cta{padding:.6em 1em;letter-spacing:.07em} } /* ================================================================== GEMEINSAMER FUSS ================================================================== */ .k-fuss{ border-top:1px solid var(--linie); padding:clamp(2.2rem,5vw,3.6rem) 0; font-family:var(--schrift-zahl);font-size:.79rem;letter-spacing:.04em; color:var(--text-still); } .k-fuss-innen{ width:var(--steg);margin:0 auto; display:flex;flex-wrap:wrap;gap:1rem 2rem; align-items:center;justify-content:space-between; } .k-fuss a{ color:var(--text-still);text-decoration:none; display:inline-flex;align-items:center;min-height:var(--ziel); margin-right:1.3rem;transition:color .25s; } .k-fuss a:hover{color:var(--zustand-hell)} .k-fuss-marke{color:var(--text-leise)} /* Sprungmarke · auf jeder Seite das erste fokussierbare Element. */ .k-skip{ position:absolute;left:-9999px;top:0;z-index:99; /* Dieselbe Paarung wie der Knopf oben und damit derselbe Befund · kleine helle Schrift auf Rust. Sie wird nur bei Fokus sichtbar, was sie nicht weniger lesbar machen muss: wer sie sieht, bedient die Seite mit der Tastatur. Gleiche Behandlung, gleiche Begründung. */ background:var(--akzent-tief);color:#FFF; -webkit-font-smoothing:subpixel-antialiased; font-family:var(--schrift-zahl);font-size:.85rem;letter-spacing:.06em; padding:1em 1.5em;border-radius:0 0 var(--rund) 0; } .k-skip:focus{left:0} /* Sichtbarer Fokus. Impressum, Datenschutz, 404 und das Brand Book hatten gar keine Fokus-Regel · dort war die Tastaturbedienung unsichtbar. Diese Zeile ist der Boden für alle Seiten. Startseite und Werkschau bringen ihre eigene mit, die gewinnt, weil sie später im Stapel steht. Die Sprungmarke bekommt zusätzlich :focus, nicht nur :focus-visible · sie wird ausschließlich per Tastatur erreicht, und manche Browser halten einen Sprung dorthin nicht für eine Tastatur-Absicht. */ a:focus-visible,button:focus-visible,summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--zustand-hell);outline-offset:3px; } .k-skip:focus{outline:2px solid var(--zustand-hell);outline-offset:-2px} .k-kopf :focus-visible,.k-fuss :focus-visible{ outline:2px solid var(--zustand-hell);outline-offset:3px; } @media (prefers-reduced-motion:reduce){ .k-kopf[data-kopf="auftakt"]{transition:none} .k-nav a.k-cta:hover{transform:none} } /* ================================================================== BILDER IN MEHREREN FORMATEN ------------------------------------------------------------------ Seit dem 28.08.2026 stehen die Fotos als AVIF, WebP und JPEG in mehreren Breiten da und sind dafuer in gefasst. display:contents ist hier kein Kniff, sondern die Bedingung: ein ist von Haus aus inline und haette eine neue Kiste zwischen Rahmen und Bild geschoben. Jede vorhandene Regel der Art .hero-bg img{height:100%} haette sich dann auf diese leere Kiste bezogen statt auf den Rahmen · das Auftaktbild waere auf null zusammengefallen. Dasselbe gilt fuer .mcase .shot img, das absolut im Rahmen sitzt. Mit display:contents erzeugt das gar keine Kiste. Alle Bild-Regeln der Seiten gelten unveraendert weiter, deshalb musste fuer die Umstellung keine einzige davon angefasst werden. ================================================================== */ picture{display:contents} /* ================================================================== ALTE NAMEN · dünne Verweise, damit bestehende Regeln weiterlaufen ------------------------------------------------------------------ Diese Liste ist der Grund, warum A nichts sichtbar verändert. Sie ist eine Brücke, kein Bestand. Neue Regeln benutzen die funktionalen Namen oben. ================================================================== */ :root{ --bg:var(--grund); --ink:var(--text); --ink-soft:var(--text-leise); --ink-mute:var(--text-still); --soft:var(--text-leise); --mute:var(--text-still); --card:var(--flaeche); --card-hi:var(--flaeche-hoch); --rust:var(--akzent); --rust-soft:var(--akzent-hell); --line:var(--linie-raum); --line-hi:var(--linie-stark); } [data-raum="buch"]{ /* --ink heisst hier nicht Hintergrund und nicht Text, sondern DUNKEL: es ist der Grund der Buchseite UND die Schrift auf hellen Seiten. Deshalb zeigt es auf die Fläche, nicht auf den Tisch. Genau diese Feinheit hat beim ersten Versuch die Seiten unsichtbar gemacht. */ --ink:var(--flaeche); --ink-2:var(--flaeche-hoch); --paper:var(--text); --soft:var(--text-leise); --mute:var(--text-still); --rost:var(--akzent); --line:var(--linie); --line-2:var(--linie-stark); } [data-raum="angebot"]{ /* Achtung, hier lag die Falle: --ink war der GRUND, nicht der Text. */ --ink:var(--grund); --ink-2:var(--flaeche); --paper:var(--text); --soft:var(--text-leise); --mute:var(--text-still); --rost:var(--akzent); --line:var(--linie); --line-2:var(--linie-stark); }