Zum Hauptinhalt springen

Hybrid-Centerplan: PNG-Hintergrund mit Polygon-Layer

Manche Architekten oder Center liefern Pläne als hochwertige Rastergrafik (PNG/JPEG) statt als saubere Vektordatei. Damit solche Pläne trotzdem als interaktiver Centerplan funktionieren, unterstützt CockpitOS ein Hybrid-Format:

Eine SVG-Datei mit dem PNG als eingebettetem Hintergrund + transparenten Polygonen als interaktivem Layer – plus optional ein JSON mit pro-Shop-viewBox für scharfe Detail-Ausschnitte auf Shop-Detailseiten.

Das ist der gleiche Daten-/Anzeigepfad wie ein „normaler" SVG-Centerplan – nichts ändert sich beim Upload, beim Mapping oder im Frontend. Es ist also keine Migration und kein Datenverlust zu erwarten.

Wann macht das Sinn?​

  • Plan kommt als PNG/JPEG vom Architekten und enthält viele feine grafische Details (Schatten, Texturen, Symbole), die als Vektor mühsam zu rekonstruieren wären.
  • Du willst trotzdem klickbare/hoverbare Shops, Services usw. mit allem, was das CockpitOS-Wayfinding bietet.
  • Auf der Shop-Detailseite soll ein knackscharfer Ausschnitt zu sehen sein.

Auflösung, Zoom — Plus und Minus​

Der große Vorteil: Ihr könnt den Plan visuell frei gestalten — Schatten, Texturen, Icons, schöne Farben, alles was KI-Tools oder Grafikprogramme gut können. Das wirkt auf der Website oft deutlich hochwertiger als ein schlichter Vektor-Grundriss.

Was ihr beachten solltet: Der Hintergrund ist ein Bild, kein unendlich scharfer Vektor. Deshalb:

  • Auflösung: Lieber groß und scharf exportieren (typisch mind. 2000–3000 px auf der längeren Kante; bei sehr großen Centern eher mehr). Ein kleines, unscharfes Bild wird beim Zoomen auf dem Plan oder in Detail-Ausschnitten weich oder pixelig.
  • Stark reinzoomen auf der Gesamtübersicht kann sichtbar werden — das ist normal bei Rasterplänen. Für Shop-Detailseiten kann das Cockpit optional scharfe Ausschnitte (shopViewBoxes) mitliefern; dafür lohnt sich ein gutes Ausgangsbild.
  • Klassische SVG aus Illustrator bleibt unschlagbar, wenn ihr extrem nah ranzoomen müsst oder der Plan ständig vektorisch nachgezogen wird.

Kurz: Hybrid = Top-Optik und schneller Start (z. B. KI-Bild → Cockpit). Trade-off = Bildqualität und Auflösung mitdenken, nicht nur „irgendein kleines PNG“.

Aufbau eines Hybrid-SVG​

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 1600 1200">

  <!-- 1) Raster-Hintergrund: das PNG eingebettet als Data-URL ODER als externe URL -->
  <image x="0" y="0" width="1600" height="1200"
         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" />
  <!-- Alternativ: href="https://cdn.cockpitos.dev/centers/<id>/centerplan/plan.png" -->

  <!-- 2) Optional: Gruppe als „Hover-Layer“ markieren – stellt sicher, dass die
       Polygone unsichtbar bleiben und nur beim Hover leicht eingefärbt werden. -->
  <g id="hover-layer">
    <!-- Shops: jede ID nach Konvention shop-XX -->
    <polygon id="shop-EG-29" points="180,120 270,120 270,180 180,180" fill="none" />
    <polygon id="shop-EG-30" points="280,120 370,120 370,180 280,180" fill="none" />

    <!-- Services -->
    <polygon id="service-OG-treppe" points="…" fill="none" />
    <polygon id="service-OG-aufzug" points="…" fill="none" />
  </g>
</svg>

Wichtig:

  1. Das <image> muss den vollen Plan abdecken. Die viewBox der SVG sollte die Größe des Bilds widerspiegeln (z. B. PNG ist 1600×1200 → viewBox="0 0 1600 1200").
  2. Polygone bekommen fill="none" oder fill-opacity="0" – so sind sie unsichtbar, fangen aber Klicks/Hover ab.
  3. IDs folgen der Konvention shop-…, service-…, entrance-… (siehe SVG-Struktur). Optional kann der Polygon-Layer in <g id="hover-layer"> verpackt werden – CockpitOS sorgt dann automatisch für transparente Darstellung mit leichter Hover-Einfärbung.
  4. Das CSS im Frontend setzt pointer-events: none für <image>, sodass alle Klicks zuverlässig die Polygone treffen.

