/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.0
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ===== Ehle Configurator Styles (source: custom-styles.css) ===== */
/* Standard-Schriftgröße für den gesamten Body */
body {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
		background:#fff;
}

/* Responsiver Text für Überschriften */
h1 {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: bold;
}option1-only

h2 {
    font-size: clamp(20px, 4vw, 36px);
    font-weight: bold;
}

h3 {
    font-size: clamp(18px, 3.5vw, 30px);
    font-weight: bold;
} 
h4 {
    font-size: clamp(16px, 1.5vw, 22px) !important;
	  font-weight: bold;
		margin: 15px auto;
}

h5 {
    font-size: clamp(15px, 1.5vw, 20px) !important;
	  font-weight: bold;
		margin: 15px auto;
}
/* Responsiver Text für normale Absätze */
.radio-text {
    font-size: clamp(14px, 1.5vw, 20px);
}

/* Responsiver Text für Buttons */
button {
    font-size: clamp(12px, 1.2vw, 18px);
    padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
}

/* Responsive Schriftgröße für Labels */
label, strong, li, p {
    font-size: clamp(14px, 1.4vw, 18px);
}

/* Responsiver Text für Formularfelder */
input,
textarea,
select {
    font-size: clamp(14px, 1.4vw, 18px);
    padding: clamp(8px, 1vw, 12px);
}

/* Kleinere Schrift für kleinere Displays */
@media (max-width: 768px) {
    body {
        font-size: clamp(12px, 4vw, 16px);
    }

    h1 {
        font-size: clamp(20px, 6vw, 40px);
    }

    h2 {
        font-size: clamp(18px, 5vw, 32px);
    }

    h3 {
        font-size: clamp(16px, 4vw, 28px);
    }

    p {
        font-size: clamp(12px, 3vw, 18px);
    }

    button {
        font-size: clamp(12px, 3vw, 16px);
        padding: 10px 15px;
    }
}

hr {border:none; background:#ccc; height:1px;}


/* Allgemeine Fokus-Styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

/* Full-Width-Wrapper für Hintergrundfarbe */
.full-width-section {
    width: 100%!important; /* Geht über die gesamte Bildschirmbreite */
	  padding: 0;
		background:#fff;
}

.full-width-section .inner-container {
    max-width: 1280px !important;
    margin: 0 auto; /* Zentriert den Inhalt */
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
}

@media (max-width: 768px) {
    .full-width-section .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Hintergrundfarbe für bestimmte Abschnitte */
.frm_fields_container {
   /*  background-color: #f9f9f9; */
    border-radius: 8px;
}

/* Radio-Optionen: Gruppenhintergrund */
#frm_field_9_container {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* Grid-Layouts */
.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Abstand zwischen den Spalten */
}

.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
    gap: 20px; /* Abstand zwischen den Checkboxen */
}


.four-column-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Vier Spalten */
    gap: 20px; /* Abstand zwischen den Checkboxen */
	  margin-bottom:2%;
}

/* Grid-Layout für die vier Checkbox-Optionen */
.four-column-grid-hd {
    display: flex;
    grid-template-columns: repeat(4, auto);  /* Vier Spalten mit automatischer Breite */
    gap: 10px; /* Geringer Abstand zwischen den Spalten */
	  justify-content: left; /* Zentriert den gesamten Grid-Container */
    align-items: center; /* Vertikale Ausrichtung */
		border:1px solid #000;
		padding: 1% 5%;
 
}

.four-column-grid-hd  .custom-checkbox .checkmark {top:0px; right:0px; width:15px; height:15px; font-size: 14px;
    line-height: 17px;}
/* Responsive Anpassungen für kleinere Geräte */
@media (max-width: 768px) {
    .two-column-grid,
    .four-column-grid {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf kleinen Bildschirmen */
        gap: 15px;
    }
}

/* Custom Radio Container Styling */
.custom-radio,
.custom-checkbox {
    display: flex;
    flex-direction: column;
    align-items: left;
    cursor: pointer;
    /* padding: 10px;*/
    border-radius: 5px;
    text-align: left;
    position: relative; /* Kontext für das Checkmark-Icon */
    transition: all 0.3s ease;
		
}

.custom-radio:hover,
.custom-checkbox:hover {
    border-color: #007bff;
    /* background-color: #eff4f7; */
}

/* Verstecke die Standard-Input-Elemente */
.custom-radio input[type="radio"],
.custom-checkbox input[type="checkbox"] {
    display: none !important;
}

/* Bilddarstellung */
.radio-image,
.checkbox-image {
    max-width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
		width:100%;
}

