/*
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 wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/


/*Add your own styles here:*/

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* GENERAL CUSTOM CSS */





/* Versteckt H1 vor Verschiebung 20.1.2025 */
/* H1 initial komplett unsichtbar machen – kein Platz reserviert */
.hero-title-container.h1-hidden-initial .moved-title {
    display: none;
}

/* Blendet bei Blogposts doppeltes und nicht angezeigtes Beitragsbild aus (nur bei Desktops angezeigt) 9.3.2026 */
#main > div.container_wrap.container_wrap_first.main_color.sidebar_right > div > main > article > div.blog-meta {
    display: none;
}



/* ===========================
   BUTTON UND POPUPS
   =========================== */


:root {
    --header-height: 120px; /* Höhe des Headers initial, Desktop */
}

/* Wrapper neutralisieren */
#button-schnuppertag,
#button-tandemflug,
#button-flugreise,
.button-schnuppertag,
.button-tandemflug,
.button-flugreise {
    position: relative;
}

/* Sticky-Button - ist teilweise inline gestyled*/
#button-schnuppertag a.delayed-button,
#button-tandemflug a.delayed-button,
#button-flugreise a.delayed-button {
    position: fixed;             /* wirklich sticky im Viewport */
    top: calc(var(--header-height) + 20px); /* Abstand Unterkante Header */
    right: calc(2vw + 13px);          /* bündig zu Desktop-Menü */
    border-radius: 50px; /* oder 999px */
    align-items: center;        /* Zentriert Text vertikal */
    justify-content: center;    /* Zentriert Text horizontal */

}

/* Mobile Sticky Button Mobile */
@media (max-width: 767px) {
    :root {
        --header-height: 80px; /* Höhe Header Mobile */
    }

    #button-schnuppertag a.delayed-button,
    #button-tandemflug a.delayed-button,
    #button-flugreise a.delayed-button {
        top: calc(var(--header-height) + 75px);
        right: calc(5.75vw + 8px); /* exakt gleiche Entfernung wie Burger */        
    }
}

/* Buttons Event-Buchungs-Formular und WP-Login-Formular - einzige important-Regel */
.em-booking-form,
.em-booking-confirm,
#em-booking-form-section-confirm {
  input[type="submit"].em-booking-submit {
    border-radius: 50px !important;
    font-weight: bold;
  }
}

/* Login-Button wp-login.php -  mein Selektor */
#loginform input#wp-submit { 
    border-radius: 50px;
    font-weight: bold;
    margin-top: 10px;
}

/* Woocommerce-Buttons */
.woocommerce-cart-form .shop_table.cart td.actions button[name="update_cart"], /* Button Warenkorb aktualisieren */
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button,  /* Button Checkout Kasse */
.widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout),  /* Button Warenkorb anzeigen */ 
.widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout, /* ??? */ 
.single-product div.product form.cart button.single_add_to_cart_button, /* Button in den Warenkorb */
#top .woocommerce-notices-wrapper div.woocommerce-message a.button.wc-forward, /* Button "Weiter einkaufen?" bei Message "Artikel wurde zugefügt" */
#top .woocommerce-notices-wrapper div.woocommerce-error a.button, /* Button "Weiter einkaufen?" bei Message "Artikel wurde zugefügt" */
#top.woocommerce-page a.button.wc-backward, /* Button "zurück zum Shop" nach Entfernung eines Artikels aus Warenkorb */
#place_order /* Button Zahlungspflichtig bestellen (Kasse) */  {
    border-radius: 50px;
} 


/* 
   ABSCHNITT BUTTON – CSS-only Delay + Fade
                                     */

#button-schnuppertag a.delayed-button,
#button-tandemflug a.delayed-button,
#button-flugreise a.delayed-button {
    opacity: 0;
    animation: fadeInButton 1s ease forwards;
    animation-delay: 5s;   /* ← dein Delay */
}

@keyframes fadeInButton {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* 
   ABSCHNITT: POPUP – Eventliste
                                     */
/* Event-Links im Popup grün */
#test-popup .em-events-list a,
#test-popup a {
    color: #00af83;
}

/* Tabellen-Grundlayout */
#test-popup table {
    width: 100%;
}

/* Erste Spalte (Datum/Zeit) breiter */
#test-popup table td:first-child {
    width: 30%;
    white-space: normal;
}

/* Zweite Spalte (Veranstaltung) den Rest */
#test-popup table td:nth-child(2) {
    width: 70%;
}

/* Zeilenumbrüche in Datum/Zeit lesbarer machen */
#test-popup table td:first-child br {
    display: block;
    content: "";
    margin-top: 6px;
}

