/*
 Theme Name:     Twenty Twenty-Four Child for AVM
 Template:       twentytwentyfour
 Version:        1.2
 Author:         IDFABRIK
 Description:    Child Twenty Twenty-Four
*/

/* Ajoutez vos styles personnalisés ci-dessous */


html {
    scroll-behavior: smooth;
}

.footer_en a, .footer_de a{
    text-decoration: none;
    line-height: 135%;
}


    /* Animation styles for elements becoming visible */
    .observed-element {
        transition: color 0.5s ease-in-out; /* Smooth color transition */
        opacity: 0.1; /* Starts with low opacity */
        transition: opacity 1.5s; /* Smooth transition for fade-in effect */
    }

    /* Full opacity when element is visible */
    .visible {
        opacity: 1;
    }





    /* Animation for images entering the viewport */
    .image_anim{
        border-radius:0px;
        margin-top: 0px;
    }

    /* Keyframes for 'enter' animation */
    @keyframes enter-animation {
        0% {
            transform: translateY(30px);
            opacity: 0.1;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Apply animation to elements with reduced motion preference */
    @media (prefers-reduced-motion: no-preference) {
        .image_anim-animation {
            animation: enter-animation 1.4s 1;
        }
    }












.home h2{font-size: 75px;color: #FFF}
.home p{font-size: 30px; color: #FFF;}
.wp-block-columns.alignfull.wp-block-columns-is-layout-flex {
    margin-top: 0;
}
.wp-block-cover {margin: 0; }

p.avm_round {
    font-size: 16px;
    border: 2px solid #ffffff;
    border-radius: 15px;
    padding: 10px;
    width: fit-content;
}





.photo-fixiert {
	position: fixed;
    left: 50%;
    top: 50%;
}

:root {
    --wp--style--global--content-size: 800px;
}


.wp-block-cover-max-width {
    max-width: 1200px;
}

.paddin_20 {
padding-left: 20%;
padding-right: 20%;

}}

.logo-avm-klein {
  width: 88px;
}


/* page store hauteur de la carte */
div#storerocket-widget {
    min-height: 80vh;
}



.language-switcher {
  position: fixed;
  right: 60px;
  top: 10px;
  z-index: 100002;
  width: 100px;
  font-size: 16px;
}

.current-lang {
 text-decoration: underline; /* Ajoute le soulignement */
    text-decoration-color: white;
}

a.wp-block-button__link.wp-element-button {
    padding: 20px !important;
}

.wp-block-buttons.is-content-justification-center.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex ,
.wp-block-buttons.is-content-justification-center.is-layout-flex.wp-container-core-buttons-is-layout-2.wp-block-buttons-is-layout-flex
{
    display: flex;
    justify-content: center;
    padding: 10px;
}


  .plus-button {
        cursor: pointer;
        padding: 10px 15px;
        font-size: 20px;
        background-color: #000;
        color: #FFF;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
    }

    .toggle-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 10px;
        border: 1px solid #ccc;
        margin-top: 10px;
        background-color: #f9f9f9;
        transition: max-height 0.5s ease;
    }
    .toggle-button {
        cursor: pointer;
        padding: 8px 16px;
        background-color: #0073aa;
        color: #ffffff;
        border: none;
        border-radius: 4px;
    }
    .toggle-content.open {
        max-height: 500px; /* Ajustez la hauteur maximale selon le contenu */
        padding: 10px;
    }

.wp-block-cover.wp-block-cover-is-layout-constrained {
    margin-top: 0px;
}



  .language-switcher {
  position: fixed;
    right: 60px;
    top: 10px;
    z-index:100002;
    width: 100px;
     font-size: 16px;
  }
  .language-switcher ul, .language-switcher li {display: inline;}
  .language-switcher a {text-decoration: none; color: #fff;}
    .avm_top-box, #avm_menu-icon {
      height: 48px; /* Set a specific height for both */
      line-height: 50px; /* Center the text vertically */
      z-index: 100002;
    }

    .avm_top-box {
      width: 100%; /* Full width */
      background-color: #404040; /* Black background */
      color: #fdfefd; /* White text */
      text-align: center; /* Center the text horizontally */
      padding: 0; /* Add some padding above and below the text */
      position: fixed; /* Fixed positioning to keep it always visible */
      top: 0; /* Align to the top */
      left: 0; /* Align to the left */
      z-index: 100; /* Ensure it has a defined z-index */
      font-family: "inter";
    }

   #avm_menu-icon {
    position: fixed;
    top: -4px;
    right: -2px;
    z-index: 101;
    background-color: #404040;
    color: #fff;
    border: none;
    padding: 0 15px;
    font-size: 32px;
    cursor: pointer;
}
  


    /* Admin bar compensation (desktop: 32px, mobile: 46px) */
    body.admin-bar .avm_top-box { top: 32px; }
    body.admin-bar #avm_menu-icon { top: calc(-4px + 32px); }
    body.admin-bar .avm_menu { top: calc(48px + 32px); height: calc(100vh - 48px - 32px); }

    @media screen and (max-width: 782px) {
        body.admin-bar .avm_top-box { top: 46px; }
        body.admin-bar #avm_menu-icon { top: calc(-4px + 46px); }
        body.admin-bar .avm_menu { top: calc(48px + 46px); height: calc(100vh - 48px - 46px); }
    }

   #avm_menu-icon *:focus {
    outline-width: 0px !important;
    outline-style: none;
}


    .avm_menu {
      font-family: "inter";
      background: #f1e4dc;
      color: #fdfefd;
      width: 100%;
      position: fixed;
      top: 48px;
      left: 0;
      height: calc(100vh - 48px);
      overflow-y: auto;
      z-index: 2300;
      transition: transform 0.5s ease, opacity 0.5s ease;
      transform: translateY(0);
      opacity: 1;
    }

    body.avm-menu-open { overflow: hidden; }



    .avm_menu.hidden {
      transform: translateY(-100%); /* Move out of view */
      opacity: 0; /* Become transparent */
      visibility: hidden;
      transition: transform 0.5s ease, opacity 0.5s ease; /* Apply transitions */
      transition-delay: 0s, 0s, 0.5s; /* Delay the visibility change until after the opacity transition */
    }

    .avm_menu hr {
      border-color: #fdfefd; /* Sets the color of the <hr> to white */
      border-style: solid; /* Ensures the border is a solid line */
      border-width: 1px 0 0 0; /* Sets a specific border width */
      height: 0; /* Removes any additional height */
      background-color: transparent; /* Ensures no background color interferes */
    }

    .avm_section {
      display: flex; /* Use flexbox for layout */
      align-items: center; /* Center items vertically */
      flex-wrap: wrap; /* Allow items to wrap if needed */
      margin-left: 20px;
    }

    .avm_section h1 {
      margin-right: 50px; /* Space after the h1 before the sub-avm_sections */
      font-weight: 400; /* Adjusts font weight to normal */
    }


    .sub-avm_section {
    margin-right: 60px;
    padding-bottom: 0;
    margin-top: 20px;
    }

    .icon-avm_container {
      display: flex;
      /*align-items: flex-end; /* Align items to the bottom */
      flex-wrap: wrap; /* Allow items to wrap */
      width: 100%; /* Ensure it takes the full width */
      gap: 80px; /* Adjusts the gap between items */
      padding-bottom: 20px;
    }

    .avm_icon-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      text-align: center;
      gap: 6px;
    }

    .avm_icon-text img, .icon-avm_container img {
      width: 6.5vw; /* Adjust icon size */
       min-width: 80px; 
      /*height: auto; /* Maintain aspect ratio */
      /*width: 100%; /* Makes the image width responsive within the avm_container */
      max-width: 120px; /* Ensures the image does not exceed the avm_container width */
      height: auto; /* Maintain aspect ratio */
      align-self: center; /* Center the image horizontally */
      margin-bottom: 10px; /* Space between image and text */
    }

    .avm_icon-text a span {
      margin-bottom: 8px;
      width: 100%;
      color: #404040;
    }

    .avm_column ul,
  .avm_column li {
      list-style: none;
      margin: 0;
      padding: 0;
  }

    .avm_section h2, .avm-menu-col-title {
      font-size: 25px;
      font-weight: 400;
      margin-top: 35px;
      margin-bottom: 0;
      color: #404040 !important;
      letter-spacing: -1px;
      text-transform: none;
    }

    .avm_container {
      display: flex;
      justify-content: space-between;
    }

    .avm_section, .avm_container {
      margin-left: 20px; /* Adjust the value to match the desired left distance */
      margin-bottom: 20px;
      padding-right: 20px;
    }

    .avm_column {
      display: flex;
      flex: 1; /* Makes each column take up equal width */
      padding: 10px; /* Adds some spacing around the content of each column */
      flex-direction: column;
      justify-content: flex-start; /* Align items to the top */
    }

    .avm_column .icon {
      margin-top: auto; /* Push the icons to the bottom */
    }

    input[type=email] {
      border: 2px solid #fdfefd; /* Sets the border color */
      background-color: transparent; /* Makes the background transparent */
      padding: 10px; /* Adds some padding inside the input box */
    }

    input[type=email]::placeholder {
      color: #fdfefd; /* Sets the placeholder text color to match the border color */
      opacity: 1; /* Ensures the placeholder text is not semi-transparent */
    }


    .avm_menu a {
    color: #404040;
    text-decoration: none;
        font-size: 16px;
    }

    .bloc_sm {
    z-index: 1000;
    right: 12px;
    top: 260px;
    width: 50px;
    opacity: 0.7;
    margin-left: 181px;
    }






