/* ==========================================================================
   GROTEC KONTAKTFORMULAR
   Contact Form 7 Custom Styling
   Dieses Stylesheet definiert das Aussehen des Kontaktformulars
   ========================================================================== */

/* ==========================================================================
   1. GRUNDLEGENDE VARIABLEN & RESET
   ========================================================================== */

/* Basis-Reset für das Formular */
#kontakt-grotec-id .wpcf7-form .grotec-kontakt {
  margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
  padding: 0;                                                                   /* Entfernt innere Abstände */
  font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
  font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
  width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
  box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
  height: 71vh;   
  overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
}                                                                                 /* Basis-Container für das gesamte Formular */

/* Reset für alle Formular-Elemente */
.wpcf7-form .grotec-kontakt * {
  box-sizing: border-box;                                                      /* Konsistente Breitenberechnung für alle Elemente */
  line-height: normal;                                                         /* Standardisierte Zeilenhöhe */
  margin: 0;                                                                   /* Entfernt alle Außenabstände */
}                                                                                 /* Grundlegendes Reset für alle Formular-Elemente */

/* Spezifische Abstände für Feldgruppen */
#kontakt-grotec-id .wpcf7-form .grotec-kontakt [class^="field-group-"] {
  margin-bottom: 0px;                                                        /* 20px Abstand zwischen den Feldgruppen */
}

#kontakt-grotec-id .wpcf7-form .grotec-kontakt [class^="field-group-"]:last-child {
  margin-bottom: 0;                                                           /* Letzter Feldgruppe keinen unteren Abstand */
}

/* Abstände innerhalb der Feldgruppen */
#kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-title {
  margin: 0 0 0 0;                                                           /* Kein Abstand um label-title */
  padding: 0;                                                                /* Kein Padding */
}

#kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input {
  margin: 0 0 0 0;                                                           /* Kein Abstand zwischen label-title und label-input */
  padding: 0;                                                                /* Kein Padding */
  line-height: 2;                                                           /* Kompakte Zeilenhöhe */
}

/* Text im Eingabefeld oben positionieren */
#kontakt-grotec-id .wpcf7-form .grotec-kontakt input:not([type="submit"]),
#kontakt-grotec-id .wpcf7-form .grotec-kontakt textarea {
  vertical-align: top;                                                       /* Text oben im Feld positionieren */
  padding-top: 5px;                                                         /* Minimaler oberer Innenabstand */
}

/* ==========================================================================
   2. FORMULAR-STRUKTUR & LAYOUT
   ========================================================================== */

/* Hauptcontainer */
.wpcf7-form .grotec-kontakt .form {
  display: flex;    
  font-family: 'mundial-narrow-variable', sans-serif;                                                            /* Aktiviert Flexbox-Layout */
  width: 100%;                                                                 /* Volle Containerbreite */
  flex-direction: column;                                                      /* Vertikale Anordnung */
  align-items: flex-start;                                                     /* Linksbündige Ausrichtung */
  gap: 0px;                                                                    /* Kein Abstand zwischen Elementen */
  padding: 0 10px;                                                            /* Seitlicher Innenabstand */
}                                                                                 /* Hauptcontainer mit flexibler Ausrichtung */

/* Formularfelder-Container */
.wpcf7-form .grotec-kontakt .form-fields {
  display: flex;      
  font-family: 'mundial-narrow-variable', sans-serif;                                                          /* Flexbox für Feldanordnung */
  flex-direction: column;                                                      /* Vertikale Ausrichtung */
  align-items: flex-start;                                                     /* Linksbündige Ausrichtung */
  width: 100%;                                                                 /* Volle Breite */
}                                                                                 /* Container für alle Eingabefelder */

/* Feldgruppen-Layout */
.wpcf7-form .grotec-kontakt [class^="field-group-"] {
  display: flex;
  font-family: 'mundial-narrow-variable', sans-serif; 
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 25px;
  gap: 6px;
}                                                                                 /* Styling für einzelne Feldgruppen */

.wpcf7-form .grotec-kontakt .field-group-1 {
  margin-top: 0;
}                                                                                 /* Entfernt oberen Abstand der ersten Gruppe */

/* ==========================================================================
   3. EINGABEFELDER
   ========================================================================== */

/* Basis-Styling für alle Eingabefelder */
.wpcf7-form .grotec-kontakt input:not([type="submit"]),
.wpcf7-form .grotec-kontakt textarea,
.wpcf7-form .grotec-kontakt select {
  width: 100%;                                                                 /* Volle Breite */
  background-color: transparent;                                               /* Durchsichtiger Hintergrund */
  border: none;                                                               /* Kein Rahmen */
  border-bottom: 0px solid #c6c6c6;                                          /* Untere Grenzlinie */
  padding: 8px 0;                                                             /* Vertikaler Innenabstand */
  font-size: 18px;                                                            /* Schriftgröße */
  font-family: 'mundial-narrow-variable', sans-serif;                         /* Setzt die korrekte Schriftart */
  transition: border-color 0.3s ease;                                         /* Sanfter Übergang bei Hover */
}                                                                                 /* Basis-Styling für alle Eingabefelder */

