/* ══ 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 Kennung. Der Punkt oben links blinkt SOS in echtem Morse, alle * zwoelf Sekunden einmal. Das eine Signal, das jeder kennt, und bei * einem Bootsversicherer ist es das passende. * * 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 Kennung ────────────────────────────────────────────────────────── Erst war es eine Leuchtfeuerkennung, Fl(3) 15s. Die kennen nur Leute, die Karten lesen. Jetzt blinkt der Punkt SOS (Norman, 24.09.2026: "ein SOS wuerde wohl am besten bei Versicherung passen"), und das versteht jeder, ohne es je gelernt zu haben. Echtes Morse, nicht ungefaehr: drei kurz, drei lang, drei kurz. Kurz sind 0,3 Sekunden, lang die dreifache Zeit, die Pause zwischen zwei Zeichen ist so lang wie ein kurzes, die zwischen zwei Buchstaben so lang wie ein langes. Dann 3,9 Sekunden Ruhe, damit der Ruf als Ruf erkennbar bleibt und nicht als Flackern. Ein Umlauf dauert genau 12 Sekunden, daher die Prozentwerte unten. Der Punkt ist klein geblieben und blitzt dafuer richtig: weisser Kern mit weitem Schein, dazwischen glimmt er nur ("auffaelliger, aber nicht groesser"). Auf dem Telefon gibt es ihn nicht, dort faellt er mit der Randleiste weg. Das Signal steht hier als Bild, nicht als Meldung: es ist ein blinkender Punkt in einer Seitengrafik, nirgends als Notruf beschriftet und an keine Funktion gebunden. */ @keyframes nm-feuer { 0%, 2.4917% { 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.5%, 4.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 5%, 7.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 7.5%, 9.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 10%, 12.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 12.5%, 19.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 20%, 27.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 27.5%, 29.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 30%, 37.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 37.5%, 39.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 40%, 47.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 47.5%, 54.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 55%, 57.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 57.5%, 59.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 60%, 62.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 62.5%, 64.9917% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } 65%, 67.4917% { opacity: 1; box-shadow: 0 0 9px 3px var(--color-accent), 0 0 26px 9px color-mix(in srgb, var(--color-accent) 55%, transparent); } 67.5%, 100% { opacity: .18; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 35%, 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 12s 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; } }