Variante A (empfohlen): Automatische Segmentierung im Dashboard​

CockpitOS kann ein PNG/JPEG direkt im Dashboard in eine Hybrid-SVG mit Polygon-Layer umwandeln. Du brauchst dafür kein Inkscape und keine externen Tools – nur den Centerplan als Bilddatei.

Workflow​

Neue Etage mit Raster direkt: Unter Centerpläne → Neue Etage kannst du im Dialog den Tab „Raster (Hybrid)“ wählen und PNG/JPEG/WebP hochladen. Nach dem Speichern öffnet sich die Etage mit aktivem Tab „SVG-Centerplan“, sodass du dort mit Auto-Segmentierung weitermachst (wie bei bestehenden Etagen).

  1. Etage öffnen: Centerpläne → Etage bearbeiten → Tab „SVG-Centerplan".
  2. In der ersten Karte „PNG → Hybrid-SVG (automatische Segmentierung)":
    • Centerplan hochladen (PNG, JPEG oder WebP – Bunny CDN nimmt seit dem letzten Update alle drei Formate für Centerpläne an).
    • Optional die Erkennungs-Parameter anpassen (siehe Tabelle unten) – in den meisten Fällen reichen die Defaults.
    • „Vorschau erzeugen" klicken → der Server lädt das Bild, segmentiert es und zeigt eine isolierte Vorschau mit der Anzahl gefundener Polygone.
    • Vor großen Änderungen im Cockpit kannst du die aktuelle Hybrid-Datei auch in der Karte „SVG-Centerplan“ mit „Hybrid-SVG herunterladen“ als .svg sichern (identisch zur gespeicherten mapSvg) — hilfreich, wenn du nur das eingebettete Rastergrafik austauschen willst und die Polygon-IDs beibehalten möchtest.
  3. Danach in den Tab „Polygon-Editor" wechseln und jedem Polygon seine finale ID-Konvention zuweisen (siehe weiter unten).

Planbild später austauschen (Polygone behalten)​

Wenn der Architekt oder KI ein überarbeitetes PNG/JPEG liefert (neues Format, zusätzliche Elemente, andere Farben), aber die Polygon-Zuordnungen im Cockpit bestehen bleiben sollen:

  1. Etage öffnen → Tab „SVG-Centerplan" → Karte „PNG → Hybrid-SVG".
  2. Neues Bild hochladen – die UI wechselt automatisch in den Modus „Hintergrund tauschen (Polygone behalten)".
  3. „Vorschau erzeugen" → prüfen, ob das neue Raster passt (Hinweis bei abweichendem Seitenverhältnis).
  4. „Hintergrund übernehmen" – aktualisiert mapSvg (<image xlink:href="…">) und mapImage in der Datenbank; Polygon-IDs und MapLocations bleiben unverändert.
  5. Center-Website-Cache wird invalidiert (ISR-Revalidation).

Wichtig: Der Modus „Additiv hinzufügen" segmentiert nur zusätzliche Polygone aus dem neuen Bild – er tauscht nicht den sichtbaren Hintergrund. „Komplett ersetzen" verwirft alle bestehenden Polygone und startet neu.

Empfehlung: Gleiches Seitenverhältnis wie beim Erst-Upload (Polygone liegen in der bestehenden SVG-Canvas). Stark andere Proportionen können das Bild leicht verzerren; die Klickflächen bleiben an den alten Koordinaten.

Alternativ (extern): Hybrid-SVG herunterladen, Raster in Inkscape tauschen, SVG erneut hochladen – funktioniert, ist aber fehleranfälliger als der Cockpit-Modus oben.

Was die Parameter bewirken​