/* Padding, Borders & Farben – Enfold-Style */
#test-popup .css-events-list th,
#test-popup .css-events-list td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: top;
}

#test-popup .css-events-list td {
    color: var(--enfold-main-color-color, #333);
}


/* 
   ABSCHNITT: POPUP – Kontaktformular (MFP)
                                             */
.mfp-content {
    background-color: white;
    padding: 13px;
    width: 80%;
    font-family: 'plus-jakarta-sans';
}

.avia_ajax_form .button,
html body div .avia-button,
#top div#em-booking-form-section-confirm fieldset div input.em-booking-submit.button.avia-button {
    background-color: #00af83;
    color: white;
    font-family: 'plus-jakarta-sans';
    border-radius: 50px;
    padding: 15px 15px;
    font-weight: bold;
}






/* ===========================
   ENDE BUTTON UND POPUPS
   =========================== */




/* Blockquotes in FAQ 10.2.2026 */
#top blockquote {
    margin-top: 35px;
}
/* END OF Blockquotes in FAQ */




/* BEGIN WEITERLESEN-TAG – nur noch Styling, kein Text mehr über CSS */
.readmore-inline summary {
    list-style: none;               /* Entfernt Standard-Pfeil in manchen Browsern */
    color: #00AF93;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;                /* normale Größe – KEIN 0 mehr! */
    line-height: 1.5;
}

/* Standard-Pfeil komplett weg (Chrome, Edge, Safari, Firefox) */
.readmore-inline summary::-webkit-details-marker,
.readmore-inline summary::marker {
    display: none;
}

/* Hover-Effekt */
.readmore-inline summary:hover {
    color: #bb16a2;
}

/* Optional: Stil beim Öffnen (z. B. fett oder Farbe ändern) */
.readmore-inline[open] summary {
    font-weight: bold;
    color: #00AF93;
}
/* END OF WEITERLESEN-TAG – nur noch Styling, kein Text mehr über CSS *

/* --- BEGIN ENFOLD FOOTER SOCIAL ICONS FIX 2.2.26 ---- */

/* Icons zu perfekten Kreisen machen */
html body#top #wrap_all #footer .av-share-box-list li a {
    border-radius: 100px; /* Icon rund */
    width: 40px;          /* feste Breite */
    height: 40px;         /* feste Höhe */
    line-height: 40px;    /* vertikale Mitte Text/Icon */
    display: block;       
    text-align: center;   
    padding: 0;           
}

/* Abstände zwischen den Listen-Elementen */
html body#top #wrap_all #footer .av-share-box-list li {
    margin-left: 12px;    /* Abstand zwischen Icons */
    padding: 0;           
}

/* Icons rechtsbündig ausrichten */
html body#top #wrap_all #footer .av-share-box-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Abstand über Social-Sharing-Box im Footer eliminieren */
html body#top #wrap_all #footer .av-social-sharing-box {
    margin-top: 0;
}

/* Desktop: Platz schaffen, damit Back-to-Top-Button Icons nicht verdeckt */
@media only screen and (min-width: 768px) {
    html body#top #wrap_all #footer .av-share-box-list {
        padding-right: 50px;
    }
}

/* --- Globale Footer-Fixes --- */

/* Footer-Padding symmetrisch */
#footer.container_wrap.footer_color {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Widget-Abstände auf Null setzen */
#footer.container_wrap .widget {
    margin: 0;
    padding: 0;
}

/* Bilder vertikal mittig ausrichten */
#footer img,
#footer .container img,
#footer .flex_column img {
    vertical-align: middle;
    display: inline-block;
}

/* Flexbox für Footer-Spalten */
#footer .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Desktop: Normale Seiten (nicht Events) --- */
@media only screen and (min-width: 768px) {
    body:not(.single-event) #footer .container .flex_column {
        /* normale Desktop-Anordnung, Flexbox übernimmt Reihenfolge */
        margin-bottom: 0;
    }
}

/* --- Desktop: Event-Seiten --- */
@media only screen and (min-width: 768px) {
    body.single-event #footer .av-share-box-list {
        padding-right: 50px; /* Event-spezifisches Padding rechts */
    }
}

