/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child Theme für Hello Elementor
Author: Luca Schüpbach
Author URI: https://strahm-glastech.ch
Template: hello-elementor
Version: 1.0
*/

/* ======================================================== */
/* === 1. General Styles                                  === */
/* ======================================================== */

/* ======================================================== */
/* === General Styles === */
/* ======================================================== */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ======================================================== */
/* === Utility / Visibility / Layout-Helpers === */
/* ======================================================== */
/*Hide Slider Media Info*/
.ug-textpanel {
  height: 0 !important;
}

/*Single Service Template Dynamic visibility*/
.inhaltsblock-aktiv-0 {
  display: none !important;
}
.inhaltsblock-aktiv-1 {
  display: flex !important;
}
.inhaltsblock-link-aktiv-0 {
  display: none !important;
}
.inhaltsblock-link-aktiv-1 {
  display: flex !important;
}
.vorteile-aktiv-0 {
  display: none !important;
}
.vorteile-aktiv-1 {
  display: flex !important;
}
.prozess-aktiv-0 {
  display: none !important;
}
.prozess-aktiv-1 {
  display: flex !important;
}
.links-aktiv-0 {
  display: none !important;
}
.links-aktiv-1 {
  display: flex !important;
}
.link2-aktiv-0 {
  display: none !important;
}
.link2-aktiv-1 {
  display: block !important;
}
.link3-aktiv-0 {
  display: none !important;
}
.link3-aktiv-1 {
  display: flex !important;
}
.downloads-aktiv-0 {
  display: none !important;
}
.downloads-aktiv-1 {
  display: flex !important;
}
.download2-aktiv-0 {
  display: none !important;
}
.download2-aktiv-1 {
  display: flex !important;
}
.download3-aktiv-0 {
  display: none !important;
}
.download3-aktiv-1 {
  display: block !important;
}
.speziallink-aktiv-0 {
  display: none !important;
}
.speziallink-aktiv-1 {
  display: flex !important;
}
.show-section-0 {
  display: none !important;
}
.show-section-1 {
  display: flex !important;
}

/* Single Service Template */
#inhaltsblock-1--image-2 {
  position: absolute;
  top: 0;
  bottom: 0; /* volle Höhe vom Container */
  left: 50%;
  transform: translateX(-50%);
  min-width: 80%;
}

#inhaltsblock-1--image-1 {
  position: absolute;
  top: 0;
  bottom: 0; /* volle Höhe vom Container */
  left: 50%;
  transform: translateX(-50%);
  min-width: 80%;
}

.ug-lightbox-top-panel .ug-textpanel {
  height: 30px !important;
}

/* ======================================================== */
/* === Components (Slider, Service Links, CTA-Circle, Testimonials, Vergleichskreis) === */
/* ======================================================== */
/* Service link overview styling */

.service-link p {
  margin: 0;
  padding: 0;
}

.service-title-item .service-link a {
  position: relative;
  text-decoration: none; /* Entfernt die Standard-Unterstreichung */
  color: inherit; /* Verwendet die definierte Standardfarbe */
  transition: color 0.3s ease; /* Smooth transition für die Textfarbe */
}

.service-title-item .service-link a::after {
  content: "";
  position: absolute;
  left: 50%; /* Start in der Mitte */
  bottom: 0; /* Positioniert sich direkt unter dem Text */
  width: 0; /* Anfangsbreite ist 0 */
  height: 3px; /* Höhe der Underline */
  background-color: #006ab2; /* Farbe der Linie */
  bottom: -3px; /* Abstand der Linie vom Text (erhöht um 3px) */
  transform: translateX(-50%); /* Zentriert die Linie */
  transition: width 0.3s ease; /* Animiert die Breite */
}

.service-title-item .service-link a:hover {
  color: #006ab2 !important; /* Textfarbe ändern */
}

.service-title-item .service-link a:hover::after {
  width: 100%; /* Linie füllt den Link-Bereich */
}

.service-title-icon svg {
  transition: fill 0.3s ease; /* Smooth transition für die Farbe */
}

/* Image slider size settings */
.image-slider
  .slider-format-Normal
  .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
  max-width: 30% !important;
  height: 600px !important;
}
.image-slider
  .slider-format-Hochformat
  .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
  max-width: 18% !important;
  height: 650px !important;
}
.image-slider
  .slider-format-Querformat
  .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
  max-width: 60% !important;
  height: 600px !important;
}

/* Hide Recaptcha Logo */
.grecaptcha-logo,
.grecaptcha-badge {
  display: none !important;
}

.qlwapp__time {
  opacity: 0 !important;
  height: 0 !important;
}

.cta-circle {
  height: 125px;
  width: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.25rem;
}

.testimonial-text-container {
  text-align: center;
  color: #363636;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.testimonial-text-container::before {
  content: "";
  position: absolute;
  top: 0; /* fixiert Höhe */
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background-color: rgba(0, 106, 178, 0.1); /* sanftes Blau */
  border-radius: 50%;
  z-index: -1; /* liegt hinter dem Text, aber innerhalb des Containers */
}
.testimonial-text-container.first {
  padding: 0 10px;
}
.testimonial-text-container.middle {
  text-align: center;
  color: #161616;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 20px;
  padding: 0 30px;
}
.testimonial-text-container.middle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  min-height: 220px;
  background-color: #006ab233; /* kräftiges Blau */
  border-radius: 50%;
  z-index: -1;
}
.testimonial-author {
  text-align: center;
}
.testimonial-name {
  font-weight: 500;
}

.straight-arrow {
  filter: invert(1) brightness(2);
}
.comparison-overlay-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #006ab2;
  border: solid white 6px;
  height: 120px;
  width: 120px;
  border-radius: 100px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

/* ======================================================== */
/* === Landing Page Küche Kontakt + Hero Form === */
/* ======================================================== */
/* Formular Landing Page V2 Küche*/

.elementor-message.elementor-message-success.elementor-message-svg {
  color: #fff !important;
}

