/* Der Mechanismus der Naht (D-236). DIE eine Quelle dafür, WIE zwei Sektionen aneinanderstoßen. Was eine Naht-Art IST und wofür sie taugt, steht in naht.yaml; welcher Archetyp welche wählt, ebenfalls dort. Hier steht nur die Technik. --------------------------------------------------------------------------- Die eine Regel, aus der die Zusage folgt: EINE NAHT MALT BEIDE ENDFARBEN SELBST. Sie ist nie durchsichtig gegen einen Hintergrund, den sie nicht kennt. Ihre oberste Pixelzeile ist exakt `--naht-von`, ihre unterste exakt `--naht-nach`. Damit KANN ein Verlaufsende gar nicht "fast" die Nachbarfarbe sein - der Defekt aus Hand-Bau-Lehre 7 ist hier nicht wegkonfiguriert, sondern baulich unmöglich. Der alte Weg war ein halbdurchsichtiger Verlauf ÜBER der Nachbarsektion. Der sieht bei einem Farbpaar gut aus und reißt beim nächsten, weil niemand nachrechnet, wo er ausläuft. Deshalb hat die Naht hier eine eigene Höhe im Fluss und keine Deckkraft unter 1. --------------------------------------------------------------------------- Markup-Vertrag (mehr braucht es nicht, siehe sektionen/NahtBand.astro): Stellschrauben: --naht-von Fläche der Sektion DARÜBER (Pflicht) --naht-nach Fläche der Sektion DARUNTER (Pflicht) --naht-hoehe Höhe der Naht (je Art vorbelegt) --naht-linie Farbe des Stegs (Vorgabe: Mischung aus beiden) --naht-clip Form der Kontur (Vorgabe: flacher Bogen) --naht-versatz wie tief die Überlappung greift --naht-rundung Eckenradius der Überlappung Pflicht heißt Pflicht: bleibt --naht-von oder --naht-nach ungesetzt, wird die ganze background-image-Deklaration ungültig und die Naht bleibt unbemalt. Das ist Absicht - ein Verdrahtungsfehler soll auffallen, nicht still danebenliegen. */ .naht { /* Der Steg nimmt ohne eigene Vorgabe die Mitte der beiden Nachbarn. Damit ist er nach Hand-Bau-Lehre 8 von Haus aus in DERSELBEN Tinten-Familie - er kann gar keine Fremdfarbe einschleppen. Der Preis dafür ist gemessen: zwischen zwei fast gleichen Flächen (Fläche auf Karte, Abstand 8 von 255) ist die Mitte von beiden nicht zu unterscheiden, und der Steg verschwindet. Wer eine Linie WILL, muss darum --naht-linie setzen; die Zuordnung in naht.yaml tut das über das Rahmen-Token. Die Mischung ist der sichere Rückfall, nicht die gute Wahl. */ --naht-linie: color-mix(in oklab, var(--naht-von) 50%, var(--naht-nach)); display: block; width: 100%; /* Die Naht liegt IM Fluss, sie überlagert nichts. So kann sie auch nichts verdecken, was gescrollt oder angeklickt werden soll. */ position: relative; /* Kein Rand, kein Innenabstand, keine Deckkraft: die drei Wege, auf denen sich unbemerkt eine dritte Farbe an eine Naht schleicht. */ border: 0; padding: 0; opacity: 1; /* Ein Sprung entsteht auch dann, wenn der Browser die Naht kaum tiefer rechnet als ihren Inhalt. line-height:0 nimmt der Zeilenbox jede Resthöhe. */ line-height: 0; font-size: 0; } .naht__blatt { display: block; } /* --------------------------------------------------------------- Die Kante Harter Wechsel, bewusst gesetzt. Die Naht hat keine Höhe: Fläche A endet, Fläche B beginnt. Genau EIN Sprung, und zwar der, den die beiden Sektionsfarben ohnehin bilden. Kein Haarstrich - der wäre eine dritte Farbe und damit ZWEI Sprünge. Genau das ist der Stand von heute (border-t), und genau das ist der Unterschied. */ .naht--kante { height: 0; } .naht--kante > .naht__blatt { display: none; } /* -------------------------------------------------------------- Der Verlauf Die eine Fläche läuft in die Nachbarfarbe aus. Null Sprünge. Zwei Dinge tun hier die Arbeit: 1. Die Stützstellen sind nicht linear verteilt, sondern folgen 3t²-2t³. Ein linearer Verlauf hat an beiden Enden einen Knick (die Ableitung springt), und genau diesen Knick liest das Auge als Kante, obwohl rechnerisch nichts springt. Mit der weichen Kurve legt sich der Verlauf an beiden Enden an die Fläche an. 2. Gemischt wird in oklab, nicht in sRGB. Der sRGB-Weg von Dunkel nach Hell läuft durch ein schmutziges Mittelgrau und bändert sichtbar. Die erste Deklaration ist der sRGB-Rückfall für Browser ohne Farbraum-Interpolation; die zweite überschreibt sie, wo oklab verstanden wird. */ .naht--verlauf { height: var(--naht-hoehe, 168px); background-image: linear-gradient( to bottom, var(--naht-von) 0%, color-mix(in srgb, var(--naht-nach) 4.3%, var(--naht-von)) 12.5%, color-mix(in srgb, var(--naht-nach) 15.6%, var(--naht-von)) 25%, color-mix(in srgb, var(--naht-nach) 31.6%, var(--naht-von)) 37.5%, color-mix(in srgb, var(--naht-nach) 50%, var(--naht-von)) 50%, color-mix(in srgb, var(--naht-nach) 68.4%, var(--naht-von)) 62.5%, color-mix(in srgb, var(--naht-nach) 84.4%, var(--naht-von)) 75%, color-mix(in srgb, var(--naht-nach) 95.7%, var(--naht-von)) 87.5%, var(--naht-nach) 100% ); background-image: linear-gradient( to bottom in oklab, var(--naht-von) 0%, color-mix(in oklab, var(--naht-nach) 4.3%, var(--naht-von)) 12.5%, color-mix(in oklab, var(--naht-nach) 15.6%, var(--naht-von)) 25%, color-mix(in oklab, var(--naht-nach) 31.6%, var(--naht-von)) 37.5%, color-mix(in oklab, var(--naht-nach) 50%, var(--naht-von)) 50%, color-mix(in oklab, var(--naht-nach) 68.4%, var(--naht-von)) 62.5%, color-mix(in oklab, var(--naht-nach) 84.4%, var(--naht-von)) 75%, color-mix(in oklab, var(--naht-nach) 95.7%, var(--naht-von)) 87.5%, var(--naht-nach) 100% ); } .naht--verlauf > .naht__blatt { display: none; } /* ----------------------------------------------------------------- Der Steg Ein schmales Band trennt die beiden Flächen. ZWEI Sprünge, und die sind der Punkt: ein Steg soll eine gezogene Linie sein, kein Nebel. Deklariert ist das in naht.yaml (spruenge: 2), gemessen wird gegen diese Zahl - eine Naht, die unterwegs einen DRITTEN Sprung bekommt, fällt damit trotzdem auf. Die Naht malt die Flächen ober- und unterhalb der Linie selbst mit. Sie könnte auch nur die Linie sein; dann läge zwischen Linie und Nachbarfläche wieder eine Kante, für die niemand zuständig ist. */ .naht--steg { height: var(--naht-hoehe, 64px); background-image: linear-gradient( to bottom, var(--naht-von) 0, var(--naht-von) calc(50% - var(--naht-linienbreite, 2px)), var(--naht-linie) calc(50% - var(--naht-linienbreite, 2px)), var(--naht-linie) calc(50% + var(--naht-linienbreite, 2px)), var(--naht-nach) calc(50% + var(--naht-linienbreite, 2px)), var(--naht-nach) 100% ); } .naht--steg > .naht__blatt { display: none; } /* --------------------------------------------------------------- Die Kontur Eine geformte Kante: die untere Fläche schneidet mit einem Bogen oder einer Schräge in die obere. EIN Sprung - derselbe, den die Kante auch hätte, nur nicht waagerecht. Der Träger ist voll in --naht-von gefüllt, das Blatt voll in --naht-nach und beschnitten. Keine Halbtransparenz: der Beschnitt entscheidet, welche der beiden DECKENDEN Farben an einer Stelle steht. Deshalb kann die Kontur an ihren Rändern nicht auslaufen, egal wie die Form aussieht. --naht-clip nimmt jede clip-path-Form. Vorgabe ist ein sehr flacher Bogen (an den Seiten rund ein Sechstel der Nahthöhe tief, in der Mitte null). Für die Schräge: --naht-clip: polygon(0 100%, 100% 0, 100% 100%). */ .naht--kontur { height: var(--naht-hoehe, 120px); background-color: var(--naht-von); /* Gehoert zum Überstand unten, siehe dort. */ overflow: hidden; } .naht--kontur > .naht__blatt { position: absolute; /* Der Überstand nach unten ist kein Rundungsspielraum, sondern der Fix für einen gemessenen Bruch (2026-08-10): mit inset:0 liegt die untere Kante der Beschnittform GENAU auf der letzten Bildzeile der Naht. Chromium zeichnet sie dort weich, die Trägerfarbe scheint zur Hälfte durch, und zwischen Kontur und Fussbereich stand eine helle Haarlinie - bei #faf8f5 auf #26221c ein Sprung von 108. Genau der Defekt, gegen den das ganze System gebaut ist, und die Pixel-Probe hat ihn gefunden. Hand-Bau-Lehre 9 sagt es allgemein: Pfade über die Kante hinaus zeichnen. Die drei Pixel Überstand nimmt overflow:hidden am Träger wieder weg. */ inset: 0 0 -3px 0; background-color: var(--naht-nach); clip-path: var(--naht-clip, ellipse(90% 100% at 50% 100%)); } /* --------------------------------------------------------- Die Überlappung Die folgende Sektion schiebt sich als Platte über die vorige. EIN Sprung an der Plattenkante; der Schatten darüber ist ein weicher Verlauf und zählt nicht als zweiter, weil er über viele Zeilen läuft statt in einer. overflow:hidden am Träger ist kein Schönheitsdetail, sondern die Zusage: die Platte reicht 40px tiefer als die Naht. Auch wenn sie sich bewegt (unten), kann zwischen ihrer Unterkante und der nächsten Sektion nie ein Spalt aufgehen. Ohne den Überstand wäre genau das der Bruch, den die Bewegung erzeugt. */ .naht--ueberlappung { height: var(--naht-hoehe, 92px); background-color: var(--naht-von); overflow: hidden; } .naht--ueberlappung > .naht__blatt { position: absolute; left: 0; right: 0; top: var(--naht-versatz, 38px); bottom: -40px; background-color: var(--naht-nach); border-start-start-radius: var(--naht-rundung, 26px); border-start-end-radius: var(--naht-rundung, 26px); /* Der Schatten liegt INNERHALB des Trägers und damit über --naht-von, einer bekannten deckenden Farbe. Ein Schatten, der auf einen unbekannten Grund fällt, ist derselbe Fehler wie ein Verlauf mit offenem Ende. */ box-shadow: 0 -20px 38px -14px rgb(0 0 0 / 0.3); } /* Die Platte kommt beim Hereinscrollen die letzten Pixel hoch. Scroll-gebunden über animation-timeline, also ohne eine Zeile JavaScript und ohne Beobachter, der etwas verpassen könnte. Die Bewegung steht ausdrücklich in @media (prefers-reduced-motion: no-preference) und nicht andersherum: wer reduzierte Bewegung eingestellt hat, bekommt gar keine Animation zugewiesen - nicht eine abgeschaltete. Der Endzustand (translate 0) ist zugleich der Ruhezustand, es gibt also nichts nachzuholen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .naht--ueberlappung > .naht__blatt { animation: naht-heben linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; } } } @keyframes naht-heben { from { translate: 0 16px; } to { translate: 0 0; } }