/* 
Theme Name: Wurzelstark Theme
Template: hello-elementor
Author: DIGIHOUSE Werbeagenur
Author URI: https://www.digihouse-werbeagentur.at
Version: 1.0.0
*/

/* Chrome Mobile Tabcolor remove */ 

body {
	-webkit-tap-highlight-color: transparent; 
}
  
/* Textboxen Aufzählung und Überschriften */

.elementor-widget-text-editor {
	padding: 25px 0px 0px 0px;
}

.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
    margin: 0;
    padding: 0;
}

.elementor-widget-text-editor h1 {
    font-family: "Cormorant Garamond", Sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2em;  
}

.elementor-widget-text-editor h2 {
    font-family: "Cormorant Garamond", Sans-serif;
    font-size: 33px;
    font-weight: 400;
    line-height: 1.3em;
}

.elementor-widget-text-editor h3 {
    font-family: "Montserrat", Sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.3em;
    text-transform: uppercase;
}

.elementor-widget-text-editor h4 {
    font-size: 1.25rem;
}

/* Fettdruck (strong/b) überall einheitlich 600 – V3-Text-Editoren, V4-Absätze, Beitragstext, Terminbeschreibung */
.elementor strong,
.elementor b,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
    font-weight: 600;
}

/* Fettdruck in Textboxen dunkelgrün (nur Fließtext – Buttons, Überschriften etc. behalten ihre Farbe) */
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b,
.e-paragraph-base strong,
.e-paragraph-base b,
.elementor-widget-theme-post-content strong,
.elementor-widget-theme-post-content b,
.termin-beschreibung strong,
.termin-beschreibung b {
    color: var(--gruen-dunkel);
}

.elementor-widget-text-editor ul { list-style-type: circle; padding-left: 17px; }
.elementor-widget-text-editor ol { padding-left: 19px; }

.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li {
    padding-left: 10px;
    margin-bottom: 10px;
}

.elementor-widget-text-editor ul li ul {
    margin-top: 10px;
    margin-bottom: 20px;
}

.elementor-widget-text-editor * + p {
    padding-top: 20px;
}

.elementor-widget-text-editor * + ul,
.elementor-widget-text-editor * + ol {
    padding-top: 25px;
}

.elementor-widget-text-editor * + h2 { padding-top: 30px; }
.elementor-widget-text-editor * + h3 { padding-top: 25px; }
.elementor-widget-text-editor * + h4 { padding-top: 25px; }

.elementor-widget-text-editor h1 + h2,
.elementor-widget-text-editor h2 + h3,
.elementor-widget-text-editor h3 + h4 {
    padding-top: 10px;
}

.elementor-widget-text-editor .elementor-menu-anchor + h2,
.elementor-widget-text-editor .elementor-menu-anchor + h3,
.elementor-widget-text-editor .elementor-menu-anchor + h4 {
    padding-top: 25px;
}

@media (max-width: 1024px) {
	
	.elementor-widget-text-editor {
	padding: 15px 0px 0px 0px;
}
	
    .elementor-widget-text-editor h1 {
        font-size: 30px;
        line-height: 1.2em;
    }

    .elementor-widget-text-editor h2 {
        font-size: 23px;
        line-height: 1.2em;
    }

    .elementor-widget-text-editor h3 {
        font-size: 18px;
        line-height: 1.2em;
    }

    .elementor-widget-text-editor h4 {
        font-size: 1.1rem;
    }

    .elementor-widget-text-editor * + p { padding-top: 15px; }
    .elementor-widget-text-editor * + ul, .elementor-widget-text-editor * + ol { padding-top: 15px; }
    .elementor-widget-text-editor * + h2 { padding-top: 25px; }
    .elementor-widget-text-editor * + h3 { padding-top: 20px; }
    .elementor-widget-text-editor * + h4 { padding-top: 20px; }
}

/* Textboxen links */ 

.elementor-widget-text-editor a:link, .elementor-widget-text-editor a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px; 
	text-underline-offset: 2px;
	transition: all 0.4s;
}

.elementor-widget-text-editor a:hover {
	color: var(--gruen-dunkel);
	text-decoration: none;
}