.lp-kueche-section-hero {
  height: 100vh;
  position: relative; /* Grundlage für das Overlay */
  z-index: 0; /* stellt sicher, dass das Pseudo-Element darunter liegt */
}

.lp-kueche-section-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.7)
  );
  pointer-events: none; /* Overlay blockt keine Klicks darunter */
  z-index: 1; /* sitzt über dem Bild, aber unter dem Inhalt */
}

/* Damit dein eigentlicher Hero-Inhalt (Text, Buttons etc.) oben bleibt: */
.lp-kueche-section-hero > .e-con-inner,
.lp-kueche-section-hero .elementor-widget-container {
  position: relative;
  z-index: 2;
}

/* LP Küche Kontakt bleibt unverändert */
.lp-kueche-section-contact {
  background-image: linear-gradient(
    to right bottom,
    rgb(17, 24, 39),
    rgb(30, 58, 138),
    rgb(17, 24, 39)
  );
}

.elementor-element-083a3a3 {
  max-width: 28rem;
}
/* Inputs & Textareas */

.elementor-field-group-field_f5c29f7 {
  margin-top: 1rem !important;
}
.lp-kueche-section-contact .elementor-form .elementor-field-textual,
.lp-kueche-section-contact .elementor-form textarea.elementor-field-textual,
.lp-kueche-section-hero .elementor-form .elementor-field-textual,
.lp-kueche-section-hero .elementor-form textarea.elementor-field-textual {
  width: 100%;
  background-color: #ffffff1a !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  color: #fff !important;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.lp-kueche-section-contact .elementor-form textarea.elementor-field-textual,
.lp-kueche-section-hero .elementor-form textarea.elementor-field-textual {
  height: 5rem;
}

/* Feste Höhe wie gehabt */
.lp-kueche-section-contact .elementor-form .elementor-field-textual,
.lp-kueche-section-hero .elementor-form .elementor-field-textual {
  height: 2.5rem;
}

/* Abstand zwischen den Zeilen */
.lp-kueche-section-contact
  .elementor-form
  .elementor-field-group
  + .elementor-field-group,
.lp-kueche-section-hero
  .elementor-form
  .elementor-field-group
  + .elementor-field-group {
  margin-top: 1rem;
  margin-bottom: 20px;
}

.lp-kueche-section-contact .elementor-field-group-field_d657690,
.lp-kueche-section-hero .elementor-field-group-field_d657690 {
  margin-top: 0 !important;
}

/* Spalten-Abstände (2-Spalten-Layout) */
.lp-kueche-section-contact .elementor-form .elementor-col-50,
.lp-kueche-section-hero .elementor-form .elementor-col-50 {
  padding-right: 5px;
}

.lp-kueche-section-contact .elementor-form .elementor-col-50:nth-child(2n),
.lp-kueche-section-hero .elementor-form .elementor-col-50:nth-child(2n) {
  padding-left: 5px !important;
}

/* Labels ausblenden */
.lp-kueche-section-contact .elementor-form label,
.lp-kueche-section-hero .elementor-form label {
  display: none;
}

/* Placeholder-Text weiss */
.lp-kueche-section-contact .elementor-form ::placeholder,
.lp-kueche-section-hero .elementor-form ::placeholder {
  color: #fff;
  opacity: 1;
}
.lp-kueche-section-contact .elementor-form ::-webkit-input-placeholder,
.lp-kueche-section-hero .elementor-form ::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}
.lp-kueche-section-contact .elementor-form ::-moz-placeholder,
.lp-kueche-section-hero .elementor-form ::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
.lp-kueche-section-contact .elementor-form ::-ms-input-placeholder,
.lp-kueche-section-hero .elementor-form ::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

/* Fokus-Zustand */
.lp-kueche-section-contact .elementor-form .elementor-field-textual:focus,
.lp-kueche-section-contact
  .elementor-form
  textarea.elementor-field-textual:focus,
.lp-kueche-section-hero .elementor-form .elementor-field-textual:focus,
.lp-kueche-section-hero .elementor-form textarea.elementor-field-textual:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(2, 8, 23);
}

/*LP Küche Form Hero section */
/* Hero-Form-Container */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 2rem;
}

/* ======================================================== */
/* === LP Küche Sticky Header === */
/* ======================================================== */
/* Sticky Header Landing Page V2 */
.elementor-5260.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Nur Header 5260 im gescrollten Zustand bekommt das Full-Width-Weiß */
.elementor-5260.elementor-location-header.header--scrolled {
  background-color: rgba(255, 255, 255, 0.95);
}

/* =========================================================================
   B) Boxed-Container (landing-page-header--sticky-v2):
      → behält seine Boxed-Breite (z. B. 1200px), wird per Padding-Y
      und per Logo-Scale nur in der Höhe „geschrumpft“, Text bleibt unverändert.
   ========================================================================= */
/* Der Container "landing-page-header--sticky-v2" bleibt unverändert in der Breite.
   Er hat von Elementor schon die Klasse "e-con-boxed" und eine Max-Width (Boxed). */