/* --- Mobile Footer-Anordnung: Normale Seiten (<= 767px) --- */
/* Issue A/B/B2: Columns nebeneinander, Margin-Bottom 0, Separator killen */
@media only screen and (max-width: 767px) {
    body:not(.single-event) #footer .container .flex_column {
        display: inline-block; /* Columns nebeneinander */
        width: 49%;            /* zwei Spalten nebeneinander */
        margin-left: 2%;       /* Abstand links */
        margin-bottom: 0;      /* unteren Abstand entfernen */
        clear: none;           /* kein Zeilenumbruch */
        float: left;           /* float für Enfold-Kontext */
    }

    body:not(.single-event) #footer .container .flex_column.first {
        margin-left: 0;        /* erste Spalte links bündig */
    }

    body:not(.single-event) #footer .flex_column .seperator {
        display: none;         /* Separator entfernen */
    }
}

/* --- Mobile Footer-Anordnung: Event-Seiten (<= 767px) --- */
@media only screen and (max-width: 767px) {
    body.single-event #footer .container .flex_column {
        display: inline-block; /* Columns nebeneinander */
        width: 49%;            
        margin-left: 2%;       
        margin-bottom: 0;      
        clear: none;           
        float: left;           /* float für alten Enfold-Kontext */
    }

    body.single-event #footer .container .flex_column.first {
        margin-left: 0;        /* erste Spalte links bündig */
    }
}

/* --- Social-Icons: Globale Styles --- */
#footer .av-share-box-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#footer .av-share-box-list li {
    margin-left: 12px;
}

#footer .av-share-box-list li a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;

    border-radius: 100px;
    padding: 0;
    vertical-align: middle;
}

/* Hover: runder Hintergrund pro Plattform */
#footer .av-share-link-facebook a:hover,
#footer .av-social-link-facebook a:hover {
    background-color: #1877F2; /* Facebook-Blau */
    color: white;
    border-radius: 100px;
}

#footer .av-share-link-instagram a:hover,
#footer .av-social-link-instagram a:hover {
    background-color: #E4405F; /* Instagram-Pink */
    color: white;
    border-radius: 100px;
}

#footer .av-share-link-youtube a:hover,
#footer .av-social-link-youtube a:hover {
    background-color: #FF0000; /* YouTube-Rot */
    color: white;
    border-radius: 100px;
}

/* --- Event-spezifische Anpassungen --- */

/* Issue C: Top-Margin Text-Widget #text-31 entfernen (alle Viewports) */
body.single-event #text-31 > div > div {
    margin-top: 0; /* Abstand nach oben entfernen */
}

/* Event-spezifische Hover-Hintergründe für Social-Icons (dezenter) */
body.single-event #footer .av-share-link-facebook a:hover,
body.single-event #footer .av-social-link-facebook a:hover {
    background-color: rgba(24, 119, 242, 0.4);
    border-radius: 100px;
}

body.single-event #footer .av-share-link-instagram a:hover,
body.single-event #footer .av-social-link-instagram a:hover {
    background-color: rgba(228, 98, 38, 0.4);
    border-radius: 100px;
}

body.single-event #footer .av-share-link-youtube a:hover,
body.single-event #footer .av-social-link-youtube a:hover {
    background-color: rgba(255, 0, 0, 0.4);
    border-radius: 100px;
}

/**** ENDE Footer-Anpassungen und Social Links ****/


html body#top #wrap_all #footer .container .flex_column.av_one_half {
    display: inline-block;
    width: 49%;
    margin-left: 2%;
    margin-bottom: 0;
    clear: none;
}

html body#top #wrap_all #footer .container .flex_column.av_one_half.first {
    margin-left: 0;
}


/****************************************************
* TEASER – DESKTOP 5.2.2026 – Version mit Clamp
****************************************************/

/* 0) Avia-Overlay-Deckel deaktivieren */
#hero-desktop .container.av-section-cont-open {
    pointer-events: none;
}

/* ========================================
   DESKTOP TEASER – EINHEITLICHE POSITION
======================================== */

#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 { 
    position: absolute;
    top: 11vh;
    /*right: calc(50vw - 50px);   right-regel wird nur respektiert, wenn left-regel auf auto ist*/
    left: 0vw; /* diese regel gewinnt gegen rechts-regel, solange sie nicht auf auto eingestellt ist*/

    width: clamp(380px, 28vw, 520px);
    max-height: 40vh;

    margin: 0;
    padding: 12px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(11px) saturate(160%);
    -webkit-backdrop-filter: blur(11px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 22px;

    display: flex;
    flex-direction: row;
    align-items: center;

    overflow: hidden;
    pointer-events: auto;
    z-index: 20;

    opacity: 0;
}


/* 1) Bild-Container */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 #teaser-img-d1,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 #teaser-img-d2,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 #teaser-img-d3 {
    display: block;
    flex: 0 0 60%;  /* Bild nimmt 50% Containerbreite */
    max-width: 60%;
    margin: 0;
}