/* Fokus-Zustand */
.wpcf7-form .grotec-kontakt input:focus,
.wpcf7-form .grotec-kontakt textarea:focus,
.wpcf7-form .grotec-kontakt select:focus {
  outline: none;                                                              /* Entfernt Standard-Fokus-Rahmen */
  border-bottom-color: #ff003a;                                               /* Rote Unterlinie bei Fokus */
}                                                                                 /* Fokus-Zustand der Eingabefelder */

/* ==========================================================================
   4. BESCHRIFTUNGEN & TEXT
   ========================================================================== */

/* Feld-Überschriften */
.wpcf7-form .grotec-kontakt .label-title {
  font-size: 16px;                                                            /* Schriftgröße für Titel */
  font-weight: 300;                                                           /* Leichte Schriftstärke */
  color: #000000;                                                             /* Dunkelrote Farbe */
  letter-spacing: 0.8px;                                                      /* Buchstabenabstand */
  text-transform: uppercase;                                                  /* Großbuchstaben */
}                                                                                 /* Styling für Feld-Überschriften */

/* Eingabefeld-Labels */
.wpcf7-form .grotec-kontakt .label-input {
  font-size: 22px;                                                            /* Größere Schrift für Eingabefelder */
  font-weight: 300;                                                           /* Leichte Schriftstärke */
  color: #c6c6c6;                                                             /* Helle Graufarbe */
  margin-top: 6px;                                                            /* Abstand nach oben */
}                                                                                 /* Styling für Eingabefeld-Labels */

/* ==========================================================================
   5. PLACEHOLDER-STYLING
   ========================================================================== */

/* Standard Placeholder */
.wpcf7-form .grotec-kontakt input::placeholder,
.wpcf7-form .grotec-kontakt textarea::placeholder {
  font-size: 22px !important;
  font-weight: 300;
  color: #c6c6c6;
  opacity: 1;
}                                                                                 /* Standard Placeholder-Styling */

/* Webkit Browser (Chrome, Safari) */
.wpcf7-form .grotec-kontakt input::-webkit-input-placeholder,
.wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder {
  font-size: 22px !important;
  font-weight: 300;
  color: #c6c6c6;
}                                                                                 /* Chrome/Safari Placeholder */

/* Firefox */
.wpcf7-form .grotec-kontakt input::-moz-placeholder,
.wpcf7-form .grotec-kontakt textarea::-moz-placeholder {
  font-size: 22px !important;
  font-weight: 300;
  color: #c6c6c6;
}                                                                                 /* Firefox Placeholder */

/* Internet Explorer */
.wpcf7-form .grotec-kontakt input:-ms-input-placeholder,
.wpcf7-form .grotec-kontakt textarea:-ms-input-placeholder {
  font-size: 22px !important;
  font-weight: 300;
  color: #c6c6c6;
}                                                                                 /* Internet Explorer Placeholder */

/* ==========================================================================
   6. SUBMIT BUTTON
   ========================================================================== */

/* Button Basis-Styling */
.wpcf7-form .grotec-kontakt .submit-btn,
.wpcf7-form .grotec-kontakt input[type="submit"] {
  min-width: 165px;                                                           /* Minimale Buttonbreite */
  max-width: 180px;   
  font-family: 'mundial-narrow-variable', sans-serif;                                                           /* Maximale Buttonbreite */
  height: 45px;                                                               /* Feste Buttonhöhe */
  padding: 0 30px;                                                            /* Seitlicher Innenabstand */
  background-color: #ff003a;                                                  /* Rote Hintergrundfarbe */
  color: #ffffff;                                                             /* Weiße Schriftfarbe */
  border: none;                                                               /* Kein Rahmen */
  border-radius: 30px;                                                        /* Abgerundete Ecken */
  font-size: 24px;                                                            /* Schriftgröße */
  font-weight: 300;                                                           /* Leichte Schriftstärke */
  text-align: center;                                                         /* Zentrierter Text */
  white-space: nowrap;                                                        /* Verhindert Textumbruch */
  text-transform: none;                                                       /* Keine Texttransformation */
  display: inline-flex;                                                       /* Inline Flexbox Layout */
  align-items: center;                                                        /* Vertikale Zentrierung */
  justify-content: center;                                                    /* Horizontale Zentrierung */
  cursor: pointer;                                                            /* Hand-Cursor bei Hover */
  transition: background-color 0.3s ease;                                     /* Sanfter Farbübergang */
}                                                                                 /* Styling für den Submit-Button */