.elementor-5260.elementor-location-header .landing-page-header--sticky-v2 {
  /* Ausgangs-Padding oben/unten (z. B. 20px) – auf deine Original-Header-Höhe anpassen */
  padding: 20px 0;
  transition: padding 0.3s ease;

  /* Flex-Verteilung: Logo links, Mittel-Text mittig, Telefonnummer rechts */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Damit der Inhalt im Boxed-Container wirklich space-between nutzt,
   den inneren .e-con-inner ebenfalls auf Flex setzen */
.elementor-5260.elementor-location-header
  .landing-page-header--sticky-v2
  .e-con-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.elementor-5260 .header-phone svg,
.elementor-5260 .header-mail svg {
  height: 16px;
  width: 16px;
  color: #fff;
  stroke: #fff;
}

.elementor-5260 .header-phone,
.elementor-5260 .header-mail {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.3s ease;
  color: #fff !important;
}

.elementor-5260 .header-phone svg,
.elementor-5260 .header-mail svg {
  margin-bottom: -2px;
}

.elementor-5260 .header-phone:hover span,
.elementor-5260 .header-mail:hover span,
.elementor-5260 .header-phone:hover svg,
.elementor-5260 .header-mail:hover svg {
  color: #fdfdfd;
}

.elementor-5260.elementor-location-header.header--scrolled .header-phone span,
.elementor-5260.elementor-location-header.header--scrolled .header-phone svg,
.elementor-5260.elementor-location-header.header--scrolled .header-mail span,
.elementor-5260.elementor-location-header.header--scrolled .header-mail svg {
  color: rgb(0 85 163);
  stroke: rgb(0 85 163);
}

.elementor-5260.elementor-location-header.header--scrolled
  .header-phone:hover
  span,
.elementor-5260.elementor-location-header.header--scrolled
  .header-phone:hover
  svg,
.elementor-5260.elementor-location-header.header--scrolled
  .header-mail:hover
  span,
.elementor-5260.elementor-location-header.header--scrolled
  .header-mail:hover
  svg {
  color: rgb(0 43 102);
  stroke: rgb(0 43 102);
}

/* =========================================================================
   C) Logo-Filter im Ausgangszustand (weiß):
   ========================================================================= */
.elementor-5260.elementor-location-header
  .landing-page-header--sticky-v2
  .elementor-widget-image
  img {
  /* Filter, damit dein SVG/PNG initial weiß erscheint */
  filter: brightness(0) invert(1);
  transform-origin: left center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* =========================================================================
   D) Gescrollter Zustand: Nur dieser eine Header (ID 5260):
   1) Padding oben/unten auf 85 % verringern (20px → 17px)
   2) Logo proportional über scale(0.85) verkleinern
   3) Filter vom Logo entfernen (damit es in Originalfarbe erscheint)
   ========================================================================= */
/* D.1 Boxed-Container schrumpft in der Höhe: */
.elementor-5260.elementor-location-header
  .landing-page-header--sticky-v2.header--scrolled {
  padding: 5px 0;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

/* ======================================================== */
/* === LP Küche Testimonials === */
/* ======================================================== */
/* 1. Zitat-Text */
.lp-kueche-testimonial-text {
  color: rgb(75, 85, 99); /* #4B5563 */
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 1rem; /* Standardgröße (16px) */
  line-height: 1.5rem; /* entspricht 24px */
  text-align: center;
  margin-bottom: 1rem; /* Abstand zum Autor */
}

/* 2. Autor-Name */
.lp-kueche-testimonial-author {
  color: rgb(17, 24, 39); /* #111827 */
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  text-align: center;
  margin-bottom: -20px; /* Kleiner Abstand zur Location */
}

/* 3. Autor-Ort */
.lp-kueche-testimonial-location {
  color: rgb(107, 114, 128); /* #6B7280 */
  font-family: "Inter", sans-serif;
  font-weight: 400; /* normal */
  font-size: 1rem; /* 16px (kann nach Bedarf angepasst werden) */
  line-height: 1.5rem; /* 24px */
  text-align: center;
}

.lp-kueche-testimonial-rating {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-kueche-testimonial-image {
  height: 4rem;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: Inter, Sans-Serif;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 100%;
}

.testimonial-gradient--blue {
  background-image: linear-gradient(to bottom right, #3b82f6 0%, #2563eb 100%);
}
.testimonial-gradient--green {
  background-image: linear-gradient(to bottom right, #22c55e 0%, #16a34a 100%);
}
.testimonial-gradient--violett {
  background-image: linear-gradient(to bottom right, #a855f7 0%, #9333ea 100%);
}

.testimonial-custom-shadow {
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ======================================================== */
/* === Forminator Forms === */
/* ======================================================== */
/* Forminator form*/

.select2-container .select2-results__option {
  padding: 5px 13px !important;
  color: #333 !important;
  background-color: #fff !important;
  margin: 20px 20px;
}

.select2-container .select2-results__option:hover {
  background-color: #f6f6f9 !important;
}

.forminator-select-dropdown {
  border-radius: 5px;
}

#forminator-module-462 {
  display: flex !important;
  flex-direction: column;
}

.forminator-pagination-progress {
  width: 30% !important;
  align-self: center;
}

.forminator-progress-bar {
  border-radius: 5px;
  height: 6px !important;
}

.forminator-progress-bar span {
  background-color: #3787ff !important;
}

/* Layout fixes */
/* ✅ 1. Entfernt das fehlerhafte, schmale Dropdown-Duplikat bei "Anrede" */
selector #select-1 .select2-container + .select2-container {
  display: none !important;
}

/* Zeige standardmässig alle Footer */
#forminator-module-4564 .forminator-pagination-footer {
  display: flex;
}

/* ======================================================== */
/* === Popup Styles === */
/* ======================================================== */
.elementor-popup-modal {
  position: fixed !important;
  z-index: 99999 !important;
  bottom: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* ======================================================== */
/* === Remaining Styles                                    === */
/* ======================================================== */
/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child Theme für Hello Elementor
Author: Luca Schüpbach
Author URI: https://strahm-glastech.ch
Template: hello-elementor
Version: 1.0
*/

/* Hier dein Custom CSS */

/*** Landing Page Küche ****/
.lp-kueche-hero-slider {
  position: relative;
  font-family: "Inter", sans-serif;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}

/* Overlay zwischen Bild & Text */
.lp-kueche-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* Anpassbar: 0.35–0.55 je nach Bild */
  z-index: 1;
}

/* Slides */
.lp-kueche-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  /* Optional hero section LP Küche slider
  animation:
    lp-kueche-slide-fade 30s infinite linear,
    lp-kueche-slide-zoom 30s infinite linear;*/
}

/* Optional hero section LP Küche slider
.lp-kueche-slide:nth-child(1) {
  animation-delay: 0s,  0s;
}

.lp-kueche-slide:nth-child(2) {
  animation-delay: 6s,  6s;
}

.lp-kueche-slide:nth-child(3) {
  animation-delay: 12s, 12s;
}

.lp-kueche-slide:nth-child(4) {
  animation-delay: 18s, 18s;
}

.lp-kueche-slide:nth-child(5) {
  animation-delay: 24s, 24s;
}

@keyframes lp-kueche-slide-fade {
  0%       { opacity: 0; }
  3.333%   { opacity: 1; }
  20%      { opacity: 1; }
  23.333%  { opacity: 0; }
  100%     { opacity: 0; }
}

@keyframes lp-kueche-slide-zoom {
  0%       { transform: scale(1); }
  23.333%  { transform: scale(1.07); }
  100%     { transform: scale(1.07); }
}
*/

.lp-kueche-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 2rem;
}

.lp-kueche-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* ============================================================= */
/* === 6. Star Rating (Auf Google …)                           === */
/* ============================================================= */
.lp-kueche-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  margin-bottom: 0;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: white;
}