/* 2) Bild */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 #teaser-img-d1 img,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 #teaser-img-d2 img,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 #teaser-img-d3 img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    display: block;
}

/* 3) Textblock */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 #teaser-text-d1,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 #teaser-text-d2,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 #teaser-text-d3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    min-width: 0;  /* wichtig für flex + overflow */
    padding-left: 16px;
    color: #fff;
    overflow-wrap: break-word;
}

/* 4) H6 – Schriftgröße dynamisch mit Clamp */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 h6,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 h6,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 h6 {
    font-size: clamp(1rem, 1.25vw, 1.5rem); /* min 1rem, max 1.5rem, dynamisch */
    line-height: 1.25;
    margin: 0 0 6px 0;
    color: #ffffff;
    pointer-events: auto;
}

/* 5) P – Schriftgröße dynamisch mit Clamp */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 p,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 p,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 p {
    font-size: clamp(0.9rem, 1vw, 1.2rem); /* min 0.9rem, max 1.2rem */
    line-height: 1.32;
    margin: 0;
    color: #f2f2f2;
    pointer-events: auto;
}



/* ===========================
   ANIMATIONSLOGIK
   =========================== */

/* Spalten-Animation */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 {
    animation: fadeM1 18s linear infinite;
    animation-delay: 3s;
}
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 {
    animation: fadeM2 18s linear infinite;
    animation-delay: 3s;
}
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 {
    animation: fadeM3 18s linear infinite;
    animation-delay: 3s;
}

/* Kinder folgen exakt der Spalte */
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 #teaser-img-d1 img,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d1 #teaser-text-d1 {
    animation: fadeM1 18s linear infinite;
    animation-delay: 3s;
}

#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 #teaser-img-d2 img,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d2 #teaser-text-d2 {
    animation: fadeM2 18s linear infinite;
    animation-delay: 3s;
}

#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 #teaser-img-d3 img,
#hero-desktop.with_parallax_opener .entry-content-wrapper #teaser-d3 #teaser-text-d3 {
    animation: fadeM3 18s linear infinite;
    animation-delay: 3s;
}



/* ===========================
   KEYFRAMES
   =========================== */

/* TEASER 1: 0–6s */
@keyframes fadeM1 {
    0%      { opacity: 0; }
    5.55%   { opacity: 1; }
    22.22%  { opacity: 1; }
    27.77%  { opacity: 0; }
    33.33%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* TEASER 2: 6–12s */
@keyframes fadeM2 {
    0%      { opacity: 0; }
    33.33%  { opacity: 0; }
    38.88%  { opacity: 1; }
    55.55%  { opacity: 1; }
    61.11%  { opacity: 0; }
    66.66%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* TEASER 3: 12–18s */
@keyframes fadeM3 {
    0%      { opacity: 0; }
    66.66%  { opacity: 0; }
    72.22%  { opacity: 1; }
    88.88%  { opacity: 1; }
    94.44%  { opacity: 0; }
    100%    { opacity: 0; }
}



/* ========================================
====== ENDE DESKTOP TEASER ================
======================================== */

/* ========================================
====== BEGIN MOBILE TEASER ================
======================================== */

/* TEASER – MOBILE (Hard Reset + Glassmorphism + Animation) */

/* ===========================
   TEASER – CONF-Block 
   =========================== */

/* HERO als Referenz für absolute Kinder */
body.with_parallax_opener #hero-mobile {
    position: relative;
}

/* ========================================
   MOBILE TEASER – EINHEITLICHE POSITION
======================================== */
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 {
    position: absolute;   /* absolute erlaubt pixelgenau */
    top: 15vh;            /* gleiche vertikale Position für alle */
    right: calc(0vw + 0px);  /* Abstand vom rechten Rand: wird nur respektiert, wenn left-regel auf auto ist*/
    left: 2.5vw;    /* <- auto zwingt Browser, Left-Wert nicht zu benutzen. Sonst gewinnt left gegen right-Regel */
    margin: 0;            /* Margin deaktivieren, da Top/Left */
    transform: none;      /* keine zusätzlichen Verschiebungen */
    
    width: clamp(100px, 30vw, 140px); /* max Breite */
    opacity: 0;                        /* Animation bleibt */
    padding: 5px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 18px;
    overflow: hidden;
    pointer-events: none;
}

/*  BILD-CONF */
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 #teaser-img-m1 img,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 #teaser-img-m2 img,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 #teaser-img-m3 img {
    max-width: 98%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 18px;
}

