/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi (edited by martin-dillschneider.de and guenterweber.com)
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/


/* ===================================
   Grundlagen
   Globale Variablen, Reset, Grundlayout
   =================================== */


/* ===================================
   Typografie
   Basis-Schriftgröße, Überschriften, Absätze, Listen, Zitate, Links
   =================================== */

/*Überschriften*/
#top h1 { font-size: var(--enfold-font-size-theme-h1) }
#top h2 { font-size: var(--enfold-font-size-theme-h2) }
#top h3 { font-size: var(--enfold-font-size-theme-h3) }
#top h4 { font-size: var(--enfold-font-size-theme-h4) }
#top h5 { font-size: var(--enfold-font-size-theme-h5) }
#top h6 { font-size: var(--enfold-font-size-theme-h6) }

h1,h2{
    text-transform: none !important; /* Großschreibung bei Enfold-Überschriften für H1 und H2 deaktivieren */
    font-weight: 800 !important; /* H1 und H2 fetter setzen */
}

/*Basis-Schriftgröße Fließtext*/
body { font-size: var(--enfold-font-size-theme-content) }

/* Enfold typische Setzung von einigen Glyphen */
#top .special_amp {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit
}

/* Untertitel - das könnte man natürlich oben mit in die #top h6 declaration hineinnehmen, - durch komma getrennt */
#top .av-subheading {
  font-size: var(--enfold-font-size-theme-h6)
}

/* top-level Menüpunkte */
#top .av-main-nav > li > a {
  font-weight: 500;
  font-size: var(--enfold-font-size-theme-content);
}

/* header_meta inhalte - wie phone-info etc. */
#top #header_meta * {
  font-size: var(--enfold-font-size-theme-content);
  font-weight: 400;
}

/*
** Links
*/
div p span a{
  /* color: red !important;             Beispiel: Linkfarbe rot */
  text-decoration: underline !important;  /* Unterstreichung */
  transition: color 0.5s ease, font-weight 0.3s ease; /* sanfte Übergänge für Farbe und Schriftschnitt */
}
div p span:hover,
div p span:focus {
  
}

/*fett/bold im Editor gesetzt*/
.main_color strong{
    color: inherit !important; /*übernimmt Text-Farbe des Elternteils*/
    font-weight: 700; /*bold*/
}
b, strong{
   color: var(--main-content-text-color) !important; /*fette Text-Farbe aus ENFOLD Backend*/
   font-weight: 700; /*bold*/
}

/*Sehr große Typo, kein H-Tag*/
div.avia_textblock.big-type.av_inherit_color p {
	font-size: var(--enfold-font-size-theme-content-big) !important;
	font-weight: 800;
	margin: 30px 0;
	line-height: 1.4em;
}

/*Zitate - Blockquotes*/
div.avia_textblock blockquote p{
  font-weight: 800;
  color: #ff7a7c; /*coral Signalfarbe*/
}

/*Titel der Aufzählung innerhalb eines kleinen Iconlist-Elementes*/
div.av_iconlist_title.iconlist_title_small{
  font-weight: 600;
} 





/* ===================================
   Header

   =================================== */

   /*Flyout menu*/
   /* Seiten-Overlay (Hintergrund) des Flyout-Menüs ändern */
   #top .av-burger-overlay {
    background-color: rgba(204, 159, 140, 0.85) !important; /* gewünschte Farbe einsetzen */
}



/* ===================================
   Layout / Struktur
   Container, Grid, Seitenaufteilung
   =================================== */

/* === Header Above-the-Fold-Bereich. Spezielle Aufteilung, wenn nötig. === */
/* === Einsatz von grid-template-areas  === */
/* === Die transluzenten Farbhintergründe können dann entfernt werden  === */

/* #top #headersektion .container {
  vertical-align: bottom;
  display: table;
  table-layout: fixed;
  height: 85vh;
  padding-top: 250px;
}

#headersektion .container .content {
  vertical-align: bottom;
}

#headersektion .entry-content-wrapper .flex_column:nth-child(1) { grid-area: A }
#headersektion .entry-content-wrapper .flex_column:nth-child(2) { grid-area: B }
#headersektion .entry-content-wrapper .flex_column:nth-child(3) { grid-area: C }
#headersektion .entry-content-wrapper .flex_column:nth-child(4) { grid-area: D }


#headersektion .entry-content-wrapper {
  display: grid !important;
  grid-template-columns: 2fr 0.75fr;
  align-items: center;
  grid-template-areas: 
    "A A" 
    "B D" 
    "C D";
}

#headersektion .entry-content-wrapper:before,
#headersektion .entry-content-wrapper:after {
  display: none !important;
}

#headersektion .content {
  padding-bottom: 0
}

.responsive #top #wrap_all #headersektion .entry-content-wrapper .flex_column {
  margin-top: 0;
  width: unset;
}

.responsive #top #wrap_all #headersektion .content .flex_column:last-child {
  align-self: end;
  margin-bottom: 0 !important;
  padding: 0;
  bottom: 0;
  right: 0;
  width: unset !important; 
}

@media only screen and (max-width: 989px) {
  .responsive #wrap_all #headersektion .container {
    vertical-align: bottom;
    display: table;
    table-layout: fixed;
    height: 70vh;
    margin: 0 auto;
    padding: 0 50px;
    width: 100%;
    max-width: 100%;
  }
  #headersektion .entry-content-wrapper {
    grid-template-columns: 1.5fr 0.8fr;
  }
}


@media only screen and (max-width: 767px) {
  #headersektion .entry-content-wrapper {
    grid-template-columns: 1fr 0.8fr;
    grid-template-areas:
      "A A" 
      "B B" 
      "C C" 
      "D D";
  }
}


@media only screen and (min-width: 990px) {
  .responsive #top #wrap_all .flex_cell.avia-builder-el-first {
    padding: 0 5% 0 10% !important;
  }
  .responsive #top #wrap_all .flex_cell.avia-builder-el-last {
    padding: 0 10% 0 5% !important;
  }
}
*/



