/*
 Theme Name:  Layers for Elementor Child
 Theme URI:   https://example.com/
 Description: Child-Theme für "Layers for Elementor" (by Elementor).
 Author:      Rezo Galstyan
 Author URI:  https://example.com/
 Template:    layers-elementor
 Version:     1.0.0
 License:     GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: layers-for-elementor-child
*/

/* 
 * Hinweise:
 * - Wenn dein Eltern-Theme-Ordner NICHT "layers-elementor" heißt (z. B. "layerswp" o.Ä.),
 *   ändere den Wert bei "Template:" auf den exakten Verzeichnisnamen unter /wp-content/themes/.
 */

/* Custom Styles kommen unterhalb. Beispiel-Variablen & Baselines (REM, wie gewünscht) */
:root{
  --color-primary:#323737;
  --color-accent:#b1cb09;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius-1: .5rem;
}

html{ font-size: 100%; } /* 1rem = 16px Standard */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }



/*CF7 Kontaktformular Anpassungen */

/* --- Grid Layout --- */
.form-row {
  display: flex;
  margin: 0 0 1.5rem 0;
  flex-direction: column; /* Standard: einspaltig */
}

.form-col {
  flex: 1;
}

.form-col label {
	font-size: 1rem;
  display: block;
  margin-bottom: .5rem;
  font-weight: 500;
}

/* --- Allgemeines Styling --- */
.wpcf7-form label {
    font-weight: 300;
	font-size: 1rem;
	margin-top: 1.5rem;
}

.wpcf7-form input,
.wpcf7-form textarea {
  background-color: #f7f7f7;
  font-size: 1rem;
  max-width: 100%;
  padding: 1.35rem 1rem;
  transition: background-color .3s ease, border-color .3s ease;
  color: var(--e-global-color-primary, #323737);
  border: 1px solid #ccc;
  border-radius: .5rem;
}

.wpcf7-form textarea {
  min-height: 6rem;
  resize: vertical;
}
.wpcf7-form-control-wrap label {
	margin-top: 0;
	}

.wpcf7-form input[type="file"] {
  padding: .7rem 1rem;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: .5rem;
}

/* Hover- & Fokus-States */
.wpcf7-form input:hover,
.wpcf7-form textarea:hover,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  background-color: #D7E682;
  border-color: #D7E682;
  outline: none;
}

.wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: center;
}

.wpcf7-list-item-label {
  font-weight: 300;
  font-size: 1rem;
  margin-left: .5rem;
}

.wpcf7-list-item-label a {
  color: var(--e-global-color-accent);
  font-size: .85rem;
  transition:  .75s;
}

.wpcf7-list-item-label a:hover {
    border-bottom: 1px solid var(--e-global-color-accent);;
}
/* --- Dropdown Styling --- */
.wpcf7-form select {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: .5rem;
  font-size: 1rem;
  padding: 1rem;
  color: #323737;
  width: 100%;
  min-height: 3.15rem;
  transition: background-color .3s ease, border-color .3s ease;
}

.wpcf7-form select option {
  color: #323737;
  background-color: #D7E682;
}

.wpcf7-form select:hover,
.wpcf7-form select:active,
.wpcf7-form select:focus {
  background-color: #D7E682;
  border-color: #D7E682;
  color: #323737;
  outline: none;
}

/* --- Arbeitszeit-Container --- */
.form-row-arbeitszeit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* alles vertikal mittig */
  margin: 3rem 0 1.5rem 0;
  gap: 1rem 2rem;            /* Abstand zwischen Zeilen (1rem) und Spalten (2rem) */
}

.form-row-arbeitszeit .form-col-100 {
  flex: 0 0 33%;
  max-width: 33%;
}

.form-row-arbeitszeit .form-col-25 {
  flex: 0 0 11.1%;
  max-width: 20%;
}

.form-row-arbeitszeit .form-col-50 {
  flex: 0 0 33%;
  max-width: 33%;
  display: flex;
  align-items: center;        /* Checkbox + Label mittig */
  gap: .5rem;                 /* Abstand zwischen Checkbox und Label */
}


/* --- Submit Button --- */
.wpcf7-form-control.wpcf7-submit {
  background-color: #b1cb09;
  border-radius: 24px;
  margin: 3rem 0 0 0;
  padding: 1rem 5rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color .3s ease, color .3s ease;
}

.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #97b500;
  color: #fff;
}

/* --- Success Message --- */
.wpcf7 form.sent .wpcf7-response-output {
  border: 2px solid #b1cb09;
  font-size: 1.25rem;
  border-radius: .5rem;
  padding: 1rem;
  background-color: #fafff0;
}

/* --- MEDIA QUERIES --- */

@media all and (max-width: 767px) {
	/*Top Header Bar*/
.top-header-bar {background-color: var(--e-global-color-eea890d);}
	}
	
/* Bis 1023px: Inputs/Textareas immer 100% */
@media (max-width: 1023px) {
  .wpcf7-form input,
  .wpcf7-form textarea,
  .wpcf7-form select,
  .wpcf7-select {
    width: 100%;
  }
  
  .form-row-arbeitszeit .form-col-100 {
  flex: 0 0 100%;
  max-width: 100%;
}

.form-row-arbeitszeit .form-col-25 {
  flex: 0 0 20%;
  max-width: 20%;
}

.form-row-arbeitszeit .form-col-50 {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  align-items: center;        /* Checkbox + Label mittig */
  gap: .5rem;                 /* Abstand zwischen Checkbox und Label */
}
}

/* Ab 1024px: 2 Spalten aktivieren + Abstände */
@media (min-width: 1024px) {
	
  .form-row {
    flex-direction: row;
  }
  .form-col:not(:last-child) {
    margin-right: 2rem; /* Abstand zwischen den Spalten */
  }
  .form-row-arbeitszeit .form-col:not(:last-child) {
    margin-right: 2rem; /* auch für Arbeitszeit-Spalten */
  }
}

/* Tablets (769px–1023px): alle Felder 100%, nur .form-col-10 = 50% nebeneinander */
@media (min-width: 769px) and (max-width: 1023px) {
  .form-row {
    flex-direction: column; /* Standard einspaltig */
  }
  .form-row-arbeitszeit {
    flex-direction: row; /* Ausnahme: Arbeitszeit bleibt Reihe */
    flex-wrap: wrap;
  }
  .form-row-arbeitszeit .form-col-10 {
    flex: 0 0 50%; /* zwei Spalten à 50% */
  }
  
  .form-row-arbeitszeit .form-col-50 {
  flex: 0 0 70%;
  max-width: 70%;
}
  .form-row-arbeitszeit .form-col:not(:last-child) {
    margin-right: 2rem;
  }
}