ParameterWirkungDefault
FarbtoleranzWie stark Pixel sich farblich unterscheiden dürfen, um zur gleichen Region gezählt zu werden. Höher = großzügiger zusammenfassen (Risiko: Shops verschmelzen).30
Mindestgröße (Pixel, downscaled)Regionen kleiner als dieser Wert werden als „Rauschen" verworfen. Erhöhen, wenn zu viele Mini-Polygone entstehen.200
Hintergrund-ToleranzPixel mit Abstand ≤ diesem Wert zur dominanten Eckenfarbe werden als Hintergrund ignoriert.40
Polygon-Vereinfachung (Pixel)Douglas-Peucker-Epsilon. Höher = weniger Eckpunkte (kleinere SVG, leicht kantigere Polygone).1.5
Max. VerarbeitungsmaßeBegrenzt die Bildgröße fürs Verarbeiten (Performance). Originalmaße bleiben in der finalen SVG erhalten.1500

Wie funktioniert das technisch?​

  1. Bild laden: Bunny-URL → sharp (libvips) → RGBA-Pixel-Buffer.
  2. Downscale auf max. ~1500 px Kantenlänge (rein für Performance; die Polygon-Koordinaten werden am Ende auf die Originalmaße zurückskaliert).
  3. Hintergrund erkennen: Median-Farbe der vier Bildecken (mit Inset).
  4. Connected-Components per Flood-Fill mit Farbtoleranz – jeder zusammen­ hängende, hintergrund­verschiedene Bereich wird zu einer Region.
  5. Filter: Mindest-Pixelanzahl + maximaler Anteil (verhindert, dass eine große Hintergrundfläche fälschlich als „Region" eingestuft wird).
  6. Boundary-Tracing (Moore-Nachbarschaft) → geschlossene Außenkontur.
  7. Douglas-Peucker-Vereinfachung → kompaktere Polygon-Punkte.
  8. Hybrid-SVG bauen mit <image> (Bunny-URL) + <g id="shops"> voller <path>-Elemente mit IDs shop-EG-tbd-01, shop-EG-tbd-02, …

Der Floor-Prefix (EG, OG1, …) wird automatisch aus dem Etagen-Namen abgeleitet, sodass die Polygone direkt mit dem Editor-Workflow zusammenpassen.

Datenverlust-Schutz​

  • Vorschau zuerst, Apply nur explizit: Es gibt keinen Auto-Apply.
  • Bestehende mapSvg blockiert: Wenn die Etage schon ein SVG hat, lehnt der Server mode=apply ohne replaceExisting: true ab. Die UI fragt explizit nach und bietet vorher den Download des aktuellen SVGs an.
  • shopViewBoxes bleibt unangetastet: Die tbd-XX-Provisorien sind irrelevant für die existierende viewBox-Map – sie passen erst nach der ID-Zuweisung im Polygon-Editor.

Praxis: Konturen, Services, Eingänge, Dekoratives​

Konturen um Shop-Flächen​

Die meisten Centerpläne haben dunkle Konturlinien zwischen den Shops – das ist Gold wert für die Erkennung. Die Karte hat dafür den Slider „Konturen-Schwelle (Luminanz)" (Default 60). Damit werden alle dunklen Pixel vor dem Flood-Fill als Hintergrund behandelt:

  • Effekt 1: Konturen verschwinden komplett aus den Polygonen, statt als riesiges, unschönes „Linien-Polygon" mitsegmentiert zu werden.
  • Effekt 2: Polygone enden sauber an der Kontur, nicht durch sie hindurch – die Vorschau wirkt deutlich aufgeräumter.
  • Effekt 3: Benachbarte Shops mit fast gleicher Farbe werden zuverlässiger getrennt, weil die Kontur den Flood-Fill blockiert.

Tipps:

  • Wenn dein Plan sehr dünne, hellgraue Konturen hat: Schwelle erhöhen (z. B. 90), bis die Linien rausfallen.
  • Wenn dein Plan gar keine Konturen hat (nur reine Farbflächen): Schwelle auf 0 setzen, sonst werden dunkle Shops fälschlich als Hintergrund behandelt.
  • Falls trotz allem Linien-Reste übrigbleiben: die erweiterten Optionen Aspect-Ratio (Default 12) und Compactness (Default 0.15) verwerfen langgezogene oder löchrige Regionen.

Services (Aufzug, Rolltreppe, WC)​

Service-Symbole sind im PNG meist viel kleiner als Shops. Empfohlener Workflow:

  1. Erster Pass: Polygon-Ebene = Shops, Mindestgröße 200, Modus „Komplett ersetzen". Liefert die großen Shop-Polygone.
  2. Zweiter Pass auf das gleiche PNG: Polygon-Ebene = Services, Mindestgröße auf z. B. 50 reduzieren, Modus „Additiv hinzufügen". Liefert die kleinen Service-Symbole als zusätzliche Polygone, die zur bestehenden SVG hinzugefügt werden – Shops bleiben unverändert.
  3. Dritter Pass für Logos analog (Polygon-Ebene = Logos, ggf. noch kleinere Mindestgröße).

Dann im Polygon-Editor den Service-Symbolen sprechende Suffixe geben (treppe, aufzug-1, wc-damen, …).

Eingänge​

Eingänge sind im PNG häufig Pfeil-Symbole an den Außenseiten. Der Auto-Segmenter erkennt sie meistens, ordnet sie aber nicht automatisch der Konvention zu – das ist auch sinnvoll, weil „der Hauptzugang" eine inhaltliche Entscheidung ist. Vorgehen:

  • Die Pfeile werden im ersten Shops-Pass entweder mit-erkannt (dann im Polygon-Editor klicken → Ebene auf „Eingang" → Suffix haupt / nord / parkhaus → Enter) oder bleiben unsegmentiert.
  • Falls das PNG keine Pfeil-Symbole hat: in Inkscape ein kleines Polygon über den Eingang zeichnen, ID entrance-haupt, SVG re-uploaden.

Dekorative Elemente (Pflanzen, Bänke, Schatten, Maßstab, Kompass-Rose)​

Im Polygon-Editor gibt es zwei dedizierte Aktionen:

  • „Als dekorativ markieren" verschiebt das Polygon in <g id="decorative"> mit pointer-events: none. Das Polygon bleibt im SVG erhalten (für späteren Inkscape-Roundtrip), wird auf der Live-Centerplan-Seite aber weder angezeigt noch klickbar. Im Editor selbst erscheint es als grau schraffiertes Polygon, kann jederzeit per „Wieder interaktiv" zurückgeholt werden.
  • „Polygon entfernen" löscht das Polygon mit Bestätigungsdialog hart aus dem SVG. Sinnvoll für eindeutigen Müll: Schatten, Maßstabsbalken, Nord-Pfeile, Kompass-Rosen.

Auto-Save: Im Polygon-Editor werden Änderungen nach kurzer Pause automatisch in die Datenbank geschrieben (Status „Gespeichert“ oben). Optional kann weiterhin „Speichern“ geklickt werden.

Beim Speichern werden im Hintergrund auch verknüpfte Shop-Mappings sauber mitgezogen: Wenn ein bereits gemapptes Polygon auf „dekorativ" gesetzt wird, verlinkt das MapLocation-Eintrag auf die neue decorative-…-ID statt ins Leere – das Mapping geht nicht verloren, ist aber für den Besucher inert.

Variante B: Hybrid-SVG manuell in Inkscape oder Affinity Designer​

  1. Neues SVG-Dokument mit der Größe deines PNGs (z. B. 1600×1200 px).
  2. PNG einbetten: Datei → Importieren → PNG auswählen → Option „einbetten" (nicht „verknüpfen"). In Inkscape kannst du nach dem Import zusätzlich Bearbeiten → XML-Editor öffnen und prüfen, dass das <image>-Element ein xlink:href="data:image/png;base64,…" hat.
  3. Hover-Layer anlegen: Neue Gruppe oder Layer mit ID hover-layer.
  4. Polygone zeichnen: Über jede Shop- oder Service-Fläche ein Polygon legen.
    • Füllung: keine (transparent)
    • Konturlinie: keine (oder dünn, nur zur Orientierung beim Bearbeiten)
    • ID setzen: Über das Objekt-Eigenschaften-Panel (Strg + Umschalt + O in Inkscape) z. B. shop-EG-29, service-OG-treppe.
  5. Speichern als „Klares SVG" (Inkscape) bzw. „SVG exportieren" (Affinity).
  6. Im Dashboard hochladen → Centerpläne → Etage bearbeiten → SVG-Centerplan. Beim Upload werden Bunny-CDN, viewBox-Normalisierung und Shop-Erkennung automatisch durchgeführt.

Tipp: Wer das PNG zentral pflegen möchte, kann es separat als mapImage hochladen (Bunny erlaubt für Centerpläne jetzt auch PNG/JPEG/WebP) und dann im SVG nur per xlink:href darauf verlinken. Damit lässt sich der Hintergrund später ohne SVG-Änderung tauschen.

Schritt 4 (alternativ): IDs direkt im Dashboard zuweisen​

Wenn die SVG bereits Polygone enthält, deren IDs aber noch nicht der Konvention entsprechen (z. B. weil sie aus einer automatischen PNG-Farbsegmentierung kommen und Namen wie shop-EG-tbd-12 tragen), kannst du die finale Zuweisung ohne Inkscape direkt im Dashboard machen:

  1. Im Centerplan-Editor den Tab „Polygon-Editor" öffnen.
  2. Auto-erkannte Flächen: Rote Fläche anklicken → Art (Shop/Service) und Nummer oder Name eintragen → Zuweisen & weiter.
  3. Fehlende Flächen nachzeichnen (Werkzeug-Leiste über dem Plan):
    • Rechteck: zwei diagonal gegenüberliegende Ecken klicken (typisch für Shop-Grundrisse).
    • Kreis: Mitte klicken, dann einen Punkt auf dem Rand (runde Inseln, Säulen).
    • Ecken: beliebige Form – Ecken nacheinander klicken, Enter oder „Form abschließen" (min. 3 Ecken).
  4. Tasten: 1 Auswählen · 2 Rechteck · 3 Kreis · 4 Ecken · Enter Zuweisen bzw. Form abschließen · Esc abbrechen.
  5. Der Editor zeigt oben den Fortschritt X/Y.
  6. „Speichern" persistiert das aktualisierte SVG plus die ID-Renames in der Datenbank.

Im Tab SVG-Centerplan gibt es für die Auto-Erkennung nur noch Standard / Kleine Flächen – Feinregler nur unter „Feineinstellung".

Was beim Speichern automatisch passiert​

  • Das Polygon erhält die Konventions-ID <layer>-<floorPrefix>-<suffix> und wird in die passende Layer-Gruppe (<g id="shops">, <g id="services">, …) einsortiert. Der Floor-Prefix wird aus dem Etagen-Namen abgeleitet (Erdgeschoss → EG, 1. Obergeschoss → OG1, …).
  • Für die neue ID wird – falls noch nicht vorhanden – ein Eintrag in shopViewBoxes ergänzt (Bounding-Box + 12 px Padding).
  • Bestehende MapLocation.svgId-Verknüpfungen werden mitumbenannt – kein verlorenes Mapping. Das geschieht atomar in einer Transaktion: Erst werden alle betroffenen MapLocations auf einen temporären Marker gesetzt, dann auf die neue ID, damit sich Renames nicht gegenseitig in die Quere kommen.
  • Caches (Redis Shop-Mapping, Center-Website-ISR) werden invalidiert.
  • Zwischenstände werden lokal im Browser (localStorage) gespeichert, damit Arbeit nicht verloren geht – aber nichts wird ohne explizites „Speichern" in die DB geschrieben.

Bestehende Center sind risikolos: Polygone, die bereits korrekt benannt sind (shop-29), erkennt der Editor als „zugewiesen" (grün) und lässt sie unverändert. Wer keinen Bedarf hat, ignoriert den Tab einfach.

Detail-Ausschnitte (shopViewBoxes)​

Auf Shop-Detailseiten bietet CockpitOS einen knackscharfen Vektor-Ausschnitt des Centerplans. Standardmäßig wird per CSS-Transform auf die Bounding-Box des Shops gezoomt – das funktioniert immer, ist aber bei Hybrid-Plänen weniger elegant, weil das PNG dann pixelig wird.

Mit shopViewBoxes (im Dashboard pro Etage pflegbar) wird stattdessen die SVG viewBox gezielt auf den passenden Ausschnitt gesetzt. Das Resultat:

  • Vektor-Skalierung – immer scharf
  • Wiederverwendung der gleichen SVG-Datei – kein Bildschneiden nötig
  • Konsistenter Look auf allen Geräten (Retina, App-WebViews)

So pflegst du die Ausschnitte im Dashboard​

  1. Öffne Centerpläne → Etage bearbeiten → Tab „SVG-Centerplan".
  2. Unterhalb des Upload-Feldes findest du die Karte „Detailseiten-Ausschnitte".
  3. Klicke „Fehlende automatisch berechnen" – das System legt für jeden gefundenen Shop/Service einen viewBox-Vorschlag an (basierend auf der Bounding-Box + frei wählbarem Padding).
  4. Einzelne Werte können per Eingabefeld noch verfeinert werden.
  5. Speichern schreibt die JSON-Map in MapFloor.shopViewBoxes.

Wer keine Ausschnitte pflegen möchte, lässt das Feld einfach leer – das Frontend nutzt dann automatisch den klassischen DOM-Zoom. Es ist ein rein additives, optionales Feature.

JSON-Format (für Entwickler)​

{
  "shop-EG-29": { "viewBox": "180 120 90 60", "padding": 8 },
  "service-OG-treppe": { "viewBox": "300 50 50 80" }
}
  • Schlüssel = SVG-Element-ID (oder data-shop-id).
  • viewBox = Standard-SVG-viewBox als String "minX minY width height".
  • padding ist optional und nur informativ (wird beim Auto-Berechnen abgelegt).

Was passiert intern?​

SchrittKomponente / Datei
Upload (Bunny CDN, jetzt auch PNG/JPEG/WebP für Centerpläne)apps/dashboard/src/app/api/upload/bunny/route.ts
viewBox-Normalisierung (jetzt inkl. <image>-BBox)apps/dashboard/src/lib/wayfinding/svg-viewbox-normalizer.ts
Shop-Erkennung (unverändert, IDs nach Konvention)apps/dashboard/src/lib/wayfinding/svg-analyzer.ts
Frontend: pointer-events für <image>packages/wayfinding/src/components/InteractiveFloorPlan.tsx
Detail-Embed: presetViewBox aus DBapps/center-website/components/shop-detail-center-plan-embed.tsx
Helper-Lib: parsen/serialisieren/auto-berechnenpackages/wayfinding/src/lib/wayfinding/shop-viewboxes.ts
Helper-Lib: Polygone parsen/umbenennen/in Layer einsortierenpackages/wayfinding/src/lib/wayfinding/svg-polygon-editor.ts
Helper-Lib: manuelles Einzeichnen (Rechteck/Kreis/Ecken)packages/wayfinding/src/lib/wayfinding/svg-polygon-draw.ts
Helper-Lib: Bild-Segmentierung (Flood-Fill, Boundary-Tracing, Douglas-Peucker, SVG-Builder)packages/wayfinding/src/lib/wayfinding/image-segmentation.ts
Server-Wrapper: sharp + Pixel-Extraktionapps/dashboard/src/lib/wayfinding/server-image-segment.ts
Dashboard-UI: viewBox-Mapapps/dashboard/src/components/wayfinding/ShopViewBoxesCard.tsx
Dashboard-UI: Polygon-Editorapps/dashboard/src/components/wayfinding/PolygonAssignmentEditor.tsx
Dashboard-UI: PNG-Auto-Segmentierungapps/dashboard/src/components/wayfinding/AutoSegmentPngCard.tsx
Atomic-Save (mapSvg + viewBoxes + MapLocation-Sync)apps/dashboard/src/app/api/wayfinding/floors/[floorId]/polygon-edits/route.ts
API: PNG-Auto-Segmentierung (Vorschau + Apply)apps/dashboard/src/app/api/wayfinding/floors/[floorId]/auto-segment-png/route.ts
DB-FeldMapFloor.shopViewBoxes (TEXT, nullable) – siehe SAFE-Migration 20260514_add_map_floor_shop_view_boxes_SAFE.md

Was sich für Bestands-Center nicht ändert​

  • Bestehende reine Vektor-SVGs werden weiter identisch dargestellt – weder Klick-Logik noch viewBox-Normalisierung verhalten sich anders.
  • Das neue DB-Feld shopViewBoxes ist optional (null bei allen Bestands-Floors). Solange es leer bleibt, läuft der bestehende DOM-Zoom.
  • Der Bunny-Upload-Typ centerplan akzeptiert weiter SVG; zusätzlich sind jetzt PNG/JPEG/WebP erlaubt – nichts verschwindet.

Querverweise​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /centerplan/hybrid-png-mit-polygonen