/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */




/* ==========================================================================
   Root Variablen (anpassbar für globale Styles)
   ========================================================================== */
:root {
  /* Layout & Container */
  --container-padding-sm: 10%;
--container-padding-sm: clamp(20px, 10%, 140px);
  --custom-padding: calc(50vw - 800px);
 --container-padding-lg: 15%;

 --container-padding-lg: clamp(80px, 15%, 210px);
	
--side-padding: 4rem;

  /* Buttons */
  --btn-padding-top: 8px;
  --btn-padding-side: 30px;

  /* Bildgrössen */
  --img-height: 45vw;
  --img-height-mobile: 70vw;
  --custom-img-height: 850px;

  /* Farben (mit Elementor Global Colors kombinierbar) */
  --color-primary: var(--e-global-color-primary);
  --color-secondary: var(--e-global-color-secondary);

  /* Border-Radius */
  --border-radius: 0px;
}

.side-title a {text-decoration: underline; display:  inline-block;}
.side-title a:hover  {text-decoration: none; }
.side-title a {transition: 0.5s ease;}



/* ==========================================================================
   Header & Logo
   ========================================================================== */
header {
  position: relative;
  z-index: 8000;
}
.logo {
  
  cursor: pointer;
}

#logo img,
#logo a {width: 100%; height: 100%, }
#logo a {display: flex;  }
#logo img {transition: 0.5s ease;}


.dialog-close-button.dialog-lightbox-close-button{
	text-decoration: none;
}


/* ==========================================================================
   Mobile Menu
   ========================================================================== */
/* Grundstil für alle Menülinks */

.elementor-nav-menu__container a.elementor-item {
  position: relative;
  display: inline-block;
  padding-right: 80px; /* Platz rechts für den Pfeil */
}

