/* NORDIX — Karte des Einzugsgebiets RUNDE 62: STANDBILD. Bis dahin baute MapLibre die Karte im Browser. Björn hat sich für das Standbild entschieden, und damit fällt beides weg: die Bibliothek (1 MB) und die Kachelanfragen an `tiles.openfreemap.org`. Was bleibt, ist ein Bild, eine Marke und die Herkunftsangabe. Diese Seite hat danach keinen einzigen fremden Server mehr, der vor einer Zustimmung angesprochen wird. Die Aufnahme entsteht in `tools/karte-standbild.html`; dort steht auch die Umfärbung, die vorher in `karte.js` stand. DIE HÖHE KOMMT JETZT AUS DEM SEITENVERHÄLTNIS. Vorher stand hier `height:clamp(320px,44vh,460px)` — die Höhe hing also an der FENSTERhöhe, die Breite an der Fensterbreite, und das Verhältnis war damit auf keinem Gerät vorhersagbar. Bei einer Kartenbibliothek war das gleichgültig: Sie rendert in jeden Rahmen. Ein Bild kann das nicht; es wird dann beschnitten, und irgendwann schneidet der Rand den 30-km-Kreis an. Die drei Werte hier sind exakt die Verhältnisse der drei Aufnahmen. Bei 375 / 820 / 1440 px kommt damit fast auf den Pixel dieselbe Höhe heraus wie vorher (357 / 459 / 504 statt 357 / 460 / 504) — nur hängt sie jetzt an der Breite und springt nicht mehr, wenn jemand das Fenster flacher zieht. Die Vorlage war „mapcn-marker-tooltip" (21st.dev). Von ihr ist nach diesem Umbau nur noch der orange Punkt mit dem Puls übrig; die Sprechblase beim Darüberfahren ist einer festen Beschriftung gewichen. */ /* Wie breit die Karte höchstens wird. Bis zum 18.08.2026 lief sie über die volle Sektionsbreite — bei 1436 px Fenster also 1323 px, mit nur 56 px Luft je Seite. Björns Befund: optisch zu breit, der Rahmen drückt gegen die Ränder und das Bild wirkt dadurch wie ein Banner statt wie eine Karte. 1100 px lassen bei 1436 px Fenster rund 168 px je Seite frei — die Karte sitzt sichtbar mittig, ohne in die schmale Lesespalte (~620 px) zu rutschen, die für eine Landkarte zu eng wäre. Auf schmalen Schirmen greift `min(100%, …)` und es ändert sich nichts. Eine einzige Zahl: Wer die Karte breiter oder schmaler will, dreht hier und nirgends sonst. */ :root{--karte-max:1100px} .karte-rahmen{ position:relative; margin-top:clamp(26px,3vw,38px); width:min(100%,var(--karte-max)); margin-inline:auto; aspect-ratio:1160 / 1208; /* karte-hoch, 0,96 */ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); } /* Die beiden `min-height` fangen die Stelle direkt hinter einem Umbruch ab. Bei 560 px wäre der Rahmen sonst 528 × 324, bei 1001 px 918 × 349 — in beiden Fällen ein flacher Streifen. Der Boden macht daraus wieder eine Karte und kostet einen kleinen Beschnitt links und rechts, der nur die Landschaft trifft: Der Kreis füllt quer 49 %, breit 31 % der Bildbreite, und beschnitten wird von der Mitte aus. */ @media(min-width:560px){ .karte-rahmen{aspect-ratio:1560 / 956;min-height:380px} /* karte-quer, 1,63 */ } /* Aus der Lesespalte heraus: Die Karte steht als Geschwister von `.sec`, nicht darin (siehe Kommentar im HTML und STAND.md, Runde 57). Damit hat sie links und rechts denselben Abstand wie Kopfzeile, Fußzeile und jede Überschrift. Der Deckel von 620 px greift erst jenseits von rund 1630 px Fensterbreite. Darüber wird das Bild oben und unten beschnitten — das trifft nur die Landschaft am Rand: Der Kreis füllt 83 % der Bildhöhe, beschnitten wird von der Mitte aus, und selbst bei 2560 px bleiben 91 % stehen. */ @media(min-width:1001px){ section > .karte-rahmen{ aspect-ratio:2800 / 1064; /* karte-breit, 2,63 */ min-height:400px; max-height:620px; /* Ohne diese Zeile schrumpft der Deckel die BREITE mit: Ein Block mit `aspect-ratio` rechnet sich seine Breite aus der gedeckelten Höhe zurück — bei 1920 px standen 1632 statt 1793 px da, und die Karte war rechts nicht mehr bündig mit Kopfzeile und Überschrift. Genau das war in Runde 57 der Punkt. Eine feste Breite setzt die Breite fest; dann greift der Deckel, wofür er gedacht ist, und das Bild wird beschnitten. Seit dem 18.08.2026 steht hier `min(100%, var(--karte-max))` statt `100%`: Die Karte lief sonst über die volle Sektionsbreite und wirkte als Banner. Die Zeile muss HIER stehen und nicht an der Grundregel — `section > .karte-rahmen` hat mit (0,1,1) die höhere Spezifität als `.karte-rahmen` mit (0,1,0) und hätte jeden Deckel dort überstimmt. */ width:min(100%,var(--karte-max)); } } /* `picture{display:contents}` gilt seitenweit (siehe galerie.css) — die Regel hier greift also auf das `img` durch. */ .karte-rahmen img{ display:block;width:100%;height:100%; object-fit:cover;object-position:center; } /* Die Ränder ausblenden, damit die Karte nicht wie ein eingeklebtes Fremdelement wirkt, sondern in die Fläche übergeht. */ .karte-rahmen::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 44px 14px color-mix(in srgb,var(--bg) 85%,transparent); } /* ---------- Die Ortsmarke ---------- Ein Anker ohne eigene Ausdehnung genau in der Bildmitte. Warum die Mitte stimmt, steht im HTML: Der Ausschnitt ist aus dem Radius abgeleitet, und der Kreis liegt symmetrisch um Erkelenz. `object-fit:cover` beschneidet von der Mitte aus — die Marke bleibt also auf dem Ort sitzen, egal wie das Fenster steht. */ .kmark{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2} .kpunkt{ position:absolute;left:0;top:0;transform:translate(-50%,-50%); width:16px;height:16px;border-radius:999px; background:var(--orange); border:1.5px solid var(--bg); box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 55%,transparent); animation:kpuls 2.8s ease-out infinite; } @keyframes kpuls{ 0% {box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 55%,transparent)} 70% {box-shadow:0 0 0 16px color-mix(in srgb,var(--orange) 0%,transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 0%,transparent)} } /* Der Name steht fest da statt in einer Sprechblase beim Darüberfahren. Auf einer Karte, die sich nicht mehr bewegt, gibt es nichts zu enthüllen — und auf dem Handy gab es nie ein Darüberfahren. */ .kort{ position:absolute;left:16px;top:0;transform:translateY(-50%); padding:4px 9px; background:color-mix(in srgb,var(--bg) 78%,transparent); border:1px solid var(--line-2); border-radius:6px; font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);white-space:nowrap; } /* ---------- Herkunftsangabe ---------- Bleibt Pflicht: Die Kacheln stammen von OpenFreeMap, die Daten aus OpenStreetMap. Dass beides jetzt nur noch einmal beim Aufnehmen abgerufen wurde und nicht mehr bei jedem Besucher, ändert an der Nennung nichts. */ .karte-quelle{ position:absolute;right:9px;bottom:7px;z-index:4; font-size:10px;letter-spacing:.06em; color:var(--ink-3); background:color-mix(in srgb,var(--bg) 72%,transparent); padding:3px 8px;border-radius:5px; } .karte-quelle a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)} .karte-quelle a:hover{color:var(--orange)} @media(prefers-reduced-motion:reduce){ .kpunkt{animation:none} }