/* Bildrahmen hervorheben, wenn ausgewählt */
.custom-radio input[type="radio"]:checked + .radio-image,
.custom-checkbox input[type="checkbox"]:checked + .checkbox-image {
    transform: scale(1.02); /* Leicht vergrößern */
}

/* Hover-Effekt für Bilder */
.custom-radio:hover .radio-image,
.custom-checkbox:hover .checkbox-image {
    transform: scale(1.05); /* Bild etwas vergrößern beim Hover */
 
}

/* Textdarstellung */
.radio-text,
.checkbox-text {
    color: #333;
    margin-top: 5px;
    transition: color 0.3s ease;
		font-weight:300;
	    padding: 0px 10px;
}

/* Langtext standardmäßig ausblenden */
.langtext {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    display: none; /* Standardmäßig ausgeblendet */
    transition: color 0.3s ease;
}

.text-kabelwahl {float:none; display:block; border-left: none!important; margin-bottom:10px;}

/* Rahmen, Bild und Text ändern bei Checked */
.custom-radio input[type="radio"]:checked ~ .radio-text,
.custom-checkbox input[type="checkbox"]:checked ~ .checkbox-text {
   /*  font-weight: bold; Text fett machen */
    /*color: #007bff;  Textfarbe ändern */
}

.custom-radio input[type="radio"]:checked ~ .langtext,
.custom-checkbox input[type="checkbox"]:checked ~ .langtext {
    display: block; /* Langtext anzeigen */
}

/* Checkmark-Icon für Radio-Buttons und Checkboxen */
.custom-radio .checkmark,
.custom-checkbox .checkmark {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Runde Form */
    background-color: #ccc; /* Grauer Kreis */
    font-size: 16px;
    color: transparent; /* Standardmäßig kein Haken sichtbar */
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    transition: all 0.3s ease;
    z-index: 10; /* Überlagert andere Inhalte */
}

/* Checkmark sichtbar machen, wenn ausgewählt ist */
.custom-radio input[type="radio"]:checked ~ .checkmark,
.custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    color: white; /* Weißer Haken */
    background-color: #2ea3f2; /* Blauer Kreis bei Auswahl */
}

/* Bildrahmen hervorheben, wenn ausgewählt */
.custom-radio input[type="radio"]:checked + .radio-image,
.custom-checkbox input[type="checkbox"]:checked + .checkbox-image {

    transform: scale(1.02); /* Leicht vergrößern */
}

/* Hover-Effekt für Bilder */
.custom-radio:hover .radio-image,
.custom-checkbox:hover .checkbox-image {
    transform: scale(1.05); /* Bild leicht vergrößern */
}

/* Mehr lesen - Button */
.mehr-lesen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2ea3f2;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 8px;
    padding-left: 10px;
}

/* SVG im HTML ausblenden, Icon kommt aus CSS */
.mehr-lesen svg {
    display: none !important;
}

/* Icon rechts neben "Mehr lesen" */
.mehr-lesen::after {
    content: "⊕";
    display: inline-block;
    line-height: 1;
    font-size: 18px;
    color: #0185cf;
    text-decoration: none;
}

/* Aktivzustand: Minus statt Plus */
.mehr-lesen.active::after {
    content: "⊖";
}

/* Standardmäßig ist der Langtext versteckt */
.langtext {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    display: none;
    transition: all 0.3s ease;
}

/* Falls aktiv, wird der Langtext angezeigt */
.langtext.visible {
    display: block;
}

/* Standardmäßig auf dem Desktop sichtbar lassen */
@media (min-width: 768px) {
    .langtext {
        display: block !important; /* Immer sichtbar auf großen Bildschirmen */
    }
    .mehr-lesen {
        display: none !important; /* Button ausblenden */
    }
}

/* Auf Smartphones (max-width: 767px) standardmäßig verstecken */
@media (max-width: 767px) {
    .langtext {
        display: none; /* Standardmäßig ausblenden */
    }
    .mehr-lesen {
        display: inline-block; /* Button anzeigen */
    }

    /* Haspel mobil: Langtext nur über Mehr/Weniger, nicht automatisch bei checked */
    #frm_field_46_container .custom-radio input[type="radio"]:checked ~ .langtext {
        display: none !important;
    }

    #frm_field_46_container .custom-radio input[type="radio"]:checked ~ .langtext.visible {
        display: block !important;
    }

    #frm_field_46_container .custom-radio .langtext.visible {
        display: block !important;
    }

    /* Sonden mobil: Langtext nur über Mehr/Weniger, nicht automatisch bei checked */
    #frm_field_8_container .custom-checkbox input[type="checkbox"]:checked ~ .langtext {
        display: none !important;
    }

    #frm_field_8_container .custom-checkbox input[type="checkbox"]:checked ~ .langtext.visible {
        display: block !important;
    }

    #frm_field_8_container .custom-checkbox .langtext.visible {
        display: block !important;
    }
}