/* Button Hover */
.wpcf7-form .grotec-kontakt .submit-btn:hover,
.wpcf7-form .grotec-kontakt input[type="submit"]:hover {
  background-color: #ff003cb2;                                                /* Transparenteres Rot bei Hover */
}                                                                                 /* Hover-Effekt für den Submit-Button */

/* ==========================================================================
   7. RESPONSIVE DESIGN
   ========================================================================== */


/* Tablet (max-width: 1023px)
   ========================================================================== */
   @media screen and (max-width: 1023px) {


    #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
      margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
      padding: 0;                                                                   /* Entfernt innere Abstände */
      font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
      font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
      width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
      box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
      height: auto;   
      overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
    }  
    
    /* Container und Abstände */
  .sc-contactForm .sc-inner{
      max-width: 100% !important;
      width: 94% !important;
    }  

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm {
    padding: 10px;                                               /* Reduzierter Innenabstand */
  }                                                                             /* Kompaktere Abstände für Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner {
    padding: 0;
  }                                                                             /* Entfernt unnötige Abstände auf Mobilgeräten */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    padding: 0;
  }                                                                             /* Entfernt unnötige Abstände auf Mobilgeräten */

  /* Formular-Elemente */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea {
    font-size: 18px;                                                        /* Kleinere Schrift für Mobile */
  }                                                                             /* Kleinere Schriftgrößen für Mobilgeräte */

  /* Beschriftungen */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title {
    font-size: 16px;
    letter-spacing: 0.6px;
  }                                                                             /* Angepasste Feld-Überschriften für Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input {
    font-size: 24px !important;
  }                                                                             /* Angepasste Eingabefeld-Labels für Mobilgeräte */

  /* Submit-Button */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn,
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] {
    width: 100%;                                                            /* Button volle Breite */
    max-width: none;                                                        /* Keine maximale Breite */
    font-size: 24px;                                                        /* Angepasste Schriftgröße */
  }                                                                             /* Volle Breite für Submit-Button auf Mobilgeräten */
}

/* Landscape-Modus (Querformat)
   ========================================================================== */
@media screen and (max-height: 1023px) and (orientation: landscape) {
  /* Container-Anpassungen */
  body .ptsc-list .ptsc.pt-sc.sc-contactForm,
  body .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner,
  body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    padding: 0px;
  }                                                                             /* Optimierte Abstände für Landscape-Modus */

  /* Feldgruppen */
  body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt [class^="field-group-"] {
    margin-top: 10px;
    gap: 4px;
  }                                                                             /* Kompaktere Feldgruppen im Landscape-Modus */

  /* Submit-Button */
  body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn,
  body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] {
    height: 40px;
    font-size: 24px;
  }                                                                             /* Angepasster Submit-Button im Landscape-Modus */
}





/* Tablet (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {


  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: auto;   
    overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
  }  
  /* Container-Struktur */
  .m-mode .ptsc-list.pt-hs-content {
    width: 100% !important;                                                  /* Volle Breite erzwingen */
    max-width: 100% !important;                                             /* Maximale Breite begrenzen */
    margin: 0 !important;                                                   /* Außenabstände entfernen */
    padding: 0 !important;                                                  /* Innenabstände entfernen */
    overflow-x: hidden !important;                                          /* Horizontales Scrollen verhindern */
    box-sizing: border-box !important;                                      /* Korrekte Breitenberechnung */
    left: 0 !important;                                                     /* Linksbündig ausrichten */
    right: 0 !important;                                                    /* Rechtsbündig ausrichten */
    position: relative !important;                                          /* Relative Positionierung */
  }                                                                             /* Container-Anpassungen für Tablets */

  .m-mode .ptsc-list.pt-hs-content > .wrap {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
  }                                                                             /* Wrapper-Anpassungen für Tablets */

  /* Formular-Container */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm {
    width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    left: 0 !important;
    position: relative !important;
  }                                                                             /* Formular-Container für Tablets */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }                                                                             /* Formular-Container für Tablets */

  /* Formular-Elemente */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }                                                                             /* Formular-Elemente für Tablets */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea {
    font-size: 20px;                                                        /* Angepasste Schriftgröße für Tablets */
  }                                                                             /* Angepasste Schriftgrößen für Tablets */

  /* Beschriftungen */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title {
    font-size: 16px;
  }                                                                             /* Angepasste Feld-Überschriften für Tablets */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input {
    font-size: 24px !important;
  }                                                                             /* Angepasste Eingabefeld-Labels für Tablets */
}