/* Unsichtbarer Pfeil, der beim Hover erscheint */
.elementor-nav-menu__container a.elementor-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
	left: calc(100% + 15px);
  transform: translateY(-45%);
  height: 20px!important;
  width: 12px;
  background-image: url('https://krattigerholzbau.fruitjuicer.ch/wp-content/uploads/2025/07/arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
	background-color: rgba(0,0,0,0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Sichtbar nur beim Hover */
.elementor-nav-menu__container a.elementor-item:hover::after {
  opacity: 1;
}


/* ==========================================================================
   Startseite
   ========================================================================== */

#hero-container .box {min-width: 250px; width: 30%;}

/* ==========================================================================
   Layout & Container
   ========================================================================== */
.img-max-width {
  max-width: 1800px;
}
.custom-padding-left {
  padding-left: var(--custom-padding);
}
.custom-padding-right {
  padding-right: var(--custom-padding);
}


/* ==========================================================================
   Impulse
   ========================================================================== */

.impulse-carousel img.swiper-slide-image {
    width: 100%;
    height: 70vh;
    object-fit: cover;
}
/*Pfeile*/

.impulse-carousel  .elementor-swiper-button.elementor-swiper-button-next{
	margin-right: -40px;
	right: 0 !important;
}

.impulse-carousel  .elementor-swiper-button.elementor-swiper-button-prev{
	margin-left: -40px;
	left: 0 !important;
}

/* ==========================================================================
   Referenzen
   ========================================================================== */

 .img-cont .overlay { opacity: 0; transition: 0.3s ease; cursor: pointer; }
.img-cont .overlay:hover { opacity: 0.8;}

 .img-cont figure {
position: relative;
display: inline-block;
}

.img-cont figure figcaption {
position: absolute;
bottom: 10px;
right: 10px;

font-size: 0.85em;
line-height: 1.3;
max-width: 90%;
}


.referenzen-loop-img	figure {
position: relative;
display: inline-block;
	width: 100%
}

.referenzen-loop-img figure figcaption {
position: absolute;
bottom: 10px;
right: 10px;

}

.referenz-popup {opacity: 0; transition: 0.5s ease; pointer-events: none; }

.referenz-popup .info-box {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.referenz-popup.visible {
  opacity: 1;
  pointer-events: auto;
}

.referenz-popup img{
	    max-height: 1500px;
    height: 70vh;
   
    max-width: 1000px;
}

.zurueck-btn {cursor: pointer; }

/* Scope nur auf dieses Button-Widget */
.zurueck-btn .elementor-button {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;            /* Icon bleibt im Button-Hintergrund */
}

/* Pfeil als erstes Flex-Item im <a> */
.zurueck-btn .elementor-button::before {
    content: "";
    flex: 0 0 0;                 
    width: 0;                 
    height: 20px;                
    background-image: url("https://krattigering.fruitjuicer.ch/wp-content/uploads/2025/08/arrow-white-2-left.svg");
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center;
    margin-right: 0;             
    opacity: 0;                 
    transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease;
}

.child-content-element {
    scrollbar-width: thin;       /* dünner Balken */
        scrollbar-color: #dfcfbc00 #dfcfbc00;
}

.child-content-element {
    position: relative;
    overflow: auto;
}

.child-content-element::-webkit-scrollbar {
    width: 6px;
}

.child-content-element::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.scrollHint {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 999999;
}

/* Hover: Icon fährt rein und macht Platz links vom Text */
.zurueck-btn .elementor-button:hover::before {
    flex-basis: 20px;
    width: 20px;                
    margin-right: 8px;          
    opacity: 1;                 
}



/* Leuchtturm-Referenz */

.leuchturmprojekt-page-content .image-left img{
	max-height: 80vh;
	object-fit: contain;
	object-position: left;
}

.leuchturmprojekt-page-content .image-right img{
	max-height: 80vh;
	object-fit: contain;
	object-position: right;
}
.image-right figcaption {
    text-align: right;
}
.image-left figcaption {
    text-align: left;
}
#referenz-carousel .img-cont .overlay { opacity: 0; transition: 0.3s ease; cursor: pointer; }

#referenz-carousel .img-cont .overlay:hover { opacity: 0.8;}

/*Filter*/
.referenzen-filter-container .jet-radio-list__decorator{
	display: none;
}
/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.elementor-field-type-submit button {
  padding: var(--btn-padding-top) var(--btn-padding-side)!important;
}
.link a {
  color: inherit!important;
  text-decoration: underline!important;
  transition: 0.3s ease;
}
.link a:hover {
  text-decoration: none!important;
}


/* Basislayout */
.btn-leuchtturm .elementor-button {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
}

/* Styling via Elementor-Variablen */
.btn-leuchtturm .elementor-button {
    background-color: var(--e-global-color-primary); /* Hauptfarbe */
    font-family: var(--e-global-typography-5208bf4-font-family), sans-serif;
    font-size: var(--e-global-typography-5208bf4-font-size);
    font-weight: var(--e-global-typography-5208bf4-font-weight);
    line-height: var(--e-global-typography-5208bf4-line-height);
    color: var(--e-global-color-secondary);
    fill: var(--e-global-color-100288d);
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover-Effekt (optional anpassen) */
.btn-leuchtturm .elementor-button:hover {
    background-color: var(--e-global-color-accent);
    color: #fff;
    fill: #fff;
}


.impuls-bild .ke-overlay { transition: 0.3s ease; opacity: 0; pointer-events: none; cursor: pointer; }
.impuls-bild:hover .ke-overlay { opacity: 1;  }



/* ==========================================================================
   Kontaktseite
   ========================================================================== */
/*
body.elementor-page-66 {
    min-height: 100vh;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;}


body.elementor-page-66 main {		flex-grow: 1; position: relative; }
body.elementor-page-66 main .page-content,
body.elementor-page-66 main .page-content > div{		position: absolute;
    top: 0;
    bottom: 0; width: 100%; }
*/

/* ==========================================================================
   Formulare
   ========================================================================== */
.custom-formular .elementor-field-type-textarea label {
  width: auto;
  height: auto;
  position: static;
  margin-bottom: 10px;
}
.custom-formular .elementor-field-type-textarea textarea {
  border-width: 2px!important;
}
.custom-formular input,
.custom-formular select {
  padding-left: 0px;
}
.custom-formular ::placeholder {
  opacity: 1!important;
  visibility: hidden;
}

/* DL Formular */

/* ===== Labels ===== */
.dl-kontakt-formular .elementor-field-label,
.dl-kontakt-formular .elementor-field-group.elementor-field-type-radio label {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-primary);
    margin-bottom: 0.35rem;
}

.dl-kontakt-formular .elementor-field-group.elementor-field-type-radio label {margin-bottom: 1rem;}

/* Radio-Label gleiche Typografie wie Placeholder (ohne Opazität) */
.dl-kontakt-formular .elementor-field-group.elementor-field-type-radio .elementor-field-option label {
    font-family: var(--e-global-typography-8f4927b-font-family), Sans-serif;
    font-size: var(--e-global-typography-8f4927b-font-size);
    font-weight: var(--e-global-typography-8f4927b-font-weight);
    line-height: var(--e-global-typography-8f4927b-line-height);
    color: var(--e-global-color-primary);
	margin-bottom: 0rem;
}

/* ===== Inputs & Textareas (nur untere Border + Hintergrund) ===== */
.dl-kontakt-formular .elementor-field.elementor-field-textual,
.dl-kontakt-formular textarea.elementor-field-textual {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--e-global-color-primary);
    border-radius: 0;
    background: transparent; /* versucht erst transparent */
    background-color: var(--e-global-color-secondary); /* falls Transparent nicht gewünscht */
    box-shadow: none;
    padding: 0.5rem 0;
    color: var(--e-global-color-primary);
	
	font-family: var(--e-global-typography-8f4927b-font-family), Sans-serif;
    font-size: var(--e-global-typography-8f4927b-font-size);
    font-weight: var(--e-global-typography-8f4927b-font-weight);
    line-height: var(--e-global-typography-8f4927b-line-height);
}

.dl-kontakt-formular textarea.elementor-field-textual {
    display: flex;              /* macht vertikale Steuerung möglich */
    align-items: flex-end;      /* Text unten ausrichten */
    padding-bottom: 0.5rem;     /* Abstand zum unteren Rand */
    resize: vertical;           /* optional: Höhe anpassbar lassen */
}

/* Placeholder bleibt mit unten */
.dl-kontakt-formular textarea.elementor-field-textual::placeholder {
    line-height: normal;        /* damit er nicht oben klebt */
}


/* Hintergrundfarbe Inputs/Textareas erzwingen */
.elementor-58 .elementor-element.elementor-element-5b669e6.dl-kontakt-formular 
.elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.dl-kontakt-formular 
.elementor-field-group .elementor-field:not(.elementor-select-wrapper)
{
    background: transparent !important; /* oder direkt transparent */
    background-color: var(--e-global-color-secondary) !important; /* falls Farbe statt transparent */
}


.dl-kontakt-formular .elementor-field.elementor-field-textual:focus,
.dl-kontakt-formular textarea.elementor-field-textual:focus {
    outline: none;
}

/* ===== Abstand zwischen Feldgruppen ===== */
.dl-kontakt-formular .elementor-field-group {
    margin-bottom: 2rem!important;
}

/* ===== Placeholder-Typografie mit 0.8 Opazität ===== */
.dl-kontakt-formular .elementor-field.elementor-field-textual::placeholder,
.dl-kontakt-formular textarea.elementor-field-textual::placeholder {
    font-family: var(--e-global-typography-8f4927b-font-family), Sans-serif;
    font-size: var(--e-global-typography-8f4927b-font-size);
    font-weight: var(--e-global-typography-8f4927b-font-weight);
    line-height: var(--e-global-typography-8f4927b-line-height);
    color: var(--e-global-color-primary);
    opacity: 0.8;
}

/* ===== Radio-Gruppe verteilt ===== */
.dl-kontakt-formular .elementor-field-group.elementor-field-type-radio .elementor-field-subgroup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.dl-kontakt-formular .elementor-field-group.elementor-field-type-radio .elementor-field-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



/* Radio-Kreise in Primary */
.dl-kontakt-formular input[type="radio"] {
    accent-color: var(--e-global-color-primary);
    width: 16px;
    height: 16px;
}

.dl-kontakt-formular input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--e-global-color-primary);
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.dl-kontakt-formular input[type="radio"]:checked {
    background: var(--e-global-color-primary);
    box-shadow: inset 0 0 0 4px var(--e-global-color-secondary); /* innerer Kreis */
}


/* Fehlermeldungen im Formular */
.dl-kontakt-formular .elementor-message-danger {
    font-family: var(--e-global-typography-8f4927b-font-family), Sans-serif;
    font-size: var(--e-global-typography-8f4927b-font-size);
    font-weight: var(--e-global-typography-8f4927b-font-weight);
    line-height: var(--e-global-typography-8f4927b-line-height);
}

/* Inline-Hilfe / Feldfehler */
.dl-kontakt-formular .elementor-form-help-inline {
    font-family: var(--e-global-typography-8f4927b-font-family), Sans-serif;
    font-size: var(--e-global-typography-8f4927b-font-size);
    font-weight: var(--e-global-typography-8f4927b-font-weight);
    line-height: var(--e-global-typography-8f4927b-line-height);
}

.dl-kontakt-formular .elementor-button {margin-top: 3rem;}



/* ==========================================================================
   Animationen
   ========================================================================== */
#start-button {
  animation: arrowdown 3s ease-out infinite;
  z-index: 999!important;
}
@keyframes arrowdown {
  0%, 20% {opacity: 0; transform: translateY(0);}
  30% {opacity: 0.6;}
  55% {opacity: 1;}
  80% {opacity: 0.6;}
  95%, 100% {opacity: 0; transform: translateY(1.5rem);}
}

