/* =====================================================================
   Kontaktformular – Komplett-Styles für Visforms (UI-Framework: keines)
   Datei: /media/com_visforms/css/custom/kontakt.css
   Voraussetzung: Formular CSS Klasse = kontaktformular
   ===================================================================== */

/* ---------- Rahmen & Grundlayout ------------------------------------ */

.kontaktformular {
  background: #f9fbfd;
  border: 1px solid #cbd6e2;
  border-radius: 10px;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.kontaktformular h3,
.kontaktformular legend {
  color: #0b3666;
  font-size: 1.4rem;
  margin: 0 0 .6rem;
  border-bottom: 2px solid #cbd6e2;
  padding-bottom: .2rem;
}

/* Abstand zwischen Feldcontainern (div.field… / .vf-field) */
.kontaktformular .vf-field,
.kontaktformular .field { margin-bottom: 16px; }

/* ---------- Labels --------------------------------------------------- */
/* (Bei deinem Setup hängen die "Label-*" Klassen am <label>) */

.kontaktformular label {
  display: block;
  color: #004080;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.25;
}

/* Individuelle Label-Klassen (optional) */
.kontaktformular .label-vorname,
.kontaktformular .label-nachname,
.kontaktformular .label-email,
.kontaktformular .label-telefon,
.kontaktformular .label-strasse,
.kontaktformular .label-plz,
.kontaktformular .label-ort,
.kontaktformular .label-nachricht {}

/* Pflichtstern am Label, wenn Container .required hat */
.kontaktformular .required > label::after {
  content: " *";
  color: #d22;
  font-weight: 700;
}

/* ---------- Eingabefelder -------------------------------------------- */
/* (Bei deinem Setup hängen die "input-*" Klassen am <input>/<textarea>) */

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular input[type="number"],
.kontaktformular textarea,
.kontaktformular select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #98c0e6;
  border-radius: 8px;
  background-color: #eef6ff; /* bewusst -color, kein shorthand */
  font-size: 1rem;
  line-height: 1.3;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .08s ease;
}

/* Hover (dezent) */
.kontaktformular input:hover,
.kontaktformular textarea:hover,
.kontaktformular select:hover {
  border-color: #1a5ebd;
}

/* Fokus – kein "background:" shorthand verwenden */
.kontaktformular input:focus,
.kontaktformular textarea:focus,
.kontaktformular select:focus {
  outline: none;
  border-color: #2b7bd8;
  box-shadow: 0 0 0 3px rgba(43,123,216,.15);
  background-color: #f4faff; /* nur die Farbe ändern */
  transform: scale(1.01);
}

/* Textarea-Größe */
.kontaktformular textarea {
  min-height: 140px;
  resize: vertical;
}

/* Individuelle Input-Klassen (optional weiter verfeinern) */
.kontaktformular .input-vorname,
.kontaktformular .input-nachname,
.kontaktformular .input-email,
.kontaktformular .input-telefon,
.kontaktformular .input-strasse,
.kontaktformular .input-plz,
.kontaktformular .input-ort,
.kontaktformular .input-nachricht {}

/* ---------- Checkboxen / Radios -------------------------------------- */

.kontaktformular input[type="checkbox"],
.kontaktformular input[type="radio"] {
  margin-right: 6px;
  accent-color: #2b7bd8;
}

/* ---------- Buttons --------------------------------------------------- */