/* Große Smartphones (max-width: 640px)
   ========================================================================== */
@media screen and (max-width: 640px) {
  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: auto;   
    overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
  }  


  /* Container-Struktur */
  .m-mode .ptsc-list.pt-hs-content {
    width: 100% !important;                                                  /* Volle Breite erzwingen */
    max-width: 100% !important;                                             /* Maximale Breite begrenzen */
    margin: 0 !important;                                                   /* Außenabstände entfernen */
    padding: 0 !important;                                                  /* Innenabstände entfernen */
    overflow-x: hidden !important;                                          /* Horizontales Scrollen verhindern */
    box-sizing: border-box !important;                                      /* Korrekte Breitenberechnung */
    left: 0 !important;                                                     /* Linksbündig ausrichten */
    right: 0 !important;                                                    /* Rechtsbündig ausrichten */
    position: relative !important;                                          /* Relative Positionierung */
  }                                                                             /* Container-Anpassungen für große Smartphones */

  .m-mode .ptsc-list.pt-hs-content > .wrap {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
  }                                                                             /* Wrapper-Anpassungen für große Smartphones */

  /* Formular-Container */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    left: 0 !important;
    position: relative !important;
  }                                                                             /* Formular-Container für große Smartphones */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }                                                                             /* Formular-Container für große Smartphones */

  /* Formular-Elemente */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }                                                                             /* Formular-Elemente für große Smartphones */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea {
    font-size: 19px;                                                        /* Angepasste Schriftgröße für große Smartphones */
  }                                                                             /* Angepasste Schriftgrößen für große Smartphones */

  /* Beschriftungen */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title {
    font-size: 16px;
  }                                                                             /* Angepasste Feld-Überschriften für große Smartphones */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input {
    font-size: 19px !important;
  }                                                                             /* Angepasste Eingabefeld-Labels für große Smartphones */
}

/* Smartphone (max-width: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {

  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: auto;   
    overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
  }  


  /* Container und Abstände */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm {
    padding: 10px !important;                                               /* Reduzierter Innenabstand */
  }                                                                             /* Kompaktere Abstände für Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner {
    padding: 0 !important;
  }                                                                             /* Entfernt unnötige Abstände auf Mobilgeräten */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    padding: 0 !important;
  }                                                                             /* Entfernt unnötige Abstände auf Mobilgeräten */

  /* Formular-Elemente */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea {
    font-size: 18px;                                                        /* Kleinere Schrift für Mobile */
  }                                                                             /* Kleinere Schriftgrößen für Mobilgeräte */

  /* Beschriftungen */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title {
    font-size: 16px;
    letter-spacing: 0.6px;
  }                                                                             /* Angepasste Feld-Überschriften für Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input {
    font-size: 24px !important;
  }                                                                             /* Angepasste Eingabefeld-Labels für Mobilgeräte */

  /* Submit-Button */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn,
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] {
    width: 100%;                                                            /* Button volle Breite */
    max-width: none;                                                        /* Keine maximale Breite */
    font-size: 24px;                                                        /* Angepasste Schriftgröße */
  }                                                                             /* Volle Breite für Submit-Button auf Mobilgeräten */
}

/* Kleine Smartphones (max-width: 320px)
   ========================================================================== */
@media screen and (max-width: 320px) {

  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: auto;   
    overflow: visible;                                                          /* Höhe von dem Kntaktblock 71vh */
  }  


  /* Container und Abstände */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm {
    padding: 8px !important;                                               /* Minimaler Innenabstand */
  }                                                                             /* Sehr kompakte Abstände für kleine Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner {
    padding: 0 !important;
  }                                                                             /* Entfernt unnötige Abstände auf kleinen Mobilgeräten */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt {
    padding: 0 !important;
  }                                                                             /* Entfernt unnötige Abstände auf kleinen Mobilgeräten */

  /* Formular-Elemente */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea {
    font-size: 16px;                                                        /* Kleine Schrift für kleine Mobile */
  }                                                                             /* Kleinere Schriftgrößen für kleine Mobilgeräte */

  /* Beschriftungen */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title {
    font-size: 14px;
    letter-spacing: 0.5px;
  }                                                                             /* Angepasste Feld-Überschriften für kleine Mobilgeräte */

  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input {
    font-size: 16px !important;
  }                                                                             /* Angepasste Eingabefeld-Labels für kleine Mobilgeräte */

  /* Submit-Button */
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn,
  .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] {
    width: 100%;                                                            /* Button volle Breite */
    max-width: none;                                                        /* Keine maximale Breite */
    font-size: 16px;                                                        /* Kleinere Schriftgröße für kleine Geräte */
  }                                                                             /* Volle Breite für Submit-Button auf kleinen Mobilgeräten */
}




