/* ========================================================= RESTAURANTKARTE ========================================================= */ .rb-restaurant-map { width: 100%; height: 650px; font-family: inherit; margin: 40px 0; background: #111111; border: 1px solid #333333; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); box-sizing: border-box; } /* Mobile */ @media (max-width: 700px) { .rb-restaurant-map { height: 560px; } } /* ========================================================= KARTEN-POPUP – MOBIL ========================================================= */ @media (max-width: 700px) { .rb-map-popup { width: 230px; max-width: calc(100vw - 70px); } /* Bild auf Mobilgeräten ausblenden */ .rb-map-image-link, .rb-map-image { display: none !important; } .rb-map-popup-content { padding: 16px 16px 15px; } .rb-map-popup h3 { margin: 0 32px 5px 0; font-size: 1.1rem; line-height: 1.2; } .rb-map-score { margin-bottom: 7px; font-size: 1.2rem; } .rb-map-meta { margin-bottom: 12px; font-size: 0.85rem; line-height: 1.4; } .rb-map-link { padding: 9px 10px; font-size: 0.85rem; } .rb-restaurant-map .leaflet-popup-close-button { top: 6px !important; right: 6px !important; width: 34px !important; height: 34px !important; padding: 0 !important; font-size: 22px !important; line-height: 33px !important; z-index: 100 !important; } } /* ========================================================= BEWERTUNGSMARKER DER RESTAURANTKARTE ========================================================= */ .rb-map-marker { background: transparent !important; border: none !important; } .rb-map-marker span { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #ffffff; font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); box-sizing: border-box; } /* --------------------------------------------------------- 9,0 – 10,0 Herausragend --------------------------------------------------------- */ .rb-map-marker.rating-9 span { background: #ffffff; color: #111111; } /* --------------------------------------------------------- 8,0 – 8,9 Exzellent --------------------------------------------------------- */ .rb-map-marker.rating-8 span { background: #dddddd; color: #111111; } /* --------------------------------------------------------- 7,0 – 7,9 Sehr gut --------------------------------------------------------- */ .rb-map-marker.rating-7 span { background: #bbbbbb; color: #111111; } /* --------------------------------------------------------- 6,0 – 6,9 Gut --------------------------------------------------------- */ .rb-map-marker.rating-6 span { background: #999999; color: #111111; } /* --------------------------------------------------------- 5,0 – 5,9 Durchschnittlich --------------------------------------------------------- */ .rb-map-marker.rating-5 span { background: #777777; color: #ffffff; } /* --------------------------------------------------------- 4,0 – 4,9 Unterdurchschnittlich --------------------------------------------------------- */ .rb-map-marker.rating-4 span { background: #5a5a5a; color: #ffffff; } /* --------------------------------------------------------- 3,0 – 3,9 Schwach --------------------------------------------------------- */ .rb-map-marker.rating-3 span { background: #3d3d3d; color: #ffffff; } /* --------------------------------------------------------- 0 – 2,9 Sehr schwach --------------------------------------------------------- */ .rb-map-marker.rating-0 span { background: #222222; color: #ffffff; } /* --------------------------------------------------------- Keine Bewertung --------------------------------------------------------- */ .rb-map-marker.rating-unknown span { background: #444444; color: #ffffff; } /* ========================================================= MINIMALISTISCHER KARTENSTIL ========================================================= */ .rb-restaurant-map .leaflet-tile-pane { filter: grayscale(100%) contrast(85%) brightness(82%); } /* --------------------------------------------------------- Leaflet-Steuerelemente --------------------------------------------------------- */ .rb-restaurant-map .leaflet-control-zoom { border: 1px solid #444444 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .rb-restaurant-map .leaflet-control-zoom a { background: #111111; color: #ffffff; border-color: #444444; } .rb-restaurant-map .leaflet-control-zoom a:hover { background: #333333; } /* --------------------------------------------------------- Attribution --------------------------------------------------------- */ .rb-restaurant-map .leaflet-control-attribution { background: rgba(0, 0, 0, 0.75); color: #aaaaaa; } .rb-restaurant-map .leaflet-control-attribution a { color: #dddddd; } /* ========================================================= RESTAURANT-POPUP AUF DER KARTE ========================================================= */ .rb-map-popup { width: 280px; font-family: inherit; padding: 0; margin: 0; overflow: hidden; background: #111111; color: #ffffff; } /* --------------------------------------------------------- Bild --------------------------------------------------------- */ .rb-map-image-link { display: block; width: 100%; height: 170px; overflow: hidden; } .rb-map-image { display: block; width: 100%; height: 170px; object-fit: cover; transition: transform 0.3s ease; } .rb-map-image-link:hover .rb-map-image { transform: scale(1.04); } /* --------------------------------------------------------- Textbereich --------------------------------------------------------- */ .rb-map-popup-content { padding: 18px 18px 20px; } /* --------------------------------------------------------- Restaurantname --------------------------------------------------------- */ .rb-map-popup h3 { margin: 0 0 8px; color: #ffffff; font-size: 1.25rem; line-height: 1.25; font-weight: 700; } /* --------------------------------------------------------- Bewertung --------------------------------------------------------- */ .rb-map-score { margin-bottom: 8px; color: #ffffff; font-size: 1.35rem; font-weight: 700; } /* --------------------------------------------------------- Metadaten --------------------------------------------------------- */ .rb-map-meta { margin-bottom: 18px; color: #b8b8b8; font-size: 0.9rem; line-height: 1.5; } /* --------------------------------------------------------- Link --------------------------------------------------------- */ .rb-map-link { display: inline-block; padding: 9px 14px; border: 1px solid #555555; color: #ffffff !important; font-family: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none !important; transition: background 0.2s ease, border-color 0.2s ease; } .rb-map-link:hover { background: #333333; border-color: #777777; color: #ffffff !important; } /* --------------------------------------------------------- Leaflet-Popup selbst --------------------------------------------------------- */ .rb-restaurant-map .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; background: #111111; border-radius: 4px; color: #ffffff; } .rb-restaurant-map .leaflet-popup-content { margin: 0; } .rb-restaurant-map .leaflet-popup-tip { background: #111111; } /* --------------------------------------------------------- Schließen-Button --------------------------------------------------------- */ .rb-restaurant-map .leaflet-popup-close-button { z-index: 10; top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50%; background: rgba( 0, 0, 0, 0.65 ) !important; color: #ffffff !important; font-size: 20px !important; line-height: 27px !important; text-align: center; } /* --------------------------------------------------------- Küchenlinks im Karten-Popup --------------------------------------------------------- */ .rb-map-cuisine-link { color: inherit !important; text-decoration: none !important; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .rb-map-cuisine-link:hover { border-bottom-color: currentColor; } .rb-map-cuisine-separator { opacity: 0.55; } /* ========================================================= STARTSEITE – KARTE ========================================================= */ .home .rb-restaurant-map { height: 600px; margin-top: 28px; margin-bottom: 22px; } @media (max-width: 700px) { .home .rb-restaurant-map { height: 560px; } }