/* RESET et HIDE OLD MENU */

h1 {
 /* font-family: 'avm_text_medium', Arial, sans-serif;*/
  line-height: 100%;
  letter-spacing: -2px;
}

#nm-header,#nm-top-menu {
  display: none;
}

.nm-header-placeholder {
 
  display: none;
}

body {
  margin-top: -2px;
  /* La barre de menu .avm_top-box (48px) est en position: fixed :
     on décale le contenu pour qu'elle ne le recouvre pas (50px = 48px + 2px du margin-top ci-dessus) */
  padding-top: 50px;
  font-family: 'inter';
}

/* Exception : pas de décalage sur les pages d'accueil EN (id 102626) et DE (id 104315) */
body.home,
body.page-id-102626,
body.page-id-104315 {
  padding-top: 0;
}

/* Les liens d'ancre (#...) ne doivent pas non plus passer sous la barre fixe */
html {
  scroll-padding-top: 60px;
}

table.csv-table {
    font-size: 14px;
    color: #fff;
}

#spacer {
  height: 40px;
}

.icone_sm {
  margin-top: 10px;
}


.icone_sm img {
  margin-top: 20px;
}

/* STYLE PAGE CAT2GORY*/


.avm_top-logo {
  width: 52px;
  position: absolute;
  left: 15px;
  top: 15px;
}

