.terra-bildkarte{--green:#6cab43;--brown:#8b6a45;--brown2:#a78764;--red:#c62822;--red2:#d94f47;--olive:#7aa93d;font-family:inherit;max-width:100%;color:inherit}.terra-bildkarte *{box-sizing:border-box}.terra-bildkarte__head{margin-bottom:18px}.terra-bildkarte__kicker{color:var(--green);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}.terra-bildkarte__head h3{margin:0;font-size:clamp(1.65rem,2.6vw,2.45rem);line-height:1.08}.terra-bildkarte__head p{margin:.55rem 0 0;color:#6f6f6f;font-size:.98rem}.terra-bildkarte__filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.terra-bildkarte__filter{appearance:none;border:1px solid #d9d9d4;background:#fff;color:#333;border-radius:999px;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;font:inherit;font-size:.88rem;line-height:1;cursor:pointer;transition:.2s}.terra-bildkarte__filter:hover{border-color:#aaa;transform:translateY(-1px)}.terra-bildkarte__filter.is-active{background:#333;border-color:#333;color:#fff}.terra-filter-badge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-weight:700;font-size:.78rem;color:#fff;flex:0 0 20px}.terra-filter-icon{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px}.terra-filter-icon img{width:100%;height:100%;display:block;object-fit:contain}.terra-c-supermarkt{background:var(--brown)}.terra-c-baeckerei{background:var(--brown2)}.terra-c-arzt{background:var(--red)}.terra-c-apotheke{background:var(--red2)}.terra-c-restaurant{background:var(--green)}.terra-c-bildung{background:var(--olive)}.terra-bildkarte__stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--terra-map-ratio,2);background:#f2efe9;border-radius:2px}.terra-bildkarte__map,.terra-bildkarte__map svg{position:absolute;inset:0;width:100%;height:100%;display:block}.terra-bildkarte__markers{position:absolute;inset:0;z-index:4;pointer-events:none}.terra-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.9);width:34px;height:34px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:.18s;pointer-events:none;padding:0}.terra-marker.is-visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);pointer-events:auto;cursor:pointer}.terra-marker span{font-weight:700;font-size:.95rem;line-height:1;color:#fff}.terra-marker.has-icon{width:40px;height:40px;background:transparent!important;border:0;box-shadow:none;border-radius:0}.terra-marker.has-icon img{display:block;width:100%;height:100%;object-fit:contain}.terra-marker:hover,.terra-marker:focus-visible{transform:translate(-50%,-50%) scale(1.12);outline:none;z-index:9}.terra-marker::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:#fff;color:#333;border-radius:4px;padding:6px 9px;font-size:.78rem;line-height:1;white-space:nowrap;box-shadow:0 3px 15px rgba(0,0,0,.16);opacity:0;pointer-events:none;transition:.16s}.terra-marker:hover::after,.terra-marker:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}.terra-bildkarte__project{position:absolute;z-index:7;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;color:#333;cursor:default}.terra-bildkarte__project span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#4f9423;color:#fff;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.25);font-family:Georgia,serif;font-weight:700;font-size:23px}.terra-bildkarte__project em{font-style:normal;font-size:.78rem;font-weight:650;background:rgba(255,255,255,.94);padding:5px 7px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}.terra-bildkarte__note{font-size:.75rem;color:#777;margin-top:8px}.terra-bildkarte__data{display:none!important}.terra-bildkarte--setup{padding:14px 16px;border:1px solid #ddd;background:#fafafa}@media(max-width:780px){.terra-bildkarte__filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.terra-bildkarte__filters::-webkit-scrollbar{display:none}.terra-bildkarte__filter{flex:0 0 auto}.terra-bildkarte__stage{height:auto;aspect-ratio:var(--terra-map-ratio,2)}.terra-bildkarte__map svg{width:100%;height:100%;left:0;transform:none}.terra-bildkarte__project em{display:none}.terra-marker{width:31px;height:31px}.terra-marker.has-icon{width:36px;height:36px}}@media(max-width:520px){.terra-bildkarte__stage{height:auto}.terra-bildkarte__filter{font-size:.82rem;padding:9px 11px}.terra-marker::after{display:none}} .terra-bildkarte__project .terra-project-logo{width:72px;height:72px;border-radius:0;background:transparent;border:0;box-shadow:none;padding:0;overflow:visible} .terra-bildkarte__project .terra-project-logo img{display:block;width:100%;height:100%;object-fit:contain} .terra-marker::after{max-width:220px;white-space:normal;text-align:center;line-height:1.25} .terra-bildkarte__project.has-logo{gap:0} .terra-bildkarte__project.has-logo em{display:none!important} /* Backend-gesteuerte globale Größen */ .terra-marker.has-icon{ width:var(--terra-poi-icon-size,40px); height:var(--terra-poi-icon-size,40px); } .terra-marker::after{ font-size:var(--terra-label-font-size,12px); padding:var(--terra-label-pad-y,6px) var(--terra-label-pad-x,9px); } .terra-bildkarte__project .terra-project-logo{ width:var(--terra-project-logo-size,90px); height:var(--terra-project-logo-size,90px); } /* Einheitliche, im Backend einstellbare Breite der Marker-Beschriftungen */ .terra-marker::after{ width:var(--terra-label-width,240px); max-width:none; white-space:normal; overflow-wrap:normal; word-break:normal; } /* Backend-gesteuerte Kartengestaltung. Reihenfolge der SVG-Gruppen: 1 Grün, 2 Siedlung, 3 Gebäude, 4 Wasserflächen, 5 Wasserlinien, 6 Bahn, 7 Wege, 8/9 Nebenstraßen, 10/11 mittlere Straßen, 12/13 Hauptstraßen. */ .terra-bildkarte__map svg>rect{fill:var(--terra-map-bg,#f2efe9)!important} /* Straßen-Casing etwas breiter als die sichtbare Linie */ /* Durch die zusätzliche Minor-Gruppe verschieben sich die Straßen-Gruppen um eins. Alte Casing-Gruppen bleiben ausgeblendet. */ .terra-bildkarte__map .terra-roads-minor path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:calc(var(--terra-road-local-width,5) * .65)!important; } .terra-bildkarte__map .terra-roads-path path{ stroke:var(--terra-path-color,#fff)!important; stroke-width:var(--terra-path-width,2.2)!important; } /* 9.5.7: POI-Marker rund um das Bauvorhaben müssen anklickbar/hoverbar bleiben */ .terra-bildkarte__project{ z-index:6; pointer-events:none; } .terra-bildkarte__project *{ pointer-events:none; } .terra-bildkarte__markers{ z-index:8; } .terra-marker{ z-index:8; } .terra-marker:hover, .terra-marker:focus-visible{ z-index:20; } .terra-marker::after{ z-index:21; } /* 9.5.8: Unterzeile separat steuerbar */ .terra-bildkarte__head p{ font-size:var(--terra-subtitle-font-size,14px); } /* 9.5.9: Quellenhinweis statt Header-Unterzeile steuerbar */ .terra-bildkarte__head p{ font-size:.98rem; } .terra-bildkarte__note{ font-size:var(--terra-attribution-font-size,8px); line-height:1.35; } /* Projektlogo sichtbar über den POI-Icons, ohne Maus-/Touch-Ereignisse zu blockieren */ .terra-bildkarte__project{ z-index:12; pointer-events:none; } .terra-bildkarte__project *{ pointer-events:none; } .terra-bildkarte__markers{ z-index:8; } .terra-marker{ z-index:8; } .terra-marker:hover, .terra-marker:focus-visible{ z-index:20; } /* 9.6.0: Frontend-Zoom */ .terra-bildkarte__stage{touch-action:none;cursor:grab} .terra-bildkarte__stage.is-dragging{cursor:grabbing} .terra-bildkarte__zoom-layer{ position:absolute; inset:0; width:100%; height:100%; transform-origin:0 0; will-change:transform; } .terra-bildkarte__zoom-layer .terra-bildkarte__map, .terra-bildkarte__zoom-layer .terra-bildkarte__markers{ position:absolute; inset:0; width:100%; height:100%; } .terra-bildkarte__zoom-controls{ position:absolute; top:12px; right:12px; z-index:50; display:flex; flex-direction:column; gap:6px; } .terra-bildkarte__zoom-controls button{ appearance:none; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(0,0,0,.12); border-radius:4px; background:rgba(255,255,255,.95); color:#333; box-shadow:0 2px 9px rgba(0,0,0,.14); font:600 22px/1 Arial,sans-serif; cursor:pointer; } .terra-bildkarte__zoom-controls button:hover, .terra-bildkarte__zoom-controls button:focus-visible{ background:#fff; outline:none; box-shadow:0 3px 12px rgba(0,0,0,.2); } .terra-bildkarte__zoom-controls button:disabled{opacity:.35;cursor:default} .terra-map-zoom-reset{font-size:18px!important} @media(max-width:780px){ .terra-bildkarte__zoom-controls{top:9px;right:9px} .terra-bildkarte__zoom-controls button{width:36px;height:36px} } /* 9.6.1: feste Standarddarstellung */ .terra-map-style-standard .terra-bildkarte__map svg>rect{fill:#f2efe9!important} .terra-map-style-standard .terra-roads-path path{stroke:#fff!important;stroke-width:2.2!important} .terra-map-style-standard .terra-roads-minor path{stroke:#fff!important;stroke-width:3.2!important} .terra-crop-map.terra-map-style-standard svg>rect{fill:#f2efe9!important} .terra-crop-map.terra-map-style-standard .terra-roads-path path{stroke:#fff!important;stroke-width:2.2!important} .terra-crop-map.terra-map-style-standard .terra-roads-minor path{stroke:#fff!important;stroke-width:3.2!important} /* 9.6.7 – robuste Straßensteuerung über feste SVG-Klassen */ /* Casings/Umrandungen bleiben vollständig aus. */ .terra-road-local-casing, .terra-road-secondary-casing, .terra-road-major-casing{ display:none!important; } /* Farben und Breiten */ .terra-road-local path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:var(--terra-road-local-width,5)!important; } .terra-road-secondary path{ stroke:var(--terra-road-secondary-color,#fff)!important; stroke-width:var(--terra-road-secondary-width,8)!important; } .terra-road-major path{ stroke:var(--terra-road-major-color,#f7c96f)!important; stroke-width:var(--terra-road-major-width,10)!important; } .terra-road-minor path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:3.2!important; } .terra-road-path path{ stroke:var(--terra-path-color,#fff)!important; stroke-width:var(--terra-path-width,2.2)!important; } .terra-road-rail path{ stroke:var(--terra-rail-color,#aaa)!important; stroke-width:var(--terra-rail-width,4)!important; } /* Straßendetail */ .terra-road-detail-reduced .terra-road-minor, .terra-road-detail-reduced .terra-road-path{ display:none!important; } .terra-road-detail-medium .terra-road-minor{ display:block!important; } .terra-road-detail-medium .terra-road-path{ display:none!important; } .terra-road-detail-full .terra-road-minor, .terra-road-detail-full .terra-road-path, .terra-road-detail-full .terra-road-local, .terra-road-detail-full .terra-road-secondary, .terra-road-detail-full .terra-road-major{ display:block!important; } /* 9.6.8 – endgültige Straßensteuerung ausschließlich über feste SVG-Klassen */ /* Keine alten grauen Straßen-Casings anzeigen */ .terra-bildkarte__map .terra-road-local-casing, .terra-bildkarte__map .terra-road-secondary-casing, .terra-bildkarte__map .terra-road-major-casing{ display:none!important; } /* Fahrstraßen */ .terra-bildkarte__map .terra-road-major{ display:block!important; } .terra-bildkarte__map .terra-road-major path{ stroke:var(--terra-road-major-color,#f7c96f)!important; stroke-width:var(--terra-road-major-width,10)!important; } .terra-bildkarte__map .terra-road-secondary{ display:block!important; } .terra-bildkarte__map .terra-road-secondary path{ stroke:var(--terra-road-secondary-color,#fff)!important; stroke-width:var(--terra-road-secondary-width,8)!important; } .terra-bildkarte__map .terra-road-local{ display:block!important; } .terra-bildkarte__map .terra-road-local path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:var(--terra-road-local-width,5)!important; } /* Kleinere Straßen / Servicewege */ .terra-bildkarte__map .terra-road-minor path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:3.2!important; } /* Fuß-/Rad-/Pfad-Netz */ .terra-bildkarte__map .terra-road-path path{ stroke:var(--terra-path-color,#fff)!important; stroke-width:var(--terra-path-width,2.2)!important; } /* Bahn */ .terra-bildkarte__map .terra-road-rail path{ stroke:var(--terra-rail-color,#aaa)!important; stroke-width:var(--terra-rail-width,4)!important; } /* Detailstufen */ .terra-road-detail-reduced .terra-road-minor, .terra-road-detail-reduced .terra-road-path{ display:none!important; } .terra-road-detail-medium .terra-road-minor{ display:block!important; } .terra-road-detail-medium .terra-road-path{ display:none!important; } .terra-road-detail-full .terra-road-minor, .terra-road-detail-full .terra-road-path{ display:block!important; } /* 9.6.9 – vollständige Klassensteuerung für Kartenflächen und Straßen */ /* INDIVIDUELL: alle Farben und Breiten aus dem Backend */ .terra-map-style-custom .terra-bildkarte__map svg > rect{ fill:var(--terra-map-bg,#f2efe9)!important; } .terra-map-style-custom .terra-bildkarte__map .terra-map-green path{ fill:var(--terra-map-green,#dcebd5)!important; } .terra-map-style-custom .terra-bildkarte__map .terra-map-urban path{ fill:var(--terra-map-urban,#e6e4e1)!important; } .terra-map-style-custom .terra-bildkarte__map .terra-map-building path{ fill:var(--terra-map-building,#d9d0c9)!important; } .terra-map-style-custom .terra-bildkarte__map .terra-map-water-area path{ fill:var(--terra-map-water,#aad3df)!important; } .terra-map-style-custom .terra-bildkarte__map .terra-map-water-line path{ stroke:var(--terra-map-water,#aad3df)!important; stroke-width:var(--terra-water-line-width,6)!important; } .terra-map-style-custom .terra-road-minor path{ stroke:var(--terra-road-minor-color,#fff)!important; stroke-width:var(--terra-road-minor-width,2)!important; } .terra-map-style-custom .terra-road-local path{ stroke:var(--terra-road-local-color,#fff)!important; stroke-width:var(--terra-road-local-width,5)!important; } .terra-map-style-custom .terra-road-secondary path{ stroke:var(--terra-road-secondary-color,#fff)!important; stroke-width:var(--terra-road-secondary-width,8)!important; } .terra-map-style-custom .terra-road-major path{ stroke:var(--terra-road-major-color,#f7c96f)!important; stroke-width:var(--terra-road-major-width,10)!important; } .terra-map-style-custom .terra-road-path path{ stroke:var(--terra-path-color,#fff)!important; stroke-width:var(--terra-path-width,2.2)!important; } .terra-map-style-custom .terra-road-rail path{ stroke:var(--terra-rail-color,#aaa)!important; stroke-width:var(--terra-rail-width,4)!important; } /* 9.7.0 – Standard = OSM-Carto-nahe Optik */ /* Grundflächen */ .terra-map-style-standard .terra-bildkarte__map svg > rect{ fill:#f2efe9!important; } .terra-map-style-standard .terra-bildkarte__map .terra-map-green path{ fill:#cdebb0!important; } .terra-map-style-standard .terra-bildkarte__map .terra-map-urban path{ fill:#e8e6e2!important; } .terra-map-style-standard .terra-bildkarte__map .terra-map-building path{ fill:#d9d0c9!important; } .terra-map-style-standard .terra-bildkarte__map .terra-map-water-area path{ fill:#aad3df!important; } .terra-map-style-standard .terra-bildkarte__map .terra-map-water-line path{ stroke:#73b6d2!important; stroke-width:3.2!important; } /* Bahn */ .terra-map-style-standard .terra-road-rail{ display:block!important; } .terra-map-style-standard .terra-road-rail path{ stroke:#777!important; stroke-width:2.2!important; stroke-dasharray:7 4!important; } /* Wege / Pfade */ .terra-map-style-standard .terra-road-path path{ stroke:#c7b89a!important; stroke-width:1.15!important; stroke-dasharray:4 3!important; } /* Kleine Zufahrten / service / living_street */ .terra-map-style-standard .terra-road-minor path{ stroke:#fff!important; stroke-width:1.8!important; } /* Wohn-/Nebenstraßen: dezentes graues Casing + weißer Kern */ .terra-map-style-standard .terra-road-local-casing{ display:block!important; } .terra-map-style-standard .terra-road-local-casing path{ stroke:#c9c9c9!important; stroke-width:4.4!important; } .terra-map-style-standard .terra-road-local{ display:block!important; } .terra-map-style-standard .terra-road-local path{ stroke:#fff!important; stroke-width:3.0!important; } /* Secondary/Tertiary: creme/hellgelb wie OSM-Carto */ .terra-map-style-standard .terra-road-secondary-casing{ display:block!important; } .terra-map-style-standard .terra-road-secondary-casing path{ stroke:#c8c4a8!important; stroke-width:6.2!important; } .terra-map-style-standard .terra-road-secondary{ display:block!important; } .terra-map-style-standard .terra-road-secondary path{ stroke:#f7f2b4!important; stroke-width:4.8!important; } /* Major: warme OSM-Hauptstraßenfarbe */ .terra-map-style-standard .terra-road-major-casing{ display:block!important; } .terra-map-style-standard .terra-road-major-casing path{ stroke:#d89a61!important; stroke-width:8.0!important; } .terra-map-style-standard .terra-road-major{ display:block!important; } .terra-map-style-standard .terra-road-major path{ stroke:#f6c46f!important; stroke-width:6.0!important; } /* Individuell: Casings weiterhin komplett aus */ .terra-map-style-custom .terra-road-local-casing, .terra-map-style-custom .terra-road-secondary-casing, .terra-map-style-custom .terra-road-major-casing{ display:none!important; } /* 9.7.1: Exakte Frontend-Button-Optik des terra Ausstattungsmoduls 1.0.11. */ .terra-bildkarte{ --tam-tab-bg:#fff;--tam-tab-text:#27272a;--tam-tab-border:#ddd; --tam-tab-active-bg:#66795f;--tam-tab-active-text:#fff; --tam-tab-hover-bg:#eef2ea;--tam-tab-radius:3px;--tam-tab-padding-x:18px; } .terra-bildkarte .terra-bildkarte__filter{ flex:0 0 auto;border:1px solid var(--tam-tab-border); color:var(--tam-tab-text);background:var(--tam-tab-bg); padding:12px var(--tam-tab-padding-x);border-radius:var(--tam-tab-radius); cursor:pointer;font:inherit;min-width:120px; transition:background .2s ease,color .2s ease,border-color .2s ease; transform:none;line-height:normal; } .terra-bildkarte .terra-bildkarte__filter:hover:not(.is-active), .terra-bildkarte .terra-bildkarte__filter:focus-visible:not(.is-active){ background:var(--tam-tab-hover-bg);transform:none; } .terra-bildkarte .terra-bildkarte__filter.is-active{ background:var(--tam-tab-active-bg);border-color:var(--tam-tab-active-bg); color:var(--tam-tab-active-text); } /* Marker lassen sich auf Touchscreens antippen und schließen sich beim nächsten Tap. */ .terra-bildkarte .terra-marker.is-tooltip-open::after{ display:block;opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); max-width:min(240px,75vw);z-index:25; } @media(max-width:780px){ .terra-bildkarte .terra-bildkarte__filters{flex-wrap:wrap;overflow:visible;padding-bottom:0;} .terra-bildkarte .terra-bildkarte__filter{flex:0 1 auto;min-width:0;white-space:normal;} .terra-bildkarte .terra-bildkarte__stage{aspect-ratio:1/1;height:auto;touch-action:pan-y;cursor:default;} .terra-bildkarte .terra-bildkarte__zoom-layer{will-change:transform;} .terra-bildkarte .terra-marker::after{white-space:normal;width:max-content;max-width:min(240px,75vw);} } @media(hover:none){ .terra-bildkarte .terra-marker:hover::after{opacity:0;} .terra-bildkarte .terra-marker.is-tooltip-open::after{opacity:1;} } @media(max-width:520px){ .terra-bildkarte .terra-bildkarte__filter{font:inherit;padding:12px var(--tam-tab-padding-x);} .terra-bildkarte .terra-bildkarte__filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .terra-bildkarte .terra-bildkarte__filter{justify-content:center;max-width:100%;} } /* Projektlogo: gleicher Tooltip-Mechanismus wie POI-Marker */ .terra-bildkarte .terra-bildkarte__project{cursor:pointer} .terra-bildkarte .terra-bildkarte__project::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:#fff;color:#333;border-radius:4px;padding:8px 11px;font-size:.8rem;line-height:1.35;white-space:pre-line;min-width:140px;max-width:min(260px,78vw);width:max-content;box-shadow:0 3px 15px rgba(0,0,0,.16);opacity:0;visibility:hidden;pointer-events:none;transition:.16s;text-align:center;font-weight:normal;z-index:40} .terra-bildkarte .terra-bildkarte__project:hover::after,.terra-bildkarte .terra-bildkarte__project:focus-visible::after,.terra-bildkarte .terra-bildkarte__project.is-tooltip-open::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} @media(hover:none){.terra-bildkarte .terra-bildkarte__project:hover:not(.is-tooltip-open)::after{opacity:0;visibility:hidden}} @media(max-width:780px){.terra-bildkarte .terra-bildkarte__filter{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;font-size:clamp(.62rem,1.8vw,.9rem);padding:10px min(var(--tam-tab-padding-x),1.5vw)}.terra-bildkarte .terra-bildkarte__filter .terra-filter-icon,.terra-bildkarte .terra-bildkarte__filter .terra-filter-badge{flex:0 0 auto}} /* 9.7.3: Projektlogo ist selbst das interaktive Ziel; bisherige pointer-events:none aufheben. */ .terra-bildkarte .terra-bildkarte__project{pointer-events:auto!important;cursor:pointer;z-index:12} .terra-bildkarte .terra-bildkarte__project > *{pointer-events:none} .terra-bildkarte .terra-bildkarte__project.is-tooltip-open::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* Kompakte mobile Kategorien: zwei Reihen, vergleichbar mit dem Ausstattungsmodul. Icons erscheinen weiterhin auf der Karte, nicht in der Filterleiste. */ @media(max-width:780px){ .terra-bildkarte .terra-bildkarte__filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px;margin-bottom:12px;overflow:visible!important} .terra-bildkarte .terra-bildkarte__filter{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;max-width:100%;padding:12px 4px!important;line-height:1.2;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-size:clamp(10px,2.8vw,14px)!important;border-radius:var(--tam-tab-radius)} .terra-bildkarte .terra-bildkarte__filter .terra-filter-icon,.terra-bildkarte .terra-bildkarte__filter .terra-filter-badge{display:none!important} } /* 9.7.4: Mobile Kategoriebuttons 1:1 im dreispaltigen Raster des Ausstattungsmoduls. Die Zahl der Zeilen ergibt sich automatisch aus der Zahl der Kategorien. */ @media (max-width:780px){ .terra-bildkarte .terra-bildkarte__filters{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-auto-rows:auto;gap:8px;overflow:visible!important; padding:0 0 10px;margin-bottom:12px; } .terra-bildkarte .terra-bildkarte__filter{ display:flex;justify-content:center;align-items:center; width:100%;min-width:0;min-height:0;max-width:100%; padding:10px min(var(--tam-tab-padding-x),1.3vw)!important; font:inherit!important;font-size:clamp(.65rem,1.7vw,.95rem)!important; line-height:1.2!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important; border-radius:var(--tam-tab-radius); } .terra-bildkarte .terra-bildkarte__filter .terra-filter-icon, .terra-bildkarte .terra-bildkarte__filter .terra-filter-badge{display:none!important} } /* Adaptive Kategorienleiste: identische Aufteilung in beiden Plugins. */ .terra-adaptive-tabs.terra-adaptive-tabs{ display:flex!important;flex-direction:column!important;align-items:stretch!important; gap:8px!important;overflow:visible!important;max-width:100%; grid-template-columns:none!important;grid-template-rows:none!important; } .terra-adaptive-tabs .terra-adaptive-row{ display:flex;gap:8px;justify-content:center;align-items:stretch;width:100%;min-width:0; } .terra-adaptive-tabs .terra-adaptive-row > button{ box-sizing:border-box;flex:var(--terra-btn-weight,1) 1 0!important; width:0!important;min-width:0!important;max-width:none!important; white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important; overflow-wrap:normal!important;word-break:normal!important; font-size:var(--terra-adaptive-font,12px)!important;line-height:1.2!important; padding:10px 5px!important;text-align:center;justify-content:center; } /* Kategorie-Icons auch auf Smartphones immer sichtbar lassen. */ .terra-bildkarte .terra-adaptive-tabs .terra-bildkarte__filter .terra-filter-icon, .terra-bildkarte .terra-adaptive-tabs .terra-bildkarte__filter .terra-filter-badge{ display:inline-grid!important;align-items:center;justify-content:center; flex:0 0 16px!important;width:16px!important;height:16px!important; } .terra-bildkarte .terra-adaptive-tabs .terra-filter-icon img{max-width:100%;max-height:100%;object-fit:contain;} .terra-bildkarte .terra-adaptive-tabs .terra-bildkarte__filter{gap:4px!important;} /* 9.7.7: Symbole bleiben beim Kartenzoom gleich groß (auch Projektlogo). CSS scale ist unabhängig vom bestehenden translate/hover-transform. */ .terra-bildkarte__zoom-layer .terra-marker, .terra-bildkarte__zoom-layer .terra-bildkarte__project { scale: var(--terra-marker-inverse-scale, 1); transform-origin: center center; } /* 9.7.9: Grün pulsierender Standort, Tooltip separat und vollständig statisch. ::after gehört ausschließlich dem bestehenden Tooltip. */ .terra-bildkarte .terra-bildkarte__project { width:24px; height:24px; display:block; padding:0; background:transparent; border:0; } .terra-bildkarte .terra-bildkarte__project > span:not(.terra-project-pulse), .terra-bildkarte .terra-bildkarte__project > em { display:none!important; } .terra-bildkarte .terra-bildkarte__project::before { content:""; position:absolute; left:50%;top:50%; width:20px;height:20px; transform:translate(-50%,-50%); background:#4f9423; border:3px solid #fff; border-radius:50%; box-shadow:0 2px 9px rgba(0,0,0,.22); z-index:2; pointer-events:none; } .terra-bildkarte .terra-bildkarte__project > .terra-project-pulse { display:block!important; position:absolute; left:50%;top:50%; width:20px;height:20px; border-radius:50%; background:rgba(79,148,35,.4); transform:translate(-50%,-50%) scale(1); animation:terra-project-pulse-ring 2.3s ease-out infinite; pointer-events:none; z-index:1; } @keyframes terra-project-pulse-ring { 0% {transform:translate(-50%,-50%) scale(1);opacity:.75;} 75%,100% {transform:translate(-50%,-50%) scale(3.5);opacity:0;} } @media (prefers-reduced-motion:reduce) { .terra-bildkarte .terra-bildkarte__project > .terra-project-pulse {animation:none;opacity:.3;} } /* 9.8.0: dauerhaft sichtbarer Infokasten am pulsierenden Projektpunkt */ .terra-bildkarte__project::before, .terra-bildkarte__project::after{ display:none!important; content:none!important; } .terra-bildkarte__project{ width:clamp(18px,var(--terra-project-logo-size,24px),60px); height:clamp(18px,var(--terra-project-logo-size,24px),60px); display:block; gap:0; cursor:default; position:absolute; } .terra-bildkarte__project .terra-project-pulse, .terra-bildkarte__project .terra-project-dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; display:block; } .terra-bildkarte__project .terra-project-dot{ width:clamp(18px,var(--terra-project-logo-size,24px),60px); height:clamp(18px,var(--terra-project-logo-size,24px),60px); background:#4f9423; border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.25); z-index:2; } .terra-bildkarte__project .terra-project-pulse{ width:clamp(18px,var(--terra-project-logo-size,24px),60px); height:clamp(18px,var(--terra-project-logo-size,24px),60px); background:rgba(79,148,35,.28); z-index:1; animation:terra-project-pulse-ring 2.2s ease-out infinite; } @keyframes terra-project-pulse-ring{ 0%{transform:translate(-50%,-50%) scale(.92);opacity:.9} 70%{transform:translate(-50%,-50%) scale(2.9);opacity:0} 100%{transform:translate(-50%,-50%) scale(2.9);opacity:0} } .terra-bildkarte__project .terra-project-card{ position:absolute; left:calc(50% + var(--terra-project-box-offset-x,28px)); top:calc(50% + var(--terra-project-box-offset-y,-20px)); width:var(--terra-project-box-width,230px); min-height:var(--terra-project-box-min-height,92px); padding:12px 14px; background:#fff; border-radius:4px; box-shadow:0 6px 22px rgba(0,0,0,.18); color:#222; font-size:var(--terra-project-box-font-size,12px); line-height:1.35; z-index:3; } .terra-bildkarte__project .terra-project-card-logo{ margin-bottom:10px; } .terra-bildkarte__project .terra-project-card-logo img{ display:block; max-width:100%; max-height:var(--terra-project-box-logo-size,42px); width:auto; height:auto; object-fit:contain; } .terra-bildkarte__project .terra-project-card-text{ white-space:pre-line; word-break:break-word; } @media(max-width:780px){ .terra-bildkarte__project .terra-project-card{ width:min(var(--terra-project-box-width,230px),220px); padding:10px 12px; } .terra-bildkarte__project .terra-project-card-logo img{max-height:var(--terra-project-box-logo-size,42px)} } /* 9.8.2 – kompakter Infokasten: kein erzwungener Leerraum durch alte Mindesthöhe */ .terra-bildkarte .terra-bildkarte__project .terra-project-card{ min-height:0!important; height:auto!important; padding:6px 8px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; box-sizing:border-box; max-width:none; overflow-wrap:anywhere; } .terra-bildkarte .terra-bildkarte__project .terra-project-card-logo{ margin:0!important; max-width:100%; line-height:0; } .terra-bildkarte .terra-bildkarte__project .terra-project-card-logo img{ width:auto; height:auto; max-width:100%; max-height:var(--terra-project-box-logo-size,42px); object-fit:contain; } .terra-bildkarte .terra-bildkarte__project .terra-project-card-text{ flex:none; line-height:1.25; margin:0; } @media(max-width:780px){ .terra-bildkarte .terra-bildkarte__project .terra-project-card{padding:5px 7px;} }