/*  TEXTBLOCK-CONF (H6 + p) */
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 h6,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 h6,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 h6 {
    font-size: 0.85rem;  /* Vorher 1.15rem */
    line-height: 1.1;    /* Engerer Zeilenabstand */
    margin: 0;
    color: #ffffff;
}

body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 p,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 p,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 p {
    font-size: 0.75rem;  /* Vorher 0.98rem */
    line-height: 1.2;
    margin: 0;
    color: #f2f2f2;
}



    /* ===========================
       ANIMATIONSLOGIK
       =========================== */

    /* Spalten-Animation */
    body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 {
        animation: fadeM1 18s linear infinite;
        animation-delay: 3s;
    }
    body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 {
        animation: fadeM2 18s linear infinite;
        animation-delay: 3s;
    }
    body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 {
        animation: fadeM3 18s linear infinite;
        animation-delay: 3s;
    }

    /* Kinder folgen exakt der Spalte */
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 #teaser-img-m1 img,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m1 #teaser-text-m1,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 #teaser-img-m2 img,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m2 #teaser-text-m2,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 #teaser-img-m3 img,
body.with_parallax_opener #hero-mobile .entry-content-wrapper #teaser-m3 #teaser-text-m3 {
    animation: inherit;
}



    /* ===========================
       KEYFRAMES
       =========================== */

    /* TEASER 1: 0–6s */
    @keyframes fadeM1 {
        0%      { opacity: 0; }
        5.55%   { opacity: 1; }
        22.22%  { opacity: 1; }
        27.77%  { opacity: 0; }
        33.33%  { opacity: 0; }
        100%    { opacity: 0; }
    }

    /* TEASER 2: 6–12s */
    @keyframes fadeM2 {
        0%      { opacity: 0; }
        33.33%  { opacity: 0; }
        38.88%  { opacity: 1; }
        55.55%  { opacity: 1; }
        61.11%  { opacity: 0; }
        66.66%  { opacity: 0; }
        100%    { opacity: 0; }
    }

    /* TEASER 3: 12–18s */
    @keyframes fadeM3 {
        0%      { opacity: 0; }
        66.66%  { opacity: 0; }
        72.22%  { opacity: 1; }
        88.88%  { opacity: 1; }
        94.44%  { opacity: 0; }
        100%    { opacity: 0; }


} 

/* ========================================
====== ENDE MOBILER TEASER ================
======================================== */


/* ===============================
   Reisen Grid
   =============================== */

