/* ══ Seekarte: die grafische Schicht der ganzen Seite ═════════════════════ * * Warum es diese Datei gibt (Ansage des Inhabers vom 24.09.2026): die Seite * war gut gebaut, sah aber nach nichts Bestimmtem aus. Ein Karomuster ist * nicht maritim, eine dünne Welle ist kein Merkmal. Gesucht war etwas, das * jeder vom Wasser sofort erkennt und das kein zweiter Anbieter hat. * * Die Antwort steht auf jeder Papierseekarte der Welt und nirgends sonst. * * Zuerst gehoerten auch Tiefenlinien mit Lotungszahlen dazu, geschwungene * Kurven quer hinter dem Inhalt. Sie sind am 24.09.2026 wieder entfallen: * zusammen mit Leiste und Rose war es zu viel auf einmal (Norman). Geblieben * ist das Ruhige, das den Raum nicht fuellt: * * 1. Der Kartenrand mit Minutenteilung. Die abwechselnd hellen und dunklen * Blöcke, jede fünfte Minute schwerer, jede zehnte beschriftet. Wer je * einen Kurs abgegriffen hat, kennt diese Leiste. Sie steht hier links * und rechts am Fenster und trägt zugleich den Scrollfortschritt: der * Zeiger wandert mit, als Lotung in Metern, wie die Tiefenzahlen einer * Karte. * 2. Die Feuerkennung. Der Punkt oben links blinkt Fl(3) 15s, eine echte * Leuchtfeuerkennung: drei Blitze, dann Dunkelphase, alle 15 Sekunden. * Wer sie kennt, erkennt sie. Wer nicht, sieht ein ruhiges Blinken. * * Grenzen, die diese Schicht einhält: * - Sie liegt IMMER hinter dem Inhalt (z-index 0 und darunter) und nimmt * nie einen Klick an (pointer-events: none). * - Unter 1180px Fensterbreite entfallen die Randleitern. Auf dem Telefon * ist kein Platz dafür, und eine halbe Leiste ist schlechter als keine. * - prefers-reduced-motion schaltet jede Bewegung ab, nicht die Grafik. * - Keine Datei, kein Bild, kein Netzzugriff: alles sind Farbverläufe und * ein SVG-Pfad im Stilblatt. Das kostet keinen einzigen Request. * * Aufbau der Elemente übernimmt static/js/seekarte.js, damit keine der * knapp 400 Seiten Markup dafür braucht. */ .nm-seekarte { position: fixed; inset: 0; pointer-events: none; contain: strict; } /* Zwei Schichten, weil sie an verschiedene Stellen des Stapels gehoeren. Die Tiefenlinien liegen HINTER allem (-1): sie sind Hintergrund und duerfen keinen Text ueberlagern. Die Randleiter liegt DAVOR (3): sie sitzt schmal am Fensterrand, und Sektionen mit eigener Flaechenfarbe wuerden sie sonst verdecken. Beide nehmen keinen Klick an. */ .nm-seekarte-hinten { z-index: -1; } .nm-seekarte-vorn { z-index: 3; } /* ── Kartenrandleiter ────────────────────────────────────────────────────── So ist die Leiste auf Papier aufgebaut und so ist sie hier nachgebaut: ein feiner Takt fuer die einzelne Minute, und jede fuenfte Minute ein Block ueber die volle Breite. Zwei getrennte Verlaeufe uebereinander, der volle liegt oben, damit die Fuenferteilung durchgehend ist und nicht vom feinen Takt zerschnitten wird. */ .nm-rand { position: absolute; top: 0; bottom: 0; width: 16px; background-color: color-mix(in srgb, var(--color-accent) 7%, transparent); background-image: /* jede fuenfte Minute: voller Block */ repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 92%, transparent) 0 11px, transparent 11px 55px), /* der feine Takt: halbe Breite */ repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 58%, transparent) 0 5px, transparent 5px 11px); background-size: 16px 100%, 7px 100%; background-repeat: repeat-y; } .nm-rand-l { left: 0; background-position: left top, right top; border-right: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent); } /* Nur links. Beide Raender zusammen rahmten die Seite ein wie ein Passepartout und nahmen ihr die Weite (Norman, 24.09.2026). Eine Leiste genuegt, um die Karte zu zitieren, und der Blick bleibt beim Inhalt. */ /* Der Zeiger: die Lotung an der Stelle, an der man gerade steht. Er sitzt an der Innenkante der Leiste und wandert mit dem Scrollen. --y setzt das Skript, in Pixeln von oben. */ .nm-lot { position: absolute; top: 0; left: 0; transform: translateY(calc(var(--y, 0) * 1px)); display: flex; align-items: center; padding-left: 24px; font-family: var(--font-num, monospace); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--color-accent); text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 60%, transparent); white-space: nowrap; } /* Das Dreieck am Kartenrand, wie der Zeiger eines Kursdreiecks */ .nm-lot::before { content: ""; position: absolute; left: 17px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: var(--color-accent); } /* die Marke auf der Leiste selbst */ .nm-lot::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; background: var(--color-accent-100, #fff); box-shadow: 0 0 9px 1px var(--color-accent); } /* ── Die Kompassrose ────────────────────────────────────────────────────── Auf jeder Karte steht eine, und sie ist das Bild, das jeder sofort mit Navigation verbindet. Hier steht sie gross und blass hinter dem Inhalt und dreht sich beim Scrollen langsam mit: knapp 40 Grad ueber die ganze Seitenlaenge, gerade genug, dass man es merkt, wenn man darauf achtet. Ihr Platz ist die untere rechte Ecke, halb aus dem Bild heraus. Mittig am Rand lag sie staendig hinter dem Fliesstext; unten rechts ist die Ecke, in der auf einer Karte ohnehin die Rose oder der Titel steht, und sie stoert keine Zeile. */ .nm-rose { position: absolute; right: -170px; bottom: -190px; width: 560px; height: 560px; /* blass genug, dass Text darueber ohne Muehe lesbar bleibt: sie ist Hintergrund und nicht Bild. */ opacity: .34; transform: rotate(calc(var(--dreh, 0) * 1deg)); transform-origin: 50% 50%; will-change: transform; background: no-repeat center/contain url("data:image/svg+xml;utf8,NSEW"); } @media (max-width: 1179px) { .nm-rose { width: 340px; height: 340px; right: -130px; bottom: -130px; opacity: .34; } } /* ── Die Feuerkennung ────────────────────────────────────────────────────── Fl(3) 15s: drei Blitze zu je 0,4 Sekunden im Abstand von 1,6 Sekunden, danach 10,4 Sekunden Dunkelheit. Die Prozentwerte unten sind genau das, umgerechnet auf 15 Sekunden Umlaufzeit. Der Punkt ist klein geblieben und blitzt dafuer richtig: beim Blitz ein weisser Kern mit weitem Schein, dazwischen glimmt er nur (Norman, 24.09.2026: "auffaelliger, aber nicht groesser"). Auf dem Telefon gibt es ihn ohnehin nicht, dort faellt er mit der Randleiste weg. */ @keyframes nm-feuer { 0%, 2.6% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 2.7%, 10.6%{ opacity: .22; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 40%, transparent); } 10.7%,13.3%{ opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 13.4%,21.3%{ opacity: .22; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 40%, transparent); } 21.4%,24% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 24.1%,100% { opacity: .22; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 40%, transparent); } } .nm-feuer { position: absolute; left: 22px; top: 96px; width: 7px; height: 7px; border-radius: 50%; /* der Kern bleibt weiss, erst der Schein traegt die Hausfarbe: so sieht ein Feuer aus, wenn man es ueber Wasser blitzen sieht. */ background: var(--color-accent-100, #fff); animation: nm-feuer 15s linear infinite; } /* ── Was wann verschwindet ──────────────────────────────────────────────── Unter 1180px gibt es keine Randleitern: dort steht der Inhalt bis an den Fensterrand, die Leiste läge unter dem Text. Die Tiefenlinien bleiben, sie brauchen keinen Platz. */ @media (max-width: 1179px) { .nm-rand, .nm-lot, .nm-feuer { display: none; } } @media (prefers-reduced-motion: reduce) { .nm-feuer { animation: none; opacity: .5; } .nm-rose { transform: none !important; } }