/* ==========================================================================
   8. BROWSER-KOMPATIBILITÄT & SPEZIELLE ANPASSUNGEN
   ========================================================================== */

/* Kalender-Icon Styling */
.wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    cursor: pointer;
}                                                                                 /* Basis-Styling für das Kalender-Icon im Light Mode */

/* Dark Mode - Weißes Kalender-Icon */
.site-dark .wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}                                                                                 /* Invertiert die Farbe des Icons im Dark Mode zu Weiß */

/* Firefox Spezifische Anpassungen */
@-moz-document url-prefix() {
    .wpcf7-form .grotec-kontakt input[type="date"] {
        position: relative;
        -moz-appearance: none;
    }                                                                             /* Entfernt Standard Firefox Datepicker-Styling */
    
    .wpcf7-form .grotec-kontakt input[type="date"]::-moz-calendar-picker-indicator {
        background: transparent;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
    }                                                                             /* Positioniert und stylt den Firefox Datepicker */
}

/* Safari/iOS Spezifische Anpassungen */
@supports (-webkit-touch-callout: none) {
    .wpcf7-form .grotec-kontakt input[type="date"] {
        -webkit-appearance: none;
        display: inline-flex;
    }                                                                             /* Optimiert die Darstellung für Safari und iOS Geräte */
}

/* Edge Spezifische Anpassungen */
@supports (-ms-ime-align: auto) {
    .wpcf7-form .grotec-kontakt input[type="date"]::-ms-clear,
    .wpcf7-form .grotec-kontakt input[type="date"]::-ms-reveal {
        display: none;
    }                                                                             /* Entfernt Standard Edge Clear-Buttons */
}

/* Internet Explorer Fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .wpcf7-form .grotec-kontakt input[type="date"] {
        position: relative;
        padding-right: 35px;
    }                                                                             /* Korrigiert die Darstellung im Internet Explorer */
}

/* Mobile Anpassungen für Touch-Geräte */
@media (hover: none) and (pointer: coarse) {
    .wpcf7-form .grotec-kontakt input[type="date"] {
        font-size: 16px !important;
        min-height: 44px;
    }                                                                             /* Verhindert iOS Zoom und verbessert Touch-Bedienung */
    
    .wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }                                                                             /* Vergrößert das Kalender-Icon für Touch-Geräte */
}

/* Allgemeine Browser-Kompatibilitäts-Fixes */
.wpcf7-form .grotec-kontakt {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}                                                                                 /* Verbessert die Textdarstellung über alle Browser */

/* Flexbox Fallbacks für ältere Browser */
.wpcf7-form .grotec-kontakt .form,
.wpcf7-form .grotec-kontakt .form-fields,
.wpcf7-form .grotec-kontakt [class^="field-group-"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}                                                                                 /* Stellt Flexbox-Kompatibilität für ältere Browser sicher */

/* Transition Fallbacks */
.wpcf7-form .grotec-kontakt input:not([type="submit"]),
.wpcf7-form .grotec-kontakt textarea,
.wpcf7-form .grotec-kontakt select,
.wpcf7-form .grotec-kontakt .submit-btn {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}                                                                                 /* Gewährleistet sanfte Übergänge in allen Browsern */

/* Box-Sizing Fallbacks */
.wpcf7-form .grotec-kontakt *,
.wpcf7-form .grotec-kontakt *:before,
.wpcf7-form .grotec-kontakt *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}                                                                                 /* Einheitliche Box-Berechnung über alle Browser */

/* Placeholder Opacity Fix für Firefox */
.wpcf7-form .grotec-kontakt input::-moz-placeholder,
.wpcf7-form .grotec-kontakt textarea::-moz-placeholder {
    opacity: 1;
}                                                                                 /* Korrigiert Placeholder-Transparenz in Firefox */

/* Input Autofill Styling */
.wpcf7-form .grotec-kontakt input:-webkit-autofill,
.wpcf7-form .grotec-kontakt input:-webkit-autofill:hover,
.wpcf7-form .grotec-kontakt input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}                                                                                 /* Verhindert unerwünschte Autofill-Hintergrundfarben */

/* ================================
   KONTAKTFORMULAR FLUID DESIGN EXTENSION
   Für Desktop-Auflösungen 1024px - 2560px
   Basis: 1920x1080 (bleibt unverändert)
   Mobile CSS (max-width: 1023px) bleibt unverändert
   ================================ */