/* Standardmäßig ausgegraute Checkboxen */
#frm_field_8_container input[type="checkbox"]:disabled + .checkbox-image {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
}


/* Verschachtelte Optionen standardmäßig ausblenden */
.nested-options {
    display: none;
    margin-top: 10px;
    padding-left: 20px;
}

.nested-options label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.nested-options .radio-image {
    margin-bottom: 5px;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.nested-options .radio-text {
    color: #333;
    text-align: center;
}

/* Standardmäßig die Checkboxen für Schiebekamerasonden deaktivieren */
#frm_field_8_container input[type="checkbox"] {
    pointer-events: none; /* Keine Interaktion möglich */
    opacity: 0.5; /* Leicht ausgegraut für visuelle Rückmeldung */
    cursor: not-allowed; /* Zeigt an, dass es nicht auswählbar ist */
}

/* Wenn eine der Haspel-Optionen gewählt wird, werden die Checkboxen aktiv */
#radioOption1:checked ~ #frm_field_8_container input[type="checkbox"],
#radioOption2:checked ~ #frm_field_8_container input[type="checkbox"] {
    pointer-events: auto; /* Interaktion erlauben */
    opacity: 1; /* Volle Sichtbarkeit */
    cursor: pointer; /* Zeigt an, dass es auswählbar ist */
}


/* Standardmäßig ausblenden */
.option1-only {
    display: none;
}

/* Sichtbar machen, wenn Option 1 ausgewählt ist */
#radioOption1:checked ~ #frm_field_47_container .option1-only {
    display: grid;
}

/* Verschachtelte Optionen anzeigen, wenn Option 2 ausgewählt ist */
#radioOption2:checked ~ #frm_field_47_container .nested-options {
    display: grid;
}

/* Fehlermeldung */
.frm_error {
    color: #ffffff; /* Textfarbe */
    background-color: #ff4d4f; /* Rotes Hintergrund */
    border: 1px solid #d93025; /* Dunkler Rand */
    padding: 10px; /* Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift */
    margin-top: 10px; /* Abstand zum Feld */
}

/* Animation für die Fehlermeldung */
.frm_error.show {
    animation: fadeIn 0.3s ease-in-out;
}

/* Keyframes für Fade-in-Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Deaktivierte Elemente ausgrauen */
.disabled {
    opacity: 0.5;
    pointer-events: none; /* Blockiert Klicks */
    cursor: not-allowed; /* Visueller Hinweis */
}

.active {
    opacity: 1; /* Volle Sichtbarkeit */
    pointer-events: auto; /* Interaktionen aktivieren */
}

/* =======================================
   Container für beide Optionen (XR60/XR100)
   ======================================= */
.schiebekabel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Immer zwei nebeneinander */
  gap: 20px;
  justify-content: center;
  align-items: start;
}