.entry-content {
  margin-top: 120px;
}



.title_table {
 /* text-transform: uppercase; */
  font-size: 18px;
}


td {
  width: 60%;
  vertical-align: top;
  text-align: left;
}

 .sub-avm_section {
  color: #404040 ;
 }


.footer_en, .footer_de {
text-decoration: none;
line-height: 109%;
}
















/* Styles spécifiques pour les écrans en dessous de 768px */
@media (max-width: 768px) {



  .mobile-linien p {font-size: 11px !important;}
  .mobile-linien.is-layout-flex{
    gap: 0.6rem;
 }


  .white_bg_mobile {background-color:#fff !important;}

  .radius_mobile {
    border-radius: 14px !important;
  }

  .no_radius_mobile {
    border-radius: 0px !important;
  }

  .mobile_footer {
    border-radius: 0px !important;
    margin-left: -32px !important;
    position: absolute;
    /*width: 100vw;*/
    padding-top: 20px !important;
}

  .mobile_footer.wp-block-columns{ margin-top: 20px; }

  .padding_mobile {
    padding: 10px !important;

  }

  .mobile_padding_produkt {
    padding: 20px !important;

  }

  .logo-avm-klein {
  width: 60px;
  }


    body {
        /* background-color: lightgray;  Exemple : Changer le fond pour les mobiles */
        font-size: 14px; /* Exemple : Réduire la taille de la police */
    }
    .wp-block-cover__image-background {
    /* height: unset !important;
    min-height: 330px;
    */
   }

  .wp-block-cover, .wp-block-cover-image {
  min-height: 230px !important;
  }

  .masterpieces-template-wp-custom-template-produktseiten-design p {
    font-size: 22px;
  }


  /*
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    text-align: center;
  }
  */

  h2.wp-block-heading {
  font-size: 30px !important;
  }

  h3.wp-block-heading {
  text-align: center;
  /*font-size: 40px;*/
  margin-bottom: 30px;
  }

  .home p{font-size: 20px; color: #FFF;}

  figure#logo-home-avm {
    margin-top: 80px;
  }

  figure.wp-block-image.size-full.is-resized.gif-avm {
    width: 40px;
    margin-bottom: 26px;
 }
 .wp-block-group.has-global-padding.is-content-justification-center.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-left: 30px;
}


  /* MENU */
  .avm_section, .avm_container {
  margin-left: 10px;
  margin-bottom: 0px;
  padding-right: 0px;
  }

  .avm_section h2, .avm-menu-col-title {
  font-size: 21px;
  margin-top: 14px;
  margin-bottom: 0;
  color: #404040 !important;
  }

  .icon-avm_container {
  gap: 14px;
  padding-bottom: 0;
  }

  .avm_column h2 { margin-top: 0; margin-bottom: 0;}
  .avm_section h2, .avm-menu-col-title {
  letter-spacing: -0.1px;
  font-size: 16px;
  margin-top: 13px;
  color: #404040 !important;
  }

  .avm_menu a {
  font-size: 12px;
  }

  .sub-avm_section {
  margin-right: 9px;
  margin: 0;
  padding: 0;
  margin-left: 7px;
  margin-top: 13px;

 }

 .avm_icon-text img, .icon-avm_container img {
  width: 18vw;
  }

  .avm_top-box {
  font-size: 12px;
  }

 .language-switcher {
    position: fixed !important;
    right: 35px;
    top: 16px;
    z-index: 100002;
    width: 100px;
    font-size: 12px;
  }

  .wp-block-spacer {
    
    height: 40px !important;
  }


}