/* Grid Wrapper */
.reisen-grid {
    display: grid;
    grid-template-columns: 1fr; /* einspaltig auf Desktop */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Event-Kachel */
.reisen-kachel {
    display: flex;
    flex-direction: column; /* default: Bild oben, Content darunter */
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Bild-Container */
.kachel-bild {
    width: 100%;
    aspect-ratio: 1/1; /* immer quadratisch auf Mobile */
    overflow: hidden;
}
.kachel-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content unter dem Bild */
.reisen-kachel-content {
    padding: 15px;
    text-align: center; /* default Mobile */
}

/* Event-Titel */
.reisen-kachel-title {
    margin: 10px 0 5px;
    font-size: 1.4rem;
}

/* Event-Datum */
.reisen-kachel-date {
    margin: 0 0 10px;
    color: #666;
}

/* Event-Location */
.reisen-kachel-location {
    margin: 0 0 15px; /* Luft unter Location */
    /* font-style: italic; */
    color: #444;
}

/* ===============================
   Desktop Anpassung
   =============================== */
@media (min-width: 768px) {
    .reisen-kachel {
        flex-direction: row; /* Bild links, Text rechts */
        align-items: flex-start;
    }
    .kachel-bild {
        width: 40%; /* Bild links */
        aspect-ratio: auto; /* Höhe passend zum Inhalt */
    }
    .reisen-kachel-content {
        width: 60%; /* Text rechts */
        text-align: left; /* linksbündig */
        padding: 15px 20px; /* Abstand zum Bild */
    }
}

/* ===============================
   Mobile Anpassungen
   =============================== */
@media (max-width: 767px) {
    .reisen-kachel {
        flex-direction: column; /* Bild oben, Text darunter */
    }
    .kachel-bild {
        aspect-ratio: 1/1; /* quadratisches Bild */
    }
    .reisen-kachel-content {
        text-align: center; /* Text zentriert */
    }
}

/* ===============================
   END OF REISEN-GRID
   =============================== */






/* Anpassung für Schliessung des Gaps nach Hero-Sektionen auf Parallax-Opener-Seiten 28.1.2025
/* Zieht den gesamten Content von Seiten mit Body-Klasse with_parallax_opener 25 px höher – schließt den Gap unter Hero-Sektionen */
.with_parallax_opener .entry-content-wrapper {
    margin-top: 0px; 
}

/* Speziell Mobile anpassen (deine Messung war mobile) */
@media (max-width: 767px) {
    .with_parallax_opener .entry-content-wrapper {
        margin-top: -6px;
    }
}


/* vertikale Borderline im Kontextmenü bei desktop und mobile, 27.8.25 - funzt */ 
#header_meta .sub_menu li {
	border-right-width: 0px;
}

/* Buchungen mit neuem Events-Manager v6.1.4 */
	div.em-login div.em-login-trigger {
    display: none;
}

	.em-event-booking-form.input {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}
    
	.em-booking-form {
    margin-right: 65px;
	margin-bottom: 10px;	
}

    .em-login {
    order: 2;
}


.em-booking-message-success.em-booking-message
{
padding: 10pt;
background-color: #00AF83;
color: #FFF;
font-weight: 600;
width: 100%;
}

.em-booking-message-error.em-booking-message
{
padding: 10pt;
background-color: #00AF83;
color: #FFF;
font-weight: 600;
width: 100%;
}


/* entfernt kontur auf widget für webcam small.jpg */
div.wp-caption.alignnone {
	border: none;
	margin: unset;
}


/* Macht bei aktivem Menüpunkt einen Underscore*/
.av_minimal_header .avia-menu-fx{display: inherit;}

/* Lässt WPML-Umschalter mit Flaggen verschwinden, da customized vorhanden*/
.avia_wpml_language_switch.avia_wpml_language_switch_extra {
display: none;
	}

/* Wegen abgespeckten UNCSS eingefügt (templatebuilder avia slideshow element: 1. Block Weiter-, Zurück- und Bild-Links, 2. Block Alt-Text in Slideshow) */
.avia-slideshow-controls  {
    display: none;
    }
    
.avia-inner-caption  {
	display: none;
	}
	
/* Wegen abgespeckten UNCSS eingefügt (Galerie-Element in Portfolio Masonry Entrries (lässt Alt-Text verschwinden) */	
.avia-gallery-caption {
    display: none;
}




    /* ==============================================================
    ***** BEGIN OF 75% transparentem Hintergrund - 15.2.2026 *******
    ============================================================== */

/* Es macht noch eine Top-Border!!! die schafft überall so viele Probleme!!!




Enfold self made: Section-ID-Style: Macht in Parallax-Farbsektionen (Section ID) einen transparenten Hintergrund (für alle Elemente) */
	/* #top .transparenter_hintergrund_75 {
    	background-color: rgba(255,255,255,0.60);
    	margin: 15px;
		font-size:20px;
		color: black;
	} /*



/* Schrift auf transparentem Hintergrund schwarz 
	.avia_textblock.transparenter_hintergrund.av_inherit_color {
   		color: black;
	}
*/
	#top .avia_textblock.transparenter_hintergrund_75 {
    	color: black;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        border-top: none;
        background-color: rgba(255, 255, 255, 0.6);
	}

/* Links auf transparentem Hintergrund fett */
	.avia_textblock.transparenter_hintergrund_75 a {
    	font-weight: bold;
	}

	.avia_textblock.transparenter_hintergrund.av_inherit_color a {
    	font-weight: bold;
	}

    /* Enfold self made: Section-ID-Style: Macht in Parallax-Farbsektionen (Section ID) einen semitransparenten Hintergrund (für Widgets als letztes Element) */
	/* #semitranspwidget .avia-builder-el-last {
		background-color: rgba(255,255,255,0.6);
		padding: 10px;
		float: right;
	} */

    /* Enfold self made: Section-ID-Style: in Parallax-Farbsektionen einen semitransparenten Hintergrund (für Widgets als letztes Element) */
	/*#top .transparenter_hintergrund {
    	background-color: rgba(255,255,255,0.6);
    	padding: 10px;
		color: black;
    	
	} */

    /* ==============================================================
    ***** END OF Semitransparenter Hintergrund (Klasse vergeben *****
    ============================================================== */

/* Enfold self made: Bringt Bullets in Eventlisten zum verschwinden */
	.widget li {
		list-style-type: none;
	}
	
    
/* Enfold self made: Stellt Links vor semitransparentem hintergrund in schwarzer Farbe dar (seite /links)*/
	.schwarze_links a, a:hover {
    	color: #000000;
	}
    