/* Floating CTA Bild am Rand */
/* meine Floating CTA Lösung am Rand */
#floating-cta-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 200px;
  opacity: 0; 
  /* Startposition: außerhalb des Viewports nach rechts */
  transform: translateX(220px);
  transition: opacity 0.8s ease, transform 0.8s ease; /* Sanfter Übergang */
  z-index: 50;
}

/* Endposition: Element ist sichtbar */
#floating-cta-button.visible {
  transform: translateX(0);
  opacity: 1; 
  pointer-events: auto;
}

@media only screen and (max-width: 767px) {
  #floating-cta-button {
    max-width: 120px
  }
}

#floating-cta-button a  {
  transition: transform 0.5s ease
}

#floating-cta-button a:hover  {
  transform: scale(1.1);
  transform-origin: center;
}

#floating-cta-button a:hover .image-overlay {
  display: none !important;
}



/* ==== das Buttonpaar links grün fläche - rechts nur border grün ====== */
/* ==== nicht vergessen dem Element diese Klasse zuzuordnern :  button-paar-gruen ====== */

#top .button-paar-gruen {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px
}

#top .button-paar-gruen .avia-button  {
  flex: 0 1 45%
}

#top .button-paar-gruen .avia-button {
  border-radius: 40px;
  padding: 20px 25px;
  border: 4px solid #85bc3d !important;
}

#top .button-paar-gruen .avia-button:first-child {
  background-color: #85bc3d;
}

#top .button-paar-gruen .avia-button:nth-child(2) {
  color: #85bc3d;
  background-color: #FFF;
}

#top .button-paar-gruen .avia-button svg {
  width: 30px !important;
  height: 30px;
  top: -3px !important;
  position: relative;
}

#top .button-paar-gruen .avia-button:nth-child(2) svg {
  fill: #85bc3d !important;
}
/* == ENDE == das Buttonpaar links grün fläche - rechts nur border grün ====== */



/* ===================================
   Navigation
   Hauptmenü, Dropdowns, Mobile-Menü
   =================================== */
/*Nach-oben-scrollen-Pfeil unten rechts ausblenden*/
#scroll-top-link {
  display: none !important;
}

/*Footer Menu ohne Bullet-Points ausgeben*/
.footer-menu-class ul {
  list-style-type: none; /* Keine Bulletpoints */
  margin: 0;
  padding: 0;
  padding-left: -20px; /* Standard-Einrückung entfernen */
}
.footer-menu-class li {
  display: block;       /* vertikal untereinander */
  margin-right: 0;      /* kein horizontaler Abstand nötig */
  margin-bottom: 10px;  /* Abstand nach unten (optional) */
}
.footer-menu-class li a {
  text-decoration: none; /* keine Unterstreichung */
  color: #000;           /* Textfarbe anpassen */
  /* weitere Styles hier */
}



/*Social Icons im Socket*/




/* ===================================
   Buttons
   Standard-, Primär-, Sekundärbuttons
   =================================== */

.avia-button,
.avia-double-button {
  font-size: var(--enfold-font-size-theme-content) !important;
}


/* ===================================
   Formulare
   Input-Felder, Textareas, Selects, Checkboxen
   =================================== */


/* ===================================
   Footer-Bereich
   Fußzeile, soziale Netzwerke, Copyright
   =================================== */


#top #footer-page ul,
#top #footer-page ul li {
  padding-left: 0 !important;
  margin-left: 0
} 


/* ===================================
   Responsive Design
   Media Queries für mobile Geräte
   =================================== */

/*Spezielle Rasterzeile die nicht Fullwidth(Enfold default) ist*/
/* Grid Row mit flexiblen, flüssigen Seitenabständen via clamp() */
#top #av-grid-custom-width {
  /* maximale Breite des Inhalts, zentriert */
  max-width: 1600px;
  margin: 0 auto;

  /* dynamischer Innenabstand: min 16px, wächst mit 4vw, max 48px */
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* Optional: Spaltenabstände im Grid harmonisch anpassen */
#top #av-grid-custom-width .av-layout-grid-container,
#top #av-grid-custom-width .flex_cell {
  gap: clamp(12px, 2vw, 32px);
  padding: 0; /* vorhandenes Enfold-Padding neutralisieren */
}

/* Optional für breite Bildschirme > 1920px:
   Rand noch etwas vergrößern und max. Leselänge begrenzen */
@media (min-width: 1920px) {
  #top #av-grid-custom-width {
    max-width: 1920px;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
  }
}