{"id":1429,"date":"2022-06-07T13:55:19","date_gmt":"2022-06-07T11:55:19","guid":{"rendered":"http:\/\/gruene-flotte.com\/carsharing\/?page_id=1429"},"modified":"2026-04-27T15:49:43","modified_gmt":"2026-04-27T13:49:43","slug":"flotte","status":"publish","type":"page","link":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/","title":{"rendered":"Carsharing Flotte"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8220;1&#8243; fullwidth=&#8220;on&#8220; admin_label=&#8220;Header ohne Hintergrundbild&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; height_tablet=&#8220;80vh&#8220; height_phone=&#8220;50vh&#8220; height_last_edited=&#8220;off|phone&#8220; custom_padding=&#8220;||0px|||&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_fullwidth_header admin_label=&#8220;Vollbreite Kopfzeile&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; subhead_font=&#8220;|||on|||||&#8220; subhead_letter_spacing=&#8220;2px&#8220; subhead_line_height=&#8220;1.2em&#8220; background_color=&#8220;#82ba26&#8243; custom_margin=&#8220;||||false|false&#8220; custom_padding=&#8220;180px||||false|false&#8220; custom_padding_tablet=&#8220;80px||80px||false|false&#8220; custom_padding_phone=&#8220;110px||10px||false|false&#8220; custom_padding_last_edited=&#8220;on|phone&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>Die Gr\u00fcne Flotte<\/h3>\n<h1>Fahrzeug&shy;flotte<\/h1>\n<p>[\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8220;1&#8243; custom_padding_last_edited=&#8220;on|phone&#8220; admin_label=&#8220;Carsharing Flotte&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; background_color=&#8220;#f8f8f8&#8243; custom_padding=&#8220;30px||30px||false|false&#8220; custom_padding_tablet=&#8220;&#8220; custom_padding_phone=&#8220;50px|30px|50px|30px|false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_row custom_padding_last_edited=&#8220;on|desktop&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; background_enable_color=&#8220;off&#8220; width_tablet=&#8220;&#8220; width_phone=&#8220;100%&#8220; width_last_edited=&#8220;on|phone&#8220; custom_margin=&#8220;||||false|false&#8220; custom_padding=&#8220;0px||0px||false|false&#8220; custom_padding_tablet=&#8220;0px||0px||false|false&#8220; custom_padding_phone=&#8220;0px||0px||false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.17.4&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_code _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;]<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n\r\n<style>\r\n  .size-filter {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    padding: 0 16px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n  }\r\n  \r\n  .swipe-indicator {\r\n    display: none;\r\n  }\r\n\r\n  .size-filter button {\r\n    padding: 8px 16px;\r\n    border: 2px solid #e0e0e0;\r\n    border-radius: 25px;\r\n    background: white;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .size-filter button:hover {\r\n    border-color: #82ba26;\r\n    background: #f8fdf0;\r\n  }\r\n\r\n  .size-filter button.active {\r\n    border-color: #82ba26;\r\n    background: #82ba26;\r\n    color: white;\r\n  }\r\n\r\n  \/* Mobile Dropdown f\u00fcr Gr\u00f6\u00dfenfilter *\/\r\n  .size-filter-dropdown {\r\n    display: none;\r\n    position: relative;\r\n    width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  .size-filter-dropdown select {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 2px solid #e0e0e0;\r\n    border-radius: 25px;\r\n    background: white;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path fill=\"%23666\" d=\"M6 9L1.5 4.5h9L6 9z\"\/><\/svg>');\r\n    background-repeat: no-repeat;\r\n    background-position: right 16px center;\r\n    background-size: 12px;\r\n    padding-right: 40px;\r\n  }\r\n\r\n  p.gf-flotte-list-item {\r\n    padding-bottom: 2px;\r\n    gap: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    font-weight: 900;\r\n    text-transform: uppercase;\r\n    letter-spacing: .5px;\r\n  }\r\n\r\n  .size-filter-dropdown select:focus {\r\n    outline: none;\r\n    border-color: #82ba26;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .size-filter {\r\n      display: none;\r\n    }\r\n\r\n    .size-filter-dropdown {\r\n      display: block;\r\n    }\r\n  }\r\n\r\n  .slider-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 16px 0 32px 0;\r\n    \/* Fester Offset f\u00fcr das erste Element *\/\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-wrapper {\r\n      margin-left: 0;\r\n      padding: 16px 0 32px 0;\r\n    }\r\n  }\r\n\r\n  .slider-inner {\r\n    display: flex;\r\n    gap: 1rem;\r\n    will-change: transform;\r\n    touch-action: pan-x;\r\n    cursor: grab;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    padding: 15px;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .slider-inner::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .slider-inner.dragging {\r\n    cursor: grabbing;\r\n    scroll-behavior: auto;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-inner {\r\n      gap: 0.75rem;\r\n      padding: 15px 8px;\r\n    }\r\n  }\r\n\r\n  .slider-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 1000;\r\n    background: #ffffff;\r\n    border: none;\r\n    padding: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    border-radius: 50px;\r\n    width: 40px;\r\n    height: 40px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .slider-arrow:hover {\r\n    background: #f0f0f0;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .slider-arrow.left {\r\n    left: 0.5rem;\r\n  }\r\n\r\n  .slider-arrow.right {\r\n    right: 0.5rem;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-arrow {\r\n      width: 36px;\r\n      height: 36px;\r\n      padding: 6px;\r\n    }\r\n\r\n    .slider-arrow.left {\r\n      left: 0.25rem;\r\n    }\r\n\r\n    .slider-arrow.right {\r\n      right: 0.25rem;\r\n    }\r\n  }\r\n\r\n  .car-tile {\r\n    flex: 0 0 auto;\r\n    width: 200px;\r\n    border-radius: 10px;\r\n    background: white;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    pointer-events: auto;\r\n    user-select: none;\r\n    -webkit-user-select: none;\r\n    -moz-user-select: none;\r\n    -ms-user-select: none;\r\n    position: relative;\r\n    scroll-snap-align: start;\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n\r\n  .car-tile:first-child {\r\n    margin-left: 0;\r\n    \/* Entfernt, da wir den Container-Offset verwenden *\/\r\n  }\r\n\r\n  .size-marker {\r\n    position: absolute;\r\n    top: -10px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background-image: url('https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/gruene-flotte-plugin\/templates\/images\/Marker.svg');\r\n    background-size: contain;\r\n    width: 35px;\r\n    height: 40px;\r\n    color: white;\r\n    font-size: 14px;\r\n    font-weight: 900;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 10;\r\n    text-transform: uppercase;\r\n    padding-top: 2px;\r\n    padding-bottom: 7px;\r\n  }\r\n\r\n  .car-tile.hidden {\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n    pointer-events: none;\r\n    position: absolute;\r\n    visibility: hidden;\r\n  }\r\n\r\n  .car-tile:hover {\r\n    transform: scale(1.02) translateY(-2px);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n  }\r\n\r\n  .car-tile.gf-active-car {\r\n    box-shadow: 0 0 0 3px #82ba26, 0 6px 20px rgba(130, 186, 38, 0.3);\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-tile {\r\n      width: 150px;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .car-tile:hover {\r\n      transform: scale(1.01) translateY(-1px);\r\n    }\r\n\r\n    .car-tile.gf-active-car {\r\n      box-shadow: 0 0 0 2px #82ba26, 0 4px 12px rgba(130, 186, 38, 0.3);\r\n      transform: translateY(-3px);\r\n    }\r\n  }\r\n\r\n  .car-tile img {\r\n    width: 100%;\r\n    border-top-left-radius: 10px;\r\n    border-top-right-radius: 10px;\r\n    object-fit: cover;\r\n    height: 140px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-tile img {\r\n      height: 90px;\r\n      border-top-left-radius: 8px;\r\n      border-top-right-radius: 8px;\r\n    }\r\n  }\r\n\r\n  .car-info {\r\n    padding: 0.5rem;\r\n    text-align: center;\r\n  }\r\n\r\n  .car-headline {\r\n    font-weight: 900;\r\n    text-transform: uppercase;\r\n    font-size: 18px;\r\n    line-height: 1.2;\r\n    padding-bottom: 5px;\r\n  }\r\n\r\n  .car-description {\r\n    font-size: 14px;\r\n    text-transform: uppercase;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  .car-price {\r\n    font-size: 18px;\r\n    font-weight: 900;\r\n    color: #82ba26;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-info {\r\n      padding: 0.4rem;\r\n    }\r\n\r\n    .car-headline {\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    .car-description {\r\n      font-size: 12px;\r\n    }\r\n  }\r\n\r\n  #details {\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n  }\r\n\r\n  .detail {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    padding: 2rem;\r\n    gap: 2rem;\r\n    background: white;\r\n  }\r\n\r\n  .gallery {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .info {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  \/* Bildergalerie Slider *\/\r\n  .image-slider-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n  }\r\n\r\n  .image-slider {\r\n    display: flex;\r\n    transition: none;\r\n    width: 100%;\r\n    will-change: transform;\r\n  }\r\n\r\n  .image-slider img {\r\n    width: 100%;\r\n    height: 350px;\r\n    object-fit: cover;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .image-nav {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: rgba(255, 255, 255, 0.8);\r\n    border: none;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 18px;\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  .image-nav:hover {\r\n    background: rgba(255, 255, 255, 0.9);\r\n  }\r\n\r\n  .image-nav.prev {\r\n    left: 10px;\r\n  }\r\n\r\n  .image-nav.next {\r\n    right: 10px;\r\n  }\r\n\r\n  .image-dots {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .image-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #ccc;\r\n    cursor: pointer;\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  .image-dot.gf-active-car {\r\n    background: #82ba26;\r\n  }\r\n\r\n  .tables {\r\n    padding: 2rem;\r\n    background: white;\r\n  }\r\n\r\n  .table-wrapper {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-bottom: 2rem;\r\n  }\r\n\r\n  h3.table-title {\r\n    font-size: 20px;\r\n    font-weight: 900;\r\n  }\r\n\r\n  td {\r\n    border: 1px solid #efefef;\r\n    padding: 0.5rem;\r\n    text-align: left;\r\n    color: #000000 !important;\r\n    font-size: 16px;\r\n  }\r\n\r\n  tr:nth-child(even) {\r\n    background-color: #f8f8f8;\r\n  }\r\n\r\n  th {\r\n    background-color: #82ba26;\r\n    border: 1px solid #efefef;\r\n    padding: 5px 10px !important;\r\n    text-align: left;\r\n    color: #ffffff !important;\r\n    font-size: 16px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    #details {\r\n      box-shadow: none;\r\n      margin: 0 -16px;\r\n      \/* Nutze die volle Bildschirmbreite *\/\r\n    }\r\n\r\n    .detail {\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: 0px;\r\n      gap: 8px;\r\n      background-color: transparent;\r\n    }\r\n\r\n    .gallery {\r\n      margin: 0 -16px;\r\n      \/* Galerie nutzt volle Breite *\/\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    .info {\r\n      padding: 0 0 32px 0;\r\n    }\r\n\r\n    .image-slider img {\r\n      width: 100%;\r\n      height: 200px;\r\n      object-fit: cover;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .table-wrapper {\r\n      overflow-x: auto;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .table-wrapper:last-child {\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .table-wrapper table {\r\n      min-width: 600px;\r\n      width: auto;\r\n    }\r\n\r\n    .tables {\r\n      padding: 0px;\r\n      background-color: transparent;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .tables table {\r\n      width: 100%;\r\n      border: none;\r\n      overflow-x: auto;\r\n    }\r\n\r\n    .tables table td {\r\n      min-width: 150px;\r\n      font-size: 0.85rem;\r\n      padding: 0.4rem;\r\n    }\r\n\r\n    .tables table th {\r\n      font-size: 0.85rem;\r\n      padding: 0.4rem;\r\n      line-height: 1.4;\r\n      width: 150px;\r\n    }\r\n\r\n    .swipe-indicator {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    h3.table-title {\r\n      font-size: 1.2rem;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"size-filter\" id=\"sizeFilter\">\r\n  <button class=\"size-filter-btn active\" data-size=\"all\">Alle<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xs\">XS<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"s\">S<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"m\">M<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"l\">L<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xl\">XL<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xxl\">XXL<\/button>\r\n<\/div>\r\n\r\n<div class=\"size-filter-dropdown\" id=\"sizeFilterDropdown\">\r\n  <select id=\"sizeFilterSelect\">\r\n    <option value=\"all\">Alle Gr\u00f6\u00dfen<\/option>\r\n    <option value=\"xs\">XS<\/option>\r\n    <option value=\"s\">S<\/option>\r\n    <option value=\"m\">M<\/option>\r\n    <option value=\"l\">L<\/option>\r\n    <option value=\"xl\">XL<\/option>\r\n    <option value=\"xxl\">XXL<\/option>\r\n  <\/select>\r\n<\/div>\r\n\r\n<div class=\"slider-wrapper\">\r\n  <button id=\"arrow-left\" class=\"slider-arrow left\" type=\"button\">\r\n    <img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-left.svg\" alt=\"Arrow Left\" \/>\r\n  <\/button>\r\n  <div class=\"slider\" id=\"slider\">\r\n    <div class=\"slider-inner\" id=\"sliderInner\"><\/div>\r\n  <\/div>\r\n  <button id=\"arrow-right\" class=\"slider-arrow right\" type=\"button\">\r\n    <img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-right.svg\" alt=\"Arrow Right\" \/>\r\n  <\/button>\r\n<\/div>\r\n\r\n<div id=\"details\" style=\"display: none;\">\r\n  <div class=\"detail\">\r\n    <div class=\"gallery\" id=\"gallery\"><\/div>\r\n    <div class=\"info\" id=\"info\"><\/div>\r\n  <\/div>\r\n  <div class=\"tables\" id=\"tables\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ Globale Variablen\r\n  let currentImageIndex = 0;\r\n  let currentCarImages = [];\r\n  let isSliderDragging = false;\r\n  let sliderStartX = 0;\r\n  let sliderScrollStart = 0;\r\n  let hasMoved = false;\r\n  let allCars = [];\r\n  let filteredCars = [];\r\n  let currentFilter = 'all';\r\n\r\n  \/\/ DOM Elemente\r\n  const sliderInner = document.getElementById('sliderInner');\r\n  const arrowLeft = document.getElementById('arrow-left');\r\n  const arrowRight = document.getElementById('arrow-right');\r\n  const sizeFilter = document.getElementById('sizeFilter');\r\n\r\n  \/\/ Optimierte Slider Klasse\r\n  class CarSlider {\r\n    constructor() {\r\n      this.isDragging = false;\r\n      this.startX = 0;\r\n      this.startY = 0;\r\n      this.scrollLeft = 0;\r\n      this.hasMoved = false;\r\n      this.isVerticalScroll = false;\r\n      this.dragThreshold = 5;\r\n      this.init();\r\n    }\r\n\r\n    init() {\r\n      \/\/ Passive Event Listeners f\u00fcr bessere Performance\r\n      sliderInner.addEventListener('mousedown', this.handleMouseDown.bind(this));\r\n      document.addEventListener('mousemove', this.handleMouseMove.bind(this), {\r\n        passive: true\r\n      });\r\n      document.addEventListener('mouseup', this.handleMouseUp.bind(this));\r\n\r\n      \/\/ Optimierte Touch Events\r\n      sliderInner.addEventListener('touchstart', this.handleTouchStart.bind(this), {\r\n        passive: true\r\n      });\r\n      sliderInner.addEventListener('touchmove', this.handleTouchMove.bind(this), {\r\n        passive: false\r\n      });\r\n      sliderInner.addEventListener('touchend', this.handleTouchEnd.bind(this), {\r\n        passive: true\r\n      });\r\n\r\n      \/\/ Prevent context menu und drag\r\n      sliderInner.addEventListener('contextmenu', e => e.preventDefault());\r\n      sliderInner.addEventListener('dragstart', e => e.preventDefault());\r\n    }\r\n\r\n    handleMouseDown(e) {\r\n      if (e.button !== 0) return;\r\n\r\n      this.isDragging = true;\r\n      this.hasMoved = false;\r\n      this.startX = e.clientX;\r\n      this.scrollLeft = sliderInner.scrollLeft;\r\n      sliderInner.classList.add('dragging');\r\n      e.preventDefault();\r\n    }\r\n\r\n    handleMouseMove(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      const diffX = e.clientX - this.startX;\r\n      const newScrollLeft = this.scrollLeft - diffX;\r\n\r\n      \/\/ Optimierte Scroll-Berechnung\r\n      const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n      sliderInner.scrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));\r\n\r\n      if (Math.abs(diffX) > this.dragThreshold) {\r\n        this.hasMoved = true;\r\n      }\r\n    }\r\n\r\n    handleMouseUp(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      this.isDragging = false;\r\n      sliderInner.classList.remove('dragging');\r\n\r\n      \/\/ Verz\u00f6gertes Reset f\u00fcr Click-Detection\r\n      requestAnimationFrame(() => {\r\n        setTimeout(() => {\r\n          this.hasMoved = false;\r\n        }, 50);\r\n      });\r\n    }\r\n\r\n    handleTouchStart(e) {\r\n      this.isDragging = true;\r\n      this.hasMoved = false;\r\n      this.isVerticalScroll = false;\r\n      this.startX = e.touches[0].clientX;\r\n      this.startY = e.touches[0].clientY;\r\n      this.scrollLeft = sliderInner.scrollLeft;\r\n      sliderInner.style.scrollBehavior = 'auto';\r\n    }\r\n\r\n    handleTouchMove(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      const diffX = e.touches[0].clientX - this.startX;\r\n      const diffY = e.touches[0].clientY - this.startY;\r\n\r\n      \/\/ Erkennung von vertikalem Scrollen\r\n      if (!this.isVerticalScroll && Math.abs(diffY) > Math.abs(diffX)) {\r\n        this.isVerticalScroll = true;\r\n        return;\r\n      }\r\n\r\n      if (this.isVerticalScroll) return;\r\n\r\n      const newScrollLeft = this.scrollLeft - diffX;\r\n      const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n      sliderInner.scrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));\r\n\r\n      if (Math.abs(diffX) > this.dragThreshold) {\r\n        this.hasMoved = true;\r\n        e.preventDefault();\r\n      }\r\n    }\r\n\r\n    handleTouchEnd(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      this.isDragging = false;\r\n      sliderInner.style.scrollBehavior = 'smooth';\r\n\r\n      \/\/ Sofortiges Reset f\u00fcr Touch\r\n      requestAnimationFrame(() => {\r\n        this.hasMoved = false;\r\n        this.isVerticalScroll = false;\r\n      });\r\n    }\r\n\r\n    isCurrentlyDragging() {\r\n      return this.isDragging || this.hasMoved;\r\n    }\r\n  }\r\n\r\n  function slideToDirection(direction) {\r\n    const visibleTiles = document.querySelectorAll('.car-tile:not(.hidden)');\r\n    if (visibleTiles.length === 0) return;\r\n\r\n    const containerWidth = sliderInner.clientWidth;\r\n    const tileWidth = visibleTiles[0].offsetWidth;\r\n    const gap = 16;\r\n    const tilesPerView = Math.floor(containerWidth \/ (tileWidth + gap));\r\n    const slideDistance = (tileWidth + gap) * Math.max(1, Math.min(tilesPerView, 2));\r\n\r\n    const currentScroll = sliderInner.scrollLeft;\r\n    const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n\r\n    let targetScroll;\r\n    if (direction === 'left') {\r\n      targetScroll = Math.max(0, currentScroll - slideDistance);\r\n    } else {\r\n      targetScroll = Math.min(maxScroll, currentScroll + slideDistance);\r\n    }\r\n\r\n    \/\/ Verwende native CSS smooth scroll - oft zuverl\u00e4ssiger als GSAP f\u00fcr Scrolling\r\n    sliderInner.style.scrollBehavior = 'smooth';\r\n    sliderInner.scrollLeft = targetScroll;\r\n\r\n    \/\/ Reset nach Animation\r\n    setTimeout(() => {\r\n      sliderInner.style.scrollBehavior = '';\r\n    }, 600);\r\n  }\r\n\r\n  \/\/ Size Filter Funktionalit\u00e4t\r\n  function initSizeFilter() {\r\n    const filterButtons = document.querySelectorAll('.size-filter-btn');\r\n    const filterDropdown = document.getElementById('sizeFilterSelect');\r\n\r\n    \/\/ Desktop Button Filter\r\n    filterButtons.forEach(button => {\r\n      button.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n\r\n        \/\/ Update active button\r\n        filterButtons.forEach(btn => btn.classList.remove('active'));\r\n        button.classList.add('active');\r\n\r\n        \/\/ Update dropdown to match\r\n        if (filterDropdown) {\r\n          filterDropdown.value = button.dataset.size;\r\n        }\r\n\r\n        \/\/ Apply filter\r\n        currentFilter = button.dataset.size;\r\n        applyFilter(currentFilter);\r\n      });\r\n    });\r\n\r\n    \/\/ Mobile Dropdown Filter\r\n    if (filterDropdown) {\r\n      filterDropdown.addEventListener('change', (e) => {\r\n        const selectedSize = e.target.value;\r\n\r\n        \/\/ Update active button\r\n        filterButtons.forEach(btn => btn.classList.remove('active'));\r\n        const matchingButton = document.querySelector(`[data-size=\"${selectedSize}\"]`);\r\n        if (matchingButton) {\r\n          matchingButton.classList.add('active');\r\n        }\r\n\r\n        \/\/ Apply filter\r\n        currentFilter = selectedSize;\r\n        applyFilter(currentFilter);\r\n      });\r\n    }\r\n  }\r\n\r\n  function applyFilter(size) {\r\n    const tiles = document.querySelectorAll('.car-tile');\r\n\r\n    tiles.forEach((tile) => {\r\n      const carId = tile.dataset.carId;\r\n      const car = allCars.find(c => c.id.toString() === carId);\r\n      const carSize = car?.size?.toLowerCase();\r\n      const filterSize = size.toLowerCase();\r\n\r\n      if (size === 'all' || (car && carSize === filterSize)) {\r\n        tile.classList.remove('hidden');\r\n        tile.style.position = 'relative';\r\n        tile.style.visibility = 'visible';\r\n\r\n        gsap.to(tile, {\r\n          opacity: 1,\r\n          scale: 1,\r\n          duration: 0.2,\r\n          ease: \"power2.out\"\r\n        });\r\n      } else {\r\n        tile.classList.add('hidden');\r\n        tile.style.position = 'absolute';\r\n        tile.style.visibility = 'hidden';\r\n\r\n        gsap.set(tile, {\r\n          opacity: 0,\r\n          scale: 0.8\r\n        });\r\n      }\r\n    });\r\n\r\n    filteredCars = size === 'all' ? [...allCars] : allCars.filter(car => car.size?.toLowerCase() === size.toLowerCase());\r\n    sliderInner.scrollLeft = 0;\r\n  }\r\n\r\n  function createCarTile(car) {\r\n    const tile = document.createElement('div');\r\n    tile.className = 'car-tile';\r\n    tile.dataset.carId = car.id;\r\n    tile.dataset.size = car.size || 'M';\r\n\r\n    const sizeMarker = document.createElement('div');\r\n    sizeMarker.className = 'size-marker';\r\n    sizeMarker.textContent = car.size || 'M';\r\n    tile.appendChild(sizeMarker);\r\n\r\n    const img = document.createElement('img');\r\n    img.src = car.images[0]?.url || 'https:\/\/picsum.photos\/200\/140?random=' + car.id;\r\n    img.draggable = false;\r\n    img.loading = 'lazy';\r\n    img.onerror = function() {\r\n      this.src = 'https:\/\/picsum.photos\/200\/140?random=' + car.id;\r\n    };\r\n    tile.appendChild(img);\r\n\r\n    const info = document.createElement('div');\r\n    info.className = 'car-info';\r\n    info.innerHTML = `\r\n        <p class=\"car-headline\">${car.name} ${car.subline || ''}<\/p>\r\n        <p class=\"car-price\">ab ${car.price.toFixed(2) || ''} \u20ac \/ h<\/p>\r\n      `;\r\n    tile.appendChild(info);\r\n\r\n    tile.addEventListener('click', (e) => {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n\r\n      if (carSlider.isCurrentlyDragging()) {\r\n        return;\r\n      }\r\n\r\n      selectCarTile(tile, car);\r\n    }, {\r\n      passive: false\r\n    });\r\n\r\n    return tile;\r\n  }\r\n\r\n  function selectCarTile(tile, car) {\r\n    document.querySelectorAll('.car-tile').forEach(t => t.classList.remove('gf-active-car'));\r\n    tile.classList.add('gf-active-car');\r\n    centerTileInView(tile);\r\n    showCarDetails(car);\r\n    \r\n    \/\/ URL mit der Fahrzeug-ID aktualisieren\r\n    updateURLWithCarId(car.id);\r\n  }\r\n\r\n  function updateURLWithCarId(carId) {\r\n    const url = new URL(window.location);\r\n    url.searchParams.set('id', carId);\r\n    \r\n    \/\/ URL aktualisieren ohne die Seite neu zu laden\r\n    window.history.replaceState({ carId: carId }, '', url);\r\n  }\r\n\r\n  function centerTileInView(tile) {\r\n    const tileCenter = tile.offsetLeft + (tile.clientWidth \/ 2);\r\n    const containerCenter = sliderInner.clientWidth \/ 2;\r\n    const targetScroll = tileCenter - containerCenter;\r\n    const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n    const clampedScroll = Math.max(0, Math.min(targetScroll, maxScroll));\r\n\r\n    \/\/ Native smooth scroll verwenden\r\n    sliderInner.style.scrollBehavior = 'smooth';\r\n    sliderInner.scrollLeft = clampedScroll;\r\n\r\n    setTimeout(() => {\r\n      sliderInner.style.scrollBehavior = '';\r\n    }, 500);\r\n  }\r\n\r\n  \/\/ Image Slider f\u00fcr Car Details\r\n  function createImageSlider(images) {\r\n    const wrapper = document.createElement('div');\r\n    wrapper.className = 'image-slider-wrapper';\r\n\r\n    const slider = document.createElement('div');\r\n    slider.className = 'image-slider';\r\n\r\n    images.forEach((img) => {\r\n      const imageEl = document.createElement('img');\r\n      imageEl.src = img.url;\r\n      imageEl.draggable = false;\r\n      slider.appendChild(imageEl);\r\n    });\r\n\r\n    wrapper.appendChild(slider);\r\n\r\n    if (images.length > 1) {\r\n      \/\/ Navigation Buttons\r\n      const prevBtn = document.createElement('button');\r\n      prevBtn.className = 'slider-arrow image-nav prev';\r\n      prevBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-left.svg\" alt=\"Arrow Left\" \/>';\r\n      prevBtn.addEventListener('click', () => changeCarImage(-1));\r\n\r\n      const nextBtn = document.createElement('button');\r\n      nextBtn.className = 'slider-arrow image-nav next';\r\n      nextBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-right.svg\" alt=\"Arrow Right\" \/>';\r\n      nextBtn.addEventListener('click', () => changeCarImage(1));\r\n\r\n      wrapper.appendChild(prevBtn);\r\n      wrapper.appendChild(nextBtn);\r\n\r\n      \/\/ Dots Navigation\r\n      const dots = document.createElement('div');\r\n      dots.className = 'image-dots';\r\n\r\n      images.forEach((_, index) => {\r\n        const dot = document.createElement('div');\r\n        dot.className = 'image-dot';\r\n        if (index === 0) dot.classList.add('gf-active-car');\r\n        dot.addEventListener('click', () => goToCarImage(index));\r\n        dots.appendChild(dot);\r\n      });\r\n\r\n      wrapper.appendChild(dots);\r\n\r\n      \/\/ Touch Support f\u00fcr Image Slider\r\n      addImageTouchSupport(slider);\r\n    }\r\n\r\n    return wrapper;\r\n  }\r\n\r\n  \/\/ Touch Support f\u00fcr Image Slider\r\n  function addImageTouchSupport(slider) {\r\n    let startX = 0;\r\n    let startTime = 0;\r\n    const swipeThreshold = 50;\r\n    const timeThreshold = 300;\r\n\r\n    slider.addEventListener('touchstart', (e) => {\r\n      startX = e.touches[0].clientX;\r\n      startTime = Date.now();\r\n    }, {\r\n      passive: true\r\n    });\r\n\r\n    slider.addEventListener('touchend', (e) => {\r\n      const endX = e.changedTouches[0].clientX;\r\n      const endTime = Date.now();\r\n      const diffX = startX - endX;\r\n      const diffTime = endTime - startTime;\r\n\r\n      if (Math.abs(diffX) > swipeThreshold && diffTime < timeThreshold) {\r\n        if (diffX > 0) {\r\n          changeCarImage(1); \/\/ Swipe left = next\r\n        } else {\r\n          changeCarImage(-1); \/\/ Swipe right = previous\r\n        }\r\n      }\r\n    }, {\r\n      passive: true\r\n    });\r\n  }\r\n\r\n  \/\/ Image Navigation\r\n  function changeCarImage(direction) {\r\n    if (currentCarImages.length <= 1) return;\r\n\r\n    currentImageIndex += direction;\r\n\r\n    if (currentImageIndex >= currentCarImages.length) {\r\n      currentImageIndex = 0;\r\n    } else if (currentImageIndex < 0) {\r\n      currentImageIndex = currentCarImages.length - 1;\r\n    }\r\n\r\n    updateImageSlider();\r\n  }\r\n\r\n  function goToCarImage(index) {\r\n    currentImageIndex = index;\r\n    updateImageSlider();\r\n  }\r\n\r\n  function updateImageSlider() {\r\n    const slider = document.querySelector('.image-slider');\r\n    const dots = document.querySelectorAll('.image-dot');\r\n\r\n    if (slider) {\r\n      gsap.to(slider, {\r\n        x: -currentImageIndex * 100 + '%',\r\n        duration: 0.4,\r\n        ease: \"power3.out\"\r\n      });\r\n    }\r\n\r\n    dots.forEach((dot, index) => {\r\n      dot.classList.toggle('gf-active-car', index === currentImageIndex);\r\n    });\r\n  }\r\n\r\n  \/\/ Show Car Details\r\n  function showCarDetails(car) {\r\n    const gallery = document.getElementById('gallery');\r\n    const info = document.getElementById('info');\r\n    const tables = document.getElementById('tables');\r\n    const details = document.getElementById('details');\r\n\r\n    currentCarImages = car.images || [];\r\n    currentImageIndex = 0;\r\n\r\n    \/\/ Gallery\r\n    gallery.innerHTML = '';\r\n    if (currentCarImages.length > 0) {\r\n      const imageSlider = createImageSlider(currentCarImages);\r\n      gallery.appendChild(imageSlider);\r\n    }\r\n\r\n    const carEquipment = car.equipment.split(';').map(item => item.trim()).filter(item => item);\r\n    \/\/ Info\r\n    info.innerHTML = `\r\n        <h2>${car.name} ${car.subline}<\/h2>\r\n        <h3>${car.shortDescription}<\/h3>\r\n        <p>${car.description}<\/p>\r\n          ${carEquipment.map((item) => {\r\n            if (item.includes('Anh\u00e4ngerkupplung')) {\r\n              return `<p class=\"gf-flotte-list-item red\"><img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/information.png\" alt=\"${item}\" width=\"25\">${item}<\/p>`;\r\n            } else {\r\n              return `<p class=\"gf-flotte-list-item\"><img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/check.png\" alt=\"${item}\" width=\"25\">${item}<\/p>`;\r\n            }\r\n          }).join('')}\r\n        `;\r\n\r\n    \/\/ Tables\r\n    tables.innerHTML = '';\r\n    try {\r\n      const tech = JSON.parse(JSON.parse(car.technicalData));\r\n      const weight = JSON.parse(JSON.parse(car.weightAndPayload));\r\n\r\n      if (tech.columns.length > 0 && tech.rows.length > 0) {\r\n        tables.appendChild(createTable(tech, 'Technische Daten'));\r\n      }\r\n      if (weight.columns.length > 0 && weight.rows.length > 0) {\r\n        tables.appendChild(createTable(weight, 'Gewicht & Zuladung'));\r\n      }\r\n    } catch (e) {\r\n      tables.innerHTML = '<p>Technische Daten nicht verf\u00fcgbar.<\/p>';\r\n    }\r\n\r\n    \/\/ Show details with animation\r\n    details.style.display = 'block';\r\n    gsap.fromTo(details, {\r\n      opacity: 0,\r\n      y: 30\r\n    }, {\r\n      opacity: 1,\r\n      y: 0,\r\n      duration: 0.5,\r\n      ease: \"power3.out\"\r\n    });\r\n  }\r\n\r\n  function createTable(data, title) {\r\n    const wrapper = document.createElement('div');\r\n    wrapper.className = 'table-wrapper';\r\n\r\n    const titleEl = document.createElement('h3');\r\n    titleEl.className = 'table-title';\r\n    titleEl.textContent = title;\r\n    wrapper.appendChild(titleEl);\r\n\r\n    const table = document.createElement('table');\r\n\r\n    const thead = document.createElement('thead');\r\n    const headerRow = document.createElement('tr');\r\n    data.columns.forEach(col => {\r\n      const th = document.createElement('th');\r\n      th.textContent = col.label || '';\r\n      headerRow.appendChild(th);\r\n    });\r\n    thead.appendChild(headerRow);\r\n    table.appendChild(thead);\r\n\r\n    const tbody = document.createElement('tbody');\r\n    data.rows.forEach(row => {\r\n      const tr = document.createElement('tr');\r\n      data.columns.forEach(col => {\r\n        const td = document.createElement('td');\r\n        const cellValue = row.data[col.key];\r\n        if (!cellValue || cellValue.trim() === '') {\r\n          td.innerHTML = '&nbsp;';\r\n        } else {\r\n          td.textContent = cellValue;\r\n        }\r\n        tr.appendChild(td);\r\n      });\r\n      tbody.appendChild(tr);\r\n    });\r\n    table.appendChild(tbody);\r\n\r\n    wrapper.appendChild(table);\r\n    const swipeIndicator = document.createElement('div');\r\n    const indicatorImage = document.createElement('img');\r\n    indicatorImage.src = 'https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/\/assets\/swipe.svg';\r\n    indicatorImage.alt = 'Swipe Indicator';\r\n    indicatorImage.style.width = '16px';\r\n    indicatorImage.style.height = '16px';\r\n    indicatorImage.style.marginRight = '8px';\r\n    swipeIndicator.appendChild(indicatorImage);\r\n    swipeIndicator.className = 'swipe-indicator';\r\n    let indicatorText = document.createElement('span');\r\n    indicatorText.style.color = '#82ba26';\r\n    indicatorText.style.fontSize = '14px';\r\n    indicatorText.textContent = 'Nach links und rechts wischen';\r\n    swipeIndicator.appendChild(indicatorText);\r\n    wrapper.appendChild(swipeIndicator);\r\n\r\n    return wrapper;\r\n  }\r\n\r\n  function sortCarsBySize(cars) {\r\n    const sizeOrder = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];\r\n\r\n    return cars.sort((a, b) => {\r\n      const aSize = a.size ? a.size.toUpperCase() : 'M';\r\n      const bSize = b.size ? b.size.toUpperCase() : 'M';\r\n\r\n      const aIndex = sizeOrder.indexOf(aSize);\r\n      const bIndex = sizeOrder.indexOf(bSize);\r\n\r\n      const aOrder = aIndex === -1 ? 999 : aIndex;\r\n      const bOrder = bIndex === -1 ? 999 : bIndex;\r\n\r\n      return aOrder - bOrder;\r\n    });\r\n  }\r\n\r\n  async function fetchCarsData() {\r\n    try {\r\n      const response = await fetch('https:\/\/core.gruene-flotte.com\/api\/carsharing-cars');\r\n      const cars = await response.json();\r\n      return sortCarsBySize(cars);\r\n    } catch (error) {\r\n      console.error('Fehler beim Laden der Autos:', error);\r\n      return [];\r\n    }\r\n  }\r\n\r\n  \/\/ Get URL Parameter\r\n  function getUrlParameter(name) {\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    return urlParams.get(name);\r\n  }\r\n\r\n  \/\/ Initialize Slider\r\n  const carSlider = new CarSlider();\r\n\r\n  \/\/ Event Listeners f\u00fcr Arrow Buttons\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const leftArrow = document.getElementById('arrow-left');\r\n    const rightArrow = document.getElementById('arrow-right');\r\n\r\n    if (leftArrow) {\r\n      leftArrow.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        slideToDirection('left');\r\n      }, {\r\n        passive: false\r\n      });\r\n    }\r\n\r\n    if (rightArrow) {\r\n      rightArrow.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        slideToDirection('right');\r\n      }, {\r\n        passive: false\r\n      });\r\n    }\r\n  });\r\n\r\n  \/\/ Main Initialization\r\n  document.addEventListener('DOMContentLoaded', async () => {\r\n    initSizeFilter();\r\n\r\n    const cars = await fetchCarsData();\r\n    const requestedCarId = getUrlParameter('id');\r\n\r\n    if (cars.length === 0) {\r\n      console.warn('Keine Autos geladen');\r\n      return;\r\n    }\r\n\r\n    allCars = cars;\r\n    filteredCars = [...cars];\r\n\r\n    const fragment = document.createDocumentFragment();\r\n\r\n    cars.forEach((car) => {\r\n      const tile = createCarTile(car);\r\n      fragment.appendChild(tile);\r\n\r\n      gsap.set(tile, {\r\n        x: -30,\r\n        opacity: 0\r\n      });\r\n    });\r\n\r\n    sliderInner.appendChild(fragment);\r\n\r\n    const tiles = document.querySelectorAll('.car-tile');\r\n    tiles.forEach((tile, index) => {\r\n      gsap.to(tile, {\r\n        x: 0,\r\n        opacity: 1,\r\n        duration: 0.4,\r\n        delay: index * 0.03,\r\n        ease: \"power2.out\"\r\n      });\r\n    });\r\n\r\n    let initialCar = cars[0];\r\n    if (requestedCarId) {\r\n      const foundCar = cars.find(car => car.id.toString() === requestedCarId);\r\n      if (foundCar) {\r\n        initialCar = foundCar;\r\n      }\r\n    }\r\n\r\n    if (initialCar) {\r\n      const initialTile = document.querySelector(`[data-car-id=\"${initialCar.id}\"]`);\r\n      if (initialTile) {\r\n        setTimeout(() => {\r\n          selectCarTile(initialTile, initialCar);\r\n        }, 600);\r\n      }\r\n    }\r\n  });\r\n\r\n  function handleResize() {\r\n    if (window.innerWidth <= 768) {\r\n      \/\/ Mobile optimizations k\u00f6nnen hier hinzugef\u00fcgt werden\r\n    }\r\n  }\r\n\r\n  window.addEventListener('resize', gsap.utils.throttle(handleResize, 250));\r\n<\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8220;1&#8243; custom_padding_last_edited=&#8220;on|phone&#8220; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; background_image=&#8220;https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2025\/11\/registrierung.jpg&#8220; custom_padding=&#8220;50px||50px||false|false&#8220; custom_padding_tablet=&#8220;50px||50px||false|false&#8220; custom_padding_phone=&#8220;50px|30px|50px|30px|false|false&#8220; background_last_edited=&#8220;on|phone&#8220; use_background_color_gradient_phone=&#8220;on&#8220; background_color_gradient_stops_phone=&#8220;rgba(0,0,0,0.45) 0%|rgba(0,0,0,0.45) 100%&#8220; background_color_gradient_overlays_image_phone=&#8220;on&#8220; background_image_phone=&#8220;https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2025\/11\/registrierung-mobile.jpg&#8220; background_enable_image_phone=&#8220;on&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_row column_structure=&#8220;3_5,2_5&#8243; make_equal=&#8220;on&#8220; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; width_tablet=&#8220;&#8220; width_phone=&#8220;100%&#8220; width_last_edited=&#8220;on|phone&#8220; custom_padding=&#8220;0px||0px||false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;3_5&#8243; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; custom_css_main_element=&#8220;display: flex;||flex-direction: column;||justify-content: center;&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_text content_tablet=&#8220;<\/p>\n<h2>Jetzt Gr\u00fcne Flotte <br \/>Mitglied werden!<\/h2>\n<p>F\u00fcr Privatpersonen, Unternehmen &#038; Vereine \u2013 klimafreundlich mobil.<br \/><strong>In weniger als 10 Minuten registrieren<\/strong>, Auto buchen und sofort losstarten.<\/p>\n<p>&#8220; content_phone=&#8220;<\/p>\n<h2>Jetzt Gr\u00fcne Flotte <br \/>Mitglied werden!<\/h2>\n<p>F\u00fcr Privatpersonen, Unternehmen &#038; Vereine \u2013 klimafreundlich mobil.<br \/><strong>In weniger als 10 Minuten registrieren<\/strong>, Auto buchen und sofort losstarten.<\/p>\n<p>&#8220; content_last_edited=&#8220;on|phone&#8220; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; text_text_color=&#8220;#FFFFFF&#8220; header_2_text_color=&#8220;#FFFFFF&#8220; custom_padding=&#8220;25px||25px||false|false&#8220; text_orientation_tablet=&#8220;&#8220; text_orientation_phone=&#8220;center&#8220; text_orientation_last_edited=&#8220;on|phone&#8220; global_colors_info=&#8220;{}&#8220; custom_css_main_element_last_edited=&#8220;off|tablet&#8220;]<\/p>\n<h2>Jetzt Gr\u00fcne Flotte <br \/>Mitglied werden!<\/h2>\n<p>F\u00fcr Privatpersonen, Unternehmen &amp; Vereine \u2013 klimafreundlich mobil.<br \/><strong>In weniger als 10 Minuten registrieren<\/strong>, Auto buchen und sofort losstarten.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8220;2_5&#8243; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_code _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; position_origin_a=&#8220;bottom_center&#8220; vertical_offset=&#8220;-120px&#8220; z_index=&#8220;0&#8243; position_origin_a_tablet=&#8220;bottom_center&#8220; position_origin_a_phone=&#8220;bottom_center&#8220; position_origin_a_last_edited=&#8220;off|desktop&#8220; position_origin_f_last_edited=&#8220;off|desktop&#8220; position_origin_r_last_edited=&#8220;off|desktop&#8220; width=&#8220;100%&#8220; custom_margin_tablet=&#8220;|auto||auto|false|false&#8220; custom_margin_phone=&#8220;|auto||auto|false|false&#8220; custom_margin_last_edited=&#8220;on|tablet&#8220; custom_padding_tablet=&#8220;&#8220; custom_padding_phone=&#8220;||10px||false|false&#8220; custom_padding_last_edited=&#8220;on|phone&#8220; positioning_tablet=&#8220;none&#8220; positioning_phone=&#8220;none&#8220; positioning_last_edited=&#8220;off|desktop&#8220; custom_css_free_form=&#8220;#gruene-flotte-register-widget2 {||    border: none;||    border-radius: 10px;||    box-shadow: 3px 3px 8px#00000008;||    width: 370px;||    min-height: 420px;||}||||@media (max-width: 764px) {||  #gruene-flotte-register-widget2 { ||    min-height: 480px;||    }||}||||@media (max-width: 599px) {||    #gruene-flotte-register-widget2 {||        width: 340px !important;||    }||}&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<!-- Load iFrame Resizer (Parent Script) --><!-- [et_pb_line_break_holder] --><\/p>\n<div style=\"display: flex; align-items: center; justify-content: center;\"><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] --><iframe src=\"https:\/\/web.gruene-flotte.app\/signup\/?mode=widget&#038;locale=deformal&#038;utm_source=gruene-flotte.com&#038;utm_medium=referral-widget\" id=\"gruene-flotte-register-widget2\" title=\"teilAuto Carsharing | Jetzt registrieren\"><!-- [et_pb_line_break_holder] --><\/iframe><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@iframe-resizer\/parent@5.3.2\" type=\"text\/javascript\"><\/script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    document.addEventListener('DOMContentLoaded', function() {<!-- [et_pb_line_break_holder] -->        iFrameResize({<!-- [et_pb_line_break_holder] -->            log: false, \/\/ Enable debugging logs   <!-- [et_pb_line_break_holder] -->           checkOrigin: false, \/\/ Allows cross-origin iframe<!-- [et_pb_line_break_holder] -->            license: \"GPLv3\", \/\/ Required for non-commercial use<!-- [et_pb_line_break_holder] -->            heightCalculationMethod: 'max',\/\/ Adjusts height dynamically<!-- [et_pb_line_break_holder] -->            direction: 'vertical',\/\/ Resizes only the height<!-- [et_pb_line_break_holder] -->            scrolling: \"no\"\/\/ Prevents iframe scrollbars<!-- [et_pb_line_break_holder] -->        }, '#gruene-flotte-register-widget');<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8220;1&#8243; custom_padding_last_edited=&#8220;on|phone&#8220; admin_label=&#8220;Kontakt&#8220; module_id=&#8220;kundenzentrale&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; background_color=&#8220;#82BA26&#8243; custom_padding=&#8220;13px||26px|||&#8220; custom_padding_tablet=&#8220;13px||26px|||&#8220; custom_padding_phone=&#8220;30px|30px|30px|30px|false|false&#8220; saved_tabs=&#8220;all&#8220; locked=&#8220;off&#8220; collapsed=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220; global_module=&#8220;34188&#8243; theme_builder_area=&#8220;post_content&#8220;][et_pb_row column_structure=&#8220;1_2,1_2&#8243; custom_padding_last_edited=&#8220;on|phone&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; width_tablet=&#8220;&#8220; width_phone=&#8220;100%&#8220; width_last_edited=&#8220;on|phone&#8220; custom_padding_tablet=&#8220;&#8220; custom_padding_phone=&#8220;0px||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;][et_pb_column type=&#8220;1_2&#8243; _builder_version=&#8220;4.19.0&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;][et_pb_text _builder_version=&#8220;4.19.0&#8243; _module_preset=&#8220;default&#8220; text_font=&#8220;|||on|||||&#8220; text_text_color=&#8220;#FFFFFF&#8220; text_font_size=&#8220;14px&#8220; text_letter_spacing=&#8220;2px&#8220; header_2_text_color=&#8220;#FFFFFF&#8220; header_3_text_color=&#8220;#FFFFFF&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;]<\/p>\n<h2>Sie haben Fragen?<\/h2>\n<h3>Die Gr\u00fcne Flotte ist f\u00fcr Sie da.<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8220;1_2&#8243; _builder_version=&#8220;4.19.0&#8243; _module_preset=&#8220;default&#8220; link_option_url_new_window=&#8220;on&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;][et_pb_blurb title=&#8220;B\u00fcrozeiten &#8220; use_icon=&#8220;on&#8220; font_icon=&#8220;&#xf4fd;||fa||900&#8243; icon_color=&#8220;#FFFFFF&#8220; icon_placement=&#8220;left&#8220; image_icon_width=&#8220;20px&#8220; _builder_version=&#8220;4.27.4&#8243; _module_preset=&#8220;default&#8220; header_font=&#8220;|700|||||||&#8220; header_text_color=&#8220;#FFFFFF&#8220; body_text_color=&#8220;#FFFFFF&#8220; custom_margin=&#8220;5px||5px||false|false&#8220; custom_css_blurb_title=&#8220;padding-bottom:0px !important;&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;]<\/p>\n<p>Mo. \u2013 Fr. von 8:00 bis 17:00 Uhr<br \/>Sa. von 9:00 bis 12:30 Uhr<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8220;24h-Notruf&#8220; use_icon=&#8220;on&#8220; font_icon=&#8220;&#xf017;||fa||900&#8243; icon_color=&#8220;#FFFFFF&#8220; icon_placement=&#8220;left&#8220; image_icon_width=&#8220;20px&#8220; _builder_version=&#8220;4.23.4&#8243; _module_preset=&#8220;default&#8220; header_font=&#8220;|700|||||||&#8220; header_text_color=&#8220;#FFFFFF&#8220; body_text_color=&#8220;#FFFFFF&#8220; custom_margin=&#8220;5px||5px||false|false&#8220; custom_css_blurb_title=&#8220;padding-bottom:0px !important;&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;]<\/p>\n<p>bei Unfall oder einer Panne, einem technischen Problem, einer Versp\u00e4tung, Schadensmeldung oder dringenden R\u00fcckfrage.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8220;07681 474 008-0&#8243; url=&#8220;tel:004976814740080&#8243; use_icon=&#8220;on&#8220; font_icon=&#8220;&#xf879;||fa||900&#8243; icon_color=&#8220;#FFFFFF&#8220; icon_placement=&#8220;left&#8220; image_icon_width=&#8220;20px&#8220; _builder_version=&#8220;4.19.0&#8243; _module_preset=&#8220;default&#8220; header_font=&#8220;|700|||||||&#8220; header_text_color=&#8220;#FFFFFF&#8220; custom_margin=&#8220;5px||5px||false|false&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;][\/et_pb_blurb][et_pb_blurb title=&#8220;info@gruene-flotte-carsharing.de&#8220; url=&#8220;mailto:info@gruene-flotte-carsharing.de&#8220; use_icon=&#8220;on&#8220; font_icon=&#8220;&#xf0e0;||fa||900&#8243; icon_color=&#8220;#FFFFFF&#8220; icon_placement=&#8220;left&#8220; image_icon_width=&#8220;20px&#8220; _builder_version=&#8220;4.19.0&#8243; _module_preset=&#8220;default&#8220; header_font=&#8220;|700|||||||&#8220; header_text_color=&#8220;#FFFFFF&#8220; global_colors_info=&#8220;{}&#8220; theme_builder_area=&#8220;post_content&#8220;][\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Gr\u00fcne Flotte Fahrzeug&shy;flotte<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n\r\n<style>\r\n  .size-filter {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    padding: 0 16px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n  }\r\n  \r\n  .swipe-indicator {\r\n    display: none;\r\n  }\r\n\r\n  .size-filter button {\r\n    padding: 8px 16px;\r\n    border: 2px solid #e0e0e0;\r\n    border-radius: 25px;\r\n    background: white;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .size-filter button:hover {\r\n    border-color: #82ba26;\r\n    background: #f8fdf0;\r\n  }\r\n\r\n  .size-filter button.active {\r\n    border-color: #82ba26;\r\n    background: #82ba26;\r\n    color: white;\r\n  }\r\n\r\n  \/* Mobile Dropdown f\u00fcr Gr\u00f6\u00dfenfilter *\/\r\n  .size-filter-dropdown {\r\n    display: none;\r\n    position: relative;\r\n    width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  .size-filter-dropdown select {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 2px solid #e0e0e0;\r\n    border-radius: 25px;\r\n    background: white;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path fill=\"%23666\" d=\"M6 9L1.5 4.5h9L6 9z\"\/><\/svg>');\r\n    background-repeat: no-repeat;\r\n    background-position: right 16px center;\r\n    background-size: 12px;\r\n    padding-right: 40px;\r\n  }\r\n\r\n  p.gf-flotte-list-item {\r\n    padding-bottom: 2px;\r\n    gap: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    font-weight: 900;\r\n    text-transform: uppercase;\r\n    letter-spacing: .5px;\r\n  }\r\n\r\n  .size-filter-dropdown select:focus {\r\n    outline: none;\r\n    border-color: #82ba26;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .size-filter {\r\n      display: none;\r\n    }\r\n\r\n    .size-filter-dropdown {\r\n      display: block;\r\n    }\r\n  }\r\n\r\n  .slider-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 16px 0 32px 0;\r\n    \/* Fester Offset f\u00fcr das erste Element *\/\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-wrapper {\r\n      margin-left: 0;\r\n      padding: 16px 0 32px 0;\r\n    }\r\n  }\r\n\r\n  .slider-inner {\r\n    display: flex;\r\n    gap: 1rem;\r\n    will-change: transform;\r\n    touch-action: pan-x;\r\n    cursor: grab;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    padding: 15px;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .slider-inner::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .slider-inner.dragging {\r\n    cursor: grabbing;\r\n    scroll-behavior: auto;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-inner {\r\n      gap: 0.75rem;\r\n      padding: 15px 8px;\r\n    }\r\n  }\r\n\r\n  .slider-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 1000;\r\n    background: #ffffff;\r\n    border: none;\r\n    padding: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    border-radius: 50px;\r\n    width: 40px;\r\n    height: 40px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .slider-arrow:hover {\r\n    background: #f0f0f0;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .slider-arrow.left {\r\n    left: 0.5rem;\r\n  }\r\n\r\n  .slider-arrow.right {\r\n    right: 0.5rem;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .slider-arrow {\r\n      width: 36px;\r\n      height: 36px;\r\n      padding: 6px;\r\n    }\r\n\r\n    .slider-arrow.left {\r\n      left: 0.25rem;\r\n    }\r\n\r\n    .slider-arrow.right {\r\n      right: 0.25rem;\r\n    }\r\n  }\r\n\r\n  .car-tile {\r\n    flex: 0 0 auto;\r\n    width: 200px;\r\n    border-radius: 10px;\r\n    background: white;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    pointer-events: auto;\r\n    user-select: none;\r\n    -webkit-user-select: none;\r\n    -moz-user-select: none;\r\n    -ms-user-select: none;\r\n    position: relative;\r\n    scroll-snap-align: start;\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n\r\n  .car-tile:first-child {\r\n    margin-left: 0;\r\n    \/* Entfernt, da wir den Container-Offset verwenden *\/\r\n  }\r\n\r\n  .size-marker {\r\n    position: absolute;\r\n    top: -10px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background-image: url('https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/gruene-flotte-plugin\/templates\/images\/Marker.svg');\r\n    background-size: contain;\r\n    width: 35px;\r\n    height: 40px;\r\n    color: white;\r\n    font-size: 14px;\r\n    font-weight: 900;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 10;\r\n    text-transform: uppercase;\r\n    padding-top: 2px;\r\n    padding-bottom: 7px;\r\n  }\r\n\r\n  .car-tile.hidden {\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n    pointer-events: none;\r\n    position: absolute;\r\n    visibility: hidden;\r\n  }\r\n\r\n  .car-tile:hover {\r\n    transform: scale(1.02) translateY(-2px);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n  }\r\n\r\n  .car-tile.gf-active-car {\r\n    box-shadow: 0 0 0 3px #82ba26, 0 6px 20px rgba(130, 186, 38, 0.3);\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-tile {\r\n      width: 150px;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .car-tile:hover {\r\n      transform: scale(1.01) translateY(-1px);\r\n    }\r\n\r\n    .car-tile.gf-active-car {\r\n      box-shadow: 0 0 0 2px #82ba26, 0 4px 12px rgba(130, 186, 38, 0.3);\r\n      transform: translateY(-3px);\r\n    }\r\n  }\r\n\r\n  .car-tile img {\r\n    width: 100%;\r\n    border-top-left-radius: 10px;\r\n    border-top-right-radius: 10px;\r\n    object-fit: cover;\r\n    height: 140px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-tile img {\r\n      height: 90px;\r\n      border-top-left-radius: 8px;\r\n      border-top-right-radius: 8px;\r\n    }\r\n  }\r\n\r\n  .car-info {\r\n    padding: 0.5rem;\r\n    text-align: center;\r\n  }\r\n\r\n  .car-headline {\r\n    font-weight: 900;\r\n    text-transform: uppercase;\r\n    font-size: 18px;\r\n    line-height: 1.2;\r\n    padding-bottom: 5px;\r\n  }\r\n\r\n  .car-description {\r\n    font-size: 14px;\r\n    text-transform: uppercase;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  .car-price {\r\n    font-size: 18px;\r\n    font-weight: 900;\r\n    color: #82ba26;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .car-info {\r\n      padding: 0.4rem;\r\n    }\r\n\r\n    .car-headline {\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    .car-description {\r\n      font-size: 12px;\r\n    }\r\n  }\r\n\r\n  #details {\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n  }\r\n\r\n  .detail {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    padding: 2rem;\r\n    gap: 2rem;\r\n    background: white;\r\n  }\r\n\r\n  .gallery {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .info {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  \/* Bildergalerie Slider *\/\r\n  .image-slider-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n  }\r\n\r\n  .image-slider {\r\n    display: flex;\r\n    transition: none;\r\n    width: 100%;\r\n    will-change: transform;\r\n  }\r\n\r\n  .image-slider img {\r\n    width: 100%;\r\n    height: 350px;\r\n    object-fit: cover;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .image-nav {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: rgba(255, 255, 255, 0.8);\r\n    border: none;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 18px;\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  .image-nav:hover {\r\n    background: rgba(255, 255, 255, 0.9);\r\n  }\r\n\r\n  .image-nav.prev {\r\n    left: 10px;\r\n  }\r\n\r\n  .image-nav.next {\r\n    right: 10px;\r\n  }\r\n\r\n  .image-dots {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .image-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #ccc;\r\n    cursor: pointer;\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  .image-dot.gf-active-car {\r\n    background: #82ba26;\r\n  }\r\n\r\n  .tables {\r\n    padding: 2rem;\r\n    background: white;\r\n  }\r\n\r\n  .table-wrapper {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-bottom: 2rem;\r\n  }\r\n\r\n  h3.table-title {\r\n    font-size: 20px;\r\n    font-weight: 900;\r\n  }\r\n\r\n  td {\r\n    border: 1px solid #efefef;\r\n    padding: 0.5rem;\r\n    text-align: left;\r\n    color: #000000 !important;\r\n    font-size: 16px;\r\n  }\r\n\r\n  tr:nth-child(even) {\r\n    background-color: #f8f8f8;\r\n  }\r\n\r\n  th {\r\n    background-color: #82ba26;\r\n    border: 1px solid #efefef;\r\n    padding: 5px 10px !important;\r\n    text-align: left;\r\n    color: #ffffff !important;\r\n    font-size: 16px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    #details {\r\n      box-shadow: none;\r\n      margin: 0 -16px;\r\n      \/* Nutze die volle Bildschirmbreite *\/\r\n    }\r\n\r\n    .detail {\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: 0px;\r\n      gap: 8px;\r\n      background-color: transparent;\r\n    }\r\n\r\n    .gallery {\r\n      margin: 0 -16px;\r\n      \/* Galerie nutzt volle Breite *\/\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    .info {\r\n      padding: 0 0 32px 0;\r\n    }\r\n\r\n    .image-slider img {\r\n      width: 100%;\r\n      height: 200px;\r\n      object-fit: cover;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .table-wrapper {\r\n      overflow-x: auto;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .table-wrapper:last-child {\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .table-wrapper table {\r\n      min-width: 600px;\r\n      width: auto;\r\n    }\r\n\r\n    .tables {\r\n      padding: 0px;\r\n      background-color: transparent;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .tables table {\r\n      width: 100%;\r\n      border: none;\r\n      overflow-x: auto;\r\n    }\r\n\r\n    .tables table td {\r\n      min-width: 150px;\r\n      font-size: 0.85rem;\r\n      padding: 0.4rem;\r\n    }\r\n\r\n    .tables table th {\r\n      font-size: 0.85rem;\r\n      padding: 0.4rem;\r\n      line-height: 1.4;\r\n      width: 150px;\r\n    }\r\n\r\n    .swipe-indicator {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    h3.table-title {\r\n      font-size: 1.2rem;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"size-filter\" id=\"sizeFilter\">\r\n  <button class=\"size-filter-btn active\" data-size=\"all\">Alle<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xs\">XS<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"s\">S<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"m\">M<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"l\">L<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xl\">XL<\/button>\r\n  <button class=\"size-filter-btn\" data-size=\"xxl\">XXL<\/button>\r\n<\/div>\r\n\r\n<div class=\"size-filter-dropdown\" id=\"sizeFilterDropdown\">\r\n  <select id=\"sizeFilterSelect\">\r\n    <option value=\"all\">Alle Gr\u00f6\u00dfen<\/option>\r\n    <option value=\"xs\">XS<\/option>\r\n    <option value=\"s\">S<\/option>\r\n    <option value=\"m\">M<\/option>\r\n    <option value=\"l\">L<\/option>\r\n    <option value=\"xl\">XL<\/option>\r\n    <option value=\"xxl\">XXL<\/option>\r\n  <\/select>\r\n<\/div>\r\n\r\n<div class=\"slider-wrapper\">\r\n  <button id=\"arrow-left\" class=\"slider-arrow left\" type=\"button\">\r\n    <img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-left.svg\" alt=\"Arrow Left\" \/>\r\n  <\/button>\r\n  <div class=\"slider\" id=\"slider\">\r\n    <div class=\"slider-inner\" id=\"sliderInner\"><\/div>\r\n  <\/div>\r\n  <button id=\"arrow-right\" class=\"slider-arrow right\" type=\"button\">\r\n    <img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-right.svg\" alt=\"Arrow Right\" \/>\r\n  <\/button>\r\n<\/div>\r\n\r\n<div id=\"details\" style=\"display: none;\">\r\n  <div class=\"detail\">\r\n    <div class=\"gallery\" id=\"gallery\"><\/div>\r\n    <div class=\"info\" id=\"info\"><\/div>\r\n  <\/div>\r\n  <div class=\"tables\" id=\"tables\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ Globale Variablen\r\n  let currentImageIndex = 0;\r\n  let currentCarImages = [];\r\n  let isSliderDragging = false;\r\n  let sliderStartX = 0;\r\n  let sliderScrollStart = 0;\r\n  let hasMoved = false;\r\n  let allCars = [];\r\n  let filteredCars = [];\r\n  let currentFilter = 'all';\r\n\r\n  \/\/ DOM Elemente\r\n  const sliderInner = document.getElementById('sliderInner');\r\n  const arrowLeft = document.getElementById('arrow-left');\r\n  const arrowRight = document.getElementById('arrow-right');\r\n  const sizeFilter = document.getElementById('sizeFilter');\r\n\r\n  \/\/ Optimierte Slider Klasse\r\n  class CarSlider {\r\n    constructor() {\r\n      this.isDragging = false;\r\n      this.startX = 0;\r\n      this.startY = 0;\r\n      this.scrollLeft = 0;\r\n      this.hasMoved = false;\r\n      this.isVerticalScroll = false;\r\n      this.dragThreshold = 5;\r\n      this.init();\r\n    }\r\n\r\n    init() {\r\n      \/\/ Passive Event Listeners f\u00fcr bessere Performance\r\n      sliderInner.addEventListener('mousedown', this.handleMouseDown.bind(this));\r\n      document.addEventListener('mousemove', this.handleMouseMove.bind(this), {\r\n        passive: true\r\n      });\r\n      document.addEventListener('mouseup', this.handleMouseUp.bind(this));\r\n\r\n      \/\/ Optimierte Touch Events\r\n      sliderInner.addEventListener('touchstart', this.handleTouchStart.bind(this), {\r\n        passive: true\r\n      });\r\n      sliderInner.addEventListener('touchmove', this.handleTouchMove.bind(this), {\r\n        passive: false\r\n      });\r\n      sliderInner.addEventListener('touchend', this.handleTouchEnd.bind(this), {\r\n        passive: true\r\n      });\r\n\r\n      \/\/ Prevent context menu und drag\r\n      sliderInner.addEventListener('contextmenu', e => e.preventDefault());\r\n      sliderInner.addEventListener('dragstart', e => e.preventDefault());\r\n    }\r\n\r\n    handleMouseDown(e) {\r\n      if (e.button !== 0) return;\r\n\r\n      this.isDragging = true;\r\n      this.hasMoved = false;\r\n      this.startX = e.clientX;\r\n      this.scrollLeft = sliderInner.scrollLeft;\r\n      sliderInner.classList.add('dragging');\r\n      e.preventDefault();\r\n    }\r\n\r\n    handleMouseMove(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      const diffX = e.clientX - this.startX;\r\n      const newScrollLeft = this.scrollLeft - diffX;\r\n\r\n      \/\/ Optimierte Scroll-Berechnung\r\n      const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n      sliderInner.scrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));\r\n\r\n      if (Math.abs(diffX) > this.dragThreshold) {\r\n        this.hasMoved = true;\r\n      }\r\n    }\r\n\r\n    handleMouseUp(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      this.isDragging = false;\r\n      sliderInner.classList.remove('dragging');\r\n\r\n      \/\/ Verz\u00f6gertes Reset f\u00fcr Click-Detection\r\n      requestAnimationFrame(() => {\r\n        setTimeout(() => {\r\n          this.hasMoved = false;\r\n        }, 50);\r\n      });\r\n    }\r\n\r\n    handleTouchStart(e) {\r\n      this.isDragging = true;\r\n      this.hasMoved = false;\r\n      this.isVerticalScroll = false;\r\n      this.startX = e.touches[0].clientX;\r\n      this.startY = e.touches[0].clientY;\r\n      this.scrollLeft = sliderInner.scrollLeft;\r\n      sliderInner.style.scrollBehavior = 'auto';\r\n    }\r\n\r\n    handleTouchMove(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      const diffX = e.touches[0].clientX - this.startX;\r\n      const diffY = e.touches[0].clientY - this.startY;\r\n\r\n      \/\/ Erkennung von vertikalem Scrollen\r\n      if (!this.isVerticalScroll && Math.abs(diffY) > Math.abs(diffX)) {\r\n        this.isVerticalScroll = true;\r\n        return;\r\n      }\r\n\r\n      if (this.isVerticalScroll) return;\r\n\r\n      const newScrollLeft = this.scrollLeft - diffX;\r\n      const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n      sliderInner.scrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));\r\n\r\n      if (Math.abs(diffX) > this.dragThreshold) {\r\n        this.hasMoved = true;\r\n        e.preventDefault();\r\n      }\r\n    }\r\n\r\n    handleTouchEnd(e) {\r\n      if (!this.isDragging) return;\r\n\r\n      this.isDragging = false;\r\n      sliderInner.style.scrollBehavior = 'smooth';\r\n\r\n      \/\/ Sofortiges Reset f\u00fcr Touch\r\n      requestAnimationFrame(() => {\r\n        this.hasMoved = false;\r\n        this.isVerticalScroll = false;\r\n      });\r\n    }\r\n\r\n    isCurrentlyDragging() {\r\n      return this.isDragging || this.hasMoved;\r\n    }\r\n  }\r\n\r\n  function slideToDirection(direction) {\r\n    const visibleTiles = document.querySelectorAll('.car-tile:not(.hidden)');\r\n    if (visibleTiles.length === 0) return;\r\n\r\n    const containerWidth = sliderInner.clientWidth;\r\n    const tileWidth = visibleTiles[0].offsetWidth;\r\n    const gap = 16;\r\n    const tilesPerView = Math.floor(containerWidth \/ (tileWidth + gap));\r\n    const slideDistance = (tileWidth + gap) * Math.max(1, Math.min(tilesPerView, 2));\r\n\r\n    const currentScroll = sliderInner.scrollLeft;\r\n    const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n\r\n    let targetScroll;\r\n    if (direction === 'left') {\r\n      targetScroll = Math.max(0, currentScroll - slideDistance);\r\n    } else {\r\n      targetScroll = Math.min(maxScroll, currentScroll + slideDistance);\r\n    }\r\n\r\n    \/\/ Verwende native CSS smooth scroll - oft zuverl\u00e4ssiger als GSAP f\u00fcr Scrolling\r\n    sliderInner.style.scrollBehavior = 'smooth';\r\n    sliderInner.scrollLeft = targetScroll;\r\n\r\n    \/\/ Reset nach Animation\r\n    setTimeout(() => {\r\n      sliderInner.style.scrollBehavior = '';\r\n    }, 600);\r\n  }\r\n\r\n  \/\/ Size Filter Funktionalit\u00e4t\r\n  function initSizeFilter() {\r\n    const filterButtons = document.querySelectorAll('.size-filter-btn');\r\n    const filterDropdown = document.getElementById('sizeFilterSelect');\r\n\r\n    \/\/ Desktop Button Filter\r\n    filterButtons.forEach(button => {\r\n      button.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n\r\n        \/\/ Update active button\r\n        filterButtons.forEach(btn => btn.classList.remove('active'));\r\n        button.classList.add('active');\r\n\r\n        \/\/ Update dropdown to match\r\n        if (filterDropdown) {\r\n          filterDropdown.value = button.dataset.size;\r\n        }\r\n\r\n        \/\/ Apply filter\r\n        currentFilter = button.dataset.size;\r\n        applyFilter(currentFilter);\r\n      });\r\n    });\r\n\r\n    \/\/ Mobile Dropdown Filter\r\n    if (filterDropdown) {\r\n      filterDropdown.addEventListener('change', (e) => {\r\n        const selectedSize = e.target.value;\r\n\r\n        \/\/ Update active button\r\n        filterButtons.forEach(btn => btn.classList.remove('active'));\r\n        const matchingButton = document.querySelector(`[data-size=\"${selectedSize}\"]`);\r\n        if (matchingButton) {\r\n          matchingButton.classList.add('active');\r\n        }\r\n\r\n        \/\/ Apply filter\r\n        currentFilter = selectedSize;\r\n        applyFilter(currentFilter);\r\n      });\r\n    }\r\n  }\r\n\r\n  function applyFilter(size) {\r\n    const tiles = document.querySelectorAll('.car-tile');\r\n\r\n    tiles.forEach((tile) => {\r\n      const carId = tile.dataset.carId;\r\n      const car = allCars.find(c => c.id.toString() === carId);\r\n      const carSize = car?.size?.toLowerCase();\r\n      const filterSize = size.toLowerCase();\r\n\r\n      if (size === 'all' || (car && carSize === filterSize)) {\r\n        tile.classList.remove('hidden');\r\n        tile.style.position = 'relative';\r\n        tile.style.visibility = 'visible';\r\n\r\n        gsap.to(tile, {\r\n          opacity: 1,\r\n          scale: 1,\r\n          duration: 0.2,\r\n          ease: \"power2.out\"\r\n        });\r\n      } else {\r\n        tile.classList.add('hidden');\r\n        tile.style.position = 'absolute';\r\n        tile.style.visibility = 'hidden';\r\n\r\n        gsap.set(tile, {\r\n          opacity: 0,\r\n          scale: 0.8\r\n        });\r\n      }\r\n    });\r\n\r\n    filteredCars = size === 'all' ? [...allCars] : allCars.filter(car => car.size?.toLowerCase() === size.toLowerCase());\r\n    sliderInner.scrollLeft = 0;\r\n  }\r\n\r\n  function createCarTile(car) {\r\n    const tile = document.createElement('div');\r\n    tile.className = 'car-tile';\r\n    tile.dataset.carId = car.id;\r\n    tile.dataset.size = car.size || 'M';\r\n\r\n    const sizeMarker = document.createElement('div');\r\n    sizeMarker.className = 'size-marker';\r\n    sizeMarker.textContent = car.size || 'M';\r\n    tile.appendChild(sizeMarker);\r\n\r\n    const img = document.createElement('img');\r\n    img.src = car.images[0]?.url || 'https:\/\/picsum.photos\/200\/140?random=' + car.id;\r\n    img.draggable = false;\r\n    img.loading = 'lazy';\r\n    img.onerror = function() {\r\n      this.src = 'https:\/\/picsum.photos\/200\/140?random=' + car.id;\r\n    };\r\n    tile.appendChild(img);\r\n\r\n    const info = document.createElement('div');\r\n    info.className = 'car-info';\r\n    info.innerHTML = `\r\n        <p class=\"car-headline\">${car.name} ${car.subline || ''}<\/p>\r\n        <p class=\"car-price\">ab ${car.price.toFixed(2) || ''} \u20ac \/ h<\/p>\r\n      `;\r\n    tile.appendChild(info);\r\n\r\n    tile.addEventListener('click', (e) => {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n\r\n      if (carSlider.isCurrentlyDragging()) {\r\n        return;\r\n      }\r\n\r\n      selectCarTile(tile, car);\r\n    }, {\r\n      passive: false\r\n    });\r\n\r\n    return tile;\r\n  }\r\n\r\n  function selectCarTile(tile, car) {\r\n    document.querySelectorAll('.car-tile').forEach(t => t.classList.remove('gf-active-car'));\r\n    tile.classList.add('gf-active-car');\r\n    centerTileInView(tile);\r\n    showCarDetails(car);\r\n    \r\n    \/\/ URL mit der Fahrzeug-ID aktualisieren\r\n    updateURLWithCarId(car.id);\r\n  }\r\n\r\n  function updateURLWithCarId(carId) {\r\n    const url = new URL(window.location);\r\n    url.searchParams.set('id', carId);\r\n    \r\n    \/\/ URL aktualisieren ohne die Seite neu zu laden\r\n    window.history.replaceState({ carId: carId }, '', url);\r\n  }\r\n\r\n  function centerTileInView(tile) {\r\n    const tileCenter = tile.offsetLeft + (tile.clientWidth \/ 2);\r\n    const containerCenter = sliderInner.clientWidth \/ 2;\r\n    const targetScroll = tileCenter - containerCenter;\r\n    const maxScroll = sliderInner.scrollWidth - sliderInner.clientWidth;\r\n    const clampedScroll = Math.max(0, Math.min(targetScroll, maxScroll));\r\n\r\n    \/\/ Native smooth scroll verwenden\r\n    sliderInner.style.scrollBehavior = 'smooth';\r\n    sliderInner.scrollLeft = clampedScroll;\r\n\r\n    setTimeout(() => {\r\n      sliderInner.style.scrollBehavior = '';\r\n    }, 500);\r\n  }\r\n\r\n  \/\/ Image Slider f\u00fcr Car Details\r\n  function createImageSlider(images) {\r\n    const wrapper = document.createElement('div');\r\n    wrapper.className = 'image-slider-wrapper';\r\n\r\n    const slider = document.createElement('div');\r\n    slider.className = 'image-slider';\r\n\r\n    images.forEach((img) => {\r\n      const imageEl = document.createElement('img');\r\n      imageEl.src = img.url;\r\n      imageEl.draggable = false;\r\n      slider.appendChild(imageEl);\r\n    });\r\n\r\n    wrapper.appendChild(slider);\r\n\r\n    if (images.length > 1) {\r\n      \/\/ Navigation Buttons\r\n      const prevBtn = document.createElement('button');\r\n      prevBtn.className = 'slider-arrow image-nav prev';\r\n      prevBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-left.svg\" alt=\"Arrow Left\" \/>';\r\n      prevBtn.addEventListener('click', () => changeCarImage(-1));\r\n\r\n      const nextBtn = document.createElement('button');\r\n      nextBtn.className = 'slider-arrow image-nav next';\r\n      nextBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/arrow-right.svg\" alt=\"Arrow Right\" \/>';\r\n      nextBtn.addEventListener('click', () => changeCarImage(1));\r\n\r\n      wrapper.appendChild(prevBtn);\r\n      wrapper.appendChild(nextBtn);\r\n\r\n      \/\/ Dots Navigation\r\n      const dots = document.createElement('div');\r\n      dots.className = 'image-dots';\r\n\r\n      images.forEach((_, index) => {\r\n        const dot = document.createElement('div');\r\n        dot.className = 'image-dot';\r\n        if (index === 0) dot.classList.add('gf-active-car');\r\n        dot.addEventListener('click', () => goToCarImage(index));\r\n        dots.appendChild(dot);\r\n      });\r\n\r\n      wrapper.appendChild(dots);\r\n\r\n      \/\/ Touch Support f\u00fcr Image Slider\r\n      addImageTouchSupport(slider);\r\n    }\r\n\r\n    return wrapper;\r\n  }\r\n\r\n  \/\/ Touch Support f\u00fcr Image Slider\r\n  function addImageTouchSupport(slider) {\r\n    let startX = 0;\r\n    let startTime = 0;\r\n    const swipeThreshold = 50;\r\n    const timeThreshold = 300;\r\n\r\n    slider.addEventListener('touchstart', (e) => {\r\n      startX = e.touches[0].clientX;\r\n      startTime = Date.now();\r\n    }, {\r\n      passive: true\r\n    });\r\n\r\n    slider.addEventListener('touchend', (e) => {\r\n      const endX = e.changedTouches[0].clientX;\r\n      const endTime = Date.now();\r\n      const diffX = startX - endX;\r\n      const diffTime = endTime - startTime;\r\n\r\n      if (Math.abs(diffX) > swipeThreshold && diffTime < timeThreshold) {\r\n        if (diffX > 0) {\r\n          changeCarImage(1); \/\/ Swipe left = next\r\n        } else {\r\n          changeCarImage(-1); \/\/ Swipe right = previous\r\n        }\r\n      }\r\n    }, {\r\n      passive: true\r\n    });\r\n  }\r\n\r\n  \/\/ Image Navigation\r\n  function changeCarImage(direction) {\r\n    if (currentCarImages.length <= 1) return;\r\n\r\n    currentImageIndex += direction;\r\n\r\n    if (currentImageIndex >= currentCarImages.length) {\r\n      currentImageIndex = 0;\r\n    } else if (currentImageIndex < 0) {\r\n      currentImageIndex = currentCarImages.length - 1;\r\n    }\r\n\r\n    updateImageSlider();\r\n  }\r\n\r\n  function goToCarImage(index) {\r\n    currentImageIndex = index;\r\n    updateImageSlider();\r\n  }\r\n\r\n  function updateImageSlider() {\r\n    const slider = document.querySelector('.image-slider');\r\n    const dots = document.querySelectorAll('.image-dot');\r\n\r\n    if (slider) {\r\n      gsap.to(slider, {\r\n        x: -currentImageIndex * 100 + '%',\r\n        duration: 0.4,\r\n        ease: \"power3.out\"\r\n      });\r\n    }\r\n\r\n    dots.forEach((dot, index) => {\r\n      dot.classList.toggle('gf-active-car', index === currentImageIndex);\r\n    });\r\n  }\r\n\r\n  \/\/ Show Car Details\r\n  function showCarDetails(car) {\r\n    const gallery = document.getElementById('gallery');\r\n    const info = document.getElementById('info');\r\n    const tables = document.getElementById('tables');\r\n    const details = document.getElementById('details');\r\n\r\n    currentCarImages = car.images || [];\r\n    currentImageIndex = 0;\r\n\r\n    \/\/ Gallery\r\n    gallery.innerHTML = '';\r\n    if (currentCarImages.length > 0) {\r\n      const imageSlider = createImageSlider(currentCarImages);\r\n      gallery.appendChild(imageSlider);\r\n    }\r\n\r\n    const carEquipment = car.equipment.split(';').map(item => item.trim()).filter(item => item);\r\n    \/\/ Info\r\n    info.innerHTML = `\r\n        <h2>${car.name} ${car.subline}<\/h2>\r\n        <h3>${car.shortDescription}<\/h3>\r\n        <p>${car.description}<\/p>\r\n          ${carEquipment.map((item) => {\r\n            if (item.includes('Anh\u00e4ngerkupplung')) {\r\n              return `<p class=\"gf-flotte-list-item red\"><img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/information.png\" alt=\"${item}\" width=\"25\">${item}<\/p>`;\r\n            } else {\r\n              return `<p class=\"gf-flotte-list-item\"><img decoding=\"async\" src=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/assets\/check.png\" alt=\"${item}\" width=\"25\">${item}<\/p>`;\r\n            }\r\n          }).join('')}\r\n        `;\r\n\r\n    \/\/ Tables\r\n    tables.innerHTML = '';\r\n    try {\r\n      const tech = JSON.parse(JSON.parse(car.technicalData));\r\n      const weight = JSON.parse(JSON.parse(car.weightAndPayload));\r\n\r\n      if (tech.columns.length > 0 && tech.rows.length > 0) {\r\n        tables.appendChild(createTable(tech, 'Technische Daten'));\r\n      }\r\n      if (weight.columns.length > 0 && weight.rows.length > 0) {\r\n        tables.appendChild(createTable(weight, 'Gewicht & Zuladung'));\r\n      }\r\n    } catch (e) {\r\n      tables.innerHTML = '<p>Technische Daten nicht verf\u00fcgbar.<\/p>';\r\n    }\r\n\r\n    \/\/ Show details with animation\r\n    details.style.display = 'block';\r\n    gsap.fromTo(details, {\r\n      opacity: 0,\r\n      y: 30\r\n    }, {\r\n      opacity: 1,\r\n      y: 0,\r\n      duration: 0.5,\r\n      ease: \"power3.out\"\r\n    });\r\n  }\r\n\r\n  function createTable(data, title) {\r\n    const wrapper = document.createElement('div');\r\n    wrapper.className = 'table-wrapper';\r\n\r\n    const titleEl = document.createElement('h3');\r\n    titleEl.className = 'table-title';\r\n    titleEl.textContent = title;\r\n    wrapper.appendChild(titleEl);\r\n\r\n    const table = document.createElement('table');\r\n\r\n    const thead = document.createElement('thead');\r\n    const headerRow = document.createElement('tr');\r\n    data.columns.forEach(col => {\r\n      const th = document.createElement('th');\r\n      th.textContent = col.label || '';\r\n      headerRow.appendChild(th);\r\n    });\r\n    thead.appendChild(headerRow);\r\n    table.appendChild(thead);\r\n\r\n    const tbody = document.createElement('tbody');\r\n    data.rows.forEach(row => {\r\n      const tr = document.createElement('tr');\r\n      data.columns.forEach(col => {\r\n        const td = document.createElement('td');\r\n        const cellValue = row.data[col.key];\r\n        if (!cellValue || cellValue.trim() === '') {\r\n          td.innerHTML = '&nbsp;';\r\n        } else {\r\n          td.textContent = cellValue;\r\n        }\r\n        tr.appendChild(td);\r\n      });\r\n      tbody.appendChild(tr);\r\n    });\r\n    table.appendChild(tbody);\r\n\r\n    wrapper.appendChild(table);\r\n    const swipeIndicator = document.createElement('div');\r\n    const indicatorImage = document.createElement('img');\r\n    indicatorImage.src = 'https:\/\/gruene-flotte.com\/carsharing\/wp-content\/plugins\/google_news\/\/assets\/swipe.svg';\r\n    indicatorImage.alt = 'Swipe Indicator';\r\n    indicatorImage.style.width = '16px';\r\n    indicatorImage.style.height = '16px';\r\n    indicatorImage.style.marginRight = '8px';\r\n    swipeIndicator.appendChild(indicatorImage);\r\n    swipeIndicator.className = 'swipe-indicator';\r\n    let indicatorText = document.createElement('span');\r\n    indicatorText.style.color = '#82ba26';\r\n    indicatorText.style.fontSize = '14px';\r\n    indicatorText.textContent = 'Nach links und rechts wischen';\r\n    swipeIndicator.appendChild(indicatorText);\r\n    wrapper.appendChild(swipeIndicator);\r\n\r\n    return wrapper;\r\n  }\r\n\r\n  function sortCarsBySize(cars) {\r\n    const sizeOrder = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];\r\n\r\n    return cars.sort((a, b) => {\r\n      const aSize = a.size ? a.size.toUpperCase() : 'M';\r\n      const bSize = b.size ? b.size.toUpperCase() : 'M';\r\n\r\n      const aIndex = sizeOrder.indexOf(aSize);\r\n      const bIndex = sizeOrder.indexOf(bSize);\r\n\r\n      const aOrder = aIndex === -1 ? 999 : aIndex;\r\n      const bOrder = bIndex === -1 ? 999 : bIndex;\r\n\r\n      return aOrder - bOrder;\r\n    });\r\n  }\r\n\r\n  async function fetchCarsData() {\r\n    try {\r\n      const response = await fetch('https:\/\/core.gruene-flotte.com\/api\/carsharing-cars');\r\n      const cars = await response.json();\r\n      return sortCarsBySize(cars);\r\n    } catch (error) {\r\n      console.error('Fehler beim Laden der Autos:', error);\r\n      return [];\r\n    }\r\n  }\r\n\r\n  \/\/ Get URL Parameter\r\n  function getUrlParameter(name) {\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    return urlParams.get(name);\r\n  }\r\n\r\n  \/\/ Initialize Slider\r\n  const carSlider = new CarSlider();\r\n\r\n  \/\/ Event Listeners f\u00fcr Arrow Buttons\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const leftArrow = document.getElementById('arrow-left');\r\n    const rightArrow = document.getElementById('arrow-right');\r\n\r\n    if (leftArrow) {\r\n      leftArrow.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        slideToDirection('left');\r\n      }, {\r\n        passive: false\r\n      });\r\n    }\r\n\r\n    if (rightArrow) {\r\n      rightArrow.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        slideToDirection('right');\r\n      }, {\r\n        passive: false\r\n      });\r\n    }\r\n  });\r\n\r\n  \/\/ Main Initialization\r\n  document.addEventListener('DOMContentLoaded', async () => {\r\n    initSizeFilter();\r\n\r\n    const cars = await fetchCarsData();\r\n    const requestedCarId = getUrlParameter('id');\r\n\r\n    if (cars.length === 0) {\r\n      console.warn('Keine Autos geladen');\r\n      return;\r\n    }\r\n\r\n    allCars = cars;\r\n    filteredCars = [...cars];\r\n\r\n    const fragment = document.createDocumentFragment();\r\n\r\n    cars.forEach((car) => {\r\n      const tile = createCarTile(car);\r\n      fragment.appendChild(tile);\r\n\r\n      gsap.set(tile, {\r\n        x: -30,\r\n        opacity: 0\r\n      });\r\n    });\r\n\r\n    sliderInner.appendChild(fragment);\r\n\r\n    const tiles = document.querySelectorAll('.car-tile');\r\n    tiles.forEach((tile, index) => {\r\n      gsap.to(tile, {\r\n        x: 0,\r\n        opacity: 1,\r\n        duration: 0.4,\r\n        delay: index * 0.03,\r\n        ease: \"power2.out\"\r\n      });\r\n    });\r\n\r\n    let initialCar = cars[0];\r\n    if (requestedCarId) {\r\n      const foundCar = cars.find(car => car.id.toString() === requestedCarId);\r\n      if (foundCar) {\r\n        initialCar = foundCar;\r\n      }\r\n    }\r\n\r\n    if (initialCar) {\r\n      const initialTile = document.querySelector(`[data-car-id=\"${initialCar.id}\"]`);\r\n      if (initialTile) {\r\n        setTimeout(() => {\r\n          selectCarTile(initialTile, initialCar);\r\n        }, 600);\r\n      }\r\n    }\r\n  });\r\n\r\n  function handleResize() {\r\n    if (window.innerWidth <= 768) {\r\n      \/\/ Mobile optimizations k\u00f6nnen hier hinzugef\u00fcgt werden\r\n    }\r\n  }\r\n\r\n  window.addEventListener('resize', gsap.utils.throttle(handleResize, 250));\r\n<\/script>Jetzt Gr\u00fcne Flotte Mitglied werden! F\u00fcr Privatpersonen, Unternehmen &amp; Vereine \u2013 klimafreundlich mobil.In weniger als 10 Minuten registrieren, Auto buchen und sofort losstarten.Sie haben Fragen? Die Gr\u00fcne Flotte ist f\u00fcr Sie da.Mo. \u2013 Fr. von 8:00 bis 17:00 UhrSa. von 9:00 bis 12:30 Uhrbei Unfall oder einer Panne, einem technischen Problem, einer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"class_list":["post-1429","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Carsharing Flotte - Gr\u00fcne Flotte Carsharing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gruene-flotte.com\/carsharing\/flotte\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carsharing Flotte - Gr\u00fcne Flotte Carsharing\" \/>\n<meta property=\"og:description\" content=\"Die Gr\u00fcne Flotte Fahrzeug&shy;flotteJetzt Gr\u00fcne Flotte Mitglied werden! F\u00fcr Privatpersonen, Unternehmen &amp; Vereine \u2013 klimafreundlich mobil.In weniger als 10 Minuten registrieren, Auto buchen und sofort losstarten.Sie haben Fragen? Die Gr\u00fcne Flotte ist f\u00fcr Sie da.Mo. \u2013 Fr. von 8:00 bis 17:00 UhrSa. von 9:00 bis 12:30 Uhrbei Unfall oder einer Panne, einem technischen Problem, einer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gruene-flotte.com\/carsharing\/flotte\/\" \/>\n<meta property=\"og:site_name\" content=\"Gr\u00fcne Flotte Carsharing\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-27T13:49:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2022\/05\/gruene-flotte-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/flotte\\\/\",\"url\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/flotte\\\/\",\"name\":\"Carsharing Flotte - Gr\u00fcne Flotte Carsharing\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#website\"},\"datePublished\":\"2022-06-07T11:55:19+00:00\",\"dateModified\":\"2026-04-27T13:49:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/flotte\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/flotte\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/flotte\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carsharing Flotte\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#website\",\"url\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/\",\"name\":\"Gr\u00fcne Flotte Carsharing\",\"description\":\"Flexibel. Nachhaltig. Mobil.\",\"publisher\":{\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#organization\",\"name\":\"Gr\u00fcne Flotte Carsharing\",\"url\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2023\\\/08\\\/carsharing-gruene-flotte-unternehmen-firmen.jpg\",\"contentUrl\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2023\\\/08\\\/carsharing-gruene-flotte-unternehmen-firmen.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Gr\u00fcne Flotte Carsharing\"},\"image\":{\"@id\":\"https:\\\/\\\/gruene-flotte.com\\\/carsharing\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carsharing Flotte - Gr\u00fcne Flotte Carsharing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/","og_locale":"de_DE","og_type":"article","og_title":"Carsharing Flotte - Gr\u00fcne Flotte Carsharing","og_description":"Die Gr\u00fcne Flotte Fahrzeug&shy;flotteJetzt Gr\u00fcne Flotte Mitglied werden! F\u00fcr Privatpersonen, Unternehmen &amp; Vereine \u2013 klimafreundlich mobil.In weniger als 10 Minuten registrieren, Auto buchen und sofort losstarten.Sie haben Fragen? Die Gr\u00fcne Flotte ist f\u00fcr Sie da.Mo. \u2013 Fr. von 8:00 bis 17:00 UhrSa. von 9:00 bis 12:30 Uhrbei Unfall oder einer Panne, einem technischen Problem, einer [&hellip;]","og_url":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/","og_site_name":"Gr\u00fcne Flotte Carsharing","article_modified_time":"2026-04-27T13:49:43+00:00","og_image":[{"width":1440,"height":1080,"url":"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2022\/05\/gruene-flotte-image.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/","url":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/","name":"Carsharing Flotte - Gr\u00fcne Flotte Carsharing","isPartOf":{"@id":"https:\/\/gruene-flotte.com\/carsharing\/#website"},"datePublished":"2022-06-07T11:55:19+00:00","dateModified":"2026-04-27T13:49:43+00:00","breadcrumb":{"@id":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gruene-flotte.com\/carsharing\/flotte\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gruene-flotte.com\/carsharing\/flotte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/gruene-flotte.com\/carsharing\/"},{"@type":"ListItem","position":2,"name":"Carsharing Flotte"}]},{"@type":"WebSite","@id":"https:\/\/gruene-flotte.com\/carsharing\/#website","url":"https:\/\/gruene-flotte.com\/carsharing\/","name":"Gr\u00fcne Flotte Carsharing","description":"Flexibel. Nachhaltig. Mobil.","publisher":{"@id":"https:\/\/gruene-flotte.com\/carsharing\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gruene-flotte.com\/carsharing\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/gruene-flotte.com\/carsharing\/#organization","name":"Gr\u00fcne Flotte Carsharing","url":"https:\/\/gruene-flotte.com\/carsharing\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/gruene-flotte.com\/carsharing\/#\/schema\/logo\/image\/","url":"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2023\/08\/carsharing-gruene-flotte-unternehmen-firmen.jpg","contentUrl":"https:\/\/gruene-flotte.com\/carsharing\/wp-content\/uploads\/sites\/5\/2023\/08\/carsharing-gruene-flotte-unternehmen-firmen.jpg","width":1920,"height":1280,"caption":"Gr\u00fcne Flotte Carsharing"},"image":{"@id":"https:\/\/gruene-flotte.com\/carsharing\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/pages\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/comments?post=1429"}],"version-history":[{"count":0,"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/pages\/1429\/revisions"}],"wp:attachment":[{"href":"https:\/\/gruene-flotte.com\/carsharing\/wp-json\/wp\/v2\/media?parent=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}