.lp-kueche-rating .star-rating {
  margin-right: 10px;
  align-items: center;
}

.lp-kueche-rating .star-rating img {
  margin-right: -3px;
}

.lp-kueche-rating-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lp-kueche-google-svg {
  width: 16px;
  height: 16px;
}

.lp-kueche-section-hero .lp-kueche-rating .lp-kueche-google-logo {
  width: 20px;
  height: 20px;
}

.lp-kueche-rating-stars img {
  width: 18px;
  height: 18px;
}

.lp-kueche-rating-stars {
  height: 20px;
}

.lp-kueche-rating-text {
  font-size: 0.9rem;
  text-align: left;
  margin-top: -2px;
}

/* ============================================================= */
/* === 7. Überschrift (H1 mit Gradient-Text)                   === */
/* ============================================================= */
.lp-kueche-h1 h1 {
  font-size: 3.75rem !important;
  line-height: 3.75rem;
  font-family: "Playfair Display", serif !important;
  margin: 0;
  color: white !important;
  font-weight: 700 !important;
}

/* Wenn du „Kitchen Elegance“ separat weiß behalten möchtest, verwende diese Klasse dafür:
   .lp-kueche-accent { color: #66B7FF; }
*/
.lp-kueche-accent {
  /* Beispiel für ein Akzent-Highlight: */
  background: linear-gradient(to right, #66b7ff, #cce7ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lp-kueche-h2 {
  background: linear-gradient(to right, rgb(17, 24, 39), rgb(30, 64, 175));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 10px;
}

/* ============================================================= */
/* === 8. Untertitel (P – Pros/Text)                           === */
/* ============================================================= */
.lp-kueche-hero-content p {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: white;
  font-family: "Inter", sans-serif;
}

/* ============================================================= */
/* === 9. Benefits (drei Häkchen-Punkte)                       === */
/* ============================================================= */
.lp-kueche-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  gap: 1rem;
  font-size: 0.875rem;
}

.lp-kueche-features span {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  color: white;
  font-weight: 500;
  font-family: "Inter", sans-serif;
}

.lp-kueche-rating {
  height: 24px;
  padding: 24px;
}

/* LP Küche Google SVG */
.lp-kueche-google-svg {
  height: 20px;
  width: 20px;
  margin-right: 7px;
}