/* Woocommerce: Für Social Links auf Produkteseiten
http://www.kriesi.at/support/topic/social-buttons-on-woocommerce-product-pages/ */
	.single-product .av-share-box {
    	margin-bottom: 20px;
	}



/* Woocommerce 3.3.3 self made: Anpassungen für Kategorienseiten --> Produktanzahl (grün), Kategorientitel, kleiner Pfeil)*/ 
	mark.count {
	color: #00af66;
    }

	h2.woocommerce-loop-category__title {
    	font-size: 1em !important; /*braucht es das? */
    	margin: 0px;
    	padding: 15px !important; /*braucht es das? */
    	position: relative;
    	border-top-style: solid;
    	border-top-width: 1px;
    }

	#top .products .product-category h2:before {
    	content: "";
	    height: 10px;
	    width: 10px;
	    position: absolute;
	    left: 50%;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    transform: rotate(-225deg);
	    border-width: 1px;
		border-style: solid;
	    border-top: none;
	    border-right: none;
	    z-index: 1000;
	    top: -6px;
	    margin-left: -6px;
    	border-color: #e1e1e1;
    	background: white;
    }
    
/* Woo Commerce self made: Schriftgrössen auf Kategorienseiten*/
	.products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
    	font-size: 1em !important; /*braucht es das? */
    }


	#top .price, #top .price span, #top del, #top ins {
  		font-size: 15px !important; /*braucht es das? */
	}
		
/* Woo commerce - Bringt doppelte Preise im Wooshop zum Verschwinden */
	/* Blend den Preis-Suffix (zweiter Preis) in der Produktübersicht aus */
.inner_product_header .price .woocommerce-price-suffix,
.single-product-summary .summary.entry-summary p.price > small {
    display: none;
}

/* Full Calendar: Macht einen Abstand zwischen Zeit und Titel ein und passt Höhe der Zellen an*/
	span.fc-title {
		padding-right: 1px !important; /*braucht es das? */
		display: block;
		text-overflow: ellipsis;
		white-space: pre-line;
	}


/* Events-Manager - Macht remember-me-Container genügend breit für Text  */
	div.em-booking-login label {
  width:200px;
  display: inline-block;
}

/* eigenes Login-Formular - Jakarta als Schriftart  (August 2025) */
#loginform .login-username label,
#loginform .login-password label,
#loginform .login-remember label,
#loginform input#wp-submit,
#loginform p.lost-password code a {
    font-family: 'plus-jakarta-sans';
}

/*
DESKTOP STYLES
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {

/* Macht Kontextmenu Bündig zum Main-Menü - funzt, 27.8.2025 */
	#top #header_meta #avia2-menu { 
		padding-right: 13px; 
	}

/* Enfold - Bringt Trennlinie im Menü zum verschwinden - self made, funzt */
	html #top .av_header_transparency #header_meta {
    	border-bottom: none;
	}

/* Enfold self made: Anpassung der Grösse des Titelcontainers, wo die Breadcrumbs eingeblendet werden. */
	.stretch_full.container_wrap.alternate_color.light_bg_color.empty_title.title_container {
    	MARGIN-TOP: 10px;
    	max-height: 20px;
	}
	
		.breadcrumb.breadcrumbs.avia-breadcrumbs {
    	top: 10px;
	}	
	
		
/* Enfold self made: Anpassung der Grösse des Titelcontainers, wo die Breadcrumbs eingeblendet werden. */
	.breadcrumb.breadcrumbs.avia-breadcrumbs {
    	top: 10px;
	}	
	
	.stretch_full.container_wrap.alternate_color.light_bg_color.empty_title.title_container {
    	MARGIN-TOP: 10px;
    	max-height: 20px;
	}
	
		
/* Enfold - Topmenü auf Desktops in Grossbuchstaben und Submenü in normalen Buchstaben. */
	#avia-menu > li{text-transform: uppercase;} 
	.sub-menu > li{text-transform: initial;}


/* Event-Manager - Anzeige von Eventtiteln im Kalender für Desktops. */
	span.fc-time {font-size: 10px !important;} /*braucht es das? */
    span.fc-title {font-size: 11px !important;} /*braucht es das? */


}


/*
TABLET STYLES - für alles zwischen 990 bis 768 px
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

/* Fix Enfold-Tablet-Breakpoint (989–768px): 5px fehlende Luft rechts beim Menü wegen engerem textmenü */
/* sollte bei Ligin-Seite vielleicht ausgeschlossen werden) */
@media only screen and (max-width: 989px) and (min-width: 768px) {
    #top #header_main #avia-menu > li > a {
        padding-right: 15px; /* 13px + 5px Korrektur – teste 18–20px */
    }
}

