/*
Theme Name:  Otto Hattendorf - Divi
Theme URL:   https://wp2024.otto-hattendorf.de
Description: Child Theme für Otto Hattendorf basierend auf dem Eltern Theme Divi
Author:      design + marketing
Author URL:  https://wp2024.otto-hattendorf.de
Template:    Divi
Version:     1.0.0
*/

/*make the Divi mobile dropdown menu scrollable*/

.et_mobile_menu {  
  overflow-y: scroll !important;  
  max-height: 80vh;
    min-width: 90vw;
    margin-left: -30vw;
  }
  
  /*change Divi hamburger menu to X*/  
  .mobile_nav.opened .mobile_menu_bar:before {  
  content: '\4d';  
  }
  
  /*rotate the Divi Menu icon on click*/
  
  .mobile_menu_bar:before {  
  transition: all .4s ease;  
  transform: rotate(0deg);  
  display: block;  
  }
  
  
  /*rotate the Divi Menu icon on click*/
  
  .mobile_nav.opened .mobile_menu_bar::before {  
  transition: all .4s ease;  
  transform: rotate(90deg);  
  display: block;  
  }
  
  /*CSS für die Fahrzeuge im Fuhrpark -- Anfang*/
  /*Sektion*/
  .oh-fuhrpark-grid {
    margin-inline: max(calc((100% - 1400px) / 2), 10%);
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1, 1fr);

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);        
      }

      @media (min-width: 981px) {
        grid-template-columns: repeat(3, 1fr);
      }
  }

  /* Row: Fahrzeug */
  .dm-fahrzeug {
    display: grid;
    grid-auto-rows: min-content;
    min-width: 100%;
    margin: 0px;
  }

  /* Fahrzeugbild mit Überschrift und Button */
  /* Überschrift */
  .dm-fahrzeug-bild h2 {
    font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 0.613125rem) * 0.7242)), 1.3rem);
  }

  /* Button */
  .dm-fahrzeugdetails-button {
    width: 100%;
  }

  .et_pb_button_module_wrapper:has(.dm-fahrzeugdetails-button) {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    border-top: 2px solid #eeeff1;
  }

  /* Fahrzeugbild */
  .dm-fahrzeug .dm-fahrzeug-bild > * {
    margin: 0 !important;
  }
  @media (max-width: 479px) {
    .dm-fahrzeug .dm-fahrzeug-bild {
      margin: 0 !important;
    }
  }
  
  .dm-fahrzeug-bild .et_pb_image {
    grid-row: 1 / 3;
    grid-column: 1 / -1;
    margin-bottom: 0;
    cursor: pointer;
    transition: saturate 1s ease-in-out, opacity 1s ease-in-out;
  } 
  
  .dm-fahrzeug-bild:has(:not(:hover)) .et_pb_image {
    filter: saturate(65%) opacity(90%);
  }

  .dm-fahrzeug-bild:hover .et_pb_image {
    filter: saturate(100%) opacity(100%);
  }

  /* Fahrzeug Inhalt */

  .dm-fahrzeug-inhalt > * {
    overflow: hidden;
  }
  
  .dm-fahrzeug-inhalt {
    transition: grid-template-rows 0.5s ease-out;
    overflow: hidden;
  }
  
  .dm-fahrzeug-inhalt-bilder {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
    padding: 0;
  }

  /* Inhalt geschlossen */
  
  .dm-fahrzeug.dm-fahrzeug-inhalt.rv_element_closed > * {
    padding: 0rem !important;
    margin: 0rem !important;
    min-height: 0 !important;
    border-width: 0;
  }

  @media (max-width: 479px) {
    .dm-fahrzeug.dm-fahrzeug-inhalt.rv_element_closed {
      padding: 0rem !important;
      margin: 0rem !important;
      min-height: 0 !important;
      border-width: 0;
    }
  }
  
  /* Inhalt geöffnet */
  
  .dm-fahrzeug-inhalt.rv_element_opened {
    padding-block: 1rem;
  }

  .dm-fahrzeug.dm-fahrzeug-inhalt.rv_element_opened {
    margin: 0;
  }
  /*CSS für die Fahrzeuge im Fuhrpark -- Ende*/

  /*Team Member Karte*/
 
  .oh-teammember {
    /*Einzug für Zeilen mit Icon*/
    --einzug: 2.5rem;
  }
  /*padding für den Kartentext*/
  .oh-teammember .et_pb_team_member_description {
    padding: 0.75rem;
  }
  /*Wenn ein p-Element ein Telefonnummer-Link ist gib ihm einen Einzug und pack ein Icon davor*/
  .oh-teammember .et_pb_team_member_description p:has(a[href^="tel:"]) {
      margin-inline-start: var(--einzug);
      position: relative;
  }
  .oh-teammember .et_pb_team_member_description a[href^="tel:"]::before {
      content: '';
      position: absolute;
      left: calc(-1 * var(--einzug));
      top: -5px;
      font-family: FontAwesome !important;
      font-weight: 900 !important;
      color: #2a306e;
      font-size: 1.25em;
  }
  .oh-teammember .et_pb_team_member_description a[href^="tel:"]:hover::before {
    color: #CF1822;
  }
  
  /*Wenn ein p-Element ein E-Mail-Link ist gib ihm einen Einzug und pack ein Icon davor*/
  .oh-teammember .et_pb_team_member_description p:has(a[href^="mailto:"]) {
      margin-inline-start: var(--einzug);
      position: relative;
  }
  .oh-teammember .et_pb_team_member_description a[href^="mailto:"]::before {
      content: '';
      position: absolute;
      left: calc(-1 * var(--einzug));
      top: -1px;
      font-family: FontAwesome !important;
      font-weight: 900 !important;
      color: #2a306e;
      font-size: 1.25em;
  }
  .oh-teammember .et_pb_team_member_description a[href^="mailto:"]:hover::before {
    color: #CF1822;
  }
  
  /*Abstand unter Position*/
  .oh-teammember .et_pb_member_position {
    margin-bottom: 1rem;
  }
 
  /*Team Member Karte -- Ende*/