{"id":9,"date":"2026-07-16T07:31:26","date_gmt":"2026-07-16T07:31:26","guid":{"rendered":"https:\/\/azf.wshdev.de\/?page_id=9"},"modified":"2026-09-28T07:46:27","modified_gmt":"2026-09-28T07:46:27","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/azf.wshdev.de\/","title":{"rendered":"Elementor #9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f48faa e-con e-atomic-element e-flexbox-base e-533e12e \" data-id=\"0f48faa\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0f48faa\" data-e-type=\"e-flexbox\" data-id=\"0f48faa\">\n    \t\t<div class=\"elementor-element elementor-element-c58839e elementor-widget elementor-widget-html\" data-id=\"c58839e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     MINIMALISTISCHER AZF-LANDINGPAGE-HEADER\n     Komplett in ein Elementor-HTML-Widget einf\u00fcgen\n========================================================== -->\n\n<header class=\"azf-landing-header\" id=\"azf-landing-header\">\n\n    <div class=\"azf-landing-header-inner\">\n\n        <!-- LOGO -->\n\n        <a\n            class=\"azf-landing-logo\"\n            href=\"https:\/\/www.azf-gruppe.de\/\"\n            aria-label=\"AZF Gruppe \u2013 Startseite\"\n        >\n            <img decoding=\"async\"\n                src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                alt=\"AZF Gruppe\"\n            >\n        <\/a>\n\n        <!-- DESKTOP-NAVIGATION -->\n\n        <nav\n            class=\"azf-landing-nav\"\n            aria-label=\"Landingpage-Navigation\"\n        >\n\n            <a href=\"#azf-standorte\">\n                Standorte\n            <\/a>\n\n            <a href=\"https:\/\/www.azf-gruppe.de\/fahrzeuge\">\n                Fahrzeuge\n            <\/a>\n\n            <a href=\"https:\/\/www.azf-gruppe.de\/werkstatt\/terminvergabe\">\n                Termin vereinbaren\n            <\/a>\n\n            <a\n                href=\"https:\/\/jobs.thomsen-kropp.de\/\"\n                target=\"_blank\"\n                rel=\"noopener\"\n            >\n                Jobs\n            <\/a>\n\n        <\/nav>\n\n        <!-- AKTIONEN -->\n\n        <div class=\"azf-landing-actions\">\n\n            <a\n                class=\"azf-landing-calendar\"\n                href=\"https:\/\/www.azf-gruppe.de\/werkstatt\/terminvergabe\"\n                aria-label=\"Werkstatttermin vereinbaren\"\n                title=\"Termin vereinbaren\"\n            >\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M7 3v3M17 3v3\"><\/path>\n                    <path d=\"M4 8h16\"><\/path>\n                    <rect x=\"4\" y=\"5\" width=\"16\" height=\"16\" rx=\"2\"><\/rect>\n                    <path d=\"m9 15 2 2 4-5\"><\/path>\n                <\/svg>\n            <\/a>\n\n            <a\n                class=\"azf-landing-cta\"\n                href=\"https:\/\/www.azf-gruppe.de\/fahrzeuge\"\n            >\n                <span>Fahrzeuge ansehen<\/span>\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n            <\/a>\n\n            <button\n                class=\"azf-landing-menu-button\"\n                type=\"button\"\n                aria-label=\"Men\u00fc \u00f6ffnen\"\n                aria-expanded=\"false\"\n                aria-controls=\"azf-landing-mobile-menu\"\n            >\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n<\/header>\n\n<!-- =========================================================\n     MOBILES MEN\u00dc\n========================================================== -->\n\n<div\n    class=\"azf-landing-mobile-menu\"\n    id=\"azf-landing-mobile-menu\"\n    aria-hidden=\"true\"\n>\n\n    <button\n        class=\"azf-landing-mobile-overlay\"\n        type=\"button\"\n        aria-label=\"Men\u00fc schlie\u00dfen\"\n    ><\/button>\n\n    <div class=\"azf-landing-mobile-panel\">\n\n        <div class=\"azf-landing-mobile-head\">\n\n            <a\n                class=\"azf-landing-mobile-logo\"\n                href=\"https:\/\/www.azf-gruppe.de\/\"\n                aria-label=\"AZF Gruppe \u2013 Startseite\"\n            >\n                <img decoding=\"async\"\n                    src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                    alt=\"AZF Gruppe\"\n                >\n            <\/a>\n\n            <button\n                class=\"azf-landing-mobile-close\"\n                type=\"button\"\n                aria-label=\"Men\u00fc schlie\u00dfen\"\n            >\n                <span><\/span>\n                <span><\/span>\n            <\/button>\n\n        <\/div>\n\n        <nav\n            class=\"azf-landing-mobile-nav\"\n            aria-label=\"Mobile Landingpage-Navigation\"\n        >\n\n            <a href=\"#azf-standorte\">\n\n                <span>\n                    <small>\u00dcbersicht<\/small>\n                    Standorte\n                <\/span>\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n            <a href=\"https:\/\/www.azf-gruppe.de\/fahrzeuge\">\n\n                <span>\n                    <small>Neu- und Gebrauchtwagen<\/small>\n                    Fahrzeuge\n                <\/span>\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n            <a href=\"https:\/\/www.azf-gruppe.de\/werkstatt\/terminvergabe\">\n\n                <span>\n                    <small>Service und Werkstatt<\/small>\n                    Termin vereinbaren\n                <\/span>\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n            <a\n                href=\"https:\/\/jobs.thomsen-kropp.de\/\"\n                target=\"_blank\"\n                rel=\"noopener\"\n            >\n\n                <span>\n                    <small>Karriere bei Thomsen Kropp<\/small>\n                    Jobs\n                <\/span>\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n        <\/nav>\n\n        <div class=\"azf-landing-mobile-footer\">\n\n            <a\n                class=\"azf-landing-mobile-primary\"\n                href=\"https:\/\/www.azf-gruppe.de\/fahrzeuge\"\n            >\n                Fahrzeuge ansehen\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m14 7 5 5-5 5\"><\/path>\n                <\/svg>\n            <\/a>\n\n            <a\n                class=\"azf-landing-mobile-secondary\"\n                href=\"https:\/\/www.azf-gruppe.de\/werkstatt\/terminvergabe\"\n            >\n                Termin vereinbaren\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<style>\n\/* =========================================================\n   RESET UND VARIABLEN\n========================================================= *\/\n\n.azf-landing-header,\n.azf-landing-header *,\n.azf-landing-mobile-menu,\n.azf-landing-mobile-menu *,\n.azf-landing-header *::before,\n.azf-landing-header *::after,\n.azf-landing-mobile-menu *::before,\n.azf-landing-mobile-menu *::after {\n    box-sizing: border-box;\n}\n\n.azf-landing-header {\n    --azf-red: #db2342;\n    --azf-red-dark: #c11935;\n    --azf-black: #111827;\n    --azf-text: #252b34;\n    --azf-grey: #747c89;\n    --azf-light: #f5f6f7;\n    --azf-border: #e4e7eb;\n\n    position: relative;\n    z-index: 9990;\n\n    width: 100%;\n\n    border-bottom: 1px solid var(--azf-border);\n\n    background: rgba(255, 255, 255, 0.97);\n\n    font-family: \"Barlow\", Arial, sans-serif;\n\n    backdrop-filter: blur(14px);\n    -webkit-backdrop-filter: blur(14px);\n}\n\n.azf-landing-header a,\n.azf-landing-mobile-menu a {\n    text-decoration: none !important;\n    text-shadow: none !important;\n}\n\n.azf-landing-header button,\n.azf-landing-mobile-menu button {\n    font-family: inherit;\n}\n\n\/* =========================================================\n   EINHEITLICHE MAXIMALE BREITE\n========================================================= *\/\n\n.azf-landing-header-inner {\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    max-width: 1500px;\n    min-height: 88px;\n\n    margin: 0 auto;\n    padding: 0 30px;\n}\n\n\/* =========================================================\n   LOGO\n========================================================= *\/\n\n.azf-landing-logo {\n    display: flex !important;\n    align-items: center;\n    flex: 0 0 auto;\n\n    width: 150px;\n    margin-right: clamp(40px, 5vw, 90px);\n}\n\n.azf-landing-logo img {\n    display: block;\n\n    width: 100%;\n    height: auto;\n    max-height: 60px;\n\n    object-fit: contain;\n}\n\n\/* =========================================================\n   NAVIGATION\n========================================================= *\/\n\n.azf-landing-nav {\n    display: flex;\n    align-items: center;\n    gap: clamp(24px, 2.5vw, 46px);\n    flex: 1;\n}\n\n.azf-landing-nav a {\n    position: relative;\n\n    display: inline-flex !important;\n    align-items: center;\n\n    min-height: 88px;\n\n    color: var(--azf-black) !important;\n\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    line-height: 1.2 !important;\n    white-space: nowrap;\n\n    transition: color 0.2s ease;\n}\n\n.azf-landing-nav a::after {\n    content: \"\";\n\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    height: 3px;\n\n    border-radius: 4px 4px 0 0;\n\n    background: var(--azf-red);\n\n    transform: scaleX(0);\n    transform-origin: center;\n\n    transition: transform 0.25s ease;\n}\n\n.azf-landing-nav a:hover,\n.azf-landing-nav a:focus-visible {\n    color: var(--azf-red) !important;\n}\n\n.azf-landing-nav a:hover::after,\n.azf-landing-nav a:focus-visible::after {\n    transform: scaleX(1);\n}\n\n\/* =========================================================\n   HEADER-AKTIONEN\n========================================================= *\/\n\n.azf-landing-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    margin-left: 35px;\n}\n\n.azf-landing-calendar {\n    display: inline-flex !important;\n    align-items: center;\n    justify-content: center;\n\n    width: 46px;\n    height: 46px;\n\n    border: 1px solid var(--azf-border);\n    border-radius: 50%;\n\n    background: #ffffff;\n    color: var(--azf-black) !important;\n\n    transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease,\n        color 0.2s ease,\n        transform 0.2s ease;\n}\n\n.azf-landing-calendar:hover,\n.azf-landing-calendar:focus-visible {\n    border-color: var(--azf-red);\n\n    background: var(--azf-red);\n    color: #ffffff !important;\n\n    transform: translateY(-2px);\n}\n\n.azf-landing-calendar svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.azf-landing-cta {\n    display: inline-flex !important;\n    align-items: center;\n    justify-content: center;\n    gap: 15px;\n\n    min-height: 48px;\n    padding: 0 22px;\n\n    border-radius: 9px;\n\n    background: var(--azf-red);\n    color: #ffffff !important;\n\n    font-size: 14px !important;\n    font-weight: 700 !important;\n    line-height: 1.2 !important;\n    white-space: nowrap;\n\n    box-shadow: 0 8px 20px rgba(219, 35, 66, 0.18);\n\n    transition:\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.2s ease;\n}\n\n.azf-landing-cta:hover,\n.azf-landing-cta:focus-visible {\n    background: var(--azf-red-dark);\n\n    box-shadow: 0 12px 25px rgba(219, 35, 66, 0.27);\n\n    transform: translateY(-2px);\n}\n\n.azf-landing-cta svg {\n    width: 19px;\n    height: 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.2s ease;\n}\n\n.azf-landing-cta:hover svg {\n    transform: translateX(3px);\n}\n\n\/* =========================================================\n   MEN\u00dc-BUTTON\n========================================================= *\/\n\n.azf-landing-menu-button {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    gap: 5px;\n\n    width: 46px;\n    height: 46px;\n    margin: 0;\n    padding: 0;\n\n    border: 0;\n    border-radius: 9px;\n\n    background: var(--azf-black);\n\n    cursor: pointer;\n}\n\n.azf-landing-menu-button span {\n    display: block;\n\n    width: 20px;\n    height: 2px;\n\n    border-radius: 5px;\n\n    background: #ffffff;\n}\n\n\/* =========================================================\n   STICKY HEADER\n========================================================= *\/\n\n.azf-landing-header.is-sticky {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n\n    box-shadow: 0 8px 30px rgba(17, 24, 39, 0.09);\n}\n\nbody.azf-landing-sticky-active {\n    padding-top: 88px;\n}\n\n\/* =========================================================\n   MOBILES MEN\u00dc\n========================================================= *\/\n\n.azf-landing-mobile-menu {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n\n    visibility: hidden;\n    opacity: 0;\n\n    font-family: \"Barlow\", Arial, sans-serif;\n\n    pointer-events: none;\n\n    transition:\n        opacity 0.3s ease,\n        visibility 0.3s ease;\n}\n\n.azf-landing-mobile-menu.is-open {\n    visibility: visible;\n    opacity: 1;\n\n    pointer-events: auto;\n}\n\n.azf-landing-mobile-overlay {\n    position: absolute;\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n\n    border: 0;\n\n    background: rgba(13, 17, 23, 0.58);\n\n    backdrop-filter: blur(5px);\n    -webkit-backdrop-filter: blur(5px);\n\n    cursor: pointer;\n}\n\n.azf-landing-mobile-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    width: min(430px, 94vw);\n    height: 100%;\n\n    overflow-y: auto;\n\n    background: #ffffff;\n\n    box-shadow: -25px 0 70px rgba(0, 0, 0, 0.22);\n\n    transform: translateX(100%);\n\n    transition: transform 0.35s ease;\n}\n\n.azf-landing-mobile-menu.is-open .azf-landing-mobile-panel {\n    transform: translateX(0);\n}\n\n.azf-landing-mobile-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 82px;\n    padding: 16px 22px;\n\n    border-bottom: 1px solid var(--azf-border);\n}\n\n.azf-landing-mobile-logo {\n    display: flex !important;\n    align-items: center;\n\n    width: 135px;\n}\n\n.azf-landing-mobile-logo img {\n    display: block;\n\n    width: 100%;\n    height: auto;\n}\n\n.azf-landing-mobile-close {\n    position: relative;\n\n    width: 44px;\n    height: 44px;\n    margin: 0;\n    padding: 0;\n\n    border: 0;\n    border-radius: 50%;\n\n    background: var(--azf-light);\n\n    cursor: pointer;\n}\n\n.azf-landing-mobile-close span {\n    position: absolute;\n    top: 21px;\n    left: 12px;\n\n    width: 20px;\n    height: 2px;\n\n    border-radius: 4px;\n\n    background: var(--azf-black);\n}\n\n.azf-landing-mobile-close span:first-child {\n    transform: rotate(45deg);\n}\n\n.azf-landing-mobile-close span:last-child {\n    transform: rotate(-45deg);\n}\n\n\/* Mobile Navigation *\/\n\n.azf-landing-mobile-nav {\n    display: flex;\n    flex-direction: column;\n\n    padding: 20px 22px 5px;\n}\n\n.azf-landing-mobile-nav > a {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    min-height: 76px;\n    padding: 13px 4px;\n\n    border-bottom: 1px solid var(--azf-border);\n\n    color: var(--azf-black) !important;\n}\n\n.azf-landing-mobile-nav > a > span {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n\n    font-size: 18px;\n    font-weight: 650;\n    line-height: 1.2;\n}\n\n.azf-landing-mobile-nav small {\n    color: var(--azf-grey);\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.3;\n}\n\n.azf-landing-mobile-nav svg {\n    width: 20px;\n    height: 20px;\n    flex: 0 0 20px;\n\n    fill: none;\n    stroke: var(--azf-red);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.2s ease;\n}\n\n.azf-landing-mobile-nav a:hover svg {\n    transform: translateX(4px);\n}\n\n\/* Mobile Footer *\/\n\n.azf-landing-mobile-footer {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n\n    margin-top: auto;\n    padding: 24px 22px 30px;\n}\n\n.azf-landing-mobile-primary {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 54px;\n    padding: 0 19px;\n\n    border-radius: 9px;\n\n    background: var(--azf-red);\n    color: #ffffff !important;\n\n    font-size: 15px !important;\n    font-weight: 700 !important;\n}\n\n.azf-landing-mobile-primary svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.azf-landing-mobile-secondary {\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n\n    min-height: 52px;\n\n    border: 1px solid var(--azf-border);\n    border-radius: 9px;\n\n    background: #ffffff;\n    color: var(--azf-black) !important;\n\n    font-size: 15px !important;\n    font-weight: 650 !important;\n}\n\nbody.azf-landing-menu-open {\n    overflow: hidden;\n}\n\n\/* =========================================================\n   MITTLERE DESKTOP-BREITEN\n========================================================= *\/\n\n@media (max-width: 1180px) {\n\n    .azf-landing-header-inner {\n        padding-right: 22px;\n        padding-left: 22px;\n    }\n\n    .azf-landing-logo {\n        width: 135px;\n        margin-right: 32px;\n    }\n\n    .azf-landing-nav {\n        gap: 24px;\n    }\n\n    .azf-landing-actions {\n        margin-left: 20px;\n    }\n\n    .azf-landing-calendar {\n        display: none !important;\n    }\n\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 960px) {\n\n    .azf-landing-header-inner {\n        min-height: 80px;\n    }\n\n    .azf-landing-logo {\n        width: 130px;\n        margin-right: auto;\n    }\n\n    .azf-landing-nav {\n        display: none;\n    }\n\n    .azf-landing-actions {\n        margin-left: auto;\n    }\n\n    .azf-landing-menu-button {\n        display: flex;\n    }\n\n    .azf-landing-calendar {\n        display: inline-flex !important;\n    }\n\n    body.azf-landing-sticky-active {\n        padding-top: 80px;\n    }\n\n}\n\n\/* =========================================================\n   MOBIL\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    .azf-landing-header-inner {\n        min-height: 72px;\n        padding-right: 16px;\n        padding-left: 16px;\n    }\n\n    .azf-landing-logo {\n        width: 116px;\n    }\n\n    .azf-landing-calendar {\n        display: none !important;\n    }\n\n    .azf-landing-cta {\n        display: none !important;\n    }\n\n    .azf-landing-menu-button {\n        width: 42px;\n        height: 42px;\n    }\n\n    body.azf-landing-sticky-active {\n        padding-top: 72px;\n    }\n\n    .azf-landing-mobile-head {\n        min-height: 72px;\n        padding-right: 18px;\n        padding-left: 18px;\n    }\n\n    .azf-landing-mobile-logo {\n        width: 120px;\n    }\n\n    .azf-landing-mobile-nav {\n        padding-right: 18px;\n        padding-left: 18px;\n    }\n\n    .azf-landing-mobile-footer {\n        padding-right: 18px;\n        padding-left: 18px;\n    }\n\n}\n<\/style>\n\n<script>\n(function () {\n\n    \"use strict\";\n\n    const header = document.getElementById(\n        \"azf-landing-header\"\n    );\n\n    const mobileMenu = document.getElementById(\n        \"azf-landing-mobile-menu\"\n    );\n\n    if (!header || !mobileMenu) {\n        return;\n    }\n\n    const menuButton = header.querySelector(\n        \".azf-landing-menu-button\"\n    );\n\n    const closeButton = mobileMenu.querySelector(\n        \".azf-landing-mobile-close\"\n    );\n\n    const overlay = mobileMenu.querySelector(\n        \".azf-landing-mobile-overlay\"\n    );\n\n    const mobileLinks = mobileMenu.querySelectorAll(\"a\");\n\n    \/* =====================================================\n       MEN\u00dc \u00d6FFNEN\n    ===================================================== *\/\n\n    function openMenu() {\n\n        mobileMenu.classList.add(\"is-open\");\n\n        mobileMenu.setAttribute(\n            \"aria-hidden\",\n            \"false\"\n        );\n\n        menuButton.setAttribute(\n            \"aria-expanded\",\n            \"true\"\n        );\n\n        document.body.classList.add(\n            \"azf-landing-menu-open\"\n        );\n\n        window.setTimeout(function () {\n            closeButton.focus();\n        }, 100);\n\n    }\n\n    \/* =====================================================\n       MEN\u00dc SCHLIESSEN\n    ===================================================== *\/\n\n    function closeMenu() {\n\n        mobileMenu.classList.remove(\"is-open\");\n\n        mobileMenu.setAttribute(\n            \"aria-hidden\",\n            \"true\"\n        );\n\n        menuButton.setAttribute(\n            \"aria-expanded\",\n            \"false\"\n        );\n\n        document.body.classList.remove(\n            \"azf-landing-menu-open\"\n        );\n\n    }\n\n    menuButton.addEventListener(\n        \"click\",\n        openMenu\n    );\n\n    closeButton.addEventListener(\n        \"click\",\n        closeMenu\n    );\n\n    overlay.addEventListener(\n        \"click\",\n        closeMenu\n    );\n\n    mobileLinks.forEach(function (link) {\n\n        link.addEventListener(\n            \"click\",\n            closeMenu\n        );\n\n    });\n\n    document.addEventListener(\n        \"keydown\",\n        function (event) {\n\n            if (\n                event.key === \"Escape\" &&\n                mobileMenu.classList.contains(\"is-open\")\n            ) {\n\n                closeMenu();\n                menuButton.focus();\n\n            }\n\n        }\n    );\n\n    window.addEventListener(\n        \"resize\",\n        function () {\n\n            if (\n                window.innerWidth > 960 &&\n                mobileMenu.classList.contains(\"is-open\")\n            ) {\n                closeMenu();\n            }\n\n        }\n    );\n\n    \/* =====================================================\n       STICKY HEADER\n\n       Diese beiden Zeilen entfernen, falls der Header\n       nicht dauerhaft oben stehen soll.\n    ===================================================== *\/\n\n    header.classList.add(\"is-sticky\");\n\n    document.body.classList.add(\n        \"azf-landing-sticky-active\"\n    );\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2ac333f e-con e-atomic-element e-flexbox-base e-0522816 \" data-id=\"2ac333f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2ac333f\" data-e-type=\"e-flexbox\" data-id=\"2ac333f\">\n    \t\t<div class=\"elementor-element elementor-element-406f11e elementor-widget elementor-widget-html\" data-id=\"406f11e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     AZF STANDORTE + SCHLICHTE OPENSTREETMAP-KARTE\n     Komplett in ein Elementor-HTML-Widget einf\u00fcgen\n========================================================== -->\n\n<link\n    rel=\"stylesheet\"\n    href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\n>\n\n<section class=\"azf-standorte\">\n\n    <!-- =====================================================\n         EINLEITUNG\n    ====================================================== -->\n\n    <div class=\"azf-standorte-intro\">\n\n        <div class=\"azf-eyebrow\">\n            <span><\/span>\n            Pers\u00f6nlich f\u00fcr Sie vor Ort\n        <\/div>\n\n        <h2>Unsere Standorte<\/h2>\n\n        <p>\n            Entdecken Sie unsere Standorte in Flensburg, Schleswig,\n            Langballig und Kropp. W\u00e4hlen Sie den gew\u00fcnschten Standort\n            aus und erfahren Sie mehr \u00fcber Ansprechpartner, Leistungen\n            und \u00d6ffnungszeiten.\n        <\/p>\n\n    <\/div>\n\n    <!-- =====================================================\n         STANDORT-KACHELN\n    ====================================================== -->\n\n    <div class=\"azf-standorte-grid\">\n\n        <!-- 01: Audi Zentrum Flensburg -->\n\n        <a\n            class=\"azf-standort-card\"\n            href=\"https:\/\/www.azf-gruppe.de\/standorte\/audi-zentrum-flensburg\"\n        >\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                        alt=\"AZF Gruppe\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Flensburg<\/span>\n\n                <h3>Audi Zentrum Flensburg<\/h3>\n\n                <p>\n                    Liebigstra\u00dfe 8<br>\n                    24941 Flensburg\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer\">\n\n                <span>Standort ansehen<\/span>\n\n                <span class=\"azf-card-arrow\" aria-hidden=\"true\">\u2197<\/span>\n\n            <\/div>\n\n        <\/a>\n\n        <!-- 02: Auto Zentrum Nord -->\n\n        <a\n            class=\"azf-standort-card\"\n            href=\"https:\/\/www.azf-gruppe.de\/standorte\/auto-zentrum-nord\"\n        >\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                        alt=\"AZF Gruppe\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Flensburg<\/span>\n\n                <h3>Auto Zentrum Nord<\/h3>\n\n                <p>\n                    Liebigstra\u00dfe 10<br>\n                    24941 Flensburg\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer\">\n\n                <span>Standort ansehen<\/span>\n\n                <span class=\"azf-card-arrow\" aria-hidden=\"true\">\u2197<\/span>\n\n            <\/div>\n\n        <\/a>\n\n        <!-- 03: SEAT & CUPRA -->\n\n        <a\n            class=\"azf-standort-card\"\n            href=\"https:\/\/www.azf-gruppe.de\/standorte\/seat-cupra-flensburg\"\n        >\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                        alt=\"AZF Gruppe\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Flensburg<\/span>\n\n                <h3>SEAT &amp; CUPRA<\/h3>\n\n                <p>\n                    Liebigstra\u00dfe 3<br>\n                    24941 Flensburg\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer\">\n\n                <span>Standort ansehen<\/span>\n\n                <span class=\"azf-card-arrow\" aria-hidden=\"true\">\u2197<\/span>\n\n            <\/div>\n\n        <\/a>\n\n        <!-- 04: L\u00fcttmer & Felske -->\n\n        <a\n            class=\"azf-standort-card azf-standort-card-gruen\"\n            href=\"https:\/\/www.azf-gruppe.de\/standorte\/luettmer-und-felske\"\n        >\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo azf-card-logo-felske\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/www.azf-gruppe.de\/static\/img\/felske\/Logo_Slider-1030x126.png\"\n                        alt=\"L\u00fcttmer &amp; Felske \u2013 AZF an der Schlei\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Schleswig<\/span>\n\n                <h3 class=\"azf-brand-title\">\n                    <span class=\"azf-brand-main\">L\u00dcTTMER &amp; FELSKE<\/span>\n                    <span class=\"azf-brand-sub\"><strong>AZF<\/strong> AN DER SCHLEI<\/span>\n                <\/h3>\n\n                <p>\n                    Werner-von-Siemens-Stra\u00dfe 5<br>\n                    24837 Schleswig\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer\">\n\n                <span>Standort ansehen<\/span>\n\n                <span class=\"azf-card-arrow\" aria-hidden=\"true\">\u2197<\/span>\n\n            <\/div>\n\n        <\/a>\n\n        <!-- 05: Langballig ohne Link -->\n\n        <div class=\"azf-standort-card azf-standort-card-ohne-link\">\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/www.azf-gruppe.de\/static\/img\/logos\/AZF-Logo-4c_1.png\"\n                        alt=\"AZF Gruppe\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Langballig<\/span>\n\n                <h3>Autozentrum Nord GmbH<\/h3>\n\n                <p>\n                    Poststra\u00dfe 5<br>\n                    24977 Langballig\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer azf-card-footer-ohne-link\">\n\n                <span>Standort Langballig<\/span>\n\n                <span class=\"azf-card-status\" aria-hidden=\"true\"><\/span>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- 06: AZF AUF DER GEEST -->\n\n        <a\n            class=\"azf-standort-card azf-standort-card-gruen\"\n            href=\"https:\/\/thomsen-kropp.de\/\"\n        >\n\n            <div class=\"azf-card-header\">\n\n                <div class=\"azf-card-logo azf-card-logo-geest\">\n                    <img decoding=\"async\"\n                        src=\"https:\/\/thomsen-kropp.de\/wp-content\/uploads\/2026\/06\/Thomsen-AZF-auf-der-Geest-LOGO-quer-segel-gruen-schrift-grau-u.-schwarz.svg\"\n                        alt=\"AZF AUF DER GEEST\"\n                    >\n                <\/div>\n\n            <\/div>\n\n            <div class=\"azf-card-body\">\n\n                <span class=\"azf-card-city\">Kropp<\/span>\n\n                <h3 class=\"azf-brand-title\">\n                    <span class=\"azf-brand-main azf-brand-main-thomsen\">THOMSEN<\/span>\n                    <span class=\"azf-brand-sub\"><strong>AZF<\/strong> AUF DER GEEST<\/span>\n                <\/h3>\n\n                <p>\n                    Werkstra\u00dfe 2<br>\n                    24848 Kropp\n                <\/p>\n\n            <\/div>\n\n            <div class=\"azf-card-footer\">\n\n                <span>Standort ansehen<\/span>\n\n                <span class=\"azf-card-arrow\" aria-hidden=\"true\">\u2197<\/span>\n\n            <\/div>\n\n        <\/a>\n\n    <\/div>\n\n    <!-- =====================================================\n         KARTENBEREICH\n    ====================================================== -->\n\n    <div class=\"azf-map-section\">\n\n        <div class=\"azf-map-headline\">\n\n            <div>\n\n                <div class=\"azf-eyebrow\">\n                    <span><\/span>\n                    Standorte im \u00dcberblick\n                <\/div>\n\n                <h2>Immer in Ihrer N\u00e4he<\/h2>\n\n            <\/div>\n\n            <p>\n                Klicken Sie auf einen Standortmarker, um die Adresse\n                und weitere Informationen zum jeweiligen Betrieb\n                anzuzeigen.\n            <\/p>\n\n        <\/div>\n\n        <div class=\"azf-map-wrapper\">\n\n            <div id=\"azf-map\"><\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\/* =========================================================\n   GRUNDEINSTELLUNGEN\n========================================================= *\/\n\n.azf-standorte,\n.azf-standorte *,\n.azf-standorte *::before,\n.azf-standorte *::after {\n    box-sizing: border-box;\n}\n\n.azf-standorte {\n    --azf-rot: #db2342;\n    --azf-gruen: #65b32e;\n    --azf-schwarz: #111827;\n    --azf-text: #27303f;\n    --azf-grau: #667085;\n    --azf-hellgrau: #f5f6f8;\n    --azf-linie: #e2e5ea;\n\n    width: 100%;\n    max-width: 1500px;\n    margin: 0 auto;\n    padding: 80px 30px 100px;\n\n    color: var(--azf-text);\n    font-family: \"Barlow\", Arial, sans-serif;\n}\n\n.azf-standorte img {\n    display: block;\n    max-width: 100%;\n}\n\n.azf-standorte a {\n    font-family: inherit;\n}\n\n\/* =========================================================\n   \u00dcBERSCHRIFT\n========================================================= *\/\n\n.azf-standorte-intro {\n    max-width: 850px;\n    margin-bottom: 48px;\n}\n\n.azf-eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    margin-bottom: 15px;\n\n    color: var(--azf-rot);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.3;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n}\n\n.azf-eyebrow span {\n    display: block;\n\n    width: 34px;\n    height: 3px;\n\n    border-radius: 20px;\n    background: var(--azf-rot);\n}\n\n.azf-standorte-intro h2,\n.azf-map-headline h2 {\n    margin: 0 !important;\n\n    color: var(--azf-schwarz) !important;\n\n    font-size: clamp(38px, 5vw, 66px) !important;\n    font-weight: 700 !important;\n    line-height: 1.03 !important;\n    letter-spacing: -0.035em !important;\n}\n\n.azf-standorte-intro p {\n    max-width: 760px;\n\n    margin: 24px 0 0 !important;\n\n    color: var(--azf-grau) !important;\n\n    font-size: 20px !important;\n    font-weight: 400 !important;\n    line-height: 1.65 !important;\n}\n\n\/* =========================================================\n   STANDORT-KACHELN\n========================================================= *\/\n\n.azf-standorte-grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 22px;\n}\n\n.azf-standort-card {\n    position: relative;\n\n    display: flex !important;\n    flex-direction: column;\n\n    min-height: 330px;\n\n    margin: 0 !important;\n    padding: 28px !important;\n\n    overflow: hidden;\n\n    border: 1px solid var(--azf-linie) !important;\n    border-radius: 20px !important;\n\n    background: #ffffff !important;\n    color: var(--azf-text) !important;\n\n    text-align: left !important;\n    text-decoration: none !important;\n    text-shadow: none !important;\n\n    box-shadow: 0 10px 35px rgba(17, 24, 39, 0.045);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n.azf-standort-card::before {\n    content: \"\";\n\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 5px;\n\n    background: var(--azf-rot);\n\n    transform: scaleX(0);\n    transform-origin: left;\n\n    transition: transform 0.3s ease;\n}\n\n\na.azf-standort-card:hover,\na.azf-standort-card:focus-visible {\n    border-color: rgba(219, 35, 66, 0.45) !important;\n    box-shadow: 0 22px 55px rgba(17, 24, 39, 0.12);\n    transform: translateY(-6px);\n}\n\na.azf-standort-card:hover::before,\na.azf-standort-card:focus-visible::before {\n    transform: scaleX(1);\n}\n\n\n\/* Gr\u00fcne Standorte *\/\n\n.azf-standort-card-gruen::before {\n    background: var(--azf-gruen);\n}\n\n\na.azf-standort-card-gruen:hover,\na.azf-standort-card-gruen:focus-visible {\n    border-color: rgba(101, 179, 46, 0.6) !important;\n}\n\n\/* Nicht verlinkte Kachel *\/\n\n.azf-standort-card-ohne-link {\n    cursor: default;\n}\n\n.azf-standort-card-ohne-link::before {\n    transform: scaleX(1);\n    background: #b7bdc7;\n}\n\n\n\/* Kartenkopf *\/\n\n.azf-card-header {\n    position: relative;\n    z-index: 2;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    gap: 20px;\n\n    margin-bottom: 34px;\n}\n\n.azf-card-logo {\n    display: flex;\n    align-items: center;\n\n    width: 145px;\n    height: 58px;\n}\n\n.azf-card-logo img {\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n    object-position: left center;\n}\n\n.azf-card-logo-geest {\n    width: 190px;\n    height: 64px;\n}\n\n.azf-card-logo-felske {\n    margin-left: -20px;\n    width: 350px;\n    height: 70px;\n}\n\n\n\/* Karteninhalt *\/\n\n.azf-card-body {\n    position: relative;\n    z-index: 2;\n    flex: 1;\n}\n\n.azf-card-city {\n    display: block;\n\n    margin-bottom: 8px;\n\n    color: var(--azf-rot);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.3;\n    letter-spacing: 0.07em;\n    text-transform: uppercase;\n}\n\n.azf-standort-card-gruen .azf-card-city {\n    color: var(--azf-gruen);\n}\n\n.azf-standort-card-ohne-link .azf-card-city {\n    color: var(--azf-grau);\n}\n\n.azf-card-body h3 {\n    margin: 0 0 17px !important;\n\n    color: var(--azf-schwarz) !important;\n\n    font-size: 25px !important;\n    font-weight: 700 !important;\n    line-height: 1.18 !important;\n    letter-spacing: -0.02em !important;\n}\n\n\/* Markenschreibweise wie in den Logos *\/\n\n.azf-card-body h3.azf-brand-title {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 1px;\n\n    font-size: 25px !important;\n    line-height: 1.08 !important;\n    letter-spacing: 0 !important;\n}\n\n.azf-brand-main,\n.azf-brand-sub {\n    display: block;\n}\n\n.azf-brand-main {\n    font-family: \"Times New Roman\", serif;\n    font-size: 1em;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n}\n\n.azf-brand-main-thomsen {\n    font-family: Arial, Helvetica, sans-serif;\n    font-weight: 800;\n    letter-spacing: 0.015em;\n}\n\n.azf-brand-sub {\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 0.82em;\n    font-weight: 300;\n    letter-spacing: 0.01em;\n}\n\n.azf-brand-sub strong {\n    font-weight: 800;\n}\n\n.azf-card-body p {\n    margin: 0 !important;\n\n    color: var(--azf-grau) !important;\n\n    font-size: 17px !important;\n    font-weight: 400 !important;\n    line-height: 1.6 !important;\n}\n\n\/* Kartenfu\u00df *\/\n\n.azf-card-footer {\n    position: relative;\n    z-index: 2;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 15px;\n\n    margin-top: 30px;\n    padding-top: 20px;\n\n    border-top: 1px solid var(--azf-linie);\n\n    color: var(--azf-schwarz);\n\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.azf-card-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 36px;\n    height: 36px;\n\n    border-radius: 50%;\n\n    background: var(--azf-hellgrau);\n    color: var(--azf-rot);\n\n    font-size: 19px;\n\n    transition:\n        background-color 0.25s ease,\n        color 0.25s ease,\n        transform 0.25s ease;\n}\n\na.azf-standort-card:hover .azf-card-arrow,\na.azf-standort-card:focus-visible .azf-card-arrow {\n    background: var(--azf-rot);\n    color: #ffffff;\n    transform: translate(2px, -2px);\n}\n\n.azf-standort-card-gruen .azf-card-arrow {\n    color: var(--azf-gruen);\n}\n\na.azf-standort-card-gruen:hover .azf-card-arrow,\na.azf-standort-card-gruen:focus-visible .azf-card-arrow {\n    background: var(--azf-gruen);\n    color: #ffffff;\n}\n\n.azf-card-footer-ohne-link {\n    color: var(--azf-grau);\n}\n\n.azf-card-status {\n    display: block;\n\n    width: 10px;\n    height: 10px;\n\n    border-radius: 50%;\n    background: #b7bdc7;\n}\n\n\/* =========================================================\n   KARTENBEREICH\n========================================================= *\/\n\n.azf-map-section {\n    margin-top: 100px;\n}\n\n.azf-map-headline {\n    display: grid;\n    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);\n    align-items: end;\n    gap: 50px;\n\n    margin-bottom: 36px;\n}\n\n.azf-map-headline p {\n    max-width: 520px;\n\n    margin: 0 0 5px !important;\n\n    color: var(--azf-grau) !important;\n\n    font-size: 18px !important;\n    font-weight: 400 !important;\n    line-height: 1.65 !important;\n}\n\n.azf-map-wrapper {\n    position: relative;\n\n    overflow: hidden;\n\n    border: 1px solid var(--azf-linie);\n    border-radius: 24px;\n\n    background: #f3f4f5;\n\n    box-shadow: 0 22px 65px rgba(17, 24, 39, 0.11);\n}\n\n#azf-map {\n    width: 100%;\n    height: 650px;\n    min-height: 500px;\n\n    background: #eef0f1;\n}\n\n\/* =========================================================\n   LEAFLET-KARTE\n========================================================= *\/\n\n.azf-standorte .leaflet-container {\n    z-index: 1;\n\n    font-family: \"Barlow\", Arial, sans-serif;\n}\n\n\/*\n * OpenStreetMap-Standardkarte, optisch an die vorherige\n * helle CARTO-Positron-Darstellung angelehnt.\n * Keine CARTO-API und kein API-Key erforderlich.\n *\/\n\n.azf-standorte .leaflet-tile-pane {\n    filter:\n        grayscale(0.82)\n        saturate(0.48)\n        contrast(0.82)\n        brightness(1.13);\n}\n\n.azf-standorte .leaflet-tile {\n    opacity: 0.94;\n}\n\n\/* Zoom-Steuerung *\/\n\n.azf-standorte .leaflet-control-zoom {\n    overflow: hidden;\n\n    border: 0 !important;\n    border-radius: 12px !important;\n\n    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.14) !important;\n}\n\n.azf-standorte .leaflet-control-zoom a {\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n\n    width: 42px !important;\n    height: 42px !important;\n\n    border: 0 !important;\n\n    background: #ffffff !important;\n    color: var(--azf-schwarz) !important;\n\n    font-size: 22px !important;\n    line-height: 42px !important;\n\n    text-decoration: none !important;\n    text-shadow: none !important;\n}\n\n.azf-standorte .leaflet-control-zoom a:hover {\n    background: var(--azf-rot) !important;\n    color: #ffffff !important;\n}\n\n\/* =========================================================\n   MARKER\n========================================================= *\/\n\n.azf-marker-wrapper {\n    border: 0 !important;\n    background: transparent !important;\n}\n\n.azf-marker-pin {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 42px;\n    height: 42px;\n\n    border: 4px solid #ffffff;\n    border-radius: 50% 50% 50% 0;\n\n    background: var(--azf-rot);\n\n    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);\n\n    transform: rotate(-45deg);\n}\n\n.azf-marker-pin::after {\n    content: \"\";\n\n    width: 10px;\n    height: 10px;\n\n    border-radius: 50%;\n    background: #ffffff;\n}\n\n.azf-marker-pin-green {\n    background: var(--azf-gruen);\n}\n\n\/* =========================================================\n   KLEINE POPUPS\n========================================================= *\/\n\n.azf-standorte .leaflet-popup-content-wrapper {\n    overflow: hidden;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 14px;\n\n    background: #ffffff;\n\n    box-shadow: 0 15px 45px rgba(17, 24, 39, 0.2);\n}\n\n.azf-standorte .leaflet-popup-content {\n    width: 235px !important;\n    margin: 0 !important;\n}\n\n.azf-standorte .leaflet-popup-tip {\n    background: #ffffff;\n    box-shadow: none;\n}\n\n.azf-standorte .leaflet-popup-close-button {\n    top: 8px !important;\n    right: 8px !important;\n\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n\n    width: 27px !important;\n    height: 27px !important;\n\n    padding: 0 !important;\n\n    border-radius: 50%;\n\n    background: #f0f1f3 !important;\n    color: var(--azf-schwarz) !important;\n\n    font-size: 18px !important;\n    line-height: 1 !important;\n\n    text-decoration: none !important;\n    text-shadow: none !important;\n}\n\n.azf-standorte .leaflet-popup-close-button:hover {\n    background: #e1e3e7 !important;\n    color: var(--azf-rot) !important;\n}\n\n.azf-small-popup {\n    padding: 19px;\n\n    font-family: \"Barlow\", Arial, sans-serif;\n}\n\n.azf-small-popup-city {\n    display: block;\n\n    margin: 0 30px 5px 0;\n\n    color: var(--azf-rot);\n\n    font-size: 11px;\n    font-weight: 700;\n    line-height: 1.3;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n}\n\n.azf-small-popup.is-green .azf-small-popup-city {\n    color: var(--azf-gruen);\n}\n\n.azf-small-popup-title {\n    display: block;\n\n    margin: 0 30px 10px 0;\n\n    color: var(--azf-schwarz);\n\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1.2;\n}\n\n.azf-small-popup-address {\n    margin: 0 0 14px !important;\n\n    color: var(--azf-grau) !important;\n\n    font-size: 14px !important;\n    font-weight: 400 !important;\n    line-height: 1.5 !important;\n}\n\n.azf-small-popup-link {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n\n    padding-top: 13px;\n\n    border-top: 1px solid var(--azf-linie);\n\n    color: var(--azf-rot) !important;\n\n    font-size: 13px !important;\n    font-weight: 700 !important;\n    line-height: 1.3 !important;\n\n    text-decoration: none !important;\n    text-shadow: none !important;\n}\n\n.azf-small-popup.is-green .azf-small-popup-link {\n    color: var(--azf-gruen) !important;\n}\n\n.azf-small-popup-link span:last-child {\n    font-size: 17px;\n\n    transition: transform 0.2s ease;\n}\n\n.azf-small-popup-link:hover span:last-child {\n    transform: translate(2px, -2px);\n}\n\n.azf-small-popup-no-link {\n    margin: 0 !important;\n    padding-top: 13px;\n\n    border-top: 1px solid var(--azf-linie);\n\n    color: var(--azf-grau) !important;\n\n    font-size: 13px !important;\n    font-weight: 600 !important;\n    line-height: 1.3 !important;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    .azf-standorte-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .azf-map-headline {\n        grid-template-columns: 1fr;\n        gap: 20px;\n    }\n\n    #azf-map {\n        height: 580px;\n    }\n\n}\n\n\/* =========================================================\n   MOBIL\n========================================================= *\/\n\n@media (max-width: 700px) {\n\n    .azf-standorte {\n        padding: 55px 18px 70px;\n    }\n\n    .azf-standorte-intro {\n        margin-bottom: 34px;\n    }\n\n    .azf-standorte-intro p {\n        margin-top: 18px !important;\n\n        font-size: 17px !important;\n        line-height: 1.55 !important;\n    }\n\n    .azf-standorte-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    .azf-standort-card {\n        min-height: 295px;\n\n        padding: 23px !important;\n\n        border-radius: 16px !important;\n    }\n\n    .azf-card-logo {\n        width: 125px;\n        height: 52px;\n    }\n\n    .azf-card-logo-geest {\n        width: 175px;\n        height: 58px;\n    }\n\n    .azf-card-logo-felske {\n        width: 215px;\n        height: 56px;\n    }\n\n    .azf-card-body h3 {\n        font-size: 23px !important;\n    }\n\n    .azf-map-section {\n        margin-top: 70px;\n    }\n\n    .azf-map-wrapper {\n        border-radius: 17px;\n    }\n\n    #azf-map {\n        height: 520px;\n        min-height: 460px;\n    }\n\n    .azf-standorte .leaflet-popup-content {\n        width: 220px !important;\n    }\n\n}\n<\/style>\n\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n<script>\n(function () {\n\n    function initAzfStandorteMap() {\n\n        const mapElement = document.getElementById(\"azf-map\");\n\n        if (\n            !mapElement ||\n            typeof L === \"undefined\" ||\n            mapElement.dataset.initialized === \"true\"\n        ) {\n            return;\n        }\n\n        mapElement.dataset.initialized = \"true\";\n\n        \/* =====================================================\n           STANDORTDATEN\n        ===================================================== *\/\n\n        const locations = [\n\n            {\n                name: \"Audi Zentrum Flensburg\",\n                city: \"Flensburg\",\n                street: \"Liebigstra\u00dfe 8\",\n                postalCity: \"24941 Flensburg\",\n                lat: 54.75555,\n                lng: 9.40482,\n                website:\n                    \"https:\/\/www.azf-gruppe.de\/standorte\/audi-zentrum-flensburg\",\n                color: \"red\"\n            },\n\n            {\n                name: \"Auto Zentrum Nord\",\n                city: \"Flensburg\",\n                street: \"Liebigstra\u00dfe 10\",\n                postalCity: \"24941 Flensburg\",\n                lat: 54.75610,\n                lng: 9.40565,\n                website:\n                    \"https:\/\/www.azf-gruppe.de\/standorte\/auto-zentrum-nord\",\n                color: \"red\"\n            },\n\n            {\n                name: \"SEAT & CUPRA\",\n                city: \"Flensburg\",\n                street: \"Liebigstra\u00dfe 3\",\n                postalCity: \"24941 Flensburg\",\n                lat: 54.75490,\n                lng: 9.40295,\n                website:\n                    \"https:\/\/www.azf-gruppe.de\/standorte\/seat-cupra-flensburg\",\n                color: \"red\"\n            },\n\n            {\n                name: \"L\u00dcTTMER & FELSKE \u2013 AZF AN DER SCHLEI\",\n                city: \"Schleswig\",\n                street: \"Werner-von-Siemens-Stra\u00dfe 5\",\n                postalCity: \"24837 Schleswig\",\n                lat: 54.50965,\n                lng: 9.54840,\n                website:\n                    \"https:\/\/www.azf-gruppe.de\/standorte\/luettmer-und-felske\",\n                color: \"green\"\n            },\n\n            {\n                name: \"Autozentrum Nord GmbH\",\n                city: \"Langballig\",\n                street: \"Poststra\u00dfe 5\",\n                postalCity: \"24977 Langballig\",\n                lat: 54.82220,\n                lng: 9.63420,\n                website: \"\",\n                color: \"red\"\n            },\n\n            {\n                name: \"THOMSEN \u2013 AZF AUF DER GEEST\",\n                city: \"Kropp\",\n                street: \"Werkstra\u00dfe 2\",\n                postalCity: \"24848 Kropp\",\n                lat: 54.41190,\n                lng: 9.51620,\n                website: \"https:\/\/thomsen-kropp.de\/\",\n                color: \"green\"\n            }\n\n        ];\n\n        \/* =====================================================\n           KARTE ERSTELLEN\n        ===================================================== *\/\n\n        const map = L.map(\"azf-map\", {\n            scrollWheelZoom: false,\n            zoomControl: true,\n            attributionControl: true,\n            preferCanvas: true\n        });\n\n        \/*\n         * OpenStreetMap Standard Tiles.\n         * Kein API-Key und keine CARTO-Abh\u00e4ngigkeit.\n         *\/\n\n        L.tileLayer(\n            \"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\n            {\n                maxZoom: 19,\n                attribution:\n                    '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\" rel=\"noopener\">OpenStreetMap-Mitwirkende<\/a>'\n            }\n        ).addTo(map);\n\n        \/* =====================================================\n           MARKER\n        ===================================================== *\/\n\n        const redMarker = L.divIcon({\n            className: \"azf-marker-wrapper\",\n            html: '<div class=\"azf-marker-pin\"><\/div>',\n            iconSize: [42, 42],\n            iconAnchor: [21, 42],\n            popupAnchor: [0, -40]\n        });\n\n        const greenMarker = L.divIcon({\n            className: \"azf-marker-wrapper\",\n            html:\n                '<div class=\"azf-marker-pin azf-marker-pin-green\"><\/div>',\n            iconSize: [42, 42],\n            iconAnchor: [21, 42],\n            popupAnchor: [0, -40]\n        });\n\n        const bounds = [];\n\n        \/* =====================================================\n           POPUP ERSTELLEN\n        ===================================================== *\/\n\n        function createPopup(location) {\n\n            const popupClass =\n                location.color === \"green\"\n                    ? \"azf-small-popup is-green\"\n                    : \"azf-small-popup\";\n\n            let popupFooter = \"\";\n\n            if (location.website) {\n\n                popupFooter = `\n                    <a\n                        class=\"azf-small-popup-link\"\n                        href=\"${location.website}\"\n                    >\n                        <span>Standort ansehen<\/span>\n                        <span aria-hidden=\"true\">\u2197<\/span>\n                    <\/a>\n                `;\n\n            } else {\n\n                popupFooter = `\n                    <p class=\"azf-small-popup-no-link\">\n                        Standort Langballig\n                    <\/p>\n                `;\n\n            }\n\n            return `\n                <div class=\"${popupClass}\">\n\n                    <span class=\"azf-small-popup-city\">\n                        ${location.city}\n                    <\/span>\n\n                    <strong class=\"azf-small-popup-title\">\n                        ${location.name}\n                    <\/strong>\n\n                    <p class=\"azf-small-popup-address\">\n                        ${location.street}<br>\n                        ${location.postalCity}\n                    <\/p>\n\n                    ${popupFooter}\n\n                <\/div>\n            `;\n        }\n\n        \/* =====================================================\n           STANDORTMARKER EINTRAGEN\n        ===================================================== *\/\n\n        locations.forEach(function (location) {\n\n            const marker = L.marker(\n                [location.lat, location.lng],\n                {\n                    icon:\n                        location.color === \"green\"\n                            ? greenMarker\n                            : redMarker,\n\n                    title: location.name,\n                    riseOnHover: true\n                }\n            ).addTo(map);\n\n            marker.bindPopup(\n                createPopup(location),\n                {\n                    maxWidth: 260,\n                    minWidth: 210,\n                    closeButton: true,\n                    autoPan: true,\n                    autoPanPadding: [25, 25]\n                }\n            );\n\n            bounds.push([\n                location.lat,\n                location.lng\n            ]);\n\n        });\n\n        \/* Alle Standorte sichtbar anzeigen *\/\n\n        map.fitBounds(bounds, {\n            paddingTopLeft: [65, 65],\n            paddingBottomRight: [65, 85],\n            maxZoom: 10\n        });\n\n        \/* =====================================================\n           BEDIENUNG\n        ===================================================== *\/\n\n        \/*\n         * Scroll-Zoom erst aktivieren, wenn die Karte\n         * bewusst angeklickt wurde.\n         *\/\n\n        map.on(\"click\", function () {\n            map.scrollWheelZoom.enable();\n        });\n\n        map.on(\"mouseout\", function () {\n            map.scrollWheelZoom.disable();\n        });\n\n        \/* =====================================================\n           ELEMENTOR\n        ===================================================== *\/\n\n        window.setTimeout(function () {\n\n            map.invalidateSize();\n\n            map.fitBounds(bounds, {\n                paddingTopLeft: [65, 65],\n                paddingBottomRight: [65, 85],\n                maxZoom: 10\n            });\n\n        }, 500);\n\n        window.addEventListener(\"resize\", function () {\n\n            window.setTimeout(function () {\n                map.invalidateSize();\n            }, 150);\n\n        });\n\n    }\n\n    \/* Normale Website *\/\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initAzfStandorteMap\n        );\n\n    } else {\n\n        initAzfStandorteMap();\n\n    }\n\n    \/* Elementor-Vorschau *\/\n\n    window.addEventListener(\n        \"elementor\/frontend\/init\",\n        function () {\n\n            window.setTimeout(\n                initAzfStandorteMap,\n                300\n            );\n\n        }\n    );\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Standorte Fahrzeuge Termin vereinbaren Jobs Fahrzeuge ansehen \u00dcbersicht Standorte Neu- und Gebrauchtwagen Fahrzeuge Service und Werkstatt Termin vereinbaren Karriere bei Thomsen Kropp Jobs Fahrzeuge ansehen Termin vereinbaren Pers\u00f6nlich f\u00fcr Sie vor Ort Unsere Standorte Entdecken Sie unsere Standorte in Flensburg, Schleswig, Langballig und Kropp. W\u00e4hlen Sie den gew\u00fcnschten Standort aus und erfahren Sie mehr \u00fcber [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":20,"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/azf.wshdev.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}