/*
MOBILE AND TABLET STYLES - für alles bis 767 px
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {

/* Menü-Inhalt nach rechts ausrichten */
  body #header #header_meta {
        display: flex;
        justify-content: flex-end; /* Menü nach rechts schieben */
        align-items: center; /* Optional: vertikale Zentrierung */
    }

    /* Menü-Inhalt nach rechts ausrichten */
    body #header #header_meta .sub_menu > ul {
        text-align: right; /* Menüinhalt nach rechts ausrichten */
        width: auto; /* Breite automatisch anpassen */
        position: static; /* Normale Positionierung */
        margin: 0; /* Verhindern, dass Margen das Layout beeinflussen */
    }


/* Korrektur an sub.menu (kontextmenu), damit es bündig zum burger wird */

 .sub_menu ul#avia2-menu li.menu-item-wpml-ls-329-de, 
 .sub_menu ul#avia2-menu li.menu-item-wpml-ls-329-fr,
 .sub_menu ul#avia2-menu li.menu-item-wpml-ls-329-en {
	margin-right: -10px;
    }



  /* Einzelne Elemente (z. B. Telefonnummer) nach rechts schieben */
  #top #header_meta .phone-info {
    margin-left: auto;
    text-align: right;
  }

  /* Optional: spacing optimieren */
  #top #header_meta .phone-info span,
  #top #header_meta .sub_menu > ul {
    margin-left: auto;
    margin-right: 0;
  }



/* wegen abgespecktem UNCSS eingefügt, Slideshows Mobile auf volle Breite */
	.ajax_controlls.iconfont {
    display: none;
	}
	
/* Full Calenar self made: Anzeige von Eventtiteln im Kalender für Mobiles. */
	span.fc-time {
   		font-size: 8px !important; /*braucht es das? */
    	padding-left: 1px !important; /*braucht es das? */
    }
    
	span.fc-title {
    	font-size: 8px !important; /*braucht es das? */
    	padding-left: 1px !important; /*braucht es das? */
    }
    
/*rückt mobiles Logo etwas ein für mehr Luft (mit neuem SVG-Logo entfernen!!!)*/	
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img {
	padding-bottom:5px;
}


/*Mobile Breadcrumbs */
    .stretch_full.container_wrap.alternate_color.light_bg_color.empty_title.title_container {
    	max-height: 42px;
    	top: 5px;
    }
    
	.responsive.title_container.breadcrumb {
		left: -18px !important;
	}
	
    .breadcrumb.breadcrumbs.avia-breadcrumbs {
    	position: inherit;
    	top: 8px;
	}
	
/* Enfold: Blendet Footermenü auf Mobiles ein - 2 Blöcke
http://www.kriesi.at/support/topic/footer-menu-display-issue-on-mobile-version/ */
.responsive #socket .sub_menu_socket {
    display: block;
    width: 100%;
    }

.responsive #socket .sub_menu_socket ol ul li {
	/*display:block;*/
	clear:left;
	padding: 10px 0;
	font-size: 12px;
	border-left: none;
    }

/* Enfold self made: gibt Links im Footer andere Farbe (könnte man mit Enfold-Styling machen)
http://www.kriesi.at/support/topic/footer-menu-display-issue-on-mobile-version/ */
.responsive #socket .sub_menu_socket a {
	color: #cccccc ; 
    }

.responsive #socket .sub_menu_socket a:hover {
    color: #eeeeee;   /* dunkleres Grau beim Hover – oder was dir gefällt */
}

/* Footer-Fixes 13.2.2025 */
.responsive #socket .sub_menu_socket .menu {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
  }

  .responsive #socket .sub_menu_socket .menu > li {
    flex: 1 1 auto;
  }

  .responsive #socket .sub_menu_socket .menu > li > a {
    display: block;
    min-height: 30px;
  }

  .responsive #socket .sub_menu_socket #avia3-menu > li + li { border-left: none; } /* Macht Borderlinie links bei letzten Footer-Links weg */

  .responsive #socket .sub_menu_socket #avia3-menu { margin-left: 16px; }

  .responsive #socket .container {
  display: flex;
  flex-direction: column-reverse;
}

}


/*
MOBILE STYLES für max. 480 px
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile Portrait view */

@media only screen and (max-width: 480px) {

/*Zeigt Social Icons im Footer von Mobilen Geräten an */
	.responsive #socket .social_bookmarks {
    	display: none;
	}
}