/* ============================================================ Ebene 1b: Hintergrund „Bogen" (07.09.2026) Drei sehr große Kreisumrisse als 1px-Linien mit weichem Hof, alle angeschnitten, hinter dem Inhalt (z-index:-1), scroll-getrieben per Parallaxe (src/js/background.js). Es ist das Markenmotiv der Heroes — der feine Mint-Kreis, 540px, angeschnitten in der Ecke — vom Hero-Dekor zur Seitensignatur befördert. ============================================================ WARUM LINIEN UND NICHT FLÄCHEN ============================================================ Vorher lagen hier vier weiche Mint-Blobs. Die waren gemessen unter der Wahrnehmungsschwelle: 12 von 255 Helligkeitsstufen an der stärksten Stelle, im Mittel 2,2 — und aufdrehen half nicht. Der Grund ist nicht die Deckung, sondern die ORTSFREQUENZ. Die Kontrastempfindlichkeit des Auges trägt grob 1 bis 8 Perioden pro Grad und fällt nach BEIDEN Seiten ab: · Ein 600px-Blob liegt bei etwa 0,1 — deutlich DARUNTER. · Ein-Pixel-Korn auf einem Retina-Schirm liegt DARÜBER (in der Probe gemessen: Spanne 15 von 255, gesehen hat man nichts). · Eine 1px-Linie liegt mitten drin. Dieselbe Zahl an Helligkeitsstufen wirkt als Linie sichtbar und als weiche Fläche nicht. Deshalb Linien. GEMESSEN gegen den gerenderten Pixel, 1440×900, Ebene an gegen aus: Spitze 67 von 255 Stufen (vorher 12) Mittel 0,61 (vorher 2,16) berührte Fläche 4,8 % (vorher 47 %) ⚠ Der Mittelwert ist ABSICHTLICH niedriger als vorher. Bogen wirkt auf wenig Fläche mit viel Ausschlag — das ist der Linien-Effekt. Wer nur den Mittelwert liest, hält die Richtung für tot. Die Zahl, die zählt, ist die Spitze, und daneben die Struktur je 32px-Kachel: p95 26 (unter ~10 sieht man nichts, ab ~18 sieht man es). Messwerkzeuge: proben/hintergrund/messen.mjs und struktur.mjs. ============================================================ WAS BEWUSST WEGGEFALLEN IST ============================================================ · Die vier Blobs samt Puls- und Drift-Animation. Sie liefen endlos weiter, auch bei Deckung 0 — gemessen 8 laufende Animationen im Leerlauf. Bogen hat KEINE CSS-Animation: steht die Seite, steht der Hintergrund, und die rAF-Schleife schläft. · Die Maske „nur rechts unten" (Patrick, 04.09.2026). Sie war das Pflaster auf einer zu blassen Fläche. Bogen setzt seine Bögen bewusst, eine Maske würde sie nur beschneiden. · --pbg-intensity als Arbeitsmittel. Der Regler steht unten noch als Notausgang auf 1, aber ⚠ HERUNTERDREHEN IST NICHT DIE LÖSUNG, wenn etwas zu präsent wirkt: die Strichfarben sind einzeln getunt, und ein global gedimmter Strich verlässt das Sichtbarkeitsfenster wieder. Wer es ruhiger will, senkt die Deckung der Höfe oder nimmt einen Bogen raus. Der vorige Stand liegt vollständig in proben/hintergrund/alter-bestand/ (background.html, background.css, background.js), die Begründung in proben/hintergrund/LIESMICH.md. ============================================================ */ .pbg-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; opacity: var(--pbg-intensity, 1); } /* ------------------------------------------------------------ Die Bögen ------------------------------------------------------------ */ .pbg-bogen { position: absolute; width: var(--pbg-d); height: var(--pbg-d); will-change: transform; transform: translate3d(0, 0, 0); } .pbg-bogen svg { display: block; width: 100%; height: 100%; overflow: visible; } .pbg-bogen circle { fill: none; } /* ZWEI STRICHARTEN, mit Absicht verschieden: · Die LINIE bleibt über vector-effect bei 1,25 Bildpunkten, egal wie groß der Kreis ist — eine Haarlinie muss eine Haarlinie bleiben, sonst verlässt sie das Sichtbarkeitsfenster nach oben. · Der HOF hat KEIN vector-effect. Seine Breite steht damit in Nutzereinheiten des viewBox (0 0 100 100), 2.4 sind also 2,4 % des Durchmessers, und er wächst mit dem Kreis. Sonst läge auf einem 265px-Kreis am Handy derselbe Hof wie auf einem 1300px-Kreis am großen Schirm, und der Bogen wäre nur noch Hof. ⚠ Kein filter:blur und kein farbiger box-shadow — der Hof ist ein zweiter, breiterer Kreis mit geringer Deckung (Safari-Performance, DESIGN.md). */ .pbg-linie { vector-effect: non-scaling-stroke; stroke-width: 1.25; } .pbg-hof { stroke-width: 2.4; } .pbg-linie { stroke: color-mix(in srgb, var(--green-900) 11%, transparent); } .pbg-hof { stroke: color-mix(in srgb, var(--green-800) 3%, transparent); } .pbg-linie--mint { stroke: color-mix(in srgb, var(--green-600) 16%, transparent); } .pbg-hof--mint { stroke: color-mix(in srgb, var(--tech) 13%, transparent); } /* ⚠ MASSE RELATIV, NICHT IN FESTEN PIXELN. Ein früherer Stand hatte feste Durchmesser (940 / 1280 / 720 px). Gemessen blieben die über alle Breiten konstant, das Verhältnis zum Bild kippte dafür von 0,51 Bildbreiten auf 1920 auf 2,49 auf 390. Zwei Folgen, beide am Handy sichtbar: der Radius wurde größer als das Bild (1,2 bis 1,7 Bildbreiten), damit verlor der Kreis seine Krümmung und las sich als schiefe Linie; und weil die Linie über den größten Teil ihres Wegs außerhalb des Fensters lag, blieb nur übrig, wo sie den Rand kreuzt — die Bögen klebten an den Kanten. Jetzt: Durchmesser in vw, waagerechte Versätze in Prozent. Beides bezieht sich auf die Fensterbreite, die Komposition ist damit auf jeder Breite dieselbe. Gemessen liegt Radius zu Bildbreite konstant bei 0,36 / 0,52 / 0,30 über 1280 bis 1920. Das clamp() hält beide Enden fest. */ .pbg-bogen[data-pbg="k1"] { --pbg-d: clamp(260px, 68vw, 1500px); right: -23%; top: -33vh; } .pbg-bogen[data-pbg="k2"] { --pbg-d: clamp(320px, 96vw, 1900px); left: -47%; top: 34vh; } .pbg-bogen[data-pbg="k3"] { --pbg-d: clamp(240px, 55vw, 1200px); right: -18%; top: 58vh; } /* ⚠ WENIGER BÖGEN AUF SCHMALEN SCHIRMEN. Richtig skaliert sind drei Bögen am Handy immer noch zu viel — zwischen ihnen bleibt keine freie Fläche. Unter 1024 px fällt der obere Tinten-Bogen weg, unter 700 px bleibt nur der Mint-Bogen. ⚠ WAS DAS NICHT LÖST: am Telefon ist Bogen ohnehin fast unsichtbar, weil die Karten dort von Kante zu Kante laufen und kein freier Grund übrig bleibt. Gemessen berührt die Ebene bei 390px nur 0,3 % der Fläche (bei 1440px 5,8 %). Linien brauchen freie Fläche und finden am Handy keine. Das ist eine Eigenschaft des Layouts, nicht des Hintergrunds. */ @media (max-width: 1023px) { .pbg-bogen[data-pbg="k1"] { display: none; } } @media (max-width: 699px) { .pbg-bogen[data-pbg="k2"] { display: none; } .pbg-bogen[data-pbg="k3"] { --pbg-d: clamp(300px, 104vw, 760px); right: -38%; top: 44vh; } } /* ⚠ SEITEN MIT SEITENSPALTE (93 der 149 Seiten, Stand 09.09.2026: Blog, Glossar, Referenzen, Presse). Dort steht links ein Inhaltsverzeichnis, die Lesespalte sitzt also RECHTS der Mitte — und der Mint-Bogen lief in der Probe mitten durch den Text. Die Bögen richten sich am Viewport aus, nicht am Textkasten, sie können das von sich aus nicht wissen. ⚠ EIN BLOSSES „WEITER NACH AUSSEN" REICHT NICHT. Erster Versuch waren right:-34% und left:-63%; gemessen berührten die Bögen den Text trotzdem auf 2,1 bis 3,4 % der Textfläche. Der Grund ist die rechte Flanke von k2: bei 96vw Durchmesser reicht sie auch bei -63% noch bis x≈475, die Spalte beginnt aber schon bei x≈396. Ein Prozentwert, der bei 1920 passt, passt bei 1280 nicht — dort ist der Außenrand nur 40 px breit. Deshalb werden die Bögen hier NICHT am Viewport, sondern am INHALTSCONTAINER verankert: der Versatz ist so gerechnet, dass die innere Flanke des Kreises (plus Hof) genau am Rand des 1200px-Containers steht. Damit kann kein Bogen den Text treffen — auf keiner Breite, ohne dass irgendwo eine Zahl nachgepflegt werden muss. Und es ist selbstbegrenzend: je schmaler das Fenster, desto kleiner der Außenrand, desto weiter sind die Bögen draußen. Bei 1280 bleibt fast nichts sichtbar, bei 1920 ein breiter Streifen — genau proportional zum Platz, der da ist. Der Selektor hängt an .toc, weil genau diese Seiten das Element haben — nicht an data-category, das trifft auch FAQ und Preise ohne Seitenspalte. Geprüft wird das gemessen: proben/hintergrund/pruef-textkasten.mjs vergleicht Ebene an gegen aus INNERHALB des Textkastens und muss 0 ergeben. ⚠ WER DAS ZURÜCKNEHMEN WILL: diese zwei Regeln löschen. Dann laufen die Bögen wieder über den Text — das ist eine Geschmacksfrage, kein Lesbarkeitsproblem (der Strich ändert den Grund unter dem Text um maximal 31 von 255 Stufen, der Textkontrast bleibt über 13:1). */ body:has(.toc) .pbg-bogen[data-pbg="k1"], body:has(.toc) .pbg-bogen[data-pbg="k3"] { right: calc(-1 * (var(--pbg-d) - (100vw - var(--maxw)) / 2 + var(--pbg-hofluft))); } body:has(.toc) .pbg-bogen[data-pbg="k2"] { left: calc(-1 * (var(--pbg-d) - (100vw - var(--maxw)) / 2 + var(--pbg-hofluft))); } /* Luft für den Hof: er ist 2,4 % des Durchmessers breit und liegt zur Hälfte außerhalb der Linie, dazu ein paar Pixel Sicherheitsabstand. */ .pbg-layer { --pbg-hofluft: 28px; } /* Bewegungsarm: Endzustand steht sofort und unbewegt. Das JS startet unter dieser Einstellung gar nicht erst. */ @media (prefers-reduced-motion: reduce) { .pbg-bogen { transform: none !important; } }