/* Einzelnes Grid-Item */
.schiebekabel-item {
  display: block;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

/* Label-Layout für Option */
.schiebekabel-item label {
  max-width: 110px;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* Bilddarstellung */
.schiebekabel-item .radio-image {
  width: 100px!important;
  margin-bottom: 5px;
}

/* Text unter dem Bild */
.schiebekabel-item .radio-text {
  font-size: 14px;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

/* Überschrift */
.text-kabelwahl {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

/* =======================================
   Verschachtelte Optionen – XR100
   ======================================= */
/* XR100 – verschachtelte Optionen nebeneinander */
.option2-only .nested-options {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  justify-content: center;
  align-items: start;
  margin-top: 10px;
  width: 100%;
}

/* Einzelne Option kompakter darstellen */
.option2-only .nested-options label {
  max-width: 110px;
  width: 100%;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* Styling einzelner XR100-Option */
.option2-only .nested-options label {
  max-width: 110px;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* ======================
   Sichtbarkeitssteuerung
   ====================== */
.option1-only,
.option2-only {
  display: none; float:left; margin-right: 10px;
}

#radioOption1:checked ~ #frm_field_47_container .option1-only {
  display: grid;
}

#radioOption2:checked ~ #frm_field_47_container .option2-only {
  display: grid;
}



/* ======================
   Responsive Verhalten
   ====================== */
@media (max-width: 768px) {
  .schiebekabel-grid {
    grid-template-columns: repeat(2, 1fr); /* Bleibt zweispaltig */
    gap: 10px;
  }

  .option2-only .nested-options {
    grid-template-columns: repeat(2, 1fr); /* Bleibt zweispaltig */
    gap: 10px;
  }
}

/* Standardmäßig beide verschachtelten Bereiche ausblenden */
.option1-only, .option2-only {
    display: none;
}

/* Wenn Option 1 (XR60) gewählt wurde, zeige option1-only */
#radioOption1:checked ~ #frm_field_47_container .option1-only {
    display: block;
}

/* Wenn Option 2 (XR100) gewählt wurde, zeige option2-only */
#radioOption2:checked ~ #frm_field_47_container .option2-only {
    display: block;
}

.four-items {border:1px solid #000; border-radius:5px; padding: 2% 4% 0% 4%;}

.blue {background:#eff4f7; padding:20px 0px;}
.white {background:#fff;}
.txt-center {text-align:center!important;}
.brd-top {border-top:1px solid #ccc; margin-top:20px!important;}
.pd-20 {padding:20px;}
.mg-0 {margin:0px!important;}
.pd-bt-10 {padding-bottom:10px!important;}
.aussen {top:-10px!important; right:-10px!important;}
.ml-icon {position: absolute; margin-left:5px;}
.brd-5 {border-radius: 5px;}

@media (max-width: 768px) {
  .option2-only .nested-options {
    grid-template-columns: repeat(2, 1fr); /* Zwei nebeneinander */
    gap: 10px;
  }
	ul {padding:0px 20px!important;}	
	.four-items {padding-top:5%!important;}
	.custom-radio .checkmark, .custom-checkbox .checkmark {width: 18px;height: 18px;}
}


/* ----- style new ---------*/
.two-row-radio {    --image-size: 48.1%;}
.checkbox-half-row {--image-size: 99.1%;}
/* Feldcontainer mit Fehler */
.frm_form_field.has-error {
  border: 1px solid #d93025;
  border-radius: 6px;
  background: #fff5f5;
}

/* Label/Überschrift im Fehlerzustand etwas deutlicher */
.frm_form_field.has-error .frm_primary_label h4,
.frm_form_field.has-error label,
.frm_form_field.has-error .radio-text,
.frm_form_field.has-error .checkbox-text {
  color: #b00020;
}

/* Fehlermeldung selbst etwas kompakter */
.frm_error {
  color: #fff;
  background-color: #ff4d4f;
  border: 1px solid #d93025;
  padding: 10px;
  border-radius: 5px;
  font-weight: 700;
  margin-top: 10px;
}

/* Error visibility control */
.frm_error {
  display: none !important;
}

.frm_error.show {
  display: block !important;
}

.js-error {
  display: none;
}

.js-error.show {
  display: block !important;
}

.ehle-js-error {
  display: none;
  color: #fff;
  background-color: #d93025;
  border: 1px solid #b00020;
  padding: 10px;
  border-radius: 5px;
  font-weight: 700;
  margin-top: 10px;
}

.ehle-js-error.show {
  display: block !important;
}

.ehle-privacy-notice {
  background: #f4f8fb;
  border: 1px solid #d7e6ef;
  border-radius: 6px;
  color: #25323a;
  font-size: 14px;
  line-height: 1.45;
  margin: 12px 0;
  padding: 12px 14px;
}

.ehle-privacy-notice p {
  margin: 0;
}

.ehle-privacy-notice p + p {
  margin-top: 6px;
}

.ehle-privacy-notice a {
  color: #0185cf;
  font-weight: 700;
  text-decoration: underline;
}

/* ===== End Ehle Configurator Styles ===== */

/* Force constrained desktop layout for Haspel block */
#frm_field_46_container .frm_opt_container.two-column-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start;
  justify-content: stretch !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#frm_field_46_container .frm_opt_container.two-column-grid > label.custom-radio {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  justify-self: stretch;
}

@media (max-width: 1024px) {
  #frm_field_46_container .frm_opt_container.two-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

/* XR100 Schiebekabel immer nebeneinander */
#frm_field_47_container .nested-options {
  display: grid !important;
  grid-template-columns: repeat(2, 130px) !important;
  gap: 10px !important;
  justify-content: start !important;
  width: auto !important;
}

#frm_field_47_container .nested-options > label.option2-only {
  display: block !important;
  float: none !important;
  width: 130px !important;
  max-width: 130px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-sizing: border-box;
}

#frm_field_47_container .text-kabelwahl {
  white-space: nowrap;
}

@media (max-width: 768px) {
  #frm_field_47_container .nested-options {
    grid-template-columns: 130px !important;
    justify-content: center !important;
  }
}