/* ============================================================= */
/* === 10. Call-to-Action Buttons                              === */
/* ============================================================= */
.lp-kueche-cta {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* === 10.1 Primary Button (Gradient, „Get Free Consultation“) === */
.lp-kueche-btn-primary {
  background: linear-gradient(to right, #0055a3, #004085) !important;
  color: white !important;
  padding: 1rem 2.5rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lp-kueche-btn-primary:hover {
  background: linear-gradient(to right, #004085, #002b66) !important;
  transform: scale(1.05) !important;
  color: white !important;
}

/* === 10.2 Secondary Button (Outline-Style, „View Gallery“) === */
.lp-kueche-btn-secondary {
  border: 2px solid white !important;
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 1rem 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.lp-kueche-btn-secondary:hover {
  background: white !important;
  color: #374151 !important;
  transform: scale(1.05) !important;
}

/* Landing Page Küche Tabs */
/* ============================================================= 
   1. Transition nur auf die Tab-Buttons anwenden                 
   ============================================================= */
.lp-kueche-tabs .e-n-tab-title {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================= 
   2. Box-Shadow ausschließlich für den aktiven Tab-Button         
   ============================================================= */
.lp-kueche-tabs .e-n-tab-title[aria-selected="true"] {
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* LP Küche Tab Grid Item */
/* ============================================================= 
   2.1 Grid-Item (jetzt <a>) mit responsivem 16:9-Verhältnis (Padding-Bottom) 
   ============================================================= */
.lp-kueche-grid-item {
  display: block; /* Als Link-Container blocken */
  position: relative;
  overflow: hidden;
  border-radius: 12px;

  /* 16:10 → Höhe = 62.5% der Breite (responsive) */
  width: 100%;
  padding-bottom: 62.5%; /* 10 ÷ 16 = 0.625 → 62.5% */

  /* Standard-Box-Shadow (shadow-lg) */
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Skalierungs- und Schatten-Animation */
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* Kategorien-spezifische Label-Farben */

/* Für blaue Kategorie */
.lp-kueche-grid-item.blue .lp-kueche-grid-label {
  background-color: #3b82f6; /* Blue-500 */
}

/* Für grüne Kategorie */
.lp-kueche-grid-item.green .lp-kueche-grid-label {
  background-color: #22c55e; /* Green-500 */
}

/* Für violette Kategorie */
.lp-kueche-grid-item.violett .lp-kueche-grid-label {
  background-color: #a855f7; /* Violet */
}

/* ============================================================= 
   2.2 Bild-Element: füllt Eltern-Element aus und hat eigenen Transition 
   ============================================================= */
.lp-kueche-grid-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Bild skaliert ebenfalls beim Hover */
  transition: transform 300ms ease;
}

/* ============================================================= 
   2.3 Gradient-Overlay (unten, 50% Höhe), initial unsichtbar    
   ============================================================= */
.lp-kueche-grid-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Höhe auf 80% erhöht, damit der Verlauf weiter nach oben reicht */
  height: 80%;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    /* etwas stärkerer Schatten unten */ rgba(0, 0, 0, 0.2),
    /* mittlerer Verlauf mit leichter Abdunkelung */ rgba(0, 0, 0, 0)
      /* oben komplett transparent */
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* ============================================================= 
   2.4 Kategorie-Label (oben rechts, nur so groß wie Text)       
   ============================================================= */
.lp-kueche-grid-label {
  position: absolute;
  top: 12px; /* gleicher Abstand wie weiter unten beim Text */
  right: 12px;
  transform-origin: top right;

  display: inline-block;
  background-color: #9333ea; /* Lila-Farbwert (rgb(147,51,234)) */
  color: white;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75rem; /* entspricht 12px bei 16px-Basis */
  font-weight: 600; /* semi-bold */
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 0.25rem 0.75rem; /* vertikal 4px, horizontal 12px */
  border-radius: 9999px; /* Pill-Form */
  z-index: 2;

  /* Label soll nicht selbst skaliert werden, nur neu positioniert */
  transition: transform 300ms ease;
}

/* ============================================================= 
   2.5 Text-Container (Titel + Untertitel), initial transparent, 
        unten-links ausgerichtet                           
   ============================================================= */
.lp-kueche-grid-text {
  position: absolute;
  bottom: 0px; /* jetzt 12px, damit es zum Label passt */
  left: 12px; /* 12px Abstand vom linken Rand */
  z-index: 2;

  transform-origin: bottom left;

  /* Heading-Schriftart gemäß Vorgabe */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* initial unsichtbar */
  color: transparent;

  transition: color 300ms ease, transform 300ms ease;
}

/* Überschrift (Heading) */
.lp-kueche-grid-title {
  margin: 0;
  font-size: 1.125rem; /* 18px ÷ 16px = 1.125rem */
  font-weight: 700; /* bold */
  line-height: 1.2;
}

/* Untertitel (Description) */
.lp-kueche-grid-subtitle {
  margin-top: 0.25rem; /* kleiner Abstand über dem Untertitel */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem; /* 14px ÷ 16px = 0.875rem */
  font-weight: 400; /* normal */
  color: inherit; /* erbt im Hover-Zustand die Farbe (weiß) */
  line-height: 1.2;
}

/* ============================================================= 
   2.6 Hover-Effekte                                             
   - 2.6.1 Container skaliert + stärkerer Schatten                
   - 2.6.2 Bild skaliert zusätzlich                                
   - 2.6.3 Gradient wird sichtbar                                 
   - 2.6.4 Label bleibt Originalgröße, nur Position angleichen    
   - 2.6.5 Text wird weiß, bleibt unskaliert                      
   ============================================================= */

/* 2.6.1 Container Hover */
.lp-kueche-grid-item:hover {
  transform: scale(1.07);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 2.6.2 Bild Hover (zusätzlicher Zoom-Effekt) */
.lp-kueche-grid-item:hover .lp-kueche-grid-image {
  transform: scale(1.09);
}

/* 2.6.3 Gradient einblenden */
.lp-kueche-grid-item:hover .lp-kueche-grid-gradient {
  opacity: 1;
}

/* 2.6.4 Label so transformieren, dass es nicht skaliert */
.lp-kueche-grid-item:hover .lp-kueche-grid-label {
  transform: scale(0.952381); /* 1 / 1.05 */
}

/* 2.6.5 Text einblenden und unskaliert halten */
.lp-kueche-grid-item:hover .lp-kueche-grid-text {
  color: white;
  transform: scale(0.952381); /* 1 / 1.05 */
}

/* LP Küche benefits items */
/* ============================================================= 
   1. Gesamt‐Styling für alle Feature-Items
   ============================================================= */
.lp-kueche-feature-item {
  /* Damit das Item die volle Höhe seiner Grid-Zelle einnimmt */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Restliche Styles wie gehabt: */
  background-color: white;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transform-origin: center bottom;
}

/* Hover: Item hebt sich um 0.5rem und bekommt stärkeren Schatten */
.lp-kueche-feature-item:hover {
  transform: translateY(-0.5rem);
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.1) 0 8px 10px -6px;
}

/* ============================================================= 
   2. Icon‐Container & SVG (zentriert, mit Hover-Skalierung)      
   ============================================================= */
.lp-kueche-feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

/* SVG: Standard‐Größe und Transition */
.lp-kueche-icon {
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease;
}

/* Auf Hover: Icon skaliert auf 1.2 */
.lp-kueche-feature-item:hover .lp-kueche-icon {
  transform: scale(1.1);
}

/* ============================================================= 
   3. Titel (Playfair Display, serif)                           
   ============================================================= */
.lp-kueche-feature-title {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  font-weight: 700;
  color: rgb(17, 24, 39); /* sehr dunkles Grau/Blau */
  margin: 0 0 1rem 0;
  text-align: center;
}

/* ============================================================= 
   4. Beschreibungstext (Inter, sans-serif)                    
   ============================================================= */
.lp-kueche-feature-text {
  font-family: "Inter", sans-serif;
  font-size: 1rem; /* 16px */
  line-height: 1.625; /* ~26px */
  color: rgb(75, 85, 99); /* mittel‐dunkles Grau */
  margin: 0;
  margin-top: auto; /* schiebt den Text ans Ende, falls nötig */
  text-align: center;
}

/* ============================================================= 
   5. Icon‐Farbklassen (nur Farbe differenziert)                  
   ============================================================= */
/* Rot (z. B. für das Schild‐Icon) */
.lp-kueche-feature-icon.icon-red .lp-kueche-icon {
  color: rgb(239, 68, 68); /* #EF4444 */
}

/* Blau (z. B. für den Stern) */
.lp-kueche-feature-icon.icon-blue .lp-kueche-icon {
  color: rgb(59, 130, 246); /* #3B82F6 */
}

/* Grün (z. B. für Schraubenschlüssel) */
.lp-kueche-feature-icon.icon-green .lp-kueche-icon {
  color: rgb(34, 197, 94); /* #22C55E */
}

/* Violett (z. B. für Farbpalette) */
.lp-kueche-feature-icon.icon-violet .lp-kueche-icon {
  color: rgb(147, 51, 234); /* #9333EA */
}

/* LP Kueche Section How it works */
.lp-section-how-it-works > .e-con-inner {
  background-image: linear-gradient(
    to right bottom,
    rgb(249, 250, 251),
    /* fast weiß */ rgb(230, 243, 255) /* helles Blau */
  );
  border-radius: 24px;
}

/* Form LP Küche */
.lp-kueche-section-contact .elementor-field-group {
  padding-left: 5px;
  margin-bottom: 20px !important;
}

/* =============================================================
   Gemeinsames CSS für alle vier Step-Cards
   ============================================================= */
/* =============================================================
   1. Grid-Container (Elementor: elementor-element-7e8320f)
      – 4 Spalten für die Step-Cards und zusätzliche Zeile für die Linie
   ============================================================= */
.elementor-element-7e8320f.e-grid.e-con-full {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto; /* erste Zeile: Step-Cards, zweite Zeile: Linie */
  gap: 24px; /* Abstand zwischen den Step-Cards */
  align-items: stretch; /* alle Step-Cards gleich hoch */
  position: relative; /* für absolute Positionierung von Kindern, falls nötig */
}

/* =============================================================
   2. Step-Card stylen (gleiche Höhe, Schatten, Hover-Effekt)
   ============================================================= */
.lp-kueche-step-card {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%; /* belegt volle Höhe der Grid-Zelle */
  position: relative;
  z-index: 1; /* über der Linie */
}

/* Hover: Kachel hebt sich leicht an und Schatten wird stärker */
.lp-kueche-step-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}

/* =============================================================
   3. Kreis mit Schritt-Nummer (4rem × 4rem, Gradient, zentriert)
   ============================================================= */
.lp-kueche-step-number {
  position: relative;
  z-index: 2; /* ganz oben, über der Linie und der Karte */
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  border-radius: 50%;
  background-image: linear-gradient(to right, rgb(0, 85, 163), rgb(0, 64, 133));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

/* =============================================================
   4. Icon unterhalb der Zahl (32×32, Brand-600-Farbe, Hover-Skalierung)
   ============================================================= */
.lp-kueche-step-icon {
  margin-bottom: 16px;
}

.lp-kueche-icon {
  width: 32px;
  height: 32px;
  color: rgb(0, 85, 163); /* Brand-600 */
  transition: transform 0.3s ease;
}

.lp-kueche-step-card:hover .lp-kueche-icon {
  transform: scale(1.2);
}

/* =============================================================
   5. Titel (Playfair Display, serif, 20px, rgb(17 24 39), 700)
   ============================================================= */
.lp-kueche-step-title {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  color: rgb(17, 24, 39);
  font-weight: 700;
  margin: 0 0 8px 0; /* 8px Abstand nach unten */
}

/* =============================================================
   6. Beschreibungstext (Inter, sans-serif, 16px, rgb(75 85 99))
   ============================================================= */
.lp-kueche-step-text {
  font-family: "Inter", sans-serif;
  font-size: 1rem; /* 16px */
  line-height: 1.625; /* ca. 26px */
  color: rgb(75, 85, 99);
  margin: 0;
}

/* =============================================================
   7. Linie                  
   ============================================================= */
.lp-kueche-step-line {
  position: absolute;
  bottom: 320px;
  width: 800px;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0.125rem; /* .125rem hoch */
  background-image: linear-gradient(
    to right,
    rgb(153, 207, 255),
    rgb(102, 183, 255),
    rgb(153, 207, 255)
  );
  align-self: flex-start; /* oben in der Zeile */
  z-index: 0; /* unterhalb der Karten */
}

.lp-team-card {
  padding: 2rem;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-team-card:hover {
  transform: translateY(-8px);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}

.lp-team-image {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1rem auto; /* zentriert + Abstand nach unten */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.lp-team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform 0.3s ease;
  object-position: center 10%; /* verschiebt den sichtbaren Bereich etwas nach unten */
}

.lp-team-card:hover .lp-team-image {
  transform: scale(1.05);
}

.lp-team-name {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  margin-bottom: 0.25rem;
}

.lp-team-role {
  font-family: "Inter", sans-serif;
  color: rgb(0, 85, 163);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.lp-team-description {
  font-family: "Inter", sans-serif;
  color: rgb(75, 85, 99);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* LP Küche section CTA 2 */
.lp-kueche-section-cta2 {
  background-image: linear-gradient(
    to right bottom,
    rgb(0, 22, 71),
    rgb(0, 43, 102),
    rgb(0, 64, 133)
  );
}

.lp-cta-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(12px);
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0.5rem;
  max-width: 56rem;
  margin: auto;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.lp-cta-title {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.lp-cta-subtext {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: rgb(229 231 235);
  font-family: "Inter", sans-serif;
  max-width: 42rem;
  margin: 0 auto 2rem;
  margin-bottom: 0;
}

.lp-cta-button {
  background: linear-gradient(to right, rgb(234, 179, 8), rgb(249, 115, 22));
  border: none;
  border-radius: 9999px;
  padding: 1rem 3rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: rgb(15, 23, 42);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  margin: 2rem 0;
  transform: scale(1);
}

.lp-cta-button:hover {
  background: linear-gradient(to right, rgb(202, 138, 4), rgb(234, 88, 12));
  color: rgb(15, 23, 42);
}

.lp-cta-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: rgb(209 213 219);
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

.lp-cta-bullets li {
  margin-top: 0.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =============================================================
   1. Accordion-Wrapper: vertikale Liste mit Abstand
   ============================================================= */
.lp-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =============================================================
   2. FAQ-Item (Container): einheitlicher Hintergrund & Schatten
   ============================================================= */
.lp-faq-item {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.1) 0 2px 4px -2px;
  overflow: hidden;
}

/* =============================================================
   3. Frage-Button: volle Breite, weiße Hintergr., flex layout
   ============================================================= */
.lp-faq-item > .lp-faq-question {
  display: flex;
  justify-content: space-between;
  width: 100%; /* volle Breite */
  padding: 1.25rem;
  background-color: #fff !important;
  border: none;
  box-shadow: none;
  cursor: pointer;

  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  white-space: normal; /* Zeilenumbruch erlauben */
  overflow-wrap: break-word; /* lange Wörter umbrechen */
  overflow: visible; /* nie abschneiden */
}

/* Und das Chevron behält seine Größe und rutscht nicht mit */
.lp-faq-item > .lp-faq-question .lp-faq-chevron {
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Kein Hintergrundwechsel im Hover oder Active State */
.lp-faq-item > .lp-faq-question:hover,
.lp-faq-item.active > .lp-faq-question {
  background-color: #fff !important;
}

/* =============================================================
   4. Hover-Farbe nur für Text und Chevron
   ============================================================= */
.lp-faq-item > .lp-faq-question:hover {
  color: rgb(37, 99, 235);
}
.lp-faq-item > .lp-faq-question:hover .lp-faq-chevron {
  color: rgb(37, 99, 235);
}

/* =============================================================
   5. Chevron-Icon: Größe, Position und Dreh-Animation
   ============================================================= */
.lp-faq-item > .lp-faq-question .lp-faq-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  color: rgb(17, 24, 39);
  transition: transform 0.3s ease, color 0.15s ease;
}
.lp-faq-item.active > .lp-faq-question .lp-faq-chevron {
  transform: rotate(180deg);
}

/* =============================================================
   6. Antwort-Container: smooth öffnen/schließen, Typografie
   ============================================================= */
.lp-faq-item > .lp-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;

  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.25rem;
  color: rgb(75, 85, 99);
}

.lp-faq-item.active > .lp-faq-answer {
  padding-bottom: 1.25rem;
  max-height: 500px; /* ausreichend für längere Antworten */
}

/* Überschrift */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section h3 {
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.75rem; /* 28px */
  font-family: "Playfair Display", serif !important;
  text-align: center;
  margin-bottom: 1rem;
}

/* Formular-Inputs */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-field,
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-field-textual {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: white;
  font-family: "Inter", sans-serif !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 400;
  line-height: 1.25rem !important; /* 20px */
  padding: 0.5rem 0.75rem;
  border: none;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Platzhalterfarbe */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section
  .elementor-field::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 1;
}

/* Abstand zwischen Zeilen */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-field-group {
  /*margin-top: 1rem !important;*/
  margin-bottom: 0;
  padding-left: 5px;
}

/*Abstand Formular Heading */
#lp-kueche-v2-form-hero .elementor-element-75072ae .elementor-widget-container {
  margin-bottom: 0;
}

#lp-kueche-v2-form-hero.lp-kueche-container_form.lp-kueche-form-hero-section {
  row-gap: 0;
}

/* Erste Zeile: Vorname / Nachname */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section
  .elementor-field-group-name.elementor-col-50 {
  padding-right: 5px;
}
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section
  .elementor-field-group-field_d657690.elementor-col-50 {
  padding-left: 0;
}

/* Zweite Zeile: PLZ / Ort */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section
  .elementor-field-group-field_1804ae0.elementor-col-50 {
  padding-right: 5px;
}
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section
  .elementor-field-group-field_0f61e3b.elementor-col-50 {
  padding-left: 0;
}

/* Fokus-Zustand */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(0, 0, 0, 0);
}

/* Submit-Button */
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem !important;
  font-family: "Inter", sans-serif !important;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 600 !important;
  color: #fff !important;
  background-image: linear-gradient(
    to right,
    rgb(0, 85, 163),
    rgb(0, 64, 133)
  ) !important;
  border: none;
  border-radius: 8px !important;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
  cursor: pointer;
  transition: all 0.3s ease;
}
#lp-kueche-v2-form-hero.lp-kueche-form-hero-section .elementor-button:hover {
  background-image: linear-gradient(
    to right,
    rgb(0, 64, 133),
    rgb(0, 43, 102)
  ) !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}

/* Button-Styles */
.lp-kueche-section-contact .elementor-form .elementor-button {
  display: inline-block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #fff;
  background-image: linear-gradient(
    to right,
    rgb(37, 99, 235),
    rgb(29, 78, 216)
  );
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-image 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}

.lp-kueche-section-contact .elementor-form .elementor-button:hover {
  background-image: linear-gradient(
    to right,
    rgb(29, 78, 216),
    rgb(30, 64, 175)
  );
}

.lp-kueche-section-contact .elementor-field-group {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}

.lp-kueche-container_form {
  padding-top: 2.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.elementor-5165
  .elementor-element.elementor-element-8df5764
  > .elementor-widget-container {
  margin: 0px 0px 10px 0px !important;
}

/* Container */
.contact-section {
  padding: 2rem;
  padding-top: 0;
}

.lp-kueche-container_kontaktinfo {
  padding-top: 0;
}

/* Heading */
.contact-heading {
  margin: 0 0 1.5rem;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: rgb(255, 255, 255);
}

/* Liste */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

/* Einzelnes Item */
.contact-item {
  display: flex;
  align-items: flex-start;
}

/* Icon */
.contact-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  color: rgb(96, 165, 250); /* Tailwind bg-blue-400 */
}

/* Text-Container */
.contact-text {
  display: flex;
  flex-direction: column;
}

/* Titel */
.contact-title {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  font-size: 1rem;
  color: rgb(255, 255, 255);
}

/* Untertitel */
.contact-subtitle {
  margin: 0.25rem 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
  color: rgb(209, 213, 219);
}

/* D.2 / D.3 Logo (gleichmässiges Shrinken + Filter raus) */
.elementor-5260.elementor-location-header
  .landing-page-header--sticky-v2.header--scrolled
  .elementor-widget-image
  img {
  transform: scale(0.85);
  filter: none;
}

/* Nur wenn mehr als ein Footer vorhanden ist, blende den letzten aus */
#forminator-module-4564
  .forminator-pagination-footer:first-of-type
  ~ .forminator-pagination-footer:last-of-type {
  display: none !important;
}

/* MEDIA QUERIES */

/* ================================================================
   Scoped 2-Spalten-Layout für Desktop nur in #5652
   ================================================================ */
@media (min-width: 768px) {
  #forminator-module-5652 .forminator-col-6 {
    width: calc(50% - 0.5rem);
    float: left;
    margin-right: 1rem;
  }
  #forminator-module-5652 .forminator-col-6:nth-child(2n) {
    margin-right: 0;
  }

  /* LP Küche Form Hero Ort feld fix */
  #form-field-field_0f61e3b {
    margin-left: 5px;
  }
}

@media screen and (max-width: 767px) {
  /* Service Template */

  #inhaltsblock-1--image-container {
    min-height: 330px;
  }

  /* Hero-Section passt sich in der Höhe an */
  .lp-kueche-section-hero {
    height: auto !important;
  }

  /* Rating Element Padding top */
  .elementor-element-9ae208a.elementor-widget-html {
    padding-top: 65px;
  }

  /* Direkte Kinder (Wrapper & Container) immer 100% */
  .lp-kueche-section-hero-mobile.e-flex > .e-con-inner,
  .lp-kueche-section-hero-mobile.e-flex > .elementor-element {
    width: 100% !important;
  }

  /* Überschrift und Text zentrieren */
  .lp-kueche-section-hero-mobile .elementor-widget-html,
  .lp-kueche-section-hero-mobile .elementor-widget-text-editor {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    text-align: center;
  }

  /* H1 anpassen */
  #lp-kueche-h1.lp-kueche-h1 h1 {
    line-height: 1.25 !important; /* entspricht .leading-tight */
    font-weight: 700 !important; /* entspricht .font-bold */
    font-size: 2.25rem !important; /* entspricht .text-4xl */
    text-align: center;
  }

  /* Untertitel-Text */
  .lp-kueche-section-hero-mobile .lp-kueche-hero-text {
    font-size: 1rem !important;
    padding: 0 1rem 1rem !important;
  }

  /* Stern Rating mit Google Logo Grid Layout */
  .lp-kueche-section-hero .lp-kueche-rating {
    display: grid;
    height: fit-content;
    padding: 0.7rem 2rem;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
    text-align: center;
  }

  .lp-kueche-rating-left {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }

  .lp-kueche-rating-text {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    font-size: 0.9rem;
    text-align: right;
  }

  .lp-kueche-hero-text {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0;
  }

  /* Benefits untereinander */
  .lp-kueche-features {
    display: flex !important;
    align-items: center;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0 1rem 1rem !important;
    text-align: center;
  }

  .lp-kueche-features span {
    justify-content: center !important;
    width: fit-content;
  }

  #lp-kueche-v2-form-hero .elementor-field-group {
    padding-left: 0 !important;
  }

  .header-mail {
    display: none;
  }

  /* CTA-Container */
  .lp-kueche-section-hero .lp-kueche-cta {
    width: 100% !important;
    padding: 1rem !important;
    text-align: center;
  }

  /* Form Center fix LP Küche */
  .elementor-element-0dd49b0 {
    margin-left: -3px;
  }

  /* Formular-Container */
  #lp-kueche-v2-form-hero.lp-kueche-form-hero-section {
    order: 2 !important;
    max-width: 90%;
    margin: 1rem 1rem !important;
    padding: 1rem !important;
    height: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Zwei-Spalten-Felder auf 100% */
  #lp-kueche-v2-form-hero .elementor-col-50 {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Abstand zwischen Feldgruppen */
  #lp-kueche-v2-form-hero .elementor-field-group {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Input-Styling kompakt */
  #lp-kueche-v2-form-hero .elementor-field {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    padding: 0.5rem !important;
  }

  /* Button full-width */
  #lp-kueche-v2-form-hero .elementor-button {
    width: 100% !important;
    font-size: 0.9rem !important;
    padding: 0.6rem !important;
    margin-top: 1rem !important;
  }

  /* LP Küche Sticky Header V2 */
  .landing-page-header--sticky-v2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Telefonnummer richtige Grösse */
  .landing-page-header--sticky-v2 .elementor-element-25c8be3 {
    width: fit-content;
  }

  /* Margin für Logo */
  .landing-page-header--sticky-v2
    .elementor-widget-theme-site-logo
    .elementor-widget-container {
    display: flex;
  }
}

/* Set max-width for tablet version */
@media (max-width: 1024px) {
  .image-slider
    .slider-format-Normal
    .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
    max-width: 38% !important;
    height: 350px !important;
  }
  .image-slider
    .slider-format-Hochformat
    .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
    max-width: 33% !important;
    height: 450px !important;
  }
  .image-slider
    .slider-format-Querformat
    .uc-items-wrapper.ug-gallery-wrapper.ug-theme-slider {
    max-width: 65% !important;
    height: 300px !important;
  }

  .image-slider--frontpage
    .elementor-widget-ucaddon_uc_slider_image
    #uc_uc_slider_image_elementor_3945efc {
    max-width: 50% important;
    height: 550px !important;
  }
  .elementor-element-7e8320f.e-grid.e-con-full {
    grid-template-columns: auto !important;
  }
}

/* ======================================================== */
/* === Media Queries                                      === */
/* ======================================================== */

@media (min-width: 783px) {
  /* zielt nur auf Form 5652 ab */
  .forminator-custom-form-5652[data-grid="open"]
    .forminator-row:not(:last-child) {
    margin-bottom: 20px !important;
  }
}