/* Fluid Design Variables für Kontaktformular */
:root {
  /* Kontaktformular Typography Scale */
  --kontakt-label-title-font: clamp(14px, 1.2vw, 18px);           /* 14px - 18px */
  --kontakt-label-input-font: clamp(18px, 1.8vw, 24px);           /* 18px - 24px (Basis: 22px bei 1920px) */
  --kontakt-placeholder-font: clamp(18px, 1.8vw, 24px);           /* 18px - 24px (Basis: 22px bei 1920px) */
  --kontakt-submit-font: clamp(16px, 1.6vw, 20px);                /* 16px - 20px */
  
  /* Kontaktformular Spacing Scale */
  --kontakt-container-padding: clamp(15px, 2vw, 30px);            /* 15px - 30px */
  --kontakt-field-margin: clamp(8px, 1.2vw, 18px);                /* 8px - 18px */
  --kontakt-input-padding-v: clamp(8px, 1.2vw, 16px);             /* 8px - 16px */
  --kontakt-input-padding-h: clamp(12px, 1.6vw, 22px);            /* 12px - 22px */
  --kontakt-label-margin-top: clamp(2px, 0.3vw, 6px);             /* 2px - 6px */
  --kontakt-submit-padding-v: clamp(10px, 1.2vw, 16px);           /* 10px - 16px */
  --kontakt-submit-padding-h: clamp(20px, 2.5vw, 32px);           /* 20px - 32px */
  
  /* Kontaktformular Layout Dimensions */
  --kontakt-form-max-width: clamp(600px, 70vw, 800px);            /* 600px - 800px */
  --kontakt-input-min-height: clamp(40px, 4vw, 55px);             /* 40px - 55px */
  --kontakt-textarea-min-height: clamp(80px, 8vw, 130px);         /* 80px - 130px */
  --kontakt-submit-min-height: clamp(40px, 4vw, 52px);            /* 40px - 52px */
  --kontakt-container-height: clamp(65vh, 71vh, 75vh);            /* 65vh - 75vh */
  --kontakt-border-radius: clamp(4px, 0.5vw, 8px);                /* 4px - 8px */
}

/* Desktop-only Fluid Anpassungen für Kontaktformular (1024px - 2560px) */
@media screen and (min-width: 1024px) {
  
  /* Container Fluid Sizing */
  .wpcf7-form .grotec-kontakt {
    height: var(--kontakt-container-height);
    max-width: var(--kontakt-form-max-width);
    padding: var(--kontakt-container-padding);
    font-family: "mundial-narrow-variable", sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Form Container */
  .wpcf7-form .grotec-kontakt .form {
    height: auto;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Form Fields Container */
  .wpcf7-form .grotec-kontakt .form-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: var(--kontakt-field-margin);
    overflow: hidden;
  }
  
  /* Field Groups Fluid Spacing */
  .wpcf7-form .grotec-kontakt [class^="field-group-"] {
    margin-bottom: var(--kontakt-field-margin);
    flex-shrink: 0;
  }
  
  /* Label Titles Fluid Typography */
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: var(--kontakt-label-title-font);
    font-weight: 300;
    font-family: 'mundial-narrow-variable', sans-serif;
    line-height: 1.4;
  }
  
  /* Input Fields Fluid Styling */
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea {
    font-size: var(--kontakt-label-input-font);
    font-weight: 300;
    padding: var(--kontakt-input-padding-v) var(--kontakt-input-padding-h);
    min-height: var(--kontakt-input-min-height);
    border-radius: var(--kontakt-border-radius);
    font-family: 'mundial-narrow-variable', sans-serif;
    box-sizing: border-box;
  }
  
  /* Textarea spezifische Höhe */
  .wpcf7-form .grotec-kontakt textarea {
    min-height: var(--kontakt-textarea-min-height);
    resize: none;
    overflow-y: auto;
  }
  
  /* Textarea komplett linksbündig ohne Abstände */
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left;
    border-left: none;
  }
  
  .wpcf7-form .grotec-kontakt textarea::placeholder {
    padding-left: 0 !important;
    text-align: left;
  }
  
  /* Label Input Styling */
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: var(--kontakt-label-input-font);
    margin-top: var(--kontakt-label-margin-top);
    font-family: 'mundial-narrow-variable', sans-serif;
  }
  
  /* Placeholder Fluid Typography */
  .wpcf7-form .grotec-kontakt input::placeholder,
  .wpcf7-form .grotec-kontakt textarea::placeholder {
    font-size: var(--kontakt-placeholder-font) !important;
    font-weight: 300;
    font-family: 'mundial-narrow-variable', sans-serif;
  }
  
  .wpcf7-form .grotec-kontakt input::-webkit-input-placeholder,
  .wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder {
    font-size: var(--kontakt-placeholder-font) !important;
    font-weight: 300;
  }
  
  .wpcf7-form .grotec-kontakt input::-moz-placeholder,
  .wpcf7-form .grotec-kontakt textarea::-moz-placeholder {
    font-size: var(--kontakt-placeholder-font) !important;
    font-weight: 300;
  }
  
  /* Submit Button Fluid Styling */
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: var(--kontakt-submit-font);
    padding: var(--kontakt-submit-padding-v) var(--kontakt-submit-padding-h);
    min-height: var(--kontakt-submit-min-height);
    border-radius: var(--kontakt-border-radius);
    font-weight: 300;
    font-family: 'mundial-narrow-variable', sans-serif;
    margin-top: var(--kontakt-field-margin);
  }
}

/* Spezielle Anpassungen für 1024×768 (sehr wichtig!) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  :root {
    --kontakt-container-height: 68vh;
    --kontakt-field-margin: clamp(6px, 0.8vw, 10px);
    --kontakt-input-padding-v: clamp(6px, 0.8vw, 10px);
    --kontakt-input-padding-h: clamp(10px, 1.2vw, 16px);
    --kontakt-input-min-height: clamp(35px, 3.5vw, 42px);
    --kontakt-textarea-min-height: clamp(65px, 6.5vw, 85px);
    --kontakt-submit-min-height: clamp(35px, 3.5vw, 42px);
  }
  
  .wpcf7-form .grotec-kontakt {
    max-width: clamp(500px, 60vw, 650px);
    padding: clamp(10px, 1.5vw, 20px);
    margin-left: 150px;
  }
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.3;
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(16px, 1.5vw, 19px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(14px, 1.3vw, 17px);
  }
}

/* Spezielle Anpassungen für 1025px - 1279px (1280×1024) */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  :root {
    --kontakt-container-height: 69vh;
    --kontakt-field-margin: clamp(8px, 1vw, 12px);
    --kontakt-input-min-height: clamp(38px, 3.8vw, 45px);
    --kontakt-textarea-min-height: clamp(75px, 7.5vw, 95px);
    --kontakt-submit-min-height: clamp(38px, 3.8vw, 45px);
  }
  
  .wpcf7-form .grotec-kontakt {
    max-width: clamp(550px, 65vw, 700px);
    padding: clamp(12px, 1.8vw, 25px);
  }
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(13px, 1.1vw, 16px);
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(17px, 1.6vw, 20px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(15px, 1.4vw, 18px);
  }
}

/* Spezielle Anpassungen für 1280px - 1359px (1360×768) */
@media screen and (min-width: 1280px) and (max-width: 1359px) {
  :root {
    --kontakt-container-height: 70vh;
    --kontakt-field-margin: clamp(10px, 1.2vw, 14px);
    --kontakt-input-min-height: clamp(40px, 4vw, 48px);
    --kontakt-textarea-min-height: clamp(80px, 8vw, 105px);
    --kontakt-submit-min-height: clamp(40px, 4vw, 48px);
  }
  
  .wpcf7-form .grotec-kontakt {
    max-width: clamp(600px, 68vw, 750px);
    padding: clamp(15px, 2vw, 28px);
  }
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(14px, 1.15vw, 17px);
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(18px, 1.7vw, 21px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(16px, 1.5vw, 19px);
  }
}

/* Spezielle Anpassungen für 1360px - 1399px (1366×768 - sehr wichtig!) */
@media screen and (min-width: 1360px) and (max-width: 1399px) {
  :root {
    --kontakt-container-height: 65vh;
    --kontakt-field-margin: clamp(4px, 0.6vw, 8px);
    --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px);
    --kontakt-input-padding-h: clamp(8px, 1vw, 14px);
    --kontakt-input-min-height: clamp(32px, 3.2vw, 38px);
    --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px);
    --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px);
  }
  
  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: 72vh;   
    overflow: hidden;                                                          /* Höhe von dem Kntaktblock 71vh */
  }       



  #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input {
    margin: 0 0 0 0;                                                           /* Kein Abstand zwischen label-title und label-input */
    padding: 0;                                                                /* Kein Padding */
    line-height: 2;                                                           /* Kompakte Zeilenhöhe */
    min-width: 149%;
    /*! min-height: 17%; */
  }
  
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(11px, 1vw, 14px);
    line-height: 1.2;
    margin-bottom: clamp(3px, 0.5vw, 6px);
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(14px, 1.3vw, 17px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(13px, 1.2vw, 16px);
    padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px);
  }
}

/* Spezielle Anpassungen für 1400px - 1679px (1440×900 - sehr wichtig!) */
@media screen and (min-width: 1400px) and (max-width: 1679px) {
  :root {
    --kontakt-container-height: 65vh;
    --kontakt-field-margin: clamp(4px, 0.6vw, 8px);
    --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px);
    --kontakt-input-padding-h: clamp(8px, 1vw, 14px);
    --kontakt-input-min-height: clamp(32px, 3.2vw, 38px);
    --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px);
    --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px);
  }
  
  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: 72vh;   
    overflow: hidden;                                                          /* Höhe von dem Kntaktblock 71vh */
  }       



  #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input {
    margin: 0 0 0 0;                                                           /* Kein Abstand zwischen label-title und label-input */
    padding: 0;                                                                /* Kein Padding */
    line-height: 2;                                                           /* Kompakte Zeilenhöhe */
    min-width: 149%;
    /*! min-height: 17%; */
  }
  
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(11px, 1vw, 14px);
    line-height: 1.2;
    margin-bottom: clamp(3px, 0.5vw, 6px);
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(14px, 1.3vw, 17px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(13px, 1.2vw, 16px);
    padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px);
  }
}

/* Spezielle Anpassungen für 1680px - 1919px */
@media screen and (min-width: 1680px) and (max-width: 1919px) {
  :root {
    --kontakt-container-height: 65vh;
    --kontakt-field-margin: clamp(4px, 0.6vw, 8px);
    --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px);
    --kontakt-input-padding-h: clamp(8px, 1vw, 14px);
    --kontakt-input-min-height: clamp(32px, 3.2vw, 38px);
    --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px);
    --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px);
  }
  
  #kontakt-grotec-id .wpcf7-form .grotec-kontakt {
    margin-top: 0px;                                                                    /* Entfernt äußere Abstände */
    padding: 0;                                                                   /* Entfernt innere Abstände */
    font-weight: 300;                                                            /* Setzt leichte Schriftstärke */
    font-family: 'mundial-narrow-variable', sans-serif;                          /* Setzt die korrekte Schriftart */
    width: 100%;                                                                 /* Nutzt volle verfügbare Breite */
    box-sizing: border-box;                                                   /* Inkludiert Padding in Breitenberechnung */
    height: 72vh;   
    overflow: hidden;                                                          /* Höhe von dem Kntaktblock 71vh */
  }       



  #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input {
    margin: 0 0 0 0;                                                           /* Kein Abstand zwischen label-title und label-input */
    padding: 0;                                                                /* Kein Padding */
    line-height: 2;                                                           /* Kompakte Zeilenhöhe */
    min-width: 149%;
    /*! min-height: 17%; */
  }
  
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: clamp(11px, 1vw, 14px);
    line-height: 1.2;
    margin-bottom: clamp(3px, 0.5vw, 6px);
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: clamp(14px, 1.3vw, 17px);
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: clamp(13px, 1.2vw, 16px);
    padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px);
  }
}

/* Spezielle Anpassungen für sehr große Bildschirme (2560×1440+) */
@media screen and (min-width: 2560px) {
  :root {
    --kontakt-container-height: 72vh;
    --kontakt-field-margin: min(20px, 1.8vw);
    --kontakt-input-min-height: min(60px, 5.5vw);
    --kontakt-textarea-min-height: min(140px, 12vw);
    --kontakt-submit-min-height: min(55px, 5vw);
    --kontakt-container-padding: min(40px, 3vw);
    --kontakt-input-padding-v: min(18px, 1.6vw);
    --kontakt-input-padding-h: min(28px, 2.4vw);
    --kontakt-submit-padding-v: min(16px, 1.4vw);
    --kontakt-submit-padding-h: min(38px, 3.2vw);
    --kontakt-border-radius: min(10px, 0.8vw);
  }
  
  .wpcf7-form .grotec-kontakt {
    max-width: min(900px, 70vw);
  }
  
  .wpcf7-form .grotec-kontakt .label-title {
    font-size: min(20px, 1.3vw);
    font-weight: 300;
    line-height: 1.4;
  }
  
  .wpcf7-form .grotec-kontakt input:not([type="submit"]),
  .wpcf7-form .grotec-kontakt textarea,
  .wpcf7-form .grotec-kontakt .label-input {
    font-size: min(26px, 1.9vw);
    font-weight: 300;
  }
  
  .wpcf7-form .grotec-kontakt textarea.label-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .wpcf7-form .grotec-kontakt input::placeholder,
  .wpcf7-form .grotec-kontakt textarea::placeholder,
  .wpcf7-form .grotec-kontakt input::-webkit-input-placeholder,
  .wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder,
  .wpcf7-form .grotec-kontakt input::-moz-placeholder,
  .wpcf7-form .grotec-kontakt textarea::-moz-placeholder {
    font-size: min(26px, 1.9vw) !important;
    font-weight: 300;
  }
  
  .wpcf7-form .grotec-kontakt .submit-btn {
    font-size: min(22px, 1.6vw);
    font-weight: 300;
  }
  
  .wpcf7-form .grotec-kontakt .label-input {
    margin-top: min(8px, 0.6vw);
  }
}

/* Ende Kontaktformular Fluid Design Extension */
  