/* Style général du formulaire */
form {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Titre du formulaire */
form h3 {
  font-size: 1.6rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

/* Style pour les labels */
form label {
  display: block;
  font-size: 1rem;
  margin-bottom: 8px;
  color: #555;
}


form select {
    padding: 12px;
    margin-bottom: 15px;
}

input[type="file"] {
    margin-bottom: 20px;
}

/* Champs de texte (inputs, selects, etc.) */
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="number"],
form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  background-color: #fff;
  transition: border 0.3s, box-shadow 0.3s;
}

/* Effet de focus sur les champs de texte */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="date"]:focus,
form textarea:focus {
  border-color: #007BFF;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
  outline: none;
}

/* Style des boutons radio et checkboxes */
form .wpcf7-radio input[type="radio"],
form .wpcf7-checkbox input[type="checkbox"] {
  margin-right: 8px;
  transition: transform 0.2s ease;
}

form .wpcf7-radio input[type="radio"]:hover,
form .wpcf7-checkbox input[type="checkbox"]:hover {
  transform: scale(1.1);
}

/* Effet sur le label des cases à cocher et boutons radio */
form .wpcf7-list-item label {
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  transition: color 0.2s;
}

form .wpcf7-list-item label:hover {
  color: #007BFF;
}

/* Style du bouton de soumission */
form input[type="submit"] {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease;
  width: 100%;
}

form input[type="submit"]:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

form input[type="submit"]:active {
  background-color: #004085;
}

/* Messages d'erreur ou de confirmation */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f4f4f4;
  color: #333;
}

/* Style pour les sections de texte */
form p {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #555;
}

/* Style pour les sections (groupes) */
form .wpcf7-form-control-wrap {
  margin-bottom: 15px;
}

/* Espacement entre les champs */
form p {
  margin-bottom: 16px;
}

form .wpcf7-list-item {
  margin-bottom: 8px;
}

/* Mise en forme des titres de section */
form h3 {
  border-bottom: 2px solid #ddd;
  padding-bottom: 8px;
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #333;
  font-weight: bold;
}

/* Option pour les champs date */
form input[type="date"] {
  padding: 8px;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1rem;
}

/* Animation de hover sur les champs radio et checkbox */
.wpcf7-radio input[type="radio"]:checked + span,
.wpcf7-checkbox input[type="checkbox"]:checked + span {
  background-color: #007BFF;
  border-color: #007BFF;
}

/* Ajout d'une bordure pour les champs requis */
.wpcf7-form-control.wpcf7-validates-as-required:focus {
  border-color: #FF5C8D;
}