/* ==========================================================================
   Komponenten: Flash-List, Timeline, etc.
   ========================================================================== */


.custom-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-list ul li {
  display: flex;
  align-items: flex-start;
  /* optional: Zeilenabstand harmonisch */
  line-height: 1.4;
}

.custom-list ul li::before {
  content: "";
  flex: 0 0 20px;             /* Grundbreite für default */
  height: 15px;
  margin-right: 15px;
	margin-top: 4px;
  background: url('/wp-content/uploads/2025/07/arrow-full.svg') left center no-repeat;
  background-size: 100% 100%; /* füllt die Box, keine «contain»-Verkleinerung */
}

/* Orange-Variante mit 30px fixer Breite */
.custom-list.orange ul li::before {
  flex-basis: 30px;           /* feste Breite */
  height: 20px;
  margin-right: 20px;
	
  background-image: url('/wp-content/uploads/2025/08/arrow-right-orange.svg');
  background-size: 100% 100%; /* füllt 30 × 20 exakt */
}

/* ==========================================================================
   Background Fixed
   ========================================================================== */
.background-attachment-fixed{
	background-attachment: fixed;
}

/* ==========================================================================
   Footer
   ========================================================================== */


/* ==========================================================================
   Media Queries (Responsive)
   ========================================================================== */