/* Formulare: Styling der V3-Formulare (Vorlagen „Formular – Anfrage“ / „Formular – Terminanmeldung“) siehe unten, Abschnitt „Formulare V3“ */


/* Borlabs Content Blocker Einblendung um 1 Sekunde verzögern */

body .elementor-element .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker {                 
    opacity: 0;
	animation: borlabsSmoothFade 300ms ease-in-out 1s forwards;
}

@keyframes borlabsSmoothFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade In Lazy Load Images - WP Rocket */

img[data-lazy-src] {
    opacity: 0;
}

img.lazyloaded {
    transition: opacity 0.6s ease;
    opacity: 1;
}


/* Elementor Lightbox: Farben, Icons und Icon-Größen kommen aus Elementor → Website-Einstellungen → Lightbox */

.elementor-lightbox .elementor-lightbox-image {
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Icon-Größe (Schließen-X) und Icon-Leiste mit border-box (sonst ragt sie über den Rand und die Icons rutschen unter das X) */
body .elementor-lightbox { --lightbox-header-icons-size: 20px; --lightbox-navigation-icons-size: 25px; }
body .elementor-lightbox .elementor-slideshow__header { box-sizing: border-box; }


/* ==========================================================================
   Website-Anpassungen (bis 2026-10-02 im Elementor Kit-CSS, jetzt hier zentral)
   ========================================================================== */

/* Mobilmenü (Popup 522, wird über den Burger #mburger im Header geöffnet UND geschlossen):
   Bei offenem Popup sperrt Elementor das Scrollen mit der Body-Klasse dialog-prevent-scroll (overflow hidden + max-height 100vh).
   Die max-height kürzt die Seite auf Bildschirmhöhe → Inhalt springt nach oben, sticky Header samt Burger rutscht weg.
   Nur die max-height aufheben: Scrollen bleibt gesperrt, Seite und Header bleiben genau wo sie sind. */
body.dialog-prevent-scroll { max-height: none !important; }

/* Footer (Template 268) mobil: alles zentriert, Copyright-Zeile mit normaler Zeilenhöhe (umbricht am Handy) */
@media (max-width: 767px) {
	[data-elementor-type="footer"] .elementor-element-b7dac35,
	[data-elementor-type="footer"] .elementor-element-e62e39f,
	[data-elementor-type="footer"] .elementor-element-6799bb3,
	[data-elementor-type="footer"] .elementor-element-f77d6d8 { align-items: center !important; text-align: center; }
	[data-elementor-type="footer"] .elementor-element-b7dac35 > p,
	[data-elementor-type="footer"] .elementor-element-6799bb3 > p { text-align: center !important; }
	[data-elementor-type="footer"] .elementor-widget-icon-list .elementor-icon-list-item,
	[data-elementor-type="footer"] .elementor-widget-icon-list .elementor-icon-list-item > a { justify-content: center; }
	/* Icons knapper an den Text (8px); Icon + Text werden als Einheit zentriert */
	[data-elementor-type="footer"] .elementor-widget-icon-list .elementor-icon-list-icon { width: 16px !important; min-width: 16px !important; padding: 0 !important; margin: 0 !important; }
	[data-elementor-type="footer"] .elementor-widget-icon-list .elementor-icon-list-text { padding-left: 4px !important; }	[data-elementor-type="footer"] .elementor-element-8725992 { justify-content: center !important; align-self: stretch; }
	[data-elementor-type="footer"] .elementor-element-74a4ecc,
	[data-elementor-type="footer"] .elementor-element-74a4ecc p { line-height: 1.7 !important; text-align: center; }
}

/* Angebotskarten (Startseite + Angebote-Loops): Kategorie-Icon (globale Klasse angebot-icon, absolut, halb über dem Kartenrand)
   immer über dem Foto – sonst verdeckt das Lazyload-Foto bzw. sein Platzhalter beim Laden die untere Icon-Hälfte. */
.angebot-icon { z-index: 2; }

/* Aktuelles: Beitragstext (Template "Aktuelles Beitrag") */
.elementor-widget-theme-post-content { font-family: Montserrat, sans-serif; color: var(--text); }
.elementor-widget-theme-post-content p { font-size: 1.1rem; line-height: 1.8em; margin: 0 0 1.4em 0; }
.elementor-widget-theme-post-content p:last-child { margin-bottom: 0; }
.elementor-widget-theme-post-content a { color: var(--gruen-mittel); text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-theme-post-content a:hover { color: var(--gruen-dunkel); }
.elementor-widget-theme-post-content blockquote { margin: 2.25em 0; padding: 0.25em 0 0.25em 1.5em; border-left: 3px solid var(--gruen-mittel); }
.elementor-widget-theme-post-content blockquote p { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; line-height: 1.3em; color: var(--gruen-dunkel); margin: 0; }
@media (max-width: 767px) {
	.elementor-widget-theme-post-content p { font-size: 1rem; }
	.elementor-widget-theme-post-content blockquote p { font-size: 1.5rem; }
}

/* Startseite: Scroll-Hinweis (Klasse scroll-hinweis) – Pfeil gleitet von -6px nach 4px und blendet linear aus */
@keyframes scrollHinweisPfeil { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
.scroll-hinweis svg path { animation: scrollHinweisPfeil 2.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .scroll-hinweis svg path { animation: none; opacity: 1; } }

/* Instagram-Feed (Smash Balloon): Buttons im Stil der Website-Buttons.
   Kein !important bei display, damit Smash Balloon "Mehr laden" ausblenden kann. */
#sb_instagram #sbi_load { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
#sb_instagram #sbi_load .sbi_follow_btn { display: flex; margin: 0 !important; padding: 0; }
#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box; height: 2.8rem; margin: 0 !important; font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1 !important; padding: 0 1.5rem !important; border-radius: 32px !important; border: 0; cursor: pointer; box-shadow: none !important; transition: background-color 0.2s; }
#sb_instagram #sbi_load .sbi_load_btn > span, #sb_instagram .sbi_follow_btn a > span { font-family: inherit; line-height: 1 !important; }
#sb_instagram .sbi_follow_btn a svg { width: 1em; height: 1em; margin: 0 !important; }
#sb_instagram #sbi_load .sbi_load_btn:hover, #sb_instagram #sbi_load .sbi_load_btn:focus { background: #ECEAE2 !important; box-shadow: none !important; }
#sb_instagram .sbi_follow_btn a:hover, #sb_instagram .sbi_follow_btn a:focus { background: #5F6528 !important; box-shadow: none !important; }
@media (max-width: 767px) {
	#sb_instagram #sbi_load { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
	#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a { width: 100%; height: 2.7rem; font-size: 0.85rem !important; padding: 0 1rem !important; }
}
/* Instagram-Feed: Beitragskästchen ohne Schatten, stattdessen 1px-Rahmen in der Farbe der Terminkarten */
#sb_instagram .sbi_item .sbi_inner_wrap { box-shadow: none !important; border: 1px solid #E1D9C9; }
/* Instagram-Feed mobil (1 Spalte): Bildabstand (18px) links/rechts entfernen, Kästchen volle Breite – oben/unten bleibt der Abstand zwischen den Beiträgen */
@media (max-width: 767px) { #sb_instagram.sbi_mob_col_1 #sbi_images .sbi_item { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } }

/* Affiliate-Link im Text-Editor (Natürlich wohlfühlen → feeling Onlineshop):
   <a class="affiliate-button" rel="sponsored"> im Stil der Website-Buttons, darunter <p class="affiliate-hinweis"> */
.elementor .elementor-widget-text-editor a.affiliate-button,
.elementor .elementor-widget-text-editor a.affiliate-button:link,
.elementor .elementor-widget-text-editor a.affiliate-button:visited { display: inline-block; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 1.1rem; line-height: normal; color: #FFFFFF; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 1rem 2.2rem; border-radius: 32px; background-color: var(--gruen-mittel); transition: all 200ms; }
.elementor .elementor-widget-text-editor a.affiliate-button:hover,
.elementor .elementor-widget-text-editor a.affiliate-button:focus-visible { color: #F7F6F2; background-color: var(--gruen-dunkel); text-decoration: none; }
.elementor .elementor-widget-text-editor .affiliate-hinweis { font-size: 0.85rem; line-height: 1.5em; color: var(--text); opacity: 0.85; }
@media (max-width: 767px) { .elementor .elementor-widget-text-editor a.affiliate-button { display: block; font-size: 1rem; padding: 0.9rem 1.2rem; } }

/* Formulare: Links in Labels (z. B. Datenschutzerklärung) wie Text-Links – Textfarbe, unterstrichen, Hover dunkelgrün ohne Unterstreichung */
.elementor form label a, .elementor form label a:visited { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.elementor form label a:hover, .elementor form label a:focus { color: var(--gruen-dunkel); text-decoration: none; }

/* Formulare V3 (Klasse wurzelstark-formular am Formular-Widget; Vorlagen 1409 Anfrage, 1410 Terminanmeldung).
   Selektor bewusst mit .elementor-widget-form.wurzelstark-formular, weil Elementors globale Formular-Standards
   (z. B. Button in Akzentfarbe) sonst gewinnen. Browser-Validierung ist per Snippet 1464 aus (novalidate) –
   Fehler zeigt Elementor als Text unter dem Feld (.elementor-error / .elementor-message-danger). */
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group > .elementor-field-label { width: 100%; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 17px; line-height: 1em; letter-spacing: normal; color: var(--text); margin: 0; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-mark-required .elementor-field-label:after { color: inherit; padding-inline-start: 0.25em; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group .elementor-field-textual { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 16px; line-height: normal; color: var(--text); background-color: #FFFFFF; border: 1px solid var(--text); border-radius: 12px; padding: 12px 10px 12px 17px; min-height: 0; box-shadow: none; transition: border-color 0.2s; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group .elementor-field-textual:focus { border-color: #706F6F; outline: none; box-shadow: none; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group .elementor-field-textual::placeholder { color: #9DA5AE; opacity: 1; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group .elementor-field-textual[readonly] { background-color: #F1F2EC !important; cursor: default; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group-personen .elementor-field-textual { max-width: 160px; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group.elementor-field-type-acceptance { margin-bottom: 20px !important; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance .elementor-field-subgroup { flex-wrap: wrap; width: 100%; }
/* Checkbox-Zeile: Elementor hängt die Fehlermeldung hier hinein (neben Kästchen + Text) → umbrechen lassen, Text füllt die Breite */
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance .elementor-field-option { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 0; width: 100%; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0 0; border: 1px solid #D6D5D5; border-radius: 0; background-color: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 200ms; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance input[type="checkbox"]::before { content: ""; width: 65%; height: 65%; background-color: #FFFFFF; opacity: 0; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transition: opacity 200ms; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance input[type="checkbox"]:checked { background-color: #69727D; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance input[type="checkbox"]:checked::before { opacity: 1; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance input[type="checkbox"]:focus { border-color: #706F6F; outline: none; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance .elementor-field-option label { flex: 1 1 0; min-width: 0; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 0.9rem; line-height: 1.5em; letter-spacing: normal; color: var(--text); margin: 0; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-button[type="submit"] { font-family: Montserrat, sans-serif; font-weight: 500; font-size: 1.1rem; line-height: normal; word-spacing: normal; color: #FFFFFF; letter-spacing: 0.1em; text-transform: uppercase; padding: 1rem 2.2rem; min-height: 0; border: 0; border-radius: 32px; background-color: var(--gruen-mittel); box-shadow: none; cursor: pointer; transition: all 200ms; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-button[type="submit"]:hover,
.elementor .elementor-widget-form.wurzelstark-formular .elementor-button[type="submit"]:focus-visible { color: #F7F6F2; background-color: var(--gruen-dunkel); }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-button[type="submit"] svg { fill: currentColor; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-message { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1.6em; text-align: center; padding: 12px 16px; margin-top: 20px; border-radius: 12px; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-message:before { display: none; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-message-success { color: var(--text); background-color: #D4E9D6; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-message-danger { color: #9B2C22; background-color: #F6E3DF; }
/* Fehler direkt am Feld: rote Rahmenlinie + kleiner Hinweistext darunter (bei der Checkbox eingerückt unter den Text) */
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group.elementor-error .elementor-field-textual { border-color: #B3261E; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group.elementor-error input[type="checkbox"] { border-color: #B3261E; }
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-group .elementor-message-danger { flex: 0 0 100%; width: 100%; font-size: 0.85rem; line-height: 1.4em; font-weight: 500; color: #B3261E; text-align: start; padding: 6px 0 0 2px; margin: 0; border-radius: 0; background: none; } 
.elementor .elementor-widget-form.wurzelstark-formular .elementor-field-type-acceptance .elementor-message-danger { flex: 0 0 100%; padding-left: 28px; }

/* Termine: Anmeldeformular je nach Status (Body-Klasse termin-status-… aus Snippet 1359), Flyer-Button nur mit Flyer */
.termin-ausgebucht-hinweis { display: none !important; }
.termin-status-ausgebucht .termin-ausgebucht-hinweis, .termin-status-abgesagt .termin-ausgebucht-hinweis { display: flex !important; }
.termin-status-ausgebucht .terminanmeldung, .termin-status-abgesagt .terminanmeldung { display: none !important; }
.termin-ohne-flyer .termin-flyer { display: none !important; }

/* Termine: Bereich "Weitere/Nächste Termine" (Klasse termine-bereich) ausblenden, wenn keine kommenden Termine vorhanden sind (nicht im Editor) */
body:not(.elementor-editor-active) .termine-bereich:not(:has([data-element_type="e-collection-loop-item"])) { display: none !important; }

/* Gruppenangebote (Waldgruppe, Workshops, Elternkreis): Anfrage-Block (Klasse termine-alternative) nur zeigen,
   wenn im Terminbereich davor keine Termine sind (nicht im Editor) */
body:not(.elementor-editor-active) .termine-bereich:has([data-element_type="e-collection-loop-item"]) ~ .termine-alternative { display: none !important; }

/* Startseite: Sektion "Nächste Termine" (Klasse termine-startseite) – mit Terminen Karten + "Alle Termine ansehen",
   ohne Termine Hinweisbox (termine-leer-hinweis) (nicht im Editor) */
body:not(.elementor-editor-active) .termine-startseite:has([data-element_type="e-collection-loop-item"]) .termine-leer-hinweis { display: none !important; }
body:not(.elementor-editor-active) .termine-startseite:not(:has([data-element_type="e-collection-loop-item"])) .termine-nur-mit-terminen { display: none !important; }

/* Termine-Übersicht: Hinweis "keine Gruppentermine" (Klasse termine-leer-hinweis) nur zeigen, wenn der Loop leer ist */
.e-con:has(> [data-element_type="e-collection-loop"] [data-element_type="e-collection-loop-item"]) > .termine-leer-hinweis { display: none !important; }

/* Termine: Beschreibung (ACF-WYSIWYG) wie Beitragstext */
.termin-beschreibung { font-family: Montserrat, sans-serif; color: var(--text); }
.termin-beschreibung p { font-size: 1.1rem; line-height: 1.8em; margin: 0 0 1.2em 0; }
.termin-beschreibung p:last-child, .termin-beschreibung ul:last-child { margin-bottom: 0; }
.termin-beschreibung a { color: var(--gruen-mittel); text-decoration: underline; text-underline-offset: 3px; }
/* Aufzählung wie in den Text-Editoren der Angebotsseiten: Kreis in Textfarbe, 17px Einzug, 10px Abstand Punkt–Text und zwischen den Punkten */
.termin-beschreibung ul { list-style-type: circle; margin: 0 0 1.2em 0; padding-left: 17px; }
.termin-beschreibung li { font-size: 1.1rem; line-height: 1.7em; padding-left: 10px; margin-bottom: 10px; }
@media (max-width: 767px) { .termin-beschreibung p, .termin-beschreibung li { font-size: 1rem; } }