.kontaktformular button,
.kontaktformular input[type="submit"] {
  display: inline-block;
  background-image: linear-gradient(90deg, #2b7bd8 0%, #1a5ebd 100%);
  background-size: 200% 100%;
  border: 1px solid #2b7bd8;
  color: #fff;
  font-size: 1rem;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-position .2s ease, transform .08s ease, box-shadow .2s ease;
}

.kontaktformular button:hover,
.kontaktformular input[type="submit"]:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ---------- Validierung / Meldungen ---------------------------------- */

.kontaktformular .error,
.kontaktformular .invalid {
  border-color: #d22 !important;
  background-color: #fff2f2;
}

.kontaktformular .vfform-message {
  border: 1px solid #9bcf7a;
  background: #e8f6df;
  padding: 10px;
  border-radius: 8px;
  color: #306d0e;
  margin-top: 12px;
}

/* ---------- Eingabe-Icons (Background-Images) ------------------------- */
/* Allgemeines Icon-Setup (ein Icon pro Feld, nicht wiederholen) */
.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular textarea {
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 42px;
  transition: all 0.25s ease;
}

/* Sicherheitsnetz, falls woanders ein shorthand kommt */
.kontaktformular .input-vorname,
.kontaktformular .input-nachname,
.kontaktformular .input-email,
.kontaktformular .input-telefon,
.kontaktformular .input-strasse,
.kontaktformular .input-plz,
.kontaktformular .input-ort,
.kontaktformular .input-nachricht { background-repeat: no-repeat; }

/* Konkrete Icons (Bootstrap Icons via CDN) */
.kontaktformular .input-vorname   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/person.svg"); }
/*.kontaktformular .input-nachname  { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/person-fill.svg"); }*/
.kontaktformular .input-email     { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/envelope.svg"); }
.kontaktformular .input-telefon   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/telephone.svg"); }
.kontaktformular .input-strasse   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/geo-alt.svg"); }
.kontaktformular .input-plz       { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/signpost.svg"); }
.kontaktformular .input-ort       { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/building.svg"); }
.kontaktformular .input-nachricht { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chat-square-text.svg"); background-position: 12px 14px; }

/* ---------- Zweispaltiges Layout (optional) --------------------------- */
/* Variante 1 – mit eigenen Container-Klassen (empfohlen):
   Trage pro Feld bei "CSS Klasse des Feldcontainers" z. B. ein:
   field-vorname, field-nachname, field-strasse, field-plz, field-ort
*/
@media (min-width: 700px) {
  .kontaktformular .field-vorname,
  .kontaktformular .field-nachname {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }
  .kontaktformular .field-vorname { margin-right: 8px; }
  .kontaktformular .field-nachname { margin-left: 8px; }

  .kontaktformular .field-strasse { display: block; width: 100%; }

  .kontaktformular .field-plz,
  .kontaktformular .field-ort {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }
  .kontaktformular .field-plz { margin-right: 8px; }
  .kontaktformular .field-ort { margin-left: 8px; }
}

/* Variante 2 – falls du keine Container-Klassen setzen kannst:
   Ersetze unten .field1713 usw. durch DEINE echten Klassen/Nummern
   (per DevTools am <div class="fieldXXXX"> ablesen) */
/*
@media (min-width: 700px) {
  .kontaktformular .field1713,  .kontaktformular .field1714 { display:inline-block; width:calc(50% - 8px); vertical-align:top; }
  .kontaktformular .field1713 { margin-right:8px; }
  .kontaktformular .field1714 { margin-left:8px; }
  .kontaktformular .field1720 { display:block; width:100%; }
  .kontaktformular .field1721, .kontaktformular .field1722 { display:inline-block; width:calc(50% - 8px); vertical-align:top; }
  .kontaktformular .field1721 { margin-right:8px; }
  .kontaktformular .field1722 { margin-left:8px; }
}
*/
/* -------------------------------------------------- */
/* FIX 1: Icons nur auf Inputs, nicht auf Labels      */
/* (damit z. B. input-nachname NICHT das Label trifft)*/
/* -------------------------------------------------- */
.kontaktformular input.input-vorname   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/person.svg"); }
.kontaktformular input.input-nachname  { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/person-fill.svg"); }
.kontaktformular input.input-email     { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/envelope.svg"); }
.kontaktformular input.input-telefon   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/telephone.svg"); }
.kontaktformular input.input-strasse   { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/geo-alt.svg"); }
.kontaktformular input.input-plz       { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/signpost.svg"); }
.kontaktformular input.input-ort       { background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/building.svg"); }

/* Für Textarea (Nachricht), falls du sie als Textarea nutzt: */
.kontaktformular textarea.input-nachricht { 
  background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chat-square-text.svg");
  background-position: 12px 14px;
}

/* Sicherheit: Icon-Basis-Setup (einmal links, nicht kacheln) */
.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular input[type="number"],
.kontaktformular textarea {
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 42px;
}

/* Fokus nur die HintergrundFARBE ändern (kein shorthand "background") */
.kontaktformular input:focus,
.kontaktformular textarea:focus,
.kontaktformular select:focus {
  background-color: #f4faff;
}

/* -------------------------------------------------- */
/* FIX 2: 2-Spalten-Layout mit deinen Feld-IDs        */
/* (Setzen wir mit !important durch)                  */
/* -------------------------------------------------- */
@media (min-width: 700px) {
  /* Vorname + Nachname nebeneinander */
  .kontaktformular .field1713,
  .kontaktformular .field1714 {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    vertical-align: top !important;
  }
  .kontaktformular .field1713 { margin-right: 8px !important; }
  .kontaktformular .field1714 { margin-left: 8px !important; }

  /* Straße vollbreit (liest sich besser) */
  .kontaktformular .field1715 {
    display: block !important;
    width: 100% !important;
  }

  /* PLZ + Ort nebeneinander */
  .kontaktformular .field1716,
  .kontaktformular .field1717 {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    vertical-align: top !important;
  }
  .kontaktformular .field1716 { margin-right: 8px !important; } /* PLZ */
  .kontaktformular .field1717 { margin-left: 8px !important; }  /* Ort */
}

/* Gemeinsame Regel für die Zeilenfelder */
.menge, .einheit {
  display: inline-block;   /* nebeneinander */
  vertical-align: top;     /* gleiche Höhe */
  box-sizing: border-box;
  margin-right: 1%;        /* kleiner Abstand */
}

/* Gesamtes Feld-Wrapper-DIV */
.menge {
  max-width: 36%;
  float:left;
}