@media (max-width: 1400px) {
  :root {
    --btn-padding-side: 25px;
    --img-height: 70vw;
	  
	--container-padding-lg: 12%;
	  	--container-padding-sm: 8%;

	
	--side-padding: 2rem;
  }
  .logo svg {
    height: 70px;
  }
	
	#hero-container .box {max-width: 500px; width: 31%;}

}

@media (max-width: 767px) {
  :root {
    --btn-padding-side: 18px;
    --img-height: var(--img-height-mobile);
    --custom-img-height: 350px;
	  	  	--container-padding-sm: 3rem;

	  	--container-padding-lg: 3rem;
	
	--side-padding: 20px;
  }
	
	body.elementor-page-66 main .page-content,
body.elementor-page-66 main .page-content > div{		position: static;
 }
	
	header.elementor-sticky--effects #logo img {width: 100%}
	
	#circle-icon {position: static;}
	
	#projekt-loop {}
	
		#hero-container .box {max-width: 420px; width: 48%;}

/*Pfeile*/
.impulse-carousel .elementor-swiper-button.elementor-swiper-button-next,
.impulse-carousel .elementor-swiper-button.elementor-swiper-button-prev{
	margin-right: 0px;
	margin-left: 0px;
}

}

@media (max-width: 580px) { 
	#hero-container .box {max-width: 600px; width: 100%;}
}

/* ==========================================================================
   Utility Klassen
   ========================================================================== */

.p-text-max-width div {
  max-width: 900px;
}