/* Own CSS Gemeine XY */ /* BASICS no layer */ .wnts_text_align_center { text-align: center; } .wnts_show_contents { display: contents; &.wnts_show_contents_all_children { *:not(:is(script)) { display: contents; } } } label { display: initial; } input[type="checkbox"], input[type="radio"] { --option_border_color: var(--_option_border_color, var(--farbe_1_thema_a)); --option_bg_color: var(--_option_bg_color, var(--wnts_white)); --option_border_color_hover: var(--_option_border_color_hover, var(--wnts_accent)); --option_bg_color_hover: var(--_option_bg_color_hover, var(--wnts_white)); --option_border_color_checked: var(--_option_border_color_checked, var(--farbe_1_thema_a)); --option_bg_color_checked: var(--_option_bg_color_checked, var(--farbe_1_thema_a)); --option_bg_inset_checked: var(--_option_bg_inset_checked, var(--wnts_white)); --option_border_color_disabled: var(--_option_border_color_disabled, var(--farbe_1_thema_a)); --option_bg_color_disabled: var(--_option_bg_color_disabled, lightgray); appearance: none; -webkit-appearance: none; width: 1em; height: 1em; border: 1px solid var(--option_border_color); background: var(--option_bg_color); } input[type="checkbox"]:hover:not(disabled), input[type="radio"]:hover:not(disabled) { border: 1px solid var(--option_border_color_hover); } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:checked, input[type="radio"]:checked { border: 1px solid var(--option_border_color_checked); background: var(--option_bg_color_checked); box-shadow: inset 0 0 0 2px var(--option_bg_inset_checked); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { border: 1px solid var(--option_border_color_disabled); background: var(--option_bg_color_disabled); } /* BASICS no layer */ /* ANIMATIONS */ @keyframes clipRevealDiagonal { to { clip-path: polygon(-10% 0, 100% 0, 110% 100%, 0% 100%); } } /* ANIMATIONS */ @layer body, body_custom, basics, basics_custom, wnts_grids, wnts_grids_custom, units, units_custom, animations, animations_custom, templates, templates_custom, theme_classes, theme_classes_custom, widgets, widgets_custom, specials, specials_custom; /* THEME COLORS */ html { /* Farbe 1 Dunkelblau */ color: rgb(51,51,102); color: hsl(240, 33%, 30%); color: #333366; --farbe_1_thema_a_orig_hex: #333366; --farbe_1_thema_a_orig_hsl: hsl(240, 33%, 30%); --farbe_1_thema_a_orig_rgb: rgb(51, 51, 102); --farbe_1_thema_a_hsl_h: var(--color_1_h, 240); --farbe_1_thema_a_hsl_s: var(--color_1_s, 33%); --farbe_1_thema_a_hsl_l: var(--color_1_l, 30%); --farbe_1_thema_a_rgb_r: var(--color_1_rgb_r, 51); --farbe_1_thema_a_rgb_g: var(--color_1_rgb_g, 51); --farbe_1_thema_a_rgb_b: var(--color_1_rgb_b, 102); --farbe_1_thema_a_hsl_orig: hsl( var(--farbe_1_thema_a_hsl_h), var(--farbe_1_thema_a_hsl_s), var(--farbe_1_thema_a_hsl_l) ); --farbe_1_thema_a: var(--farbe_1_thema_a_hsl_orig, var(--farbe_1_thema_a_orig_hex)); --farbe_1_thema_a_rgba: var(--farbe_1_thema_a_rgb_r), var(--farbe_1_thema_a_rgb_g), var(--farbe_1_thema_a_rgb_b); --farbe_1_thema_a_heller: #666699; /* Farbe 2 Mittleres Blau */ --farbe_2_thema_b_orig_hex: #3181a7; --farbe_2_thema_b_orig_hsl: hsl(199, 55%, 42%); --farbe_2_thema_b_orig_rgb: rgb(49, 129, 167); --farbe_2_thema_b_h: var(--color_2_h, 199); --farbe_2_thema_b_s: var(--color_2_s, 55%); --farbe_2_thema_b_l: var(--color_2_l, 42%); --farbe_2_thema_b_rgb_r: var(--color_2_rgb_r, 49); --farbe_2_thema_b_rgb_g: var(--color_2_rgb_g, 129); --farbe_2_thema_b_rgb_b: var(--color_2_rgb_b, 167); --farbe_2_thema_b_hsl_orig: hsl( var(--farbe_2_thema_b_h), var(--farbe_2_thema_b_s), var(--farbe_2_thema_b_l) ); --farbe_2_thema_b: var(--farbe_2_thema_b_hsl_orig, var(--farbe_2_thema_b_orig_hex)); --farbe_2_thema_b_rgba: var(--farbe_2_thema_b_rgb_r), var(--farbe_2_thema_b_rgb_g), var(--farbe_2_thema_b_rgb_b); /* Farbe 3 mittleres Grün */ --farbe_3_thema_c_orig_hex: #57aa27; --farbe_3_thema_c_orig_hsl: hsl(98, 63%, 41%); --farbe_3_thema_c_orig_rgb: rgb(87, 170, 39); --farbe_3_thema_c_h: var(--color_3_h, 98); --farbe_3_thema_c_s: var(--color_3_s, 63%); --farbe_3_thema_c_l: var(--color_3_l, 41%); --farbe_3_thema_c_rgb_r: var(--color_3_rgb_r, 87); --farbe_3_thema_c_rgb_g: var(--color_3_rgb_g, 171); --farbe_3_thema_c_rgb_b: var(--color_3_rgb_b, 39); --farbe_3_thema_c_hsl_orig: hsl( var(--farbe_3_thema_c_h), var(--farbe_3_thema_c_s), var(--farbe_3_thema_c_l) ); --farbe_3_thema_c: var(--farbe_3_thema_c_hsl_orig, var(--farbe_3_thema_c_orig_hex)); --farbe_3_thema_c_rgba: var(--farbe_3_thema_c_rgb_r), var(--farbe_3_thema_c_rgb_g), var(--farbe_3_thema_c_rgb_b),; /* Farbe 4 Dunkles Grün */ --farbe_4_thema_d_orig_hex: #007a35; /* dafault HEX value */ --farbe_4_thema_d_orig_hsl: hsl(146, 100%, 24%); /* dafault HSL value */ --farbe_4_thema_d_orig_rgb: rgb(0, 122, 53); /* dafault RGB value */ --farbe_4_thema_d_h: var(--color_4_h, 146); /* HSL values */ --farbe_4_thema_d_s: var(--color_4_s, 100%); --farbe_4_thema_d_l: var(--color_4_l, 24%); --farbe_4_thema_d_rgb_r: var(--color_4_rgb_r, 0); /* RGB values */ --farbe_4_thema_d_rgb_g: var(--color_4_rgb_g, 122); --farbe_4_thema_d_rgb_b: var(--color_4_rgb_b, 53); --farbe_4_thema_d_hsl_orig: hsl( /* HSL COLOR */ var(--farbe_4_thema_d_h), var(--farbe_4_thema_d_s), var(--farbe_4_thema_d_l) ); --farbe_4_thema_d: var(--farbe_4_thema_d_hsl_orig, var(--farbe_4_thema_d_orig_hex)); --farbe_4_thema_d_rgba: var(--farbe_4_thema_d_rgb_r), var(--farbe_4_thema_d_rgb_g), var(--farbe_4_thema_d_rgb_b),; /* Farbe 5 Akkzentfarbe */ --wnts_accent_orig_hex: #cc3333; /* dafault HEX value */ --wnts_accent_orig_hsl: hsl(0, 60%, 50%); /* dafault HSL value */ --wnts_accent_orig_rgb: rgb(214, 47, 135); /* dafault RGB value */ --wnts_accent_h: var(--color_5_h, 0); --wnts_accent_s: var(--color_5_s, 60%); --wnts_accent_l: var(--color_5_l, 50%); --wnts_accent_rgb_r: var(--color_5_rgb_r, 204); --wnts_accent_rgb_g: var(--color_5_rgb_g, 51); --wnts_accent_rgb_b: var(--color_5_rgb_b, 51); --wnts_accent_hsl_orig: hsl( /* HSL COLOR */ var(--wnts_accent_h), var(--wnts_accent_s), var(--wnts_accent_l) ); --wnts_accent: var(--wnts_accent_hsl_orig, var(--wnts_accent_orig_hex)); --wnts_accent_light_rgba: 255,102,102; --wnts_accent_light: rgba( var(--wnts_accent_light_rgba), 1); --wnts_accent_rgba: var(--wnts_accent_rgb_r), var(--wnts_accent_rgb_g), var(--wnts_accent_rgb_b); --wnts_accent_light_xxl: hsl( var(--wnts_accent_h), var(--wnts_accent_s), calc( 100% - var(--wnts_accent_l) / 4 ) ); --color_link: var(--_color_link, var(--wnts_accent)); /* Farbe 6 Akkzentfarbe Hover */ --wnts_accent_hover_orig_hex: #646567; /* dafault HEX value */ --wnts_accent_hover_orig_hsl: hsl(220, 1%, 40%); /* dafault HSL value */ --wnts_accent_hover_orig_rgb: rgb(100, 101, 103); /* dafault RGB value */ --wnts_accent_hover_h: var(--color_6_h, 220); --wnts_accent_hover_s: var(--color_6_s, 1%); --wnts_accent_hover_l: var(--color_6_l, 40%); --wnts_accent_hover_rgb_r: var(--color_6_rgb_r, 100); --wnts_accent_hover_rgb_g: var(--color_6_rgb_g, 101); --wnts_accent_hover_rgb_b: var(--color_6_rgb_b, 103); --wnts_accent_hover_hsl_orig: hsl( /* HSL COLOR */ var(--wnts_accent_hover_h), var(--wnts_accent_hover_s), var(--wnts_accent_hover_l) ); --wnts_accent_hover: var(--wnts_accent_hover_hsl_orig, var(--wnts_accent_hover_orig_hex)); --wnts_accent_hover_rgba: var(--wnts_accent_hover_rgb_r), var(--wnts_accent_hover_rgb_g), var(--wnts_accent_hover_rgb_b); /* Farbe 7 Body Background */ --wnts_bg_body_orig_hex: #ffffff; /* dafault HEX value */ --wnts_bg_body_orig_hsl: hsl(0, 0%, 100%); /* dafault HSL value */ --wnts_bg_body_orig_rgb: rgb(255, 255, 255); /* dafault RGB value */ --wnts_bg_body_h: var(--color_7_h, 0); --wnts_bg_body_s: var(--color_7_s, 0%); --wnts_bg_body_l: var(--color_7_l, 100%); --wnts_bg_body_rgb_r: var(--color_7_rgb_r, 255); --wnts_bg_body_rgb_g: var(--color_7_rgb_g, 255); --wnts_bg_body_rgb_b: var(--color_7_rgb_b, 255); --wnts_bg_body_hsl_orig: hsl( /* HSL COLOR */ var(--wnts_bg_body_h), var(--wnts_bg_body_s), var(--wnts_bg_body_l) ); --wnts_bg_body: var(--wnts_bg_body_hsl_orig, var(--wnts_bg_body_orig_hex)); --wnts_bg_body_rgba: var(--wnts_bg_body_rgb_r), var(--wnts_bg_body_rgb_g), var(--wnts_bg_body_rgb_b); /* Farbe 8 Body Text */ --color_8_h: var(--farbe_1_thema_a_hsl_h); --color_8_s: var(--farbe_1_thema_a_hsl_s); --color_8_l: var(--farbe_1_thema_a_hsl_l); --color_8_rgb_r: var(--farbe_1_thema_a_rgb_r); --color_8_rgb_g: var(--farbe_1_thema_a_rgb_g); --color_8_rgb_b: var(--farbe_1_thema_a_rgb_b); --wnts_text_orig_hex: #000000; --wnts_text_orig_hsl: hsl(0, 0%, 0%); /* dafault HSL value */ --wnts_text_orig_rgb: rgb(0, 0, 0); /* dafault RGB value */ --wnts_text_h: var(--color_8_h, 0); --wnts_text_s: var(--color_8_s, 0%); --wnts_text_l: var(--color_8_l, 0%); --wnts_text_rgb_r: var(--color_8_rgb_r, 0); --wnts_text_rgb_g: var(--color_8_rgb_g, 0); --wnts_text_rgb_b: var(--color_8_rgb_b, 0); --wnts_text_hsl_orig: hsl( /* HSL COLOR */ var(--wnts_text_h), var(--wnts_text_s), var(--wnts_text_l) ); --wnts_text_rgba: var(--wnts_text_rgb_r), var(--wnts_text_rgb_g), var(--wnts_text_rgb_b); --wnts_text: var(--wnts_text_hsl_orig, var(--wnts_text_orig_hex)); --e-global-color-text: var(--wnts_text, #0c0c0c) !important; /* WHITE or LIGHT*/ --wnts_light_color: white; --wnts_white: var(--wnts_light_color); --wnts_rgba_schwarz: 0,0,0; --wnts_rgba_white: 255,255,255; --wnts_bg_color: var(--wnts_post_color); /* BOX SHADOWS */ --wnts_box_shadow_white_100: 0px 0px 9px 2px rgba(var(--wnts_rgba_white), 0.34); --wnts_box_shadow_thema_a_100: 0px 0px 9px 2px rgba(var(--farbe_1_thema_a_rgba), 0.34); /* BOX SHADOWS */ } /* THEME COLORS */ /* THEME DEFAULTS */ :root { /* SCHRIFTEN */ --font_size_100: 0.75rem; --font_size_200: 0.875rem; --font_size_300: 1rem; /* regular Text */ --font_size_400: 1.125rem; /* H4, H5, H6 */ --font_size_500: 1.25rem; /* H3 */ --font_size_600: 1.5rem; /* Headline Cards, Accordeaon Headers, Text in Kreisen */ --font_size_650: 1.8rem; --font_size_700: 2rem; /* H2 */ --font_size_750: 2.5rem; --font_size_800: 3rem; /* H1 */ --font_size_900: 4rem; --font_size_1000: 5rem; --font_size_1100: 6rem; /* H1 Startseite */ --font_size_h1: var(--font_size_800); --font_size_h2: var(--font_size_700); --font_size_h3: var(--font_size_500); --font_size_h4: var(--font_size_400); --font_size_h5: var(--font_size_400); --font_size_h6: var(--font_size_400); --font_size_regular: var(--font_size_300); --font_size_small: var(--font_size_200); --font_size_big: var(--font_size_800); --font_size_XXL: var(--font_size_900); --font_weight_light_xxl: 200; --font_weight_light: 300; --font_weight_regular: 400; --font_weight_medium: 500; --font_weight_semi_bold: 600; --font_weight_bold: 700; --font_weight_h1: var(--font_weight_bold); --font_weight_h2: var(--font_weight_semi_bold); --font_weight_h3: var(--font_weight_semi_bold); --font_weight_h4: var(--font_weight_medium); --font_weight_h5: var(--font_weight_medium); --font_weight_h6: var(--font_weight_medium); --line_height_300: 1em; --line_height_400: 1.1em; --line_height_500: 1.2em; /* regular Text, H1, H2, H3 */ --line_height_600: 1.3em; --line_height_700: 1.5em; --line_height_800: 1.75em; --line_height_900: 2em; --line_height_regular: var(--line_height_700); --wnts_line_hight_hero_section: var(--line_height_300); --letter_spacing_600: 0px; --letter_spacing_700: 1px; --letter_spacing_800: 2px; --letter_spacing_900: 4px; --letter_spacing_regular: var(--letter_spacing_600); /* RELATIVE SIZES (EM)*/ --relative_size_010: 0.1em; --relative_size_050: 0.5em; --relative_size_100: 0.75em; --relative_size_200: 0.875em; --relative_size_300: 1em; /* regular Text */ --relative_size_400: 1.125em; /* H3 */ --relative_size_500: 1.25em; /* H2, modern accordeon: p */ --relative_size_600: 1.5em; /* H1, modern accordeon: headline not active (Mobile) */ --relative_size_650: 1.8em; /* modern accordeon: headline not active (Tablet/PC) */ --relative_size_700: 2em; /* modern accordeon: headline active (Mobile) */ --relative_size_750: 2.5em; /* modern accordeon: headline active (Tablet/PC) */ --relative_size_800: 3em; --relative_size_900: 4em; --relative_size_regular: var(--relative_size_300); /* LINKS */ --link_underline_thickness: var(--_link_underline_thickness, 4px); --link_underline_bottom: var(--_link_underline_bottom, 0); /* FLEX */ --wnts_flex_gap_regular_col: var(--font_size_regular); --wnts_flex_gap_regular_row: var(--font_size_regular); --wnts_flex_wrap_regular: wrap; --wnts_flex_justify_content: center; /* SECTIONS */ --wnts_section_margin_bottom: 4rem; --wnts_container-max-width: 1140px; /* to overwrite Elementor VAR --container-max-width: 1140px to e.g. 1400px;*/ --wnts_max_grid_squars_box: 320px; /* BUTTONS */ --button_border_radius: 8px; --button_text_color: var(--wnts_accent); --button_background_color: var(--wnts_light_color); --button_border_color: transparent; --button_icon_color: var(--wnts_white); --button_text_color_hover: var(--wnts_light_color); --button_background_color_hover: var(--wnts_accent); --button_border_color_hover: transparent; --button_icon_color_hover: var(--wnts_light_color); --button_font_size: var(--_button_font_size, var(--font_size_regular)); --button_font_weight: var(--_button_font_weight, var(--font_weight_regular)); --icon_width: var(--_icon_width, 30px); --icon_width: var(--_icon_height, 30px); --button_border_width: 0; --button_margin: var(--_button_margin, 0); --button_padding: 0.3em 0.5em; --button_width: auto; --button_height: auto; --border_padding: 0.5rem 1rem; /* AJAX SEARCH PRO BUTTONS*/ --asp_height: var(--_asp_height, 50px); /* INPUTS */ --input_border_radius: 8px; --input_text_color: var(--wnts_accent); --input_background_color: var(--wnts_light_color); --input_border_color: transparent; --input_border_width: 0; --input_margin: 0; --input_padding: 0.3em 0.5em; --input_width: auto; --input_height: auto; --wnts_form_control_color_disabled: rgba( var(--wnts_text_rgba), 0.5 ); /* INPUTS */ /* TEMPLATES */ --wnts_card_max_height: 370px; --wnts_templates_border_radius_top_left: var(--_wnts_templates_border_radius_top_left, 30px); --wnts_templates_border_radius_top_right: var(--_wnts_templates_border_radius_top_right, 0); --wnts_templates_border_radius_bottom_right: var(--_wnts_templates_border_radius_bottom_right, 30px); --wnts_templates_border_radius_bottom_left: var(--_wnts_templates_border_radius_bottom_left, 0); --wnts_templates_border_radius: var(--wnts_templates_border_radius_top_left) var(--wnts_templates_border_radius_top_right) var(--wnts_templates_border_radius_bottom_right) var(--wnts_templates_border_radius_bottom_left) ; --wnts_templates_border_radius_upper: var(--wnts_templates_border_radius_top_left) var(--wnts_templates_border_radius_top_right) 0 var(--wnts_templates_border_radius_bottom_left) ; --wnts_templates_border_radius_lower: 0 var(--wnts_templates_border_radius_top_right) var(--wnts_templates_border_radius_bottom_right) var(--wnts_templates_border_radius_bottom_left) ; /* TEMPLATES */ } /* THEME DEFAULTS */ /* OVERWRITE ELEMENTOR COLORS and STYLES */ body:not(.elementor-editor-active) { --e-global-color-primary: red; --e-global-color-primary: var(--_e_primary_color, var(--farbe_1_thema_a_hsl_orig)) !important; --e-global-color-secondary: var(--_e_secondary_color, var(--farbe_1_thema_a_hsl_orig)) !important; --e-global-color-text: var(--_e_text_color, var(--wnts_text_hsl_orig)) !important; --e-global-color-accent: var(--wnts_accent_hsl_orig) !important; --e-global-color-081ba2a: var(--wnts_light_color); --wnts_primary_font_weight: var(--_wnts_font_weight, var(--_wnts_primary_font_weight, var(--font_weight_bold))); --wnts_secondary_font_weight: var(--_wnts_font_weight,var(--_wnts_secondary_font_weight, var(--font_weight_semi_bold))); --wnts_text_font_weight: var(--_wnts_font_weight,var(--_wnts_text_font_weight, var(--font_weight_regular))); --wnts_accent_font_weight: var(--_wnts_font_weight,var(--_wnts_accent_font_weight, var(--font_weight_regular))); &[class*=' elementor-kit-'], &[class^='elementor-kit-'] { --e-global-typography-primary-font-weight: var(--wnts_primary_font_weight,600); --e-global-typography-secondary-font-weight: var(--wnts_secondary_font_weight,500); --e-global-typography-text-font-weight: var(--wnts_text_font_weight,400); --e-global-typography-accent-font-weight: var(--wnts_accent_font_weight,500); } color: var(--_text_color, var(--wnts_text_hsl_orig)); /* border: 1 px solid red !important; */ display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; pre { word-break: break-all; } a:not([class]) { color: var(--_color_link) !important; } .wnts_color a, a.wnts_color { color: var(--_color_link) !important; &:hover { color: var(--_color_hover_link, var(--_color_link)) !important; } } .wnts_animated_link a, .wnts_links_to_actions a, a.wnts_animated_link { --wnts_animation_color: var(--_wnts_animation_color, var(--wnts_accent)); --wnts_animation_line_height: var(--_wnts_animation_line_height, 1px); --wnts_animation_line_offset: var(--_wnts_animation_line_offset, 0px); --wnts_animation_line_offset_left: var(--_wnts_animation_line_offset_left, 0px); position: var(--_wnts_link_position, relative) !important; &::before { position: absolute !important; content: ''; left: calc( 0px + var(--wnts_animation_line_offset_left)); bottom: var(--wnts_animation_line_offset); width: 0%; height: var(--wnts_animation_line_height); transition: 0.6s ease-in-out; background-color: var(--wnts_animation_color) !important; } &:hover::before { width: calc( 100% - var(--wnts_animation_line_offset_left)); transition: 0.6s ease-in-out; } } .wnts_color :is(h4,h5,h6,p,span,li), :is(h4,h5,h6,div,p,span,li).wnts_color { color: var(--_color_text) !important; } .wnts_font_styling :is(h4,h5,h6,p,span,li), :is(h4,h5,h6,div,p,span,li).wnts_font_styling { --wnts_font_weight: var(--_wnts_font_weight, inherit); font-weight: var(--wnts_font_weight) !important; --_font_weight_text: var(--wnts_font_weight); --wnts_letter_spacing: var(--_wnts_letter_spacing, inherit); letter-spacing: var(--wnts_letter_spacing) !important; margin-top: var(--_margin_top, initial) !important; margin-bottom: var(--_margin_bottom, initial) !important; } .wnts_font_styling a, a.wnts_font_styling { --wnts_font_weight: var(--_wnts_font_weight, inherit); font-weight: var(--wnts_font_weight) !important; --wnts_letter_spacing: var(--_wnts_letter_spacing, inherit); letter-spacing: var(--wnts_letter_spacing) !important; } .wnts_letter_spacing_regular { --_wnts_letter_spacing: var(--letter_spacing_regular); } .wnts_letter_spacing_600 { --_wnts_letter_spacing: var(--letter_spacing_600); } .wnts_letter_spacing_700 { --_wnts_letter_spacing: var(--letter_spacing_700); } .wnts_letter_spacing_800 { --_wnts_letter_spacing: var(--letter_spacing_800); } .wnts_letter_spacing_900 { --_wnts_letter_spacing: var(--letter_spacing_900); } .wnts_font_weight_light_xxl { --_wnts_font_weight: var(--font_weight_light_xxl); } .wnts_font_weight_light { --_wnts_font_weight: var(--font_weight_light); font-weight: var(--font_weight_light); } .wnts_font_weight_regular { --_wnts_font_weight: var(--font_weight_regular); } .wnts_font_weight_medium { --_wnts_font_weight: var(--font_weight_medium); } .wnts_font_weight_semibold { --_wnts_font_weight: var(--font_weight_semi_bold); } .wnts_font_weight_bold { --_wnts_font_weight: var(--font_weight_bold); } .wnts_margin_bottom_100 { --_margin_bottom: 0; } .wnts_margin_bottom_500 { --_margin_bottom: 0.3em; } .wnts_margin_top_100 { --_margin_top: 0; } .wnts_margin_top_500 { --_margin_top: 0.3em; } .wnts_margin_block_700 { --_margin_top: 1em; --_margin_bottom: 1em; } .wnts_font_styling { --color_h1: var(--_color_h1, var(--wnts_section_color)); --color_h2: var(--_color_h2, var(--wnts_section_color)); h1, &h1 { color: var(--color_h1) !important; } h2, &h2 { color: var(--color_h2) !important; } } h1 { --_color_text: var(--_color_h1, var(--wnts_section_color)); } h2 { --_color_text: var(--_color_h2, var(--wnts_section_color)); } p, span, div { --_color_text: var(--_text_color, var(--wnts_text)); } .elementor-social-icon svg { opacity: 0.5; } .wnts_widget { &.wnts_widget_grid { --wnts_grid_min: var(--_wnts_grid_min, 300px); --wnts_grid_max: var(--_wnts_grid_max, 1fr); --wnts_grid_gap: var(--_wnts_grid_gap, 1rem); --wnts_grid_repeat: var(--_wnts_grid_repeat, auto-fit); --wnts_grid_justify_items: var(--_wnts_grid_justify_items, center ); --wnts_grid_align_items: var(--_wnts_grid_align_items, center ); --wnts_grid_template_columns_default: repeat(var(--wnts_grid_repeat), minmax(var(--wnts_grid_min), var(--wnts_grid_max))); --wnts_grid_template_columns: var(--_wnts_grid_template_columns, var(--wnts_grid_template_columns_default)); display: grid; grid-template-columns: var(--wnts_grid_template_columns); grid-template-rows: auto; gap: var(--wnts_grid_gap); justify-items: var(--wnts_grid_justify_items); align-items: var(--wnts_grid_align_items); margin-inline: auto; padding: 0 !important; &.wnts_grid_auto_fill { --_wnts_grid_repeat: auto-fill; } &.wnts_grid_min_180px { --_wnts_grid_min: 180px; } &.wnts_grid_min_330px { --_wnts_grid_min: 330px; } &.wnts_grid_max_180px { --_wnts_grid_max: 180px; } &.wnts_grid_max_330px { --_wnts_grid_max: 330px; } &.wnts_grid_3_col { --_wnts_grid_repeat: 3; } &.wnts_grid_pc_3_col { --_wnts_grid_min: calc( (var(--container-max-width) - var(--padding-inline-start) - var(--padding-inline-end) - 2 * var(--wnts_grid_gap) ) / 3 ); } &.wnts_grid_gap_large { --_wnts_grid_gap: 2rem; } &.wnts_auto_flow_180px { grid-auto-flow: column; grid-auto-columns: 180px; } &.wnts_grid_fit_content { width: fit-content !important; } &.wnts_grid_kontakt { --_wnts_grid_template_columns: 1fr auto auto; --wnts_grid_justify_items: baseline; grid-template-areas: "contact-1 contact-2 contact-3"; border: 1px solid var(--farbe_1_thema_a); background-color: var(--wnts_white); border-radius: var(--wnts_templates_border_radius); padding: var(--font_size_700) !important; --_wnts_grid_gap: 1em var(--font_size_800); @media (width<1140px) { & { --_wnts_grid_template_columns: auto auto; grid-template-areas: "contact-1 contact-1" "contact-2 contact-3"; } } @media (width<800px) { & { --_wnts_grid_template_columns: 1fr; grid-template-areas: "contact-1" "contact-2" "contact-3"; } } .wnts_kontakt_1 { grid-area: contact-1; --_font_size_text: var(--font_size_600); --wnts_kontakt_icon_size: var(--_font_size_text); --wnts_kontakt_distance_text_icon: 1em; --_font_weight_text: var(--font_weight_medium); --_line_height_text: var(--font_size_600); color: var(--wnts_accent) !important; --_text_color: var(--wnts_accent); .elementor-icon-list-item { &:not(:has( a )), a { display: grid; grid-template-columns: auto auto; gap: var(--wnts_kontakt_distance_text_icon); } a::before { width: calc( 100% - var(--wnts_kontakt_distance_text_icon) - var(--wnts_kontakt_icon_size) ); } .elementor-icon-list-icon { order: 2; svg { width: var(--_font_size_text) !important; height: var(--_font_size_text) !important; } } .elementor-icon-list-text { padding-left: 0 !important; color: var(--wnts_accent) !important; } } } .wnts_kontakt_2 { grid-area: contact-2; --_wnts_grid_gap: 1em var(--font_size_800); * { margin-bottom: 0; } } .wnts_kontakt_3 { grid-area: contact-3; --_wnts_grid_gap: 1em var(--font_size_800); * { margin-bottom: 0; } } } &.wnts_grid_col_2_2_1 { --_wnts_grid_template_columns: auto auto; --wnts_grid_justify_items: baseline; @media (width < 600px) { & { --_wnts_grid_template_columns: 1fr; } } } } &.wnts_widget_cta_standard { --wnts_widget_cta_standard_max_width: var(--_wnts_widget_cta_standard_max_width, 400px ); --cta_main_color: var(--_cta_main_color, var(--farbe_1_thema_a_heller)); aspect-ratio: 1 / 1; grid-template-areas: "cta"; display: grid; width: 100%; max-width: var(--wnts_widget_cta_standard_max_width); border-radius: var(--wnts_templates_border_radius); border-width: 2px; border-style: solid; border-color: color-mix(in srgb, var(--cta_main_color) 90%, rgba(0,0,0,0.8)); overflow: hidden; transform: scale(1); transition: 0.6s ease-in-out; @media (width < 1140px){ & { --_wnts_widget_cta_standard_max_width: 350px; &.wnts_cta_tablet_mobile_100p_x_370px { max-height: 370px; --_wnts_widget_cta_standard_max_width: 100%; grid-template-rows: min(370px, 100%); } } } @media (width < 767px){ & { --_wnts_widget_cta_standard_max_width: 300px; &.wnts_cta_tablet_mobile_100p_x_370px { max-height: 370px; --_wnts_widget_cta_standard_max_width: 100%; } } } &:hover { transform: scale(1.05); transition: 0.6s ease-in-out; } > * { grid-area: cta; } > .elementor-widget-image { width: 100%; height: 100%; img { --_image_height: 100%; object-fit: cover; } } > .elementor-widget-text-editor { --_wnts_text_editor_padding: var(--font_size_600); align-self: end; padding: var(--_wnts_text_editor_padding); background-color: var(--cta_main_color); color: var(--wnts_white); height: calc( 2lh + 2 * var(--_wnts_text_editor_padding) ); --_font_size_text: var(--font_size_600); --_font_weight_text: var(--font_weight_regular); --_line_height_text: var(--line_height_400); } > .elementor-widget-button { width: 100%; height: 100%; opacity: 0; .elementor-button-wrapper { height: 100%; a { width: 100%; height: 100%; } } } } &.wnts_widget_headline { h1 { text-align: center; margin-bottom: 0; span { --_wnts_font_weight: var(--font_weight_regular); } } h2 { text-align: center; /* --_font_weight_h2: var(--font_weight_light); */ span { --_wnts_font_weight: var(--font_weight_regular); } } } &.wnts_widget_text .elementor-widget-container, &.wnts_widget_text { max-width: 90ch; margin-inline: auto; } &.wnts_widget_icon_box { --wnts_widget_icon_box_width: var(--_wnts_widget_icon_box_width, 240px); --wnts_widget_icon_box_aspect_ratio: var(--_wnts_widget_icon_box_aspect_ratio, auto); width: var(--wnts_widget_icon_box_width) !important; aspect-ratio: var(--wnts_widget_icon_box_aspect_ratio) !important; &.wnts_widget_icon_box_rund { --_wnts_widget_icon_box_width: 180px; --_wnts_widget_icon_box_aspect_ratio: 1/1; border-radius: 50%; background-color: var(--wnts_accent_light); transform: scale(1); transition: 0.6s ease-in-out; &:has( a:hover ){ background-color: var(--wnts_accent); transform: scale(1.1); transition: 0.6s ease-in-out; } .elementor-widget-container { position: relative; display: grid; .elementor-icon-box-wrapper { display: grid; gap: 1em; .elementor-icon-box-icon { display: grid; order: 2; margin-bottom: 0; a { position: absolute; display: grid; justify-items: center; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; svg { position: absolute; width: 2rem; height: 2rem; bottom: 2rem; margin-inline: auto; * { --_wnts_svg_fill: var(--wnts_white); } } } } .elementor-icon-box-content { padding-top: 2rem; .elementor-icon-box-description { --_font_size_text: var(--font_size_600); --_line_height_text: 1; color: var(--wnts_white) !important; } } } } } } &.wnts_widget_icon_list { --_button_background_color: rgba(var(--farbe_1_thema_a_rgba), 0.05); --_button_background_color_hover: rgba(var(--farbe_1_thema_a_rgba), 0.05); --_button_text_color: var(--wnts_text); --_button_text_color_hover: var(--wnts_text); --_button_border_padding: 1.5em; --wnts_icon_list_section_padding: var(--_wnts_icon_list_section_padding, var(--_button_border_padding) ); --wnts_icon_list_a_padding_inline_start: var(--_wnts_icon_list_a_padding_inline_start, 0px); --wnts_icon_list_a_padding_inline_end: var(--_wnts_icon_list_a_padding_inline_end, 0px); --wnts_icon_list_a_padding_inline: var(--wnts_icon_list_a_padding_inline_start) var(--wnts_icon_list_a_padding_inline_end); --wnts_icon_list_a_icon_size: var(--_wnts_icon_list_a_icon_size, 1.3em ); --wnts_icon_list_a_icon_distance: var(--_wnts_icon_list_a_icon_distance, 0.7em ); --wnts_icon_list_a_icon_color: var(--_wnts_icon_list_a_icon_color, var(--wnts_accent_light) ); --wnts_icon_list_a_icon_color_hover: var(--_wnts_icon_list_a_icon_color_hover, var(--wnts_accent) ); --wnts_icon_list_a_icon: var(--_wnts_icon_list_a_icon, url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_link.svg') ); padding: var(--wnts_icon_list_section_padding); .elementor-icon-list-items { display: grid; gap: 1em; } a { padding-inline: var(--wnts_icon_list_a_padding_inline_start) var(--wnts_icon_list_a_padding_inline_end) !important; padding-block: var(--wnts_icon_list_a_padding_block_start ) var(--wnts_icon_list_a_padding_block_end ) !important; margin-left: calc( var(--wnts_icon_list_a_icon_size) + var(--wnts_icon_list_a_icon_distance) ); --wnts_animation_line_offset_left: var(--_wnts_animation_line_offset_left, 1em); --_wnts_animation_line_offset_left: 1em; --_wnts_accent_font_weight: var(--font_weight_medium); --_font_weight_text: var(--font_weight_medium); align-items: center; width: fit-content; transition: 0.6s ease-in-out; &::after { position: absolute; display: grid !important; top: calc( ( 1lh - var(--wnts_icon_list_a_icon_size ) ) / 2 ); bottom: 0; left: calc( 0px - var(--wnts_icon_list_a_icon_size) - var(--wnts_icon_list_a_icon_distance) ); right: 0; content: ""; /* display: inline-block; */ width: var(--wnts_icon_list_a_icon_size); height: var(--wnts_icon_list_a_icon_size); background-color: var(--wnts_icon_list_a_icon_color) !important; /* Farbe des Icons */ -webkit-mask-image: var(--wnts_icon_list_a_icon); /* Für WebKit-Browser */ mask-image: var(--wnts_icon_list_a_icon); /* Standard */ mask-size: contain; mask-repeat: no-repeat; mask-position: center; /* margin-right: 5px; */ vertical-align: middle; opacity: 1 !important; } &::before { left: var(--wnts_animation_line_offset_left); right: 0; width: calc( 100% - var(--wnts_animation_line_offset_left) ); } &:hover { padding-inline: calc( var(--wnts_icon_list_a_padding_inline_start) + var(--wnts_animation_line_offset_left)) var(--wnts_icon_list_a_padding_inline_end) !important; transition: 0.6s ease-in-out; &::after { background-color: var(--wnts_icon_list_a_icon_color_hover) !important; /* Farbe des Icons */ transition: 0.6s ease-in-out; } } .elementor-icon-list-icon { display: none;; } .elementor-icon-list-text { padding-left: 0 !important; } } } &.wnts_button_weitere_themen { width: 100%; a { --_button_width: 100%; --_button_text_color: var(--farbe_1_thema_a); --_button_text_color_hover: var(--farbe_1_thema_a); --_button_border_padding: 1.5em; --_button_border_radius: var(--wnts_templates_border_radius); --_button_border_width: 1px; --_button_border_color: var(--farbe_1_thema_a); --_button_background_color: var(--wnts_white); --_button_background_color_hover: var(--wnts_white); --_button_icon_color_hover: var(--wnts_text); --_font_size_text: var(--font_size_600); --_button_text_font_size: var(--font_size_600); } .elementor-button-content-wrapper { height: 2lh; justify-content: space-between; .elementor-button-icon { order: 2; } .elementor-button-text { text-align: left !important; --_font_weight_text: var(--font_weight_medium) } } } &.wnts_widget_post_wrapper { display: grid; gap: var(--wnts_standard_section_gap) !important; .wnts_post_content_wrapper { grid-template-columns: 90ch; width: 100%; > :is( h1, h2, h3, h4 ):not(:first-child ){ padding-top: 1em; } @media( width < 1140px ){ & { width: 100%; grid-template-columns: 1fr; } } } } &.wnts_widget_image { overflow: hidden; --wnts_image_aspect_ratio_default: 1400 / 609; display: grid; aspect-ratio: var(--wnts_image_aspect_ratio); img { aspect-ratio: var(--wnts_image_aspect_ratio); --wnts_image_aspect_ratio: var(--_wnts_image_aspect_ratio, var(--wnts_image_aspect_ratio_default)); object-fit: cover; width: 100%; } } &.wnts_cta_circles { --wnts_cta_number: var(--_wnts_cta_number, 3); --wnts_cta_width: var(--_wnts_cta_width, 160px); --wnts_cta_gap: var(--_wnts_cta_gap, 20px); margin-inline: auto; gap: var(--wnts_cta_gap) !important; /* width: calc( var(--wnts_cta_number) * ( var(--wnts_cta_width) + var(--wnts_cta_gap) ) - var(--wnts_cta_gap) ); */ .elementor-cta__icon { margin-bottom: 0 !important; order: 2; } .elementor-cta__description { margin-bottom: 15px !important; } > * { width: var(--wnts_cta_width); height: var(--wnts_cta_width); border-radius: 50%; color: white; } .wnts_cta_3_circles { --_wnts_cta_width: 160px; } } } } /* OVERWRITE ELEMENTOR COLORS */ /* OVERRIDE FOR APPLE */ #header_asp_shortcode_v2 .wnts_button_kontakt_v2 a.elementor-button.elementor-button-link { background-color: blue !important; background-color: var(--farbe_1_thema_a_hsl_orig) !important; } #header_asp_shortcode_v2 .wnts_button_kontakt_v2 a.elementor-button.elementor-button-link:hover { background-color: yellow !important; background-color: var(--e-global-color-accent) !important; } /* OVERRIDE FOR APPLE */ /* OVERWRITE ELEMENTOR WIDGETS*/ @media print { [data-elementor-type=header], [data-elementor-type=footer] { display: none !important; } } /* OVERWRITE ELEMENTOR WIDGETS*/ /* OVERWRTTE FOR PRINT */ @media print { @page { /* padding: 2cm; width: 100%; height: auto; aspect-ratio: 210 / 297; */ size: A4; /* oder A3, Letter, etc. */ margin: 2cm; } body { background: white !important; --_text_color: black; --wnts_text: black; --_wnts_standard_section_bg_color: white; * { background: var(--_background,white) !important; background-image: var(--_background_image, none) !important; } > *:not( [data-elementor-type=wp-page] ) { display: none !important; } .wnts_hero_section, .elementor-widget-call-to-action, .elementor-widget-button, form, input, textarea, select, button { display: none !important; } } } /* OVERWRTTE FOR PRINT */ /* PAGE / SECTION COLOR */ @layer body { body:not(.elementor-editor-active) { --color_h1: var(--_color_h1, var(--wnts_section_color)); --color_h2: var(--_color_h2, var(--wnts_section_color)); --wnts_post_color: var(--farbe_1_thema_a_hsl_orig); --wnts_section_color: var(--_wnts_section_color, var(--farbe_1_thema_a_hsl_orig)); --wnts_section_color_rgba: var(--_wnts_section_color_rgba, var(--farbe_1_thema_a_rgba)); &.wnts_post_color_theme_b { --wnts_post_color: var(--farbe_2_thema_b_hsl_orig); --_wnts_section_color: var(--farbe_2_thema_b_hsl_orig); --_wnts_section_color_rgba: var(--farbe_2_thema_b_rgba); --button_color_bg_standard: var(--farbe_2_thema_b_hsl_orig); } &.wnts_post_color_theme_c { --wnts_post_color: var(--farbe_3_thema_c_hsl_orig); --_wnts_section_color: var(--farbe_3_thema_c_hsl_orig); --_wnts_section_color_rgba: var(--farbe_3_thema_c_rgba); --button_color_bg_standard: var(--farbe_3_thema_c_hsl_orig); } &.wnts_post_color_theme_d { --wnts_post_color: var(--farbe_4_thema_d_hsl_orig); --_wnts_section_color: var(--farbe_4_thema_d_hsl_orig); --_wnts_section_color_rgba: var(--farbe_4_thema_d_rgba); --button_color_bg_standard: var(--farbe_4_thema_d_hsl_orig); } .wnts_section_color :is(h1,h2,h3,h4,h5,h6,p,span,li), .wnts_section_color { --wnts_section_color: var(--_wnts_section_color, inherit); color: var(--wnts_section_color ) !important; &.wnts_section_color_theme_a { --_wnts_section_color: var(--farbe_1_thema_a); } &.wnts_section_color_theme_b { --_wnts_section_color: var(--farbe_2_thema_b); } &.wnts_section_color_theme_c { --_wnts_section_color: var(--farbe_3_thema_c); } &.wnts_section_color_theme_d { --_wnts_section_color: var(--farbe_4_thema_d); } &.wnts_section_color_white { --_wnts_section_color: var(--wnts_white); } } &.wnts_body.wnts_main_body { } #wnts_footer_1 { background-color: var(--_wnts_footer_1_bg_color, var(--wnts_post_color)) !important; --_text_color: var(--_wnts_footer_1_text_color, var(--wnts_light_color)); --_color_text: var(--_wnts_footer_1_color_text, var(--wnts_light_color)); > * { grid-template-columns: 1fr auto !important; gap: 1em !important; @media(width<=1024px){ grid-template-columns: 1fr !important; } } span.elementor-icon-list-text { font-weight: var(--font_weight_medium) !important; b { font-weight: var(--font_weight_bold) !important; } } } #wnts_footer_2 { background-color: var(--_wnts_footer_2_bg_color, var(--wnts_post_color)) !important; --_text_color: var(--_wnts_footer_2_text_color, var(--wnts_light_color)); --_color_text: var(--_wnts_footer_2_color_text, var(--wnts_light_color)); } #wnts_footer_1 .elementor-social-icon { background-color: var(--_wnts_footer_1_social_icon_bg_color, var(--wnts_post_color)) !important; } h1, h1 span { font-size: var(--_font_size_h1, var(--font_size_h1)) !important; line-height: var(--_line_height_h1, var(--line_height_400)) !important; &:is(h1){ font-weight: var(--_font_weight_h1, var(--font_weight_bold)) !important; } @media(width<=1024px){ font-size: var(--_font_size_h1, var(--font_size_750)) !important; } @media(width<=767px){ font-size: var(--_font_size_h1, var(--font_size_700)) !important; } } h2, h2 span { font-size: var(--_font_size_h2, var(--font_size_h2)) !important; line-height: var(--_line_height_h2, var(--line_height_500)) !important; &:is(h2) { font-weight: var(--_font_weight_h2, var(--font_weight_h2)) !important; } @media(width<=1024px){ /* --_font_size_h2: var(--font_size_650); */ font-size: var(--_font_size_h2, var(--font_size_650)) !important; } @media(width<=767px){ /* --_font_size_h2: var(--font_size_600); */ font-size: var(--_font_size_h2, var(--font_size_600)) !important; } } h3, h3 span { font-size: var(--_font_size_h3, var(--font_size_h3)) !important; line-height: var(--_line_height_h3, var(--line_height_500)) !important; &:is(h3) { font-weight: var(--_font_weight_h3, var(--font_weight_h3)) !important; } margin-top: var(--_margin_top, initial) !important; margin-bottom: var(--_margin_bottom, initial) !important; @media(width<=1024px){ font-size: var(--_font_size_h3, var(--font_size_650)) !important; } @media(width<=767px){ font-size: var(--_font_size_h3, var(--font_size_600)) !important; } } .wnts_headline_style_standard, h2.wnts_headline_style_standard { h2 { --_font_weight_h2: var(--font_weight_bold); } } h4, h5, h6, :is(h4, h5, h6) span { font-size: var(--_font_size_h3, var(--font_size_h3)) !important; font-weight: var(--_font_weight_h3, var(--font_size_h3)) !important; line-height: var(--_line_height_h3, var(--line_height_500)) !important; &:is(h4){ font-weight: var(--_font_weight_h4, var(--font_weight_h4)) !important; } &:is(h5){ font-weight: var(--_font_weight_h5, var(--font_weight_h5)) !important; } &:is(h6){ font-weight: var(--_font_weight_h6, var(--font_weight_h6)) !important; } @media(width<=1024px){ font-size: var(--_font_size_h3, var(--font_size_400)) !important; } } p, span { font-size: var(--_font_size_text, var(--font_size_regular)) !important; font-weight: var(--_font_weight_text, var(--font_weight_regular)) !important; line-height: var(--_line_height_text, var(--line_height_regular)) !important; } } } /* PAGE / SECTION COLOR */ @layer basics { body:not(.elementor-editor-active) { a { color: var(--_color_link); } a:not([class]) { position: relative; color: var(--_color_link, var(--wnts_accent)); --_text_color: var(--_color_link, var(--wnts_accent)); font-weight: var(--font_weight_a, var(--_font_weight_a)); } a:not([class]):not(:has(img))::before { position: absolute; content: ''; left: 0; bottom: var(--_link_underline_bottom, 0); width: 100%; height: var(--_link_underline_thickness, 2px); background-color: transparent; transform: scaleX(0); transform-origin: left; transition: transform 0.6s ease, background-color 0.6s ease; } a:not([class]):not(:has(img)):hover::before, a:not([class]):not(:has(img)):focus-visible::before { background-color: var(--_color_link, var(--wnts_accent)); height: var(--_link_underline_thickness, 2px); transform: scaleX(1); } /* Wenn das a ein Bild enthält: Bild bekommt einen Rand bei Hover/Focus */ a:not([class]):has(img):hover img, a:not([class]):has(img):focus-visible img { outline: 2px solid var(--_color_link, var(--wnts_accent)); outline-offset: 2px; /* optional für Abstand */ } li > a:not([class])::before { --_link_underline_thickness: 1px; --_link_underline_bottom: 0; } .wnts_float_right { float: right; } .wnts_clear_both { clear: both; } .wnts_bold { font-weight: var(--font_weight_medium); --_font_weight_text: var(--font_weight_medium); } /* .wnts_hide { --wnts_hide: var(--_wnts_hide, none); --_display_flex: none; display: var(--wnts_hide) !important; border: 1px solid red; } body.wnts_user_level_0 .wnts_hide.wnts_user_level_0 { --_wnts_hide: flex; } */ .wnts_hide, &.wnts_user_level_0 .wnts_hide, &.wnts_user_level_1 .wnts_hide, &.wnts_user_level_2 .wnts_hide, &.wnts_user_level_3 .wnts_hide, &.wnts_user_level_10 .wnts_hide, #header_backend .wnts_hide { --wnts_display: var(--_wnts_hide_display, none); display: var(--wnts_display) !important; } &.wnts_user_level_0 #header_backend .wnts_hide.wnts_user_level_0, &.wnts_user_level_0 .wnts_hide.wnts_user_level_0 { --_wnts_hide_display: initial; display: var(--wnts_hide_show_display, initial) !important; } &.wnts_user_level_1 #header_backend .wnts_hide.wnts_user_level_1, &.wnts_user_level_1 .wnts_hide.wnts_user_level_1 { --_wnts_hide_display: initial; display: var(--wnts_hide_show_display, initial) !important; } &.wnts_user_level_2 #header_backend .wnts_hide.wnts_user_level_2, &.wnts_user_level_2 .wnts_hide.wnts_user_level_2 { --_wnts_hide_display: initial; display: var(--wnts_hide_show_display, initial) !important; } &.wnts_user_level_3 #header_backend .wnts_hide.wnts_user_level_3, &.wnts_user_level_3 .wnts_hide.wnts_user_level_3 { --_wnts_hide_display: initial; display: var(--wnts_hide_show_display, initial) !important; } &.wnts_user_level_10 #header_backend .wnts_hide.wnts_user_level_10, &.wnts_user_level_10 .wnts_hide.wnts_user_level_10 { --_wnts_hide_display: initial; display: var(--wnts_hide_show_display, initial) !important; } .wnts_hide_important { display: none !important; } .wnts_padding_standard { padding: var(--font_size_regular); } .wnts_padding_block_standard { padding-block: var(--font_size_regular); } .wnts_padding_block_start_standard { padding-block-start: var(--font_size_regular); } .wnts_padding_block_start_700 { padding-block-start: var(--font_size_700); } .wnts_padding_block_end_standard { padding-block-end: var(--font_size_regular); } .wnts_padding_inline_standard { padding-inline: var(--font_size_regular); } .wnts_padding_inline_start_standard { padding-inline-start: var(--font_size_regular); } .wnts_padding_inline_end_standard { padding-inline-end: var(--font_size_regular); } .wnts_flex { display: var(--_display_flex, flex) !important; flex-wrap: var(--wnts_flex_wrap,var(--wnts_flex_wrap_regular)); gap: var(--wnts_flex_gap_row,var(--wnts_flex_gap_regular_col)) var(--wnts_flex_gap_column,var(--wnts_flex_gap_regular_row)); justify-content: var(--_wnts_flex_justify_content, var(--wnts_flex_justify_content )); } .wnts_justify_content_space_around { --_wnts_flex_justify_content: space-around; } .wnts_justify_content_space_between { --_wnts_flex_justify_content: space-between; } .wnts_justify_content_space_evenly { --_wnts_flex_justify_content: space-evenly; } .wnts_justify_content_start { --_wnts_flex_justify_content: flex-start; } .wnts_justify_content_end { --_wnts_flex_justify_content: flex-end; } .wnts_max_x_lines { --wnts_number_of_lines: 5; --wnts_height: var(--_wnts_height, 5lh); display: -webkit-box; -webkit-line-clamp: var(--_wnts_number_of_lines, 5); -webkit-box-orient: vertical; overflow: hidden; padding: 0; height: var(--wnts_height); } .wnts_max_x_lines.wnts_1_lines { --_wnts_number_of_lines: 1; --_wnts_height: 1lh; } .wnts_max_x_lines.wnts_2_lines { --_wnts_number_of_lines: 2; --_wnts_height: 2lh; } .wnts_max_x_lines.wnts_3_lines { --_wnts_number_of_lines: 3; --_wnts_height: 3lh; } .wnts_text_wrap_balance { text-wrap: balance; /* // wnts_start_at */ } } @layer color_classes { /* .wnts_color_thema_a, .wnts_color_thema_a * { color: var(--_text_color, var(--farbe_1_thema_a_hsl_orig)); --_text_color: var(--farbe_1_thema_a_hsl_orig); } .wnts_color_thema_b, .wnts_color_thema_b * { color: var(--_text_color, var(--farbe_2_thema_b_hsl_orig)); --_text_color: var(--farbe_2_thema_b_hsl_orig); } .wnts_color_thema_c, .wnts_color_thema_c * { color: var(--_text_color, var(--farbe_3_thema_c_hsl_orig)); --_text_color: var(--farbe_3_thema_c_hsl_orig); } .wnts_color_thema_d, .wnts_color_thema_d * { color: var(--_text_color, var(--farbe_4_thema_d_hsl_orig)); --_text_color: var(--farbe_4_thema_d_hsl_orig); } */ .wnts_color_thema_a { color: var(--_text_color, var(--farbe_1_thema_a_hsl_orig)); --_text_color: var(--farbe_1_thema_a_hsl_orig); } .wnts_color_thema_b { color: var(--_text_color, var(--farbe_2_thema_b_hsl_orig)); --_text_color: var(--farbe_2_thema_b_hsl_orig); } .wnts_color_thema_c { color: var(--_text_color, var(--farbe_3_thema_c_hsl_orig)); --_text_color: var(--farbe_3_thema_c_hsl_orig); } .wnts_color_thema_d { color: var(--_text_color, var(--farbe_4_thema_d_hsl_orig)); --_text_color: var(--farbe_4_thema_d_hsl_orig); } .wnts_text_light { color: var(--_text_color, var(--wnts_light_color)); --_text_color: var(--wnts_light_color); } .wnts_color_accent { color: var(--_text_color, var(--wnts_accent_hsl_orig)); --_text_color: var(--wnts_accent_hsl_orig); } .wnts_color_accent_light { color: var(--_text_color, var(--wnts_accent_light)); --_text_color: var(--wnts_accent_light); } .wnts_overlay_color { background-color: rgba( var(--wnts_text_rgba), 0.3); } .wnts_overlay_color_overlay::before { --bg_overlay_rgb: var( --_bg_overlay_rgb, var(--farbe_1_thema_a_rgba) ); --bg_overlay_a: var( --_bg_overlay_a, 0.3 ); background-color: rgb( var( --bg_overlay_rgb )) !important; opacity: var( --bg_overlay_a ) !important; } } @layer font_classes { .wnts_font_weight_regular { font-weight: var( --_font_weight_regular, var(--font_weight_regular)) !important; } .wnts_font_weight_bold { font-weight: var( --_font_weight_bold, var(--font_weight_bold)) !important; } .wnts_font_weight_semi_bold { font-weight: var( --_font_weight_semi_bold, var(--font_weight_semi_bold)) !important; } } @layer link_color { } } @layer wnts_grids { .wnts_grid, .wnts_elementor_grid { /* --_wnts_wnts_grid_template_columns: auto; */ --wnts_number_columns: var(--_wnts_number_columns, 1); --wnts_grid_template_column: var(--_wnts_grid_template_column, 1fr); --wnts_grid_template_repeat: var(--_wnts_grid_template_repeat, 1); --wnts_width_column: var(--_wnts_width_column, 300px); --wnts_grid_gap: var(--_wnts_grid_gap, 1em); --wnts_justify_items: var(--_wnts_justify_items, start); --wnts_justify_self: var(--_wnts_justify_self, start); display: var(--_wnts_grid_display, grid) !important; grid-template-columns: var(--_wnts_wnts_grid_template_columns, auto) !important; grid-auto-rows: var(--_wnts_grid_auto_rows, auto) !important; gap: var(--wnts_grid_gap) !important; justify-items: var(--wnts_justify_items); justify-self: var(--wnts_justify_self); &.wnts_elementor_grid_squares { --_wnts_grid_template_column: minmax(100px, 1fr); --_wnts_grid_template_repeat: auto-fit; --_wnts_wnts_grid_template_columns: repeat( var(--wnts_grid_template_repeat), var(--wnts_width_column) ); /* --_wnts_grid_auto_rows: var(--wnts_width_column); */ justify-content: center !important; > * { aspect-ratio: 1 / 1; /* Stellt sicher, dass die Elemente quadratisch sind */ max-width: var(--wnts_width_column) !important; width: 100% !important; } &.wnts_grid_5_squares { --wnts_zoom_factor_start: var(--_wnts_zoom_factor_start, 0.9); --wnts_zoom_factor_end: var(--_wnts_zoom_factor_end, 1); --wnts_grid_5_squares_max_size: var(--_wnts_grid_5_squares_max_size, calc(160px / var(--wnts_zoom_factor_start)) ); --_wnts_width_column: var(--wnts_grid_5_squares_max_size); --_wnts_grid_gap: 2em; --_wnts_cta_text_size: var(--font_size_600); --_wnts_cta_text_weight: var(--font_weight_medium); @media(width<=767px){ /* --_wnts_width_column: 150px; */ --_wnts_grid_5_squares_max_size: calc(150px / var(--wnts_zoom_factor_start)); --_wnts_grid_gap: 1em; --_wnts_cta_text_size: var(--font_size_400); /* --_wnts_svg_width: 40px; --_wnts_svg_height: 40px; */ } } } &.wnts_grid_2_col { --wnts_grid_template_column_1: var(--_wnts_grid_template_column_1, 1fr); --wnts_grid_template_column_2: var(--_wnts_grid_template_column_2, 1fr); --_wnts_wnts_grid_template_columns: var(--wnts_grid_template_column_1) var(--wnts_grid_template_column_2); &.wnts_grid_1fr_2fr { --_wnts_grid_template_column_2: 2fr; --_wnts_grid_gap: 3rem; @media (max-width: 1024px) { &.wnts_grid_tablet_1fr { --_wnts_wnts_grid_template_columns: 1fr; } } } &.wnts_grid_auto_auto { --_wnts_grid_template_column_1: auto; --_wnts_grid_template_column_2: auto; } } &.wnts_inline { --_wnts_grid_display: inline-grid; --_wnts_wnts_grid_template_columns: repeat(auto-fit, auto); &.wnts_standard_link { --_wnts_grid_gap: 0.3em; padding-right: 0.3em; } } &.wnts_2_column_grid { --_wnts_wnts_grid_template_columns: auto auto; } &.wnts_icon { place-items: center; --_icon_width: 1.2em; --_icon_height: 1.2em; } &.wnts_auto_fill_330px { --col_width: var(--_col_width, 330px); --_wnts_wnts_grid_template_columns: repeat(auto-fill, minmax(min(var(--col_width), 100%), 1fr)); } &.wnts_justify_items_end { --_wnts_justify_items: end; } &.wnts_justify_self_end { --_wnts_justify_self: end; } } /* .wnts_icon_list_2_lines */ div:has(>.wnts_widget_2_lines_icon_link){ justify-content: flex-end !important; } .wnts_widget_2_lines_icon_link { a { display: grid !important; grid-template-columns: auto auto !important; align-items: center !important; justify-content: end !important; .wnts_icon { display: grid !important; align-items: center !important; } } } .wnts_grid.wnts_auto_fit_4 { --auto_fit_number_col: var(--_auto_fit_number, 4); --auto_fit_width: var(--_auto_fit_width, var(--wnts_container-max-width)); --auto_fit_gap: var(--_auto_fit_gap, 1em); --auto_fit_col_max_width: calc( ( var(--auto_fit_width) - ( var(--auto_fit_number_col) - 1 ) * var(--auto_fit_gap) ) / var(--auto_fit_number_col) ); --_wnts_wnts_grid_template_columns: repeat( auto-fit, minmax( min( 100%, calc( (100% - (var(--auto_fit_gap) * (var(--auto_fit_number_col) - 1))) / var(--auto_fit_number_col) ) ), 1fr ) ); } } @layer units { ul:has( .wnts_no_marker){ padding-inline-start: 0; } li.wnts_no_marker, .wnts_no_marker li { list-style-type: none; } .wnts_icon, .wnts_link_icon { --icon_width: var(--_icon_width, 24px); --icon_height: var(--_icon_height, 1em); --wnts_svg_fill: var(--_wnts_svg_fill, var(--wnts_dunkelgrau)); --color_button_icon: var(--color_button_icon, var(--wnts_dunkelgrau)); } :has([class^=wnts],[class^=asp]) { svg, svg .cls-1, svg .st0 { fill: var(--_wnts_svg_fill, currentColor) !important; } } :has(.wnts_icon,.wnts_link_icon) svg { /* --_wnts_svg_fill: var(--wnts_svg_fill); */ width: var(--icon_width); height: var(--icon_height); display: grid; } .wnts_icon.wnts_logo_svg svg { --icon_width: auto; --icon_height: 100px; transition: 0.6s ease-in-out; @media(width<=1140px){ --icon_height: 60px; } } .wnts_link_on_logo { display: inline-block; } @layer divider { .wnts_divider { --wnts_divider_height: var(--_wnts_divider_height, 2px); --wnts_divider_bg_color: var(--_wnts_divider_bg_color, var(--wnts_section_color)); height: var(--wnts_divider_height ); background-color: var(--wnts_divider_bg_color); } } @layer images { body:not(.elementor-editor-active) { img, .elementor img { border: var(--_image_border, none) !important; border-radius: var(--_image_border_radius, 0) !important; box-shadow: var(--_image_box_shadow, none) !important; height: var(--_image_height, auto) !important; max-width: var(--_image_max_width, 100%) !important; } /* 'left top' => 'wnts_img_position wnts_left_top', 'left center' => 'wnts_img_position wnts_left_center', 'left bottom' => 'wnts_img_position wnts_left_bottom', 'right top' => 'wnts_img_position wnts_right_top', 'right center' => 'wnts_img_position wnts_right_center', 'right bottom' => 'wnts_img_position wnts_right_bottom', 'center top' => 'wnts_img_position wnts_center_top', 'center bottom' => 'wnts_img_position wnts_center_bottom', */ img.wnts_img_position { --wnts_dd_app_single_post_img_position: var(--_wnts_dd_app_single_post_img_position, 'center' ); object-position: var(--wnts_dd_app_single_post_img_position) !important; &.wnts_left_top { --_wnts_dd_app_single_post_img_position: left top; } &.wnts_left_center { --_wnts_dd_app_single_post_img_position: left center; } &.wnts_left_bottom { --_wnts_dd_app_single_post_img_position: left bottom; } &.wnts_center_top { --_wnts_dd_app_single_post_img_position: center top; } &.wnts_center_center { --_wnts_dd_app_single_post_img_position: center center; } &.wnts_center_bottom { --_wnts_dd_app_single_post_img_position: center bottom; } &.wnts_right_top { --_wnts_dd_app_single_post_img_position: right top; } &.wnts_right_center { --_wnts_dd_app_single_post_img_position: right center; } &.wnts_right_bottom { --_wnts_dd_app_single_post_img_position: right bottom; } } .wnts_standard_radius img { --_image_border_radius: var(--wnts_templates_border_radius); } } } @layer button { body:not(.elementor-editor-active) { button, /* :is(.wnts_button_accent) */ a.wnts_standard_link, .wnts_social_media_buttons .elementor-social-icons-wrapper a, .wnts_button a, .wnts_button .elementor-button-wrapper a { --wnts_button_icon_width: var(--_wnts_button_icon_width, 1em); --wnts_button_icon_height: var(--_wnts_button_icon_height, 1em); --wnts_button_icon_fill: var(--_wnts_button_icon_fill, var(--button_text_color)); --wnts_button_font_weight: var(--_wnts_button_font_weight, var(--font_weight_medium)); margin: var( --_button_margin, var(--button_margin)) !important; /* padding: var( --_button_padding, var(--button_padding)) !important; */ width: var( --_button_width, var(--button_width)) !important; height: var( --_button_height, var(--button_height)) !important; font-size: var( --_button_text_font_size, var(--button_font_size)) !important; --_font_size_text: var( --_button_text_font_size, var(--button_font_size)); --_font_weight_text: var(--wnts_button_font_weight); --_wnts_font_weight: var(--wnts_button_font_weight); font-weight: var( --_font_weight_text ) !important; line-height: var( --_button_text_font_size, var(--button_font_size)) !important; --_line_height_text: var( --_button_text_font_size, var(--button_font_size)); color: var( --_button_text_color, var(--button_text_color)) !important; background: var( --_button_background_color, var(--button_background_color)) !important; border-width: var( --_button_border_width_all, var(--button_border_width_all)) !important; border: var(--_button_border_width, 0) solid var(--_button_border_color, transparent) !important; border-radius: var(--_button_border_radius,var(--button_border_radius)) !important; outline: var(--_button_outline, none ) !important; --button_border_padding: var(--_button_border_padding, var(--border_padding)); padding: var(--button_border_padding) !important; svg { --icon_width: var( --_wnts_button_icon_width ); --icon_height: var( --_wnts_button_icon_height ); width: var(--wnts_button_icon_width) !important; height: var(--wnts_button_icon_height) !important; --_wnts_svg_fill: var(--wnts_button_icon_fill); } .elementor-button-content-wrapper { gap: 1em !important; align-items: center !important; .elementor-button-icon { display: grid !important; } .elementor-button-text { position: relative; &::after { position: absolute; content: ''; left:0; bottom: -3px; width: 0%; height: 2px; background-color: currentColor; } } } .elementor-button-content-wrapper .elementor-button-text, .wnts_button_animated_text { position: relative; &::after { position: absolute; content: ''; left:0; bottom: -3px; width: 0%; height: 2px; background-color: currentColor; } } &:hover,&:focus-visible { color: var( --_button_text_color_hover, var(--button_text_color_hover)) !important; background: var( --_button_background_color_hover, var(--button_background_color_hover)) !important; border: var(--_button_border_width, 0) solid var(--_button_border_color_hover, var(--_button_border_color)) !important; svg { --_wnts_svg_fill: var( --_button_icon_color_hover, var(--button_icon_color_hover)); } .elementor-button-text::after, .wnts_button_animated_text::after { width: 100%; transition: width 0.6s ease-in-out; } } &.wnts_preview_link { display: grid; grid-template-columns: auto auto; gap: 1em; align-items: center; --_button_text_color_hover: var(--wnts_accent); --_button_background_color: transparent; --_button_background_color_hover: transparent; --_button_icon_color_hover: var(--wnts_accent); .wnts_button_animated_text { margin-bottom: 0; } .wnts_button_icon { --wnts_ink_icon: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_link_black.svg'); display: grid; width: 1em; height: 1em; background-color: var(--wnts_accent); /* Das ist jetzt die Icon-Farbe */ -webkit-mask-image: var(--wnts_ink_icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--wnts_ink_icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } } } a.wnts_standard_link.wnts_animated.wnts_link_icon { --wnts_standard_link_bg_color: var(--_wnts_standard_link_bg_color, transparent); --wnts_standard_link_icon_color_hover: var(--_wnts_standard_link_icon_color_hover, var(--wnts_accent)); --_button_text_font_size: 1em; --_button_border_padding: 0 0.3em; --_wnts_button_icon_width: 1.2em; --_wnts_button_icon_height: 1.2em; --_button_background_color_hover: transparent; --_button_text_color_hover: var(--wnts_accent_orig_hsl); --_button_border_padding: 0px 0.3em; --_button_background_color: var(--wnts_standard_link_bg_color ); --_button_icon_color_hover: var(--wnts_standard_link_icon_color_hover ); --width_child_1_animated: var(--_width_child_1_animated, 100%); --width_child_2_animated: var(--_width_child_2_animated, 0%); &.wnts_animated_only_2nd_child { --_width_child_1_animated: 0%; --_width_child_2_animated: 100%; } > :first-child:not(.wnts_icon), > :nth-child(2):not(.wnts_icon) { position: relative; &::before { position: absolute; content:''; background-color: var(--wnts_accent_orig_hsl); top:unset; left: 0; bottom: -2px; right: 0; height: 2px; width: 0%; transition: 0.6s ease-in-out;; } } &:hover > :first-child::before { width: var(--_width_child_1_animated,100%); transition: 0.6s ease-in-out; } &:hover > :nth-child(2)::before { width: var(--_width_child_2_animated,100%); transition: 0.6s ease-in-out; } .wnts_icon_list_two_lines > a { --_wnts_grid_gap: 0.3em; } .wnts_icon_list_two_lines > a > div { --_wnts_grid_gap: 0em; } } .wnts_button_full_width a { --_button_width: 100%; } .wnts_button_hamburger a { padding: 0 !important; } .wnts_button_accent { --_button_text_font_size: 18px; --_wnts_font_weight: var(--font_weight_regular); letter-spacing: var(--letter_spacing_700); button, a.wnts_button_accent_link, .elementor-button-wrapper a { --wnts_button_accent_height: var(--_wnts_button_accent_height, 50px); --wnts_button_accent_icon_width_height: var(--_wnts_button_accent_icon_width_height, 18px); --wnts_button_accent_padding_block: calc( ( var(--wnts_button_accent_height) - var(--wnts_button_accent_icon_width_height) ) / 2 ); --_wnts_button_icon_width: var(--wnts_button_accent_icon_width_height); --_wnts_button_icon_height: var(--wnts_button_accent_icon_width_height); --_button_border_padding: var(--wnts_button_accent_padding_block) 1.4em; /* padding-block = (50px - 18px) / 2 */ --_button_text_color: var(--wnts_white); --_button_text_color_hover: var(--_button_text_color); --_button_background_color: var(--wnts_accent_light); /* DARK to LIGHT var(--wnts_accent); */ --_button_background_color_hover: var(--wnts_accent); /* LIGHT to DARK var(--wnts_accent_light); */ --_button_icon_color_hover: var(--_button_text_color); --_wnts_button_icon_fill: var(--_button_text_color); --_button_border_radius: 50px; --_button_border_width: 1px; --_button_border_color: var(--wnts_accent); } a.wnts_button_accent_link { display: inline-grid; width: fit-content; /* --_button_height: 50px; */ span { /* --_line_height_text: var(--line_height_regular); */ --_line_height_text: 1em; /* --_font_size_text: var(--font_size_400); */ } span.wnts_grid.wnts_grid_2_col { --_wnts_grid_template_column_1: auto; --_wnts_grid_template_column_2: auto; align-items: center; } } &.wnts_accent_thema_a { button, .elementor-button-wrapper a { --_button_background_color: var(--farbe_1_thema_a_hsl_orig); --_button_border_color: var(--farbe_1_thema_a_hsl_orig); --_button_background_color_hover: var(--farbe_1_thema_a_heller); } } } .wnts_button_kontakt_v2 { --_button_border_radius: 50px; --asp_height: 50px; --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: var(--_wnts_button_icon_width); --_button_border_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_wnts_button_icon_height) )) / 2 ) 1.5em; --_button_text_font_size: var(--font_size_400); --_elementor_button_font_weight: var(--font_weight_regular); /* --_button_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_icon_height) )) / 2 ) 1.5em; */ --_button_background_color: var(--farbe_1_thema_a); --_button_background_color_hover: var(--wnts_accent); --_button_text_color: var(--wnts_white); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--wnts_white); a { box-shadow: var(--wnts_box_shadow_white_100) !important; } } .wnts_button_primary_color { --_button_border_radius: 50px; --asp_height: 50px; --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: var(--_wnts_button_icon_width); --_button_border_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_wnts_button_icon_height) )) / 2 ) 1.5em; --_button_text_font_size: var(--font_size_400); --_elementor_button_font_weight: var(--font_weight_semi_bold); --_wnts_button_font_weight: var(--font_weight_semi_bold); /* --_button_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_icon_height) )) / 2 ) 1.5em; */ --_button_background_color: var(--farbe_1_thema_a); --_button_background_color_hover: var(--farbe_1_thema_a); --_button_text_color: var(--wnts_white); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--wnts_white); &.wnts_invers { --_button_background_color: var(--wnts_white); --_button_background_color_hover: var(--wnts_white); --_button_text_color: var(--farbe_1_thema_a); --_button_text_color_hover: var(--farbe_1_thema_a); --_wnts_button_icon_fill: var(--farbe_1_thema_a); --_button_icon_color_hover: var(--farbe_1_thema_a); } } .wnts_button_menu { --_button_border_radius: 50px; --asp_height: 50px; --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: var(--_wnts_button_icon_width); --_button_border_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_wnts_button_icon_height) )) / 2 ) 1.5em; --_button_border_padding: 16px; --_button_text_font_size: var(--font_size_400); --_elementor_button_font_weight: var(--font_weight_regular); /* --_button_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_icon_height) )) / 2 ) 1.5em; */ --_button_background_color: var(--wnts_white); --_button_background_color_hover: var(--farbe_1_thema_a); --_button_text_color: var(--farbe_1_thema_a); --_wnts_button_icon_fill: var(--farbe_1_thema_a); --_button_icon_color_hover: var(--wnts_white); &.wnts_invers { --_button_background_color: var(--farbe_1_thema_a); --_button_background_color_hover: var(--wnts_white); --_button_text_color: var(--wnts_white); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--farbe_1_thema_a); a { box-shadow: var(--wnts_box_shadow_white_100) !important; } } } button.wnts_search_icon { --_button_background_color: transparent; --_wnts_button_icon_fill: var(--farbe_1_thema_a); --_button_border_width: 0; --_button_border_padding: 0.75em; --_button_background_color_hover: var(--farbe_1_thema_a); --_button_text_color_hover: var(--wnts_white); --_button_icon_color_hover: var(--wnts_white); --_button_border_radius: 50%; --_wnts_button_icon_width: 1em; --_wnts_button_icon_height: 1em; } .wnts_button_submit { --_button_border_radius: 50px; --asp_height: 50px; --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: var(--_wnts_button_icon_width); --_button_border_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_wnts_button_icon_height) )) / 2 ) 1.5em; --_button_text_font_size: var(--font_size_500); --_elementor_button_font_weight: var(--font_weight_regular); /* --_button_padding: calc( (var(--asp_height) - max( var(--_button_text_font_size), var(--_icon_height) )) / 2 ) 1.5em; */ --_button_background_color: var(--farbe_1_thema_a); --_button_background_color_hover: var(--wnts_accent); --_button_text_color: var(--wnts_white); --_button_text_color_hover: var(--wnts_white); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--wnts_white); :nth-child(2) { position: relative; &::before { position: absolute; content: ''; bottom: calc( (var(--asp_height) - var(--_button_text_font_size)) / 2 - 1em - 2px); left: 0; width: 0%; height: 2px; background-color: var(--_button_text_color_hover); transition: 0.6s ease-in-out; } } &:hover :nth-child(2)::before { width: 100%; transition: 0.6s ease-in-out; } } .wnts_social_media_buttons { --wnts_sm_icon_size: 50px; --wnts_sm_grid_gap: 1em; --wnts_sm_number_of_icons: 4; --wnts_sm_grid_col_size: calc( var(--wnts_sm_icon_size) + var(--wnts_sm_grid_gap)); width: 100%; .elementor-social-icons-wrapper { display: grid !important; grid-template-columns: repeat(var(--wnts_sm_number_of_icons), minmax(var(--wnts_sm_grid_col_size), var(--wnts_sm_grid_col_size))) !important; > * { display: block !important; } } .elementor-social-icons-wrapper a { --wnts_button_social_media_height: var(--_wnts_button_social_media_height, var(--wnts_sm_icon_size)); --wnts_button_social_media_icon_width_height: var(--_wnts_button_social_media_icon_width_height, var(--wnts_sm_icon_size)); --wnts_button_social_media_padding_block: calc( ( var(--wnts_button_social_media_height) - var(--wnts_button_social_media_icon_width_height) ) / 2 ); --_wnts_button_icon_width: var(--wnts_button_social_media_icon_width_height); --_wnts_button_icon_height: var(--wnts_button_social_media_icon_width_height); --_button_border_padding: var(--wnts_button_social_media_padding_block) var(--wnts_button_social_media_padding_block); --_button_text_color: var(--wnts_light_color); --_button_text_color_hover: var(--_button_text_color); --_wnts_footer_1_social_icon_bg_color: transparent; --_button_background_color: var(--wnts_accent); --_button_background_color_hover: var(--wnts_accent_light); --_wnts_button_icon_fill: var(--_button_text_color); --_button_icon_color_hover: var(--wnts_section_color); --_button_border_radius: 50px; --_button_border_width: 1px; --_button_border_color: transparent; --_button_border_color_hover: var(--wnts_light_color); &:hover { --_wnts_footer_1_social_icon_bg_color: var(--wnts_white); } } &.wnts_light .elementor-social-icons-wrapper a { --_button_text_color: var(--wnts_light_color); --_button_text_color_hover: var(--_button_text_color); --_button_background_color: var(--wnts_accent); --_button_background_color_hover: var(--wnts_accent_light); --_button_icon_color_hover: var(--_button_text_color); --_wnts_button_icon_fill: var(--_button_text_color); --_button_border_radius: 50px; --_button_border_width: 1px; --_button_border_color: var(--wnts_accent); } } } } @layer elementor_button { /* .wnts_elementor_button { .elementor-button { background-color: var(--_elementor_button_bg_color, var(--button_background_color)) !important; border-radius: var(--_elementor_button_border_radius, var(--button_border_radius)) !important; color: var(--_elementor_button_color, var(--button_text_color)) !important; display: inline-block; font-size: var(--_elementor_button_font_size, var(--button_font_size)) !important; font-weight: var(--_elementor_button_font_weight, var(--button_font_weight)) !important; line-height: 1; padding: var(--_elementor_button_border_padding, var(--border_padding)) !important; fill: var(--_elementor_button_icon_color, var(--button_icon_color)) !important; --_icon_width: 30px; --_icon_height: var(--_icon_width); text-align: center; transition: all .3s; svg { width: var(--_icon_width) !important; height: var(--_icon_width) !important; } &:hover { color: var(--_elementor_button_color_hover, var(--button_text_color_hover)) !important; fill: var(--_elementor_button_icon_color_hover, var(--button_icon_color_hover)) !important; background-color: var(--_elementor_button_bg_color_hover, var(--button_background_color_hover)) !important; } .elementor-button-content-wrapper { gap: 1em !important; align-items: center !important; .elementor-button-icon { display: grid !important; } } } &.wnts_button_kontakt { --asp_height: 60px; --_elementor_button_border_radius: 50px; --_elementor_button_button_font_size: 30px; --_elementor_button_font_size: var(--font_size_500); --_elementor_button_font_weight: var(--font_weight_regular); --_elementor_button_border_padding: calc( (var(--asp_height) - max( var(--_elementor_button_button_font_size), var(--_elementor_button_font_size) )) / 2 ) 1.5em; --_elementor_button_bg_color: var(--farbe_1_thema_a); --_elementor_button_color: var(--wnts_white); --_elementor_button_icon_color: var(--wnts_white); } } */ } @layer text_with_icon { .wnts_text_with_icon { --text_with_icon_distance: var(--_text_with_icon_distance, 0.5em); --text_with_icon_image: var(--_text_with_icon_image, url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_arrow_right.svg')); --text_with_icon_image_color: var(--_text_with_icon_image_color, currentColor); --text_with_icon_image_width: var(--_text_with_icon_image_width, 1em); --text_with_icon_image_height: var(--_text_with_icon_image_height, var(--text_with_icon_image_width)); display: inline-flex; align-items: center; /* vertikal mittig */ gap: var(--text_with_icon_distance); /* Abstand zwischen Icon und Text */ position: relative; &.wnts_icon_left { &::before { content: ''; display: inline-block; width: var(--text_with_icon_image_width); height: var(--text_with_icon_image_height); /* background-image: var(--text_with_icon_image); background-size: contain; background-repeat: no-repeat; background-position: center; */ background-color: var(--text_with_icon_image_color); /* oder z. B. #007bff */ -webkit-mask: var(--text_with_icon_image) no-repeat center; mask: var(--text_with_icon_image) no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } &.wnts_icon_right { &::after { content: ''; display: inline-block; width: 1em; height: 1em; /* background-image: var(--text_with_icon_image); background-size: contain; background-repeat: no-repeat; background-position: center; */ background-color: var(--text_with_icon_image_color); /* oder z. B. #007bff */ -webkit-mask: var(--text_with_icon_image) no-repeat center; mask: var(--text_with_icon_image) no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } &.wnts_icon_calendar { --_text_with_icon_image: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/termin.svg') } &.wnts_icon_time { --_text_with_icon_image: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/uhrzeit.svg') } &.wnts_icon_location { --_text_with_icon_image: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/ort.svg') } } } @layer form { body:not(.elementor-editor-active) { &:not(:has(.probox)) { form.gibts_nicht { &.wnts_form { display: var(--_wnts_form_display, grid) !important; gap: var(--_wnts_form_gap, var(--font_size_100)) !important; grid-template-columns: var(--_form_wnts_grid_template_column, repeat(12, 1fr)) !important; padding: 2rem var(--wnts_dynamic_inline_padding, 2rem); --_background_image: linear-gradient(180deg, rgba(var(--farbe_1_thema_a_rgba), 0.08), transparent); background-image: linear-gradient(180deg, rgba(var(--farbe_1_thema_a_rgba), 0.08), transparent); --_wnts_flex_justify_content: start; &[data-dynamic-ajax-requests=load_html]:not(.wnts_show_form_load_html) { --_wnts_form_display: none; } .wnts_formfield_wrapper, .wnts_group, .wnts_repeater_box { padding: 0.5rem; border: 1px solid var(--wnts_white); border-width: 5px 0 0 0; grid-column: 1 / -1; } .wnts_repeater_box { display: grid; row-gap: 0.5rem; } .wnts_all_repeaterfields_wrapper { display: grid; gap: 2em; } .wnts_repeaterfield_wrapper, [data-repeater=single-repeater-field] { padding: 0.5em; border: 1px solid lightgray; } [data-repeater=single-repeater-field] { border-color: var(--wnts_primary); } .wnts_repater_control_wrapper { display: flex; gap: 1em; order: 1px solid lightgray; } .wnts_type_radio .wnts_option_field label, .wnts_type_checkbox .wnts_option_field label, .cr_form-inputgroup--typecheckbox label { font-weight: var(--font_weight_light); } .wnts_option_field label { font-weight: var(--font_weight_semi_bold); display: inline; } .wnts_type_checkbox > label, .wnts_type_radio > label { padding-bottom: 0.5em !important; display: block !important; } .wnts_option_field.wnts_option_field_radio, .wnts_checkbox_option .wnts_option_field, .wnts_type_publish .wnts_option_field, .wnts_save_period .wnts_option_field { display: grid; width: fit-content; grid-template-columns: auto auto; gap: 0.5em; place-items: center; } .wnts_type_select .wnts_option_field { grid-template-columns: 1fr; } select.wnts_select { position: relative; padding: 0.5rem 2rem 0.5rem 1rem; appearance: none; /* safari */ -webkit-appearance: none; } select.wnts_select::after { --size: 0.3rem; position: absolute; content: ""; right: 1rem; pointer-events: none; border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid black; top: 40%; } .wnts_type_select { margin-bottom: 0.5rem; } .wnts_help_text { margin-block: 0.5em 0; grid-column: 1 / -1; } .wnts_edit_submit, .wnts_wrapper_submit { grid-column: 1 / -1; } .wnts_formfield_wrapper, .wnts_group { grid-column: 1 / span 12; } .wnts_formfield_wrapper.wnts_pc_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_pc_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_pc_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_pc_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_pc_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_pc_width_25pc { grid-column: span 3; } label.wnts_required::after { content: '*'; color: var(--wnts_accent) !important; } @media (max-width:1140px){ .wnts_formfield_wrapper.wnts_tablet_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_tablet_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_tablet_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_tablet_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_tablet_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_tablet_width_25pc { grid-column: span 3; } } @media (max-width:767px){ .wnts_formfield_wrapper.wnts_mobile_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_mobile_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_mobile_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_mobile_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_mobile_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_mobile_width_25pc { grid-column: span 3; } } } input { /* margin: var( --_input_margin, var(--input_margin)) !important; */ /* padding: var( --_input_padding, var(--input_padding)) !important; width: var( --_input_width, var(--input_width)) !important; height: var( --_input_height, var(--input_height)) !important; */ outline: none !important; font-size: var( --_input_text_font_size, var(--input_font_size)) !important; color: var( --_input_text_color, var(--input_text_color)) !important; background: var( --_input_background_color, var(--input_background_color)) !important; /* border-width: var( --_input_border_width, var(--input_border_width)) !important; border: var(--input_border_width) solid var(--input_border_color) !important; */ /* border: var(--_wnts_input_border_width, 1px) var(--_wnts_input_border_radius, 3px) var(--_wnts_input_border_color, var(--wnts_text_hsl_orig)) !important; border-radius: var(--_input_border_radius,var(--input_border_radius)) !important; */ --wnts_input_border_width: var(--_wnts_input_border_width, 1px); --wnts_input_style: var(--_wnts_input_border_style, solid); --wnts_input_border_color: var(--_wnts_input_border_color, rgba( var(--farbe_1_thema_a_rgba), 0.3)); border: var(--wnts_input_border_width, 1px) var(--wnts_input_style) var(--wnts_input_border_color) !important; border-radius: var(--_wnts_input_border_radius, var(--button_border_radius)) !important; padding: var(--_input_padding_block, 0.5rem) var(--_input_padding_inline, 1.5rem) !important; &:focus-visible { border-color: var(--_input_focus_visible_outline_color, var(--wnts_accent_hsl_orig)) !important; /* outline-offset: var(--_input_focus_visible_outline_offset, 2px ) !important; */ /* outline-width: 2px !important; */ } } input, input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea { --_wnts_input_border_width: 1px; /* --_wnts_input_border_radius: 3px; */ --_wnts_input_border_color: rgba( var(--farbe_1_thema_a_rgba), 0.3); transition: all .3s } .wnts_option_field { display: grid; grid-template-columns: 1em auto; gap: 0.5em; input[type="checkbox"] { --form-control-color: var(--wnts_accent_orig_hsl); --_input_padding_block: auto; --_input_padding_inline: auto; /* Add if not using autoprefixer */ -webkit-appearance: none !important; appearance: none !important; /* For iOS < 15 to remove gradient background */ background-color: #fff !important; /* Not removed via appearance */ margin: 0 !important; font: inherit !important; color: currentColor !important; width: 1.15em !important; height: 1.15em !important; --_wnts_input_border_color: var(--wnts_accent_hover_orig_hsl); --_wnts_input_border_radius: 0px; --_wnts_input_border_width: 2px; transform: translateY(-0.075em); display: grid; place-content: center; &:hover, &:focus-visible { --_wnts_input_border_color: var(--wnts_accent_orig_hsl); } } input[type="checkbox"]::before { content: ""; width: 0.65em !important; height: 0.65em !important; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="checkbox"]:disabled { --form-control-color: var(--wnts_form_control_color_disabled); color: var(--wnts_form_control_color_disabled) !important; cursor: not-allowed !important; } } .wnts_success_error_message { grid-column: 1 / -1; } } } form.wnts_form { &.wnts_form { display: var(--_wnts_form_display, grid) !important; gap: var(--_wnts_form_gap, var(--font_size_100)) !important; grid-template-columns: var(--_form_wnts_grid_template_column, repeat(12, 1fr)) !important; padding: 2rem var(--wnts_dynamic_inline_padding, 2rem); --_background_image: linear-gradient(180deg, rgba(var(--farbe_1_thema_a_rgba), 0.08), transparent); background-image: linear-gradient(180deg, rgba(var(--farbe_1_thema_a_rgba), 0.08), transparent); --_wnts_flex_justify_content: start; &[data-dynamic-ajax-requests=load_html]:not(.wnts_show_form_load_html) { --_wnts_form_display: none; } .wnts_formfield_wrapper, .wnts_group, .wnts_repeater_box { padding: 0.5rem; border: 1px solid var(--wnts_white); border-width: 5px 0 0 0; grid-column: 1 / -1; } .wnts_repeater_box { display: grid; row-gap: 0.5rem; } .wnts_all_repeaterfields_wrapper { display: grid; gap: 2em; } .wnts_repeaterfield_wrapper, [data-repeater=single-repeater-field] { padding: 0.5em; border: 1px solid lightgray; } [data-repeater=single-repeater-field] { border-color: var(--wnts_primary); } .wnts_repater_control_wrapper { display: flex; gap: 1em; order: 1px solid lightgray; } .wnts_type_radio .wnts_option_field label, .wnts_type_checkbox .wnts_option_field label, .cr_form-inputgroup--typecheckbox label { font-weight: var(--font_weight_light); } .wnts_formfield_wrapper > label, .wnts_type_checkbox > label, .wnts_type_radio > label { padding-bottom: 0.5em !important; display: block !important; } .wnts_option_field label { font-weight: var(--font_weight_semi_bold); display: inline; } .wnts_option_field.wnts_option_field_radio, .wnts_checkbox_option .wnts_option_field, .wnts_option_field:has( > input[type="radio"]), .wnts_type_publish .wnts_option_field, .wnts_save_period .wnts_option_field { display: grid; width: fit-content; grid-template-columns: auto auto; gap: 0.5em; place-items: center; } .wnts_type_select .wnts_option_field { grid-template-columns: 1fr; } select.wnts_select { position: relative; padding: 0.5rem 2rem 0.5rem 1rem; appearance: none; /* safari */ -webkit-appearance: none; } select.wnts_select::after { --size: 0.3rem; position: absolute; content: ""; right: 1rem; pointer-events: none; border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid black; top: 40%; } .wnts_type_select { margin-bottom: 0.5rem; } .wnts_help_text { margin-block: 0.5em 0; grid-column: 1 / -1; } .wnts_edit_submit, .wnts_wrapper_submit { grid-column: 1 / -1; } .wnts_formfield_wrapper, .wnts_group { grid-column: 1 / span 12; } .wnts_formfield_wrapper.wnts_pc_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_pc_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_pc_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_pc_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_pc_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_pc_width_25pc { grid-column: span 3; } .wnts_success_error_message { grid-column: 1 / -1; } label.wnts_required::after { content: '*'; color: var(--wnts_accent) !important; } @media (max-width:1140px){ .wnts_formfield_wrapper.wnts_tablet_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_tablet_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_tablet_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_tablet_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_tablet_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_tablet_width_25pc { grid-column: span 3; } } @media (max-width:767px){ .wnts_formfield_wrapper.wnts_mobile_width_100pc { grid-column: span 12; } .wnts_formfield_wrapper.wnts_mobile_width_75pc { grid-column: span 9; } .wnts_formfield_wrapper.wnts_mobile_width_67pc { grid-column: span 8; } .wnts_formfield_wrapper.wnts_mobile_width_50pc { grid-column: span 6; } .wnts_formfield_wrapper.wnts_mobile_width_33pc { grid-column: span 4; } .wnts_formfield_wrapper.wnts_mobile_width_25pc { grid-column: span 3; } } } } form.wnts_form[name=wnts_dynamic_ajax_requests]{ background-image: none; --_option_bg_color_checked: var(--wnts_accent_light); --_option_bg_inset_checked: var(--wnts_accent_light_xxl); --_option_border_color_checked: var(--wnts_accent_light); input[type=text], input[type=search]{ background-color: rgba(var(--wnts_accent_rgba), 0.1) !important; border-radius: 50px !important; border-color: transparent !important; } textarea{ background-color: rgba(var(--wnts_accent_rgba), 0.1) !important; border-radius: var(--wnts_templates_border_radius) !important; border-color: transparent !important; } .wnts_search_input { position: relative; input[type=search] { padding-right: 3em !important; } button.wnts_search_icon { content: ''; position: absolute; /* width: 42px !important; height: 42px !important; aspect-ratio: 1/1; */ right: 0; top: 50%; transform: translateY(-50%); display: grid; line-height: 1; } } .wnts_button_submit { --_button_background_color: var(--wnts_accent_light); --_button_background_color_hover: var(--wnts_white); --_button_text_color_hover: var(--wnts_accent_light); } } .probox { form input { color: var( --_input_text_color, var(--input_text_color)) !important; } } form.widget_edit_form { position: fixed; top: 0px; left: 0px; right: unset; bottom: unset; margin-inline: auto; width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding: 5rem; background: white; height: 714px; max-height: calc(100vh - 20px); z-index: 2; overflow-y: scroll; border: 1px solid red; resize: both; &.wnts_top_left { top: 0px; left: 0px; right: unset; bottom: unset; } &.wnts_top_right { top: 0px; right: 0px; left: unset; bottom: unset; } &.wnts_bottom_left { bottom: 0px; left: 0px; right: unset; top: unset; } &.wnts_bottom_right { bottom: 0px; right: 0px; left: unset; top: unset; } fieldset.wnts_fieldset_closed > *:is(input, label, textarea, select) { display: none !important; } } .wnts_post_list_main { grid-column: 1/-1;; } } } @layer elementor_widgets { .wnts_standard_icon_list .elementor-icon-list-items { --_color_link: var(--color_link); } .wnts_standard_icon_list a .elementor-icon-list-text { color: var(--_icon_list_text_color, var(--_color_link)) !important; } } @layer manage_post_links { .wnts_list_of_links { max-height: 40vh; overflow-y: auto; } .wnts_manage_post_links_wrapper { border: 1px solid var(--farbe_1_thema_a_hsl_orig) !important; padding: 1em; p { margin-bottom: 0.1em !important; &.wnts_manage_post_title_info { --_font_weight_text: var(--font_weight_medium); } &.wnts_manage_post_date_info { font-size: var(--font_size_300) !important; } } .wnts_manage_post_links { padding: 0.5em !important; } } } @layer bild_im_kreis { .wnts_bild_im_kreis { --wnts_bild_x: var( --_wnts_bild_x, center); --wnts_bild_y: var( --_wnts_bild_y, center); img { aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 50% !important; --_image_border_radius: 50%; object-position: var(--wnts_bild_x) var(--wnts_bild_y) !important; } } .wnts_bild_im_kreis.wnts_bild_willkomen_buergermeister { --wnts_bild_y: 20%; } } @layer borders { .wnts_borders { --wnts_borders_top_style: var(--_wnts_borders_top_style, solid); --wnts_borders_top_width: var(--_wnts_borders_top_width, 1px); --wnts_borders_top_color: var(--_wnts_borders_top_color, rgba(0,0,0,0.5)); --wnts_borders_left_style: var(--_wnts_borders_left_style, solid); --wnts_borders_left_width: var(--_wnts_borders_left_width, 1px); --wnts_borders_left_color: var(--_wnts_borders_left_color, rgba(0,0,0,0.5)); --wnts_borders_right_style: var(--_wnts_borders_right_style, solid); --wnts_borders_right_width: var(--_wnts_borders_right_width, 1px); --wnts_borders_right_color: var(--_wnts_borders_right_color, rgba(0,0,0,0.5)); --wnts_borders_bottom_style: var(--_wnts_borders_bottom_style, solid); --wnts_borders_bottom_width: var(--_wnts_borders_bottom_width, 1px); --wnts_borders_bottom_color: var(--_wnts_borders_bottom_color, rgba(0,0,0,0.5)); border-top: var(--wnts_borders_top_width) var(--wnts_borders_top_width) var(--wnts_borders_top_color) !important; border-left: var(--wnts_borders_left_width) var(--wnts_borders_left_width) var(--wnts_borders_left_color) !important; border-right: var(--wnts_borders_right_width) var(--wnts_borders_right_width) var(--wnts_borders_right_color) !important; border-bottom: var(--wnts_borders_bottom_width) var(--wnts_borders_bottom_width) var(--wnts_borders_bottom_color) !important; } } @layer accordeon { .wnts_accordion { --color_start: var(--_color_start, rgba(var(--wnts_section_color_rgba,var(--farbe_1_thema_a_rgba)) 0.14)); --color_end: var(--_color_end ,rgba(var(--farbe_1_thema_a_rgba) 0)); --wnts_accordion_svg_fill: var(--_wnts_accordion_svg_fill, var(--wnts_section_color)); --accordion_wrapper_padding_inline: var(--_accordion_wrapper_padding_inline, 0); --accordion_title_padding_inline: 0; --accordion_title_padding_block: 2rem; --accordion_wrapper_background: linear-gradient( 180deg, var(--_color_start), var(--_color_end)); --accordion_title_background: transparent; --wnts_tab_headline_button_width: var(--_wnts_tab_headline_button_width, 100%); --wnts_tab_headline_padding: var(--_wnts_tab_headline_padding, 1em); --wnts_tab_headline_margin: var(--_wnts_tab_headline_margin, 0); --wnts_tab_headline_bg_color: var(--_wnts_tab_headline_bg_color, transparent); --wnts_tab_headline_border: var(--_wnts_tab_headline_border, 1px solid var(--farbe_1_thema_a_orig_hsl)); --wnts_tab_headline_button_bg_color: var(--_wnts_tab_headline_button_bg_color,rgba(var(--farbe_1_thema_a_rgba), 0.1)); --_button_text_color: var(--farbe_1_thema_a_orig_hsl); --_button_background_color_hover: var(--farbe_1_thema_a_orig_hsl); --_wnts_button_icon_fill: var(--farbe_1_thema_a_orig_hsl); --wnts_tab_content_padding: var(--_wnts_tab_content_padding, 0); --wnts_tab_content_margin: var(--_wnts_tab_content_margin, 0); --wnts_tab_content_bg_color: var(--_wnts_tab_content_bg_color, var(--wnts_white)); --wnts_tab_content_border: var(--_wnts_tab_content_border, 1px solid var(--farbe_1_thema_a_orig_hsl)); --icon_size: 1.5em; --wnts_svg_fill: var(--wnts_accordion_svg_fill,rgba(var(--farbe_2_mittelblau_rgba) 0.5)); --wnts_svg_fill_hover: rgba(var(--wnts_accent_magenta_rgba) 0.5); --wnts_svg_fill_hover: var(--wnts_accordion_svg_fill_hover,var(--wnts_accent_magenta )); --wnts_svg_opacity: 0.5; --icon_rotate: 90deg; margin-bottom: 0.5rem; &&.wnts_filter_accordeon { --wnts_main_filter_color: var(--wnts_accent_light); --_wnts_tab_headline_text_color: var(--wnts_main_filter_color); --_wnts_tab_headline_button_bg_color: var(--wnts_main_filter_color); --_button_text_color: var(--wnts_white); --_button_text_color_hover: var(--wnts_main_filter_color); --_wnts_tab_headline_text_color_hover: var(--wnts_main_filter_color); --_button_background_color_hover: var(--wnts_white); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--wnts_main_filter_color); --_wnts_tab_headline_border: none; --_wnts_tab_headline_width: fit-content; --_wnts_tab_headline_button_width: fit-content; --_button_border_width: 1px; --_button_border_color: var(--wnts_main_filter_color); --_button_border_padding: 0; --_wnts_tab_content_bg_color: var(--wnts_white); --_wnts_tab_content_margin: 1em 0 0 0; [data-accordion=tab_headline] { margin-left: auto !important; width: fit-content; border-radius: 0 !important; padding-block: 0; [data-accordion=element-button] { --_button_border_radius: 50px; --_wnts_button_icon_height: 18px; --_wnts_button_icon_width: 18px; } } [data-accordion-status=active] [data-accordion=tab_headline] { --wnts_tab_headline_button_bg_color: var(--_wnts_tab_headline_button_bg_color,rgba(var(--farbe_1_thema_a_rgba), 1)); --_button_text_color: var(--wnts_white); --_button_text_color_hover: var(--wnts_main_filter_color); --_button_background_color_hover: var(--_wnts_tab_headline_button_bg_color_hover,rgba(var(--wnts_main_filter_color), 0.1)); --_wnts_button_icon_fill: var(--wnts_white); --_button_icon_color_hover: var(--_wnts_tab_headline_text_color_hover, var(--wnts_main_filter_color)); margin-top: 1em; } [data-accordion=content] { border-radius: var(--wnts_templates_border_radius) !important; } } &[data-accordion=group] { padding: var(--accordion_wrapper_padding_inline); } [data-accordion=tab_headline] { margin: var(--wnts_tab_headline_margin) !important; background-color: var(--wnts_tab_headline_bg_color) !important; border: var(--wnts_tab_headline_border); border-radius: var(--wnts_templates_border_radius_upper) !important; overflow: hidden; [data-accordion=element-button] { width: 100%; --_button_width: var( --wnts_tab_headline_button_width, 100%); --_button_border_radius: 0px; } [data-accordion=title] { padding: var(--wnts_tab_headline_padding) !important; width: var(--_wnts_tab_headline_width, 100%); display: grid; grid-template-columns: 1fr auto; gap: 1em; grid-template-columns: 1fr auto; justify-items: end; justify-self: var(--_wnts_tab_headline_justify_self, end); [data-accordion=button-icon] { order: 3; display: grid; align-items: center; } } } [data-accordion=content]{ padding: var(--wnts_tab_content_padding) !important; margin: var(--wnts_tab_content_margin) !important; background-color: var(--wnts_tab_content_bg_color) !important; border: var(--wnts_tab_content_border); border-radius: var(--wnts_templates_border_radius_lower) !important; overflow: hidden; } [data-accordion=element-button] { --_button_background_color: var(--wnts_tab_headline_button_bg_color); border: 1px solid red; padding: 0.5em 1em; } [data-accordion-status=active] { [data-accordion=title-open] { display: grid; } [data-accordion=title-closed] { display: none; } [data-accordion=tab_headline] { --wnts_tab_headline_button_bg_color: var(--_wnts_tab_headline_button_bg_color_hover,rgba(var(--farbe_1_thema_a_rgba), 1)); --_button_text_color: var(--_wnts_tab_headline_text_color_hover, var(--wnts_white)); --_button_text_color_hover: var(--farbe_1_thema_a_hsl_orig); --_button_background_color_hover: var(--_wnts_tab_headline_button_bg_color_hover,rgba(var(--farbe_1_thema_a_rgba), 0.1)); --_wnts_button_icon_fill: var(--_wnts_tab_headline_text_color, var(--wnts_white)); --_button_icon_color_hover: var(--_wnts_tab_headline_text_color_hover, var(--farbe_1_thema_a_hsl_orig)); } [data-accordion=content] { display: grid; } [data-accordion=button-icon] svg { rotate: -90deg; transition: 0.6s ease-in-out; } } [data-accordion-status=not-active] { [data-accordion=title-open] { display: none; } [data-accordion=title-closed] { display: grid; } [data-accordion=content] { display: none; } [data-accordion=button-icon] svg { rotate: 90deg; transition: 0.6s ease-in-out; } } } .wnts_accordion[data-accordion-name=my_accordion_links_dd_actions], .wnts_accordion[data-accordion-name=my_accordion_links_edit_membership_emails] { --_wnts_tab_content_padding: 1em; } } @layer pagination { .wnts_pagination { --wnts_pagination_gap: var(--_wnts_pagination_gap, 1.5em); > ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0.5rem 0; gap: var(--wnts_pagination_gap); list-style: none; margin: 0; } li { margin: 0; /* padding-bottom: 0; padding-inline: 0; */ } /* li:not(:has(a)), */ a, span { display: inline-block; padding: 1px 0; font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--wnts_accent, #333) !important; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; --_line_height_text: 1; line-height: 1 !important; } a:hover { border-color: var(--wnts_accent, #d4006b); } [aria-current="page"] { color: var(--wnts_text, #000) !important; font-weight: 600; /* border-bottom: 2px solid var(--wnts_text, #000); */ cursor: default; pointer-events: none; } .prev a, .next a { font-weight: 600; } } } } @layer animations { @keyframes slide_in_right_to_left { from { transform:translateX(100%); opacity: 0; } to { transform:translateX(0%); opacity: 1; } } } @layer templates { @layer section { .wnts_boxed_section { --_section_width: var(var(--wnts_container-max-width)); max-width: var(--_section_width-max-width) !important; margin-inline: auto; } .wnts_standard_section { --wnts_standard_section_bg_color: var(--_wnts_standard_section_bg_color, rgba( var(--wnts_accent_light_rgba), 0.05)); --wnts_standard_section_padding_block_start: var(--_wnts_standard_section_padding_block_start, 4rem); --wnts_standard_section_padding_block_end: var(--_wnts_standard_section_padding_block_end, 4rem); --wnts_standard_section_gap: var(--_wnts_standard_section_gap, 3rem); --wnts_standard_section_padding_block: var(--wnts_standard_section_padding_block_start) var(--wnts_standard_section_padding_block_end); --wnts_standard_section_margin_block: var(--_wnts_standard_section_margin_block, 0); background-color: var(--wnts_standard_section_bg_color) !important; padding-block: var(--wnts_standard_section_padding_block) !important; margin-block: var(--wnts_standard_section_margin_block) !important; .e-con-inner { gap: var(--wnts_standard_section_gap) !important; } &.wnts_bg_white { --wnts_standard_section_bg_color: var(--_wnts_standard_section_bg_color, var(--wnts_white)); } &.wnts_bg_light_main_color { --_wnts_standard_section_bg_color: rgba(var(--farbe_1_thema_a_rgba), 0.05); --wnts_standard_section_bg_color: var(--_wnts_standard_section_bg_color, var(--wnts_white)); } /* + .wnts_standard_section { --_wnts_standard_section_padding_block_start: 0; } &:has(+ .wnts_standard_section) { --_wnts_standard_section_padding_block_end: 0; } */ } } @layer popup { .wnts_popup { position: fixed; inset: 0; width: 100%; height: 100vh; background-color: var(--wnts_white); overflow: hidden scroll; .wnts_popup_content { display: grid; width: 100%; height: 100%; align-content: center; } } } @layer hero { .wnts_hero_section { position: absolute; content: ''; width: 100%; height: 100%; inset: 0; z-index: 2; .wnts_bg_image { img { object-position: 70% bottom; /* filter: blur(5px); */ } &.wnts_overlay_color { --bg_overlay_rgb: var( --_bg_overlay_rgb, var(--farbe_1_thema_a_rgba) ); --bg_overlay_a_start: var( --_bg_overlay_a, 1 ); --bg_overlay_a_end: var( --_bg_overlay_a, 0.3 ); --bg_overlay_second_start: var( --_bg_overlay_a, 50% ); background-color: rgb( var( --_bg_overlay_second_start )) !important; opacity: var( --bg_overlay_a ) !important; opacity: 1 !important; --bg_overlay_rgb: var( --_bg_overlay_rgb, var(--farbe_1_thema_a_rgba) ); --bg_overlay_a: var( --_bg_overlay_a, 0.3 ); background-color: transparent !important; background-image: linear-gradient(180deg, rgba( var(--wnts_rgba_white), var(--bg_overlay_a_start) ), rgba(var(--bg_overlay_rgb), var( --bg_overlay_a_end )) var(--bg_overlay_second_start) ) !important; } &.wnts_bg_image_y { img { clip-path: polygon(45% 0, 45% 0, 55% 100%, 55% 100%); &.animated { animation: clipRevealDiagonal 1.5s ease-in-out forwards; } } } } } .wnts_hero_section::before { --bg_overlay_rgb: var( --_bg_overlay_rgb, var(--farbe_1_thema_a_rgba) ); --bg_overlay_a_start: var( --_bg_overlay_a, 1 ); --bg_overlay_a_end: var( --_bg_overlay_a, 0.3 ); --bg_overlay_second_start: var( --_bg_overlay_a, 50% ); background-color: rgb( var( --_bg_overlay_second_start )) !important; opacity: var( --bg_overlay_a ) !important; --bg_overlay_rgb: var( --_bg_overlay_rgb, var(--farbe_1_thema_a_rgba) ); --bg_overlay_a: var( --_bg_overlay_a, 0.3 ); background-color: transparent !important; background-image: linear-gradient(180deg, rgba( var(--wnts_rgba_white), var(--bg_overlay_a_start) ), rgba(var(--bg_overlay_rgb), var( --bg_overlay_a_end )) var(--bg_overlay_second_start) ) !important; opacity: 1 !important; } .wnts_hero_section.no_background_image::before { background-image: none !important; } .wnts_hero_section h1 { --_font_size_h1: var(--font_size_1100); --_color_h1: var(--wnts_light_color); } @media(width<1140px){ .wnts_hero_section h1 { --_font_size_h1: var(--font_size_800); } } @media(width<800px){ .wnts_hero_section h1 { --_font_size_h1: var(--font_size_700);; } } } @layer hero_subpages { [data-elementor-type=header] { will-change: transform; /* HACK für Safari */ } /* Safari Hack */ @supports (-webkit-hyphens: none) and (not (overflow-wrap: anywhere)) { [data-elementor-type=header] { will-change: transform; backface-visibility: hidden; -webkit-transform: translateZ(0); } } /* Safari Hack */ [data-elementor-type=header]:has(.wnts_header_backend) .wnts_hero_page_header { --_hero_page_header_margin_block: 0 0.5em; } .wnts_hero_page_header { position: relative; z-index: 0; display: grid; --size_hero_page_center: var(--_size_hero_page_center, var(--wnts_container-max-width)); grid-template-columns: 1fr var(--size_hero_page_center) 1fr; @media (width < 1140px){ & { --_size_hero_page_center: 100%; } } margin-block: var(--_hero_page_header_margin_block, 2em); color: var(--wnts_white); .wnts_hero_page_header_center { position: relative; padding: 2em; .wnts_hero_page_bg_image { z-index: -2; --_bg_image_url: url('/wp-content/plugins/wnts-plugin/assets/header_bilder/header_ehrenamtsboerse_wop.jpg'); position: absolute; content: ''; width: 100%; height: 100%; inset: 0; background-image: var(--_bg_image_url); background-size: cover; background-position: center; } .wnts_hero_page_bg_overlay { z-index: -1; position: absolute; content: ''; width: 100%; height: 100%; inset: 0; /* background-color: rgba(var(--wnts_rgba_white), 0.8); */ /* background-image: linear-gradient(180deg, white 30ch, transparent ); */ background-image: linear-gradient(90deg, rgba(var(--farbe_1_thema_a_rgba), 1) 30ch, rgba(var(--farbe_1_thema_a_rgba), 0)) } .wnts_icon_text { --_icon_width: 4em; --_icon_height: 4em; display: grid !important; grid-template-columns: var(--_icon_width) auto; gap: var(--_icon_width); padding-bottom: var(--_icon_width); } h1 { --_font_weight_h1: var(--font_weight_regular); display: grid; span { display: block; } .wnts_text_line_2 { --_font_weight_h1: var(--font_weight_semi_bold); } } } .wnts_hero_page_header_left, .wnts_hero_page_header_right { background-color: var(--farbe_1_thema_a_orig_hsl); } .wnts_text_line_1, .wnts_text_line_2 { --_font_size_text: var(--font_size_600); --_line_height_text: var(--line_height_500); margin-block-end: 0 !important; } .wnts_text_line_2 { --_font_weight_text: var(--font_weight_semi_bold); } } } @layer header { @layer header_gemeinde_safari_mac { html.safari-mac [data-elementor-type="header"] { position: relative; height: 50px; margin-bottom: calc(-50px - 0.5em); z-index: 10; /* Muss über dem nächsten Element liegen */ } } @layer header_gemeinde { .wnts_header_content_wrapper { --header_gemeinde_grid_template_columns: var(--_header_gemeinde_grid_template_columns, 1fr auto 1fr ); --header_gemeinde_justify_items: var(--_header_gemeinde_justify_items, end ); position: relative !important; grid-template-columns: var(--header_gemeinde_grid_template_columns) !important; justify-items: var(--header_gemeinde_justify_items) !important; @media(width<=1140px){ --_header_gemeinde_grid_template_columns: 1fr auto; --_header_gemeinde_justify_items: stretch; } @media(width<=767px){ --_header_gemeinde_grid_template_columns: 1fr auto; } } [data-elementor-type=header]:has( .wnts_header_content_wrapper){ position: fixed; &::before { position: absolute; content: ''; inset: 0; width: 100%; height: 100%; background-color: white !important; opacity: 0; transition: 0.6s ease-in-out; } } [data-elementor-type=header]:has( .wnts_header_content_wrapper):not(:has(.wnts_hidden_header)) { position: fixed; z-index: 100; margin-inline: auto; width: 100%; display: grid; justify-items: center; transform: translateY(0px); background-color: rgba(255, 255, 255, 0) !important; transition: 0.6s ease-in-out; .wnts_hero_kontakt_menu { max-width: fit-content; @media(width<=1124px){ max-width: 100%; } > div { display: grid; grid-template-columns: auto auto !important; @media(width<=1124px){ --grid-justify-content: space-between; } @media(width<=767px){ grid-template-columns: auto !important; } } } } /* SAFARI HACK 28.07.2025 */ @supports (-webkit-hyphens: none) and (not (overflow-wrap: anywhere)) { [data-elementor-type=header]:has( .wnts_header_content_wrapper):not(:has(.wnts_hidden_header)) { background-color: rgba(255, 255, 255, 0.95) !important; } } /* SAFARI HACK 28.07.2025 */ [data-elementor-type=header]:has( .wnts_header_content_wrapper.wnts_header_other_pages):not(:has(.wnts_hidden_header)) { /* position: relative; */ .wnts_icon.wnts_logo_svg svg { /* --icon_width: auto; */ --icon_height: 50px; transition: 0.6s ease-in-out; } #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_1 .probox, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_3 .probox, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_2 .probox { --_button_border_color: var(--farbe_1_thema_a_orig_hsl); transition: 0.6s ease-in-out; box-shadow: var(--wnts_box_shadow_thema_a_100) !important; } } .wnts_header_backend { .wnts_icon.wnts_logo_svg svg { /* --icon_width: auto; */ --icon_height: 50px; } } [data-elementor-type=header]:has( .wnts_header_content_wrapper.wnts_header_other_pages.wnts_hidden_header) { position: fixed; } html[data-scroll30percent=yes] [data-elementor-type=header]:has( .wnts_header_content_wrapper.wnts_header_other_pages) { transform: translateY(calc(-100% - 32px)); } html[data-scroll30percent=yes] [data-elementor-type=header].wnts_hidden_header:has( .wnts_header_content_wrapper.wnts_header_other_pages){ position: fixed; transform: translateY(calc(-100% - 32px)); transition: 0.6s ease-in-out; } html[data-scroll30percent=yes] [data-elementor-type=header]:not(.wnts_hidden_header):has( .wnts_header_content_wrapper.wnts_header_other_pages){ position: fixed; transform: translateY(0px); transition: 0.6s ease-in-out; } .wnts_bg_header_relative { background: white; } [data-elementor-type=header]:has( .wnts_header_content_wrapper.wnts_position_relative ){ position: relative; z-index:1; } /* html[data-scroll30percent=no] [data-elementor-type=header].wnts_hidden_header:has( .wnts_header_content_wrapper), */ html[data-scroll30percent=yes] [data-elementor-type=header]:not(.wnts_hidden_header):has( .wnts_header_content_wrapper) { .wnts_icon.wnts_logo_svg svg { /* --icon_width: auto; */ --icon_height: 50px; transition: 0.6s ease-in-out; } #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_1 .probox, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_3 .probox, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_2 .probox { --_button_border_color: var(--farbe_1_thema_a_orig_hsl); transition: 0.6s ease-in-out; box-shadow: var(--wnts_box_shadow_thema_a_100) !important; } } html[data-scroll30percent=yes] [data-elementor-type=header]:has( .wnts_header_content_wrapper) { .wnts_icon.wnts_logo_svg svg { /* --icon_width: auto; */ --icon_height: 50px; transition: 0.6s ease-in-out; } &:not(.wnts_hidden_header){ transform: translateY(-35px); transition: 0.6s ease-in-out; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); @media(width<=767px){ transform: translateY(0px); } &::before { transition: 0.6s ease-in-out; opacity: 1; } } &.wnts_hidden_header{ transform: translateY(-100%); transform: translateY(calc(-100% - 32px)); &::before { transition: 0.6s ease-in-out; opacity: 0; } } } html[data-scroll30percent=no] [data-elementor-type=header]:has( .wnts_header_content_wrapper) { transform: translateY(0px); transition: 0.6s ease-in-out; &::before { transition: 0.6s ease-in-out; opacity: 0; } } /* .wnts_header_content_wrapper.wnts_position_relative { background-color: rgba( var(--farbe_1_thema_a_rgba), 0.3); } */ @layer wnts_asp_search_button { #wnts_asp_search_shortcode { width: fit-content; @media(width<=1140px){ grid-row: 2; grid-column: 1 / -1; justify-self: end; } @media(width<=767px){ grid-row: 3; } } #wnts_asp_search_shortcode { /* --_asp_height: var(--asp_height); */ --_asp_height: 50px; border-radius: var(--_asp_height) !important; --_wnts_button_icon_fill: var(--farbe_1_thema_a); /* background-image: none !important; */ background-image: var(--wnts_white) !important; @media(width<=767px){ width: 100% !important; max-width: 100%; } .probox { /* margin: 0 !important; height: var(--_asp_height) !important; background: var(--wnts_white) !important; border: 0 solid var(--button_border_color) !important; border-radius: var(--button_border_radius) !important; box-shadow: none !important; */ display: grid !important; grid-template-columns: 1fr var(--_asp_height) var(--_asp_height); grid-template-rows: var(--_asp_height); /* height: var(--_asp_height) !important; */ background: var(--wnts_white) !important; border: var(--_button_border_width, 1px) solid var(--_button_border_color, transparent) !important; border-radius: var(--_asp_height) !important; box-shadow: var(--wnts_box_shadow_thema_a_100) !important; --wnts_probox_width_no_focus: var(--_wnts_probox_width_no_focus, 300px); --wnts_probox_width_focus_within: var(--_wnts_probox_width_focus_within, 500px); width: var(--wnts_probox_width_no_focus) !important; transition: 0.5s ease-in-out; &:focus-within { width: var(--wnts_probox_width_focus_within) !important; } @media(width<=767px){ --_wnts_probox_width_no_focus: 100%; /* --_wnts_probox_width_focus_within: min(767px, 100%); */ --_wnts_probox_width_focus_within: 100%; } .proinput { display: grid; align-items: center; padding-left: 28px; input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* Firefox (zeigt standardmäßig kein Cancel-Button) – kein CSS nötig */ /* Optional: Auch das Such-Icon entfernen */ input[type="search"]::-webkit-search-decoration { display: none; } } form.wnts_form.wnts_form_search { --_form_wnts_grid_template_column: 1fr; background-image: none; padding: 0; input { --_input_text_color: var(--wnts_text); --_input_text_font_size: var(--font_size_regular); --_input_background_color: transparent; background-color: transparent; border: none !important; min-width: 120px; /* background-color: transparent !important; */ transition: min-width 0.3s ease-in-out; /* height: var(--_asp_height) !important; */ padding-block: 0 !important; padding-inline: 0 !important; &::placeholder, &::-webkit-input-placeholder { color: var(--wnts_text) !important; font-size: var(--_input_text_font_size) !important; } &:focus, &:focus-visible { min-width: min(100%, 320px) !important; outline: none !important } &.autocomplete { opacity: 0.25; /* margin-top: calc( - var(--asp_height )) !important; */ --_overwrite_asp_margin_top: calc( - var(--asp_height )); /* height: var(--_asp_height); */ /* display: block; */ /* position: relative; */ /* z-index: 1; */ /* padding: 0 !important; */ /* margin: -1px 0 0 -4px !important; */ /* margin-top: -48px !important; */ /* width: 100%; */ /* background: transparent !important; */ /* margin-top: calc( - var(--_asp_height) ) !important; */ /* font-weight: normal; */ /* font-family: "Fira Sans Local"; */ --_input_text_color: var(--farbe_1_thema_a); /* font-size: 20px; */ /* line-height: 24px; */ /* text-shadow: none; */ /* line-height: normal; */ /* border: 0; */ /* box-shadow: none; */ } } } .promagnifier { --_button_width: var(--_asp_height); --_button_border_padding: 0; /* width: var(--_button_width) !important; */ --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: 18px; --_button_background_color: var(--_promagnifier_bg_focus, var(--wnts_white)); /* background-color: var(--_button_background_color) !important; */ --_button_outline: none; grid-column: -2 / -1; .innericon { display: grid !important; place-items: center; /* svg { width: calc( var(--_wnts_button_icon_width)) !important; height: calc( var(--_wnts_button_icon_height)) !important; } */ } svg { --_wnts_svg_fill: var(--farbe_1_thema_a_hsl_orig); } &:hover svg, &:focus-visible svg { --_wnts_svg_fill: var(--wnts_white); } } .promagnifier:hover, .promagnifier:focus-visible { --_button_outline: none; --_button_icon_color_hover: var(--wnts_white); --_button_background_color_hover: var(--farbe_1_thema_a); } .proclose { place-items: center; --_button_border_radius: var(--_asp_height); grid-column: 2 / 3; grid-row: 1; --_button_border_padding: 0; svg { --_wnts_svg_fill: var(--wnts_white); background: var(--farbe_1_thema_a) !important; width: calc(var(--_asp_height) / 3) !important; height: calc(var(--_asp_height) / 3) !important; padding: 0 !important; display: block; margin: calc( var(--_asp_height) / 3) auto !important; /* width: fit-content !important; */ position: relative !important; inset: unset !important; border-radius: 50%; } } .proclose:hover, .proclose:focus-visible { outline: none !important; box-shadow: none !important; border-radius: var(--_asp_height) !important; /* background-color: var(--farbe_1_thema_a) !important; */ --_button_icon_color_hover: var(--wnts_white); --_button_background_color_hover: var(--farbe_1_thema_a); } } button.promagnifier { /* --_button_border_radius: var(--_asp_height); --_button_width: var(--_asp_height); --_button_height: var(--_asp_height); --_button_text_color: blue; --_button_background_color: rgb(187, 187, 187); --_button_border_width: 0; --_button_margin: 0; --_button_padding: 0; display: grid !important; place-items: center; gap: 0; grid-template-rows: auto; grid-auto-rows: 0; */ --_button_padding: 0; --_button_border_radius: var(--_asp_height); } } } @layer ajax_search_pro { #header_asp_shortcode_v2 { @media(width<=1140px){ grid-row: 2; grid-column: 1 / -1; justify-self: end; } @media(width<=767px){ grid-row: 3; } } #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_1, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_3, #header_asp_shortcode_v2 .asp_w_container #ajaxsearchpro1_2 { /* --_asp_height: var(--asp_height); */ --_asp_height: 50px; border-radius: var(--_asp_height) !important; --_wnts_button_icon_fill: var(--farbe_1_thema_a); /* background-image: none !important; */ background-image: var(--wnts_white) !important; width: fit-content !important; @media(width<=767px){ width: min(100%, 767px) !important; max-width: 100%; } .probox { /* margin: 0 !important; height: var(--_asp_height) !important; background: var(--wnts_white) !important; border: 0 solid var(--button_border_color) !important; border-radius: var(--button_border_radius) !important; box-shadow: none !important; */ display: grid !important; grid-template-columns: 1fr var(--_asp_height) var(--_asp_height); /* height: var(--_asp_height) !important; */ background: var(--wnts_white) !important; border: var(--_button_border_width, 1px) solid var(--_button_border_color, transparent) !important; border-radius: var(--_asp_height) !important; box-shadow: var(--wnts_box_shadow_thema_a_100) !important; --wnts_probox_width_no_focus: var(--_wnts_probox_width_no_focus, 300px); --wnts_probox_width_focus_within: var(--_wnts_probox_width_focus_within, 500px); width: var(--wnts_probox_width_no_focus) !important; transition: 0.5s ease-in-out; &:focus-within { width: var(--wnts_probox_width_focus_within) !important; } @media(width<=767px){ --_wnts_probox_width_no_focus: 100%; --_wnts_probox_width_focus_within: 100%; } form { input { --_input_text_color: var(--wnts_text); --_input_text_font_size: var(--font_size_regular); --_input_background_color: transparent; min-width: 120px; /* background-color: transparent !important; */ transition: min-width 0.3s ease-in-out; /* height: var(--_asp_height) !important; */ padding-block: 0 !important; padding-inline: 1em calc( 1em + var(--_asp_height))!important; &::placeholder, &::-webkit-input-placeholder { color: var(--wnts_text) !important; font-size: var(--_input_text_font_size) !important; } &:focus { min-width: 320px !important; } &.autocomplete { opacity: 0.25; /* margin-top: calc( - var(--asp_height )) !important; */ --_overwrite_asp_margin_top: calc( - var(--asp_height )); /* height: var(--_asp_height); */ /* display: block; */ /* position: relative; */ /* z-index: 1; */ /* padding: 0 !important; */ /* margin: -1px 0 0 -4px !important; */ /* margin-top: -48px !important; */ /* width: 100%; */ /* background: transparent !important; */ /* margin-top: calc( - var(--_asp_height) ) !important; */ /* font-weight: normal; */ /* font-family: "Fira Sans Local"; */ --_input_text_color: var(--farbe_1_thema_a); /* font-size: 20px; */ /* line-height: 24px; */ /* text-shadow: none; */ /* line-height: normal; */ /* border: 0; */ /* box-shadow: none; */ pointer-events: none !important; } } } .promagnifier { --_button_width: var(--_asp_height); --_button_border_padding: 0; /* width: var(--_button_width) !important; */ --_wnts_button_icon_width: 18px; --_wnts_button_icon_height: 18px; --_button_background_color: var(--_promagnifier_bg_focus, var(--wnts_white)); /* background-color: var(--_button_background_color) !important; */ --_button_outline: none; grid-column: -2 / -1; .innericon { display: grid !important; place-items: center; /* svg { width: calc( var(--_wnts_button_icon_width)) !important; height: calc( var(--_wnts_button_icon_height)) !important; } */ } svg { --_wnts_svg_fill: var(--farbe_1_thema_a_hsl_orig); } &:hover svg { --_wnts_svg_fill: var(--wnts_white); } } .promagnifier:hover, .promagnifier:focus-visible { --_button_outline: none; --_button_icon_color_hover: var(--wnts_white); --_button_background_color_hover: var(--farbe_1_thema_a); } .proclose { place-items: center; --_button_border_radius: var(--_asp_height); svg { --_wnts_svg_fill: var(--wnts_white); background: var(--farbe_1_thema_a) !important; width: calc(var(--_asp_height) / 3) !important; height: calc(var(--_asp_height) / 3) !important; padding: 0 !important; display: block; margin: calc( var(--_asp_height) / 3) auto !important; /* width: fit-content !important; */ position: relative !important; inset: unset !important; } } .proclose:hover, .proclose:focus-visible { outline: none !important; box-shadow: none !important; border-radius: var(--_asp_height) !important; background-color: var(--farbe_1_thema_a) !important; } } button.promagnifier { /* --_button_border_radius: var(--_asp_height); --_button_width: var(--_asp_height); --_button_height: var(--_asp_height); --_button_text_color: blue; --_button_background_color: rgb(187, 187, 187); --_button_border_width: 0; --_button_margin: 0; --_button_padding: 0; display: grid !important; place-items: center; gap: 0; grid-template-rows: auto; grid-auto-rows: 0; */ --_button_padding: 0; --_button_border_radius: var(--_asp_height); } } } } #header_backend { --_e_secondary_color: var(--_wnts_bg_color, var(--wnts_post_color)); --_nav_active_color: var(--wnts_post_color); --_nav_active_bg: var(--wnts_light_color); --_nav_color: var(--wnts_light_color); --_nav_bg: var(--wnts_post_color); --_nav_hover_color: var(--wnts_light_color); --_nav_hover_bg: var(--wnts_accent_orig_hsl); --nav_hover_underline_color: var(--_nav_hover_underline_color, var(--wnts_light_color)); } #header_backend nav li { position: relative; background-color: var(--_wnts_bg_color, var(--wnts_post_color)) !important; color: var(--_header_color, var(--wnts_light_color)) !important; --_text_color: var(--_header_color, var(--wnts_light_color)); } #header_backend nav li.current-menu-item { --_header_color: var(--_nav_active_color); --_wnts_bg_color: var(--_nav_active_bg); --_color_link: var(--_nav_active_color); } #header_backend nav li:has(>a:hover):not(.current-menu-item){ --_header_color: var(--_nav_hover_color); --_wnts_bg_color: var(--_nav_hover_bg); --_color_link: var(--_nav_hover_color); } #header_backend nav li:has(>a) .elementor-nav-menu--dropdown { --_header_color: var(--_nav_color); --_wnts_bg_color: var(--_nav_bg); --_color_link: var(--_nav_color); } #header_backend nav li { --nav_li_box_height_start: var(--_nav_li_box_height_start, 2px); --nav_li_box_height_end: var(--_nav_li_box_height_end, 2px); --nav_li_box_width_start: var(--_nav_li_box_width_start, 0%); --nav_li_box_width_end: var(--_nav_li_box_width_end, 100%); --nav_li_box_top: var(--_nav_li_box_top, unset); --nav_li_box_bottom: var(--_nav_li_box_bottom, 2px); position: relative; } #header_backend nav li > a { position: relative; width: fit-content; } #header_backend nav li::before { position: absolute; content:''; z-index: 1 !important; background-color: var(--nav_hover_underline_color) !important; left: 0px !important; right: 0px !important; top: var(--nav_li_box_top) !important; bottom: var(--nav_li_box_bottom) !important; height: var(--nav_li_box_height_start); --nav_li_width_animation: var(--_nav_li_width_animation,0%); --nav_li_height_animation: var(--_nav_li_height_animation,0%); width: var(--_nav_li_box_width, var(--nav_li_box_width_start)) !important; height: var(--_nav_li_box_height, var(--nav_li_box_height_start)) !important; transition: 0.6s ease-in-out; } #header_backend nav :not(ul.sub-menu) li { --_nav_li_box_height_start: 2px; --_nav_li_box_height_end: 2px; --_nav_li_box_width_start: 0%; --_nav_li_box_width_end: 100%; --_nav_li_box_top: unset; --_nav_li_box_bottom: 2px; --wnts_hide_show_display: block; } #header_backend nav ul.sub-menu li { --_nav_li_box_height_start: 0%; --_nav_li_box_height_end: 100%; --_nav_li_box_width_start: 4px; --_nav_li_box_width_end: 4px; --_nav_li_box_top: 0; --_nav_li_box_bottom: 0; } #header_backend nav li:not(:has( li:hover)):hover::before { --_nav_li_box_width: var(--_nav_li_box_width_end); --_nav_li_box_height: var(--_nav_li_box_height_end); transition: 0.6s ease-in-out; } #header_backend nav .sub-menu li.menu-item { --_header_color: var(--_nav_color); --_wnts_bg_color: var(--_nav_bg); --_color_link: var(--_nav_color); } #header_backend nav .sub-menu li.menu-item a { background: transparent !important; } #header_backend nav .sub-menu li.menu-item:has(>a:hover,>a:focus-visible):not(.current-menu-item) { --_header_color: var(--_nav_hover_color); --_wnts_bg_color: var(--_nav_hover_bg); --_color_link: var(--_nav_hover_color); } #header_backend nav .sub-menu li.menu-item.current-menu-item { --_header_color: var(--_nav_active_color); --_wnts_bg_color: var(--wnts_light_color); --_color_link: var(--_nav_active_color); } @layer logo { .wnts_logo_wrapper { flex-basis: min-content !important; } } } @layer header_suchseite { .wnts_header_suchseite { >*:nth-child(2){ display: none; } >*:nth-child(3){ grid-column: -2/-1; } } } @layer wnts_asp_suche { #asp_suchfeld { [id^=ajaxsearchprobsettings] fieldset { width: 100% !important; .category_filter_box { display: flex; .asp_option_label { width: fit-content !important; } } } } } @layer hero_menu { .wnts_menu_popup { --wnts_popup_bg_color: var(--_wnts_popup_bg_color, var(--farbe_1_thema_a_heller)); --_wnts_button_width_200px: 275px; width: 100%; height: 100%; display: grid; justify-content: center; .dialog-message { background-color: var(--wnts_popup_bg_color) !important; color: var(--wnts_white) !important; } .wnts_popup_menu_header { --wnts_popup_template_columns: var(--_wnts_popup_template_columns, 1fr auto 1fr); grid-template-columns: var(--wnts_popup_template_columns) !important; /* 1fr auto 1fr; */ align-items: center !important; .wnts_hero_kontakt_menu { max-width: fit-content; justify-self: end; @media(width<=1124px){ max-width: 100%; } > div { display: grid; grid-template-columns: auto auto !important; @media(width<=1124px){ --grid-justify-content: space-between; } @media(width<=767px){ grid-template-columns: auto !important; } } } } .wnts_nav_menu nav { background-color: transparent !important; color: var(--wnts_white); @media(width<=767px){ --_wnts_nav_text_size_primary: var(--font_size_500); --_wnts_nav_text_size_secondary: var(--font_size_400); } > ul > li { padding-bottom: var(--wnts_nav_menu_abstand, 2em) !important; } a { --nav_text_color: var(--_nav_text_color, var(--wnts_white)); --nav_text_color_hover: var(--_nav_text_color_hover, var(--farbe_1_thema_a)); color: var(--nav_text_color) !important; font-size: var(--_wnts_nav_text_size_primary, var(--font_size_600)) !important; --nav_bg_color: var(--_nav_bg_color, transparent) !important; background-color: var(--nav_bg_color) !important; &:hover { --_nav_text_color: var(--farbe_1_thema_a); --_nav_bg_color: var(--wnts_white); } } ul.sub-menu { background-color: transparent !important; margin-left: 1em; a { font-size: var(--_wnts_nav_text_size_secondary, var(--font_size_500)) !important; } } a.has-submenu { justify-content: space-between; } a[aria-haspopup=true] { --svg_rotate: var(--_svg_rotate, 0deg); &[aria-expanded=true]{ --_svg_rotate: 180deg; } > span.sub-arrow > svg { rotate: var(--svg_rotate); transition: rotate 0.6s ease-in-out; } } } .wnts_container_fixed_close { --wnts_container_fixed_close_bg: var(--_wnts_container_fixed_close_bg, var(--farbe_1_thema_a_heller)); background-color: var(--wnts_container_fixed_close_bg) !important; } } } @layer consent { body.elementor-editor-active #my_WNTS_consent_manager_id { display: none !important; } #my_WNTS_consent_manager_id { --show_consent: none; /* none or grid */ display: var(--show_consent) !important; } .wnts_consent_manager_box { --show_consent: none; /* none or grid */ display: var(--show_consent); } @layer wnts_editor { body.elementor-editor-active #wnts_editor { display: none !important; } #wnts_editor { --show_wnts_editor: none; /* none or grid */ display: var(--show_wnts_editor) !important; } } @layer wnts_admin_area { /* data-element="admin_menu_element" */ body.elementor-editor-active #wnts_admin_area { display: none !important; } #wnts_admin_area { background-color: white; color: black; --_text_color: black; } } @layer cache_settings { #wnts_cache_settings { --show_wnts_cache_settings: none; /* none or grid */ display: var(--show_wnts_cache_settings) !important; } } } @layer widget_section_text { .wnts_widget_section_text { max-width: 90ch; margin-inline: auto; width: fit-content; &.wnts_grid.wnts_3_col_text_grid { --_wnts_wnts_grid_template_columns: 1fr; } /* READSPEAKER COLUMN */ .wnts_3_col_headline_1_wrapper { display: none; } /* CONTENT COLUMN */ .wnts_3_col_content_wrapper { h1.wnts_3_col_content_h1 { --_wnts_wnts_grid_template_columns: auto; margin-top: 0 !important; text-align: center; margin-bottom: 0 !important; :first-child { display: none; } } h2 { display: grid; justify-content: center; justify-items: center; --_wnts_justify_items: center; margin-inline: auto; gap: 0; --_wnts_grid_gap: 0; --_font_size_h2:var(--font_size_h1); --_line_height_h2: 1; } .wnts_3_col_content_description { text-align: center; } } .wnts_3_col_headline_3_wrapper { display: none; } } } @layer preview_grid { .wnts_card_app_preview { border: 2px solid var(--wnts_section_color ); border-radius: var(--wnts_templates_border_radius); padding: 1em; &.wnts_standard_preview { display: grid; width: 100%; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr auto !important; gap: 0.5em; align-items: stretch; background-color: var(--wnts_white); h3 { margin-block: 0 !important; --_font_weight_h3: var(--font_weight_medium); --_font_size_h3: var(--font_size_600); } a.wnts_standard_link { --_button_width: fit-content; > .wnts_grid { --_wnts_wnts_grid_template_columns: auto; } } *:nth-child(4){ width: fit-content; justify-self: end; } } } .wnts_preview_link_wrapper { padding: 1.75em; display: grid; grid-template-rows: 1fr auto; gap: 1.5em; background-color: rgba(var(--farbe_1_thema_a_rgba), 0.08) !important; border-bottom: 1px solid var(--farbe_1_thema_a_hsl_orig) !important; border-radius: var(--wnts_templates_border_radius_lower) !important; overflow: hidden; color: var(--wnts_text) !important; &:hover { outline: 1px solid var(--wnts_accent); } .wnts_preview_card { display: grid; grid-template-rows: auto 1fr; } > p { text-align: right; margin-bottom: 0 !important; } } } @layer top_themen { .wnts_newsletter_all_items:has(.wnts_loop_startseite_top_themen_preview){ display: grid; --_grid_gap: 1em; grid-template-columns: repeat(3, 1fr); gap: var(--_grid_gap, 0.3em); --_icon_width: 1em; --_icon_height: 1em; @media(width<=1100px){ grid-template-columns: repeat(2, 1fr); } @media(width<=800px){ grid-template-columns: repeat(1, 1fr); } .wnts_square { position: relative; z-index: 0; /* oder irgendein anderer Wert */ width: 100%; /* max-width: 360px; */ max-width: 100%; aspect-ratio: 2 / 1; /* box-shadow: 3px -4px 3px rgba(0, 0, 0, 0.1); */ border-width: 2px; border-style: solid; border-color: color-mix(in srgb, var(--farbe_1_thema_a) 90%, rgba(0,0,0,0.8)); border-radius: var(--wnts_templates_border_radius); overflow: hidden; .square_content { position: relative; height: 100%; /* border-radius: var(--wnts_templates_border_radius); overflow: hidden; */ .wnts_custom_content { aspect-ratio: 1 / 1; width: 100%; height: 100%; display: grid; position: absolute; a { --_bg_color_top_themen: var(--farbe_1_thema_a_heller); &:hover { --_bg_color_top_themen: var(--wnts_accent_hsl_orig); .wnts_loop_post__content::after { height: 100%; transition: 0.6s ease-in-out; } } } .wnts_loop_startseite_top_themen_preview { align-self: var(--_align_self, end); padding: 1rem var(--font_size_600); background-color: var(--_bg_color_top_themen); color: var(--wnts_white); transition: 0.3s; &:hover { background-color: var(--_bg_color_top_themen); } .wnts_loop_post__content { position: relative; justify-content: space-between; gap: 0.5em; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 3em; &::after { position: absolute; content: ''; top: 0; left: -14px; width: 4px; height: 0%; background-color: var(--wnts_white); opacity: 0.5; transition: 0.6s ease-in-out; border-radius: 5px; } h3 { --_wnts_number_of_lines: 1; --_font_weight_text: var(--font_size_500); margin: 0 !important; --_line_height_text: 1.5; --_font_size_h3: var(--font_size_600); --_font_weight_h3: var(--font_weight_medium); } .wnts_summary_and_icon { display: grid; grid-template-columns: auto auto; gap: 1rem; align-items: center; align-self: flex-end; justify-self: end; p { --_font_weight_text: var(--font_weight_regular); padding-block: 0.3em; margin: 0 !important; --_line_height_text: 1.4em; } } } } } } &:nth-child(1) { max-width: unset; grid-column: 1/3; height: auto; aspect-ratio: unset; ~ * { aspect-ratio: 1 / 1; } @media(width<=1100px){ grid-column: 1/2; aspect-ratio: 1 / 1; } &:only-child { grid-column: 1/3; aspect-ratio: 2 / 1; aspect-ratio: calc((2 + ( 100% + 1em) / 100% ) / 1); height: 100%; max-height: 100%; @media(width<=800px){ grid-column: 1/2; aspect-ratio: 1 / 1; } .wnts_custom_content { aspect-ratio: 2 / 1; height: auto; width: 100%; @media(width<=800px) { aspect-ratio: 1 / 1; } } } } .square_bg_image_wrapper { position: absolute; /* border-radius: var(--wnts_templates_border_radius); */ overflow: hidden; top: 0; left: 0; content: ''; width: 100%; height: 100%; z-index: -1; img.square_bg_image { width: 100%; object-fit: cover; --_image_height: 100%; object-position: var(--_object-position_x, center) var(--_object-position_y, center); } } } } } @layer aktuelles { .wnts_startseit_termine { display: grid; --_grid_gap: 1em; --wnts_startseit_termine_number_columns: var(--_wnts_startseit_termine_number_columns,3); --wnts_gap_total: calc( (var(--wnts_startseit_termine_number_columns) - 1 ) * var(--_grid_gap)); --wnts_startseit_termine_column_width: calc( (100% - var(--wnts_gap_total) ) / var(--wnts_startseit_termine_number_columns) ); grid-template-columns: repeat(var(--wnts_startseit_termine_number_columns), var(--wnts_startseit_termine_column_width)); gap: var(--_grid_gap, 0.3em); --_icon_width: 1em; --_icon_height: 1em; &.wnts_first_col_1_to_3 { > *:first-child{ aspect-ratio: unset; grid-column: 1 / 3; @media(width<=1100px){ grid-column: 1 / 2; aspect-ratio: 1 / 1; } } > *:only-child { aspect-ratio: 2/1; @media(width<=1100px){ grid-column: 1 / 2; aspect-ratio: 1 / 1; } } } } @media(width<=1100px){ .wnts_startseit_termine { grid-template-columns: repeat(2, 1fr); --_wnts_startseit_termine_number_columns: 2; } } @media(width<=800px){ .wnts_startseit_termine { grid-template-columns: repeat(1, 1fr); --_wnts_startseit_termine_number_columns: 1; } } #the_dom_id_aktuelles_startseite { .wnts_termin_startseite { --_termin_main_color: var(--farbe_1_thema_a_heller); --_all_content_wrapper_bg: var(--farbe_1_thema_a_heller); --_all_content_wrapper_text_color: var(--wnts_white); --_all_content_wrapper_bg_hover: var(--wnts_white); max-height: 370px; &:has( a:hover){ --_all_content_wrapper_bg: var(--wnts_white); --_all_content_wrapper_text_color: var(--farbe_1_thema_a_heller); .wnts_date_aktuelles { color: var(--wnts_white) !important; } } .header_date_wrapper { display: grid; grid-template-columns: 1fr auto; gap: 0.5em; .wnts_date_aktuelles { display: grid; place-content: center; align-self: baseline !important; border-radius: 50%; width: var(--termin_icon_size); height: var(--termin_icon_size); background-color: var(--farbe_1_thema_a); color: var(--wnts_white); --_font_size_text: 14px; --_line_height_text: 1; place-self: center; } } } } #the_dom_id_startseite_top_themen { .wnts_termin_startseite { --_termin_main_color: var(--wnts_accent_light); --_all_content_wrapper_bg: var(--wnts_accent_light); --_all_content_wrapper_text_color: var(--wnts_white); --_all_content_wrapper_bg_hover: var(--wnts_white); max-height: 370px; &:has( a:hover){ --_all_content_wrapper_bg: var(--wnts_white); --_all_content_wrapper_text_color: var(--wnts_accent_light);; } } } #the_dom_id_startseite_termine { @media ( width < 767px ) { .wnts_termin_startseite { --_all_content_wrapper_text_color: var(--wnts_white); } } } .wnts_termin_startseite { /* padding: 1em; */ width: 100%; /* max-width: 400px; */ aspect-ratio: 1 / 1; max-height: fit-content; max-height: 100%; max-height: var(--_--wnts_card_max_height, var(--wnts_card_max_height)); width: 100%; scale: 1; transition: 0.6s ease-in-out; --termin_main_size: var(--_termin_main_size, var(--font_size_600)); --termin_main_color: var(--_termin_main_color, var(--farbe_1_thema_a_hsl_orig)); --termin_icon_size: var(--_termin_icon_size, 50px); &:has(.wnts_kinder) { --_termin_main_color: var(--wnts_accent); } &:has(a:hover) { @media(width>1024px){ scale: 1.03; transition: 0.6s ease-in-out; } } > a { position: relative; z-index: 0; display: block; width: 100%; height: 100%; /* border: 1px solid red; */ border-radius: var(--wnts_templates_border_radius); /* box-shadow: 3px -4px 3px rgba(0, 0, 0, 0.1) !important; */ /* box-shadow: none !important; */ overflow: hidden; --_color_link: var(--farbe_1_thema_a_hsl_orig); --_text_color: var(--_all_content_wrapper_text_color, var(--termin_main_color)); --_color_hover_link: var(--wnts_white); border-width: 2px; border-style: solid; border-color: color-mix(in srgb, var(--termin_main_color) 90%, rgba(0,0,0,0.8)); } .wnts_background_image { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; img { --_image_height: 100%; object-fit: cover; width: 100%; } } .wnts_date_day, .wnts_is_kinder_event { position: absolute; display: grid; place-items: center; top: var(--termin_main_size); left: var(--termin_main_size); width: var(--termin_icon_size); height: var(--termin_icon_size); background-color: var(--termin_main_color); border-radius: 100%; span { font-size: 1.7em; font-weight: 700; --_text_color: white; } } .wnts_is_kinder_event { top: calc( var(--termin_main_size) + 0.5em + var(--termin_icon_size) ); } /* FOR AKTUELLES ONLY - not for TERMINE: --_all_content_wrapper_bg: var(--wnts_accent); --_text_color: var(--wnts_white); FOR AKTUELLES ONLY - not for TERMIN */ .wnts_all_content_wrappper { overflow: hidden; display: grid; grid-template-rows: auto auto; align-content: end; height: 100%; --all_content_wrapper_bg: var(--_all_content_wrapper_bg, rgba(var(--wnts_rgba_white), 0.9)); --all_content_wrapper_text_color: var(--_all_content_wrapper_text_color, currentColor); > * { padding: 0 var(--termin_main_size); background-color: rgba(var(--wnts_rgba_white), 0.9); background-color: var(--all_content_wrapper_bg); } @media(width<=767px){ --_all_content_wrapper_bg: var(--termin_main_color); /* --_all_content_wrapper_text_color: var(--wnts_white); */ :is(p,span) { --_text_color: var(--all_content_wrapper_text_color, var(--wnts_white)); } } } .wnts_content_on_hover_wrapper { height: 0; max-height: fit-content; transition: height 0.6s ease-in-out; margin-top: -1px !important; } @media(width<=800px){ .wnts_content_on_hover_wrapper { /* height: 7em; */ } } a:hover { .wnts_all_content_wrappper > * { background-color: var(--_all_content_wrapper_bg_hover, var(--termin_main_color)); --_all_content_wrapper_bg: var(--_all_content_wrapper_bg, var(--termin_main_color)); :is(p,span) { --_text_color: var(--all_content_wrapper_text_color, var(--wnts_white)); } } .wnts_content_on_hover_wrapper { height: 7em; } } .wnts_content_primary { padding-top: var(--termin_main_size); --_font_size_text: var(--termin_main_size); --_line_height_text: 1.1em; --_font_weight_text: var(--font_weight_medium); > * { margin-bottom: var(--termin_main_size) !important; } } .wnts_content_on_hover { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5em; padding-bottom: var(--termin_main_size); } } } @layer post_content { .wnts_dd_app_post_content { --_wnts_font_weight: var(--font_weight_regular); --_wnts_dd_app_post_content_farbverlauf_start_opacity: 0.2; --_wnts_dd_app_post_content_size_col_two: 800px; --wnts_li_a_text_color: var(--_wnts_li_a_text_color, var(--wnts_post_color)); --wnts_li_a_text_color_hover: var(--_wnts_li_a_text_color_hover, var(--wnts_accent)); --wnts_li_svg_color: var(--_wnts_li_svg_color, var(--wnts_post_color)); --wnts_li_svg_color_hover: var(--_wnts_li_svg_color_hover, var(--wnts_accent)); display: grid; grid-template-columns: 1fr min(700px, 100%) 1fr; container-type: inline-size; /* @container (min-width: 700px){ .wnts_col_two { margin-inline: 1em; } } */ /* max-width: calc(80ch + 29%); */ padding-block: 2em; margin-top: 2em !important; /* border: 1px solid rgba(var(--farbe_1_thema_a_rgba), 0); */ /* border-width: 0px; */ /* box-sizing: content-box !important; */ /* background-image: linear-gradient(90deg, rgba(var(--farbe_1_thema_a_rgba), 0.2), transparent 15%, transparent 90%, rgba(var(--farbe_1_thema_a_rgba), 0.2)); */ &.wnts_links_to_actions { grid-template-columns: 1fr; padding: 0; margin-top: 0 !important; --_wnts_li_svg_color: var(--wnts_accent_light); --_wnts_li_svg_color_hover: var(--wnts_accent); ul { display: grid; gap: 1em; } a { --animation_end: var(--_animation_end, 1em); --_wnts_animation_line_offset_left: var(--_animation_end, 1em); width: fit-content; color: var(--wnts_li_a_text_color) !important; transition: 0.6s ease-in-out; padding-left: var(--animation_start); font-weight: var(--font_weight_medium) !important; left: 0 !important; &:hover { padding-left: var(--animation_end); /* left: var(--_wnts_animation_line_offset_left) !important; */ transition: 0.6s ease-in-out; color: var(--wnts_li_a_text_color_hover) !important; } } } @media(width<=900px){ border-width: 0px; padding-inline: 0; background-image: none; } h2, h3, h4 { --_margin_bottom: 0.3em; } :is(ul,ol){ --_margin_top: 0.5em; > br { display: none; } li { --_margin_bottom: 0.5em; } } strong { display: contents; } ul { list-style: none; /* Standard-Aufzählungspunkte entfernen */ padding: 0; li { display: grid; grid-template-columns: 30px auto; /* Erste Spalte für das Icon, zweite für den Text */ align-items: center; /* Icon mittig zur ersten Zeile des Textes */ gap: 10px; /* Abstand zwischen Icon und Text */ } li::before { content: ""; display: block; width: 1em; height: 1em; background-color: var(--wnts_li_svg_color); /* Farbe des Icons */ -webkit-mask: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_arrow_right.svg') no-repeat center / contain; mask: url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_arrow_right.svg') no-repeat center / contain; align-self: start; /* SVG an der ersten Zeile ausrichten */ justify-self: end; margin-top: 0.3em; /* Optional: Feinanpassung der vertikalen Position */ } li:has( a:hover )::before { background-color: var(--wnts_li_svg_color_hover); /* Farbe des Icons */ } } :is(h3,h4){ --_margin_top: 1em; --_wnts_font_weight: var(--font_weight_semi_bold); &:has(+ ul){ --_font_size_h3: var(--font_size_h4); --_wnts_font_weight: var(--font_weight_semi_bold); border: 1px solid var(--wnts_post_color); border-radius: var(--wnts_templates_border_radius_upper); padding: 1em; --_margin_bottom: 0em; --_margin_top: 2em; background-color: rgba(var(--wnts_rgba_white), 0.5) !important; + ul { margin-bottom: 2em !important; padding: 1em; border: 1px solid var(--wnts_post_color) !important; border-radius: var(--wnts_templates_border_radius_lower); background-color: var(--wnts_white) !important; > li:before { justify-self: baseline; -webkit-mask: none; mask: none; background-color: rgba(var(--wnts_accent_light_rgba), 1); border-radius: 50%; } } } } } /* .wnts_render_content_wrapper { :is(h2,h3,p,span) + br { display:none !important; } :is(ul,ol,li) > br { display:none !important; } } */ } @layer wnts_dd_app_single_post { .wnts_dd_app_single_post_overview_wrapper { --wnts_dd_app_single_post_img_position: var(--_wnts_dd_app_single_post_img_position, 'center'); display: grid; grid-template-columns: 1fr min(700px, 100%) 1fr; h1 { display: grid; text-align: center; --_line_height_h1: var(--line_height_300); } img, .wnts_thumbnail_with_infos img { --_image_border_radius: var(--wnts_templates_border_radius); aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--wnts_dd_app_single_post_img_position); } .wnts_preview { padding-block: 1em; /* border: 1px solid var(--farbe_1_thema_a_hsl_orig); border-width: 1px 0; */ } } .wnts_termin_all_infos { display: grid; grid-template-columns: repeat(3, max-content); gap: 1em; justify-content: space-between; &.wnts_justify_content_center { justify-content: center; } padding-block: 2em; --_font_size_text: var(--font_size_500); @media(width<=767px){ padding-block: 1em; grid-template-columns: repeat(1, auto); gap: 0.5em; --_font_size_text: var(--font_size_400); width: fit-content; margin-inline: auto; .wnts_text_with_icon { --_margin_top: 0em; --_margin_bottom: 0em; } } } .wnts_buttons_wrapper { padding-block: 2em; @media(width<=767px){ &.wnts_justify_content_space_between{ justify-content: flex-end; } } } } @layer image { .wnts_image_float_right { float: right; padding-inline-start: var(--_image_float_padding_inline_start, var(--font_size_regular)); max-width: min(var(--_image_float_max_width, 700px), 100%); padding-bottom: 3em; @media(width<=1024px){ float: none; --_image_float_padding_inline_start: 0; --_image_float_max_width: 100%; } } .wnts_thumbnail_with_infos { > div > p { margin-bottom: 0 !important; } } } @layer cookies { .wnts_cookies_impressum { .elementor-accordion { padding-bottom: 2em; } } } } @layer theme_classes { } @layer widgets { @layer breadcrumbs { .e-con-inner:not(:has( .e-con-inner)):has( .wnts_breadcrumb, .wnts_econ_inner_flex_to_grid){ --_wnts_display: grid; --wnts_display: var(--_wnts_display,var(--display)); display: var(--wnts_display) !important; } .wnts_breadcrumb { --_wnts_display: grid; --_font_weight_a: var(--font_weight_semi_bold); color: var(--wnts_accent); --_text_color: var(--wnts_accent); } .wnts_breadcrumb ul { border: 1px solid grey; } .wnts_breadcrumb_link { --_icon_width: 24px; --_icon_height: 1em; --_wnts_svg_fill: var(--wnts_section_color, var(--wnts_accent)); --_color_button_icon: var(--wnts_dunkelgrau); display: grid; grid-template-columns: auto auto; gap: var(--relative_size_050); } a.wnts_breadcrumb_link { position: relative; --_color_link: var(--wnts_section_color); } a.wnts_breadcrumb_link::before { --_link_underline_bottom: -4px; --_link_underline_thickness: 4px; position: absolute; content: ''; left: 0; bottom: var(--_link_underline_bottom, 0); width: 100%; height: var(--_link_underline_thickness, 1px); background-color: transparent; } a.wnts_breadcrumb_link:hover::before { background-color: var(--_color_link, var(--wnts_accent)); height: var(--link_underline_thickness, 10px); } .wnts_icon_breadcrumb_arrow { display: grid; align-items: center; } } @layer hero_button { :root { --hero_list_icon_size: 18px; --hero_list_icon_size_svg_wrapper: 50px; --hero_list_icon_font_size: var(--hero_list_icon_size); --hero_list_text_size: 30px; --hero_list_icon_color: var(--wnts_white); --hero_list_text_color: var(--wnts_white); --hero_list_bg_color: var(--farbe_1_thema_a); --hero_list_icon_bg_color: var(--farbe_1_thema_a); --hero_list_icon_color_focus: var(--wnts_white); --hero_list_bg_color_focus: var(--wnts_white); --hero_list_icon_bg_color_focus: rgba(var(--wnts_rgba_white), 0.2); /* NEU: Icon-Kreishintergrund bei Hover */ --hero_list_padding_x: 10px; --hero_list_gap: 8px; --hero_list_border_radius: 50px; --hero_list_min_width: 60px; --hero_list_expanded_width: 180px; /* ÄNDERUNG: Maximale Breite im Hover-Zustand */ --hero_list_min_width: 60px; --hero_list_max_width: var(--_hero_list_max_width, 12ch);/* 200px; NEU: Maximale Breite für Animation */ --hero_list_transition_duration: 0.5s; --hero_list_transition_delay: 0.4s; /* NEU: Verzögerung für das Zurücksetzen */ } .elementor-element.elementor-fixed:has( .wnts_hero_icon_list_widget ) { z-index: 5 !important; } .wnts_hero_icon_list_widget { display: grid; gap: 1em; transition: 0.5s ease-in-out; --_hero_list_bg_color: var(--farbe_1_thema_a_heller); --hero_list_icon_bg_color: var(--farbe_1_thema_a_heller); } @media(width<1412px){ .wnts_hero_icon_list_widget { display: none; } } .wnts_hero_icon_list_item { display: grid; justify-items: end; --_hero_list_max_width: 12ch; --_wnts_hero_icon_list_item_text_padding: 1em 0.3em; --box_shadow: 0px 0px 9px 4px #ffffffd9; --box_shadow: var(--wnts_box_shadow_white_100); --wnts_hide_show_display: grid; &.wnts_hero_icon_menu { --_hero_list_max_width: 0; --_wnts_hero_icon_list_item_text_padding: 0; --_hero_list_bg_color: var(--wnts_white); --hero_list_icon_color: var(--farbe_1_thema_a); --hero_list_icon_bg_color: var(--_hero_list_icon_bg_color, var(--wnts_white)); --hero_list_icon_color_focus: var(--wnts_white); --hero_list_icon_bg_color_focus: var(--farbe_1_thema_a); /* NEU: Icon-Kreishintergrund bei Hover */ --box_shadow: none; a { box-shadow: var(--wnts_box_shadow_thema_a_100) !important; } } a { width: max-content; display: flex; place-items: center; padding-inline: 0 0; background-color: var(--_hero_list_bg_color, var(--hero_list_bg_color)) !important; color: var(--_hero_list_text_color, var(--hero_list_text_color)) !important; border-radius: var(--hero_list_border_radius); box-shadow: var(--_box_shadow, var(--box_shadow)) !important; --hero_list_transition_delay: 0s; /* transition: padding-inline var(--hero_list_transition_duration) ease-in var(--hero_list_transition_delay), gap var(--hero_list_transition_duration) ease-in-out var(--hero_list_transition_delay); */ & .wnts_hero_icon_list_item_text { width: 0; margin:0; opacity: 0; font-size: var(--hero_list_icon_font_size); /* text-transform: uppercase; */ overflow: hidden; text-align: center; --_wnts_font_weight: var(--font_weight_medium); padding-inline: 0; transition: all var(--hero_list_transition_duration) ease-in-out; } & .wnts_hero_icon_list_item_icon { display: grid; place-items: center; width: var(--hero_list_icon_size_svg_wrapper); height: var(--hero_list_icon_size_svg_wrapper); border-radius: var(--hero_list_border_radius); background-color: var(--hero_list_icon_bg_color) !important; transition: all var(--hero_list_transition_duration) ease-in-out; } & svg { width: var(--hero_list_icon_size); height: var(--hero_list_icon_size); --_wnts_svg_fill: var(--hero_list_icon_color); } &:hover { & .wnts_hero_icon_list_item_text { padding-inline: var(--_wnts_hero_icon_list_item_text_padding); width: var(--_hero_list_max_width); opacity: 1; } & .wnts_hero_icon_list_item_icon { background-color: var(--hero_list_icon_bg_color_focus) !important; } & svg { --_wnts_svg_fill: var(--hero_list_icon_color_focus); } } } } html[data-scroll30percent=yes] .wnts_hero_icon_list_item.wnts_hero_icon_menu { --_hero_list_icon_bg_color: rgba(var(--wnts_accent_light_rgba), 0.2); /* background-color: rgba(var(--wnts_accent_light_rgba), 0.2) !important; */ } } @layer elementor_cta { .wnts_elementor_cta { --wnts_cta_zoom_factor_start: var(--wnts_zoom_factor_start, 0.9); --wnts_cta_zoom_factor_end: var(--wnts_zoom_factor_end, 1); --wnts_cta_max_size: var(--wnts_grid_5_squares_max_size, calc(160px / var(--wnts_cta_zoom_factor_start))); --wnts_elementor_cta_start_size: var(--_wnts_elementor_cta_start_size, var(--wnts_cta_max_size)); --wnts_elementor_cta_svg_size_zoomed: var(--_wnts_elementor_cta_svg_size_zoomed, 40px); --wnts_elementor_cta_svg_size_zoomed_mobile: var(--_wnts_elementor_cta_svg_size_zoomed_mobile, 32px); --wnts_elementor_cta_svg_size: calc( var(--wnts_elementor_cta_svg_size_zoomed) / var(--wnts_cta_zoom_factor_start) ); --wnts_svg_width: var(--wnts_elementor_cta_svg_size, 40px); --wnts_svg_height: var(--wnts_elementor_cta_svg_size, 40px); --wnts_cta_text_color: var(--_wnts_cta_text_color, var(--wnts_white)); --wnts_cta_text_size: var(--_wnts_cta_text_size, var(--font_size_600)); /* 400 -> 600 */ --wnts_cta_text_weight: var(--_wnts_cta_text_weight, var(--font_weight_medium )); --wnts_cta_bg_color: var(--_wnts_cta_bg_color, var(--wnts_accent_light)); --wnts_cta_bg_color_hover: var(--_wnts_cta_bg_color_hover, var(--wnts_accent)); --wnts_cta_svg_padding: var(--_wnts_cta_svg_padding, 0); width: var(--wnts_elementor_cta_start_size, 200px); height: var(--wnts_elementor_cta_start_size, 200px); @media(width<=767px){ --_wnts_elementor_cta_svg_size: calc( var(--wnts_elementor_cta_svg_size_zoomed_mobile) / var(--wnts_cta_zoom_factor_start) ); } &.wnts_icon_size_s { --_wnts_elementor_cta_svg_size_zoomed: 30px; --_wnts_elementor_cta_svg_size_zoomed_mobile: 24px; } &.wnts_elementor_icon_padding { --_wnts_cta_svg_padding: 10%; } &.wnts_cta_primary_bg { --_wnts_cta_bg_color: var(--farbe_1_thema_a_orig_hsl); --_wnts_cta_bg_color_hover: var(--farbe_1_thema_a_heller); } &.wnts_cta_small_screens_only { @media(width>915px){ display: none; outline: 2px solid darkgreen; } } .elementor-widget-container { scale: var(--wnts_cta_zoom_factor_start); transition: scale 0.3s ease-in-out !important; .elementor-cta__bg-overlay { background-color: var(--wnts_cta_bg_color) !important; } &:has( a.elementor-cta:focus-visible, a.elementor-cta:hover ){ scale: var(--wnts_cta_zoom_factor_end); .elementor-cta__bg-overlay { background-color: var(--wnts_cta_bg_color_hover) !important; } } } /* @media(width<=767px){ --_wnts_svg_width: 40px; --_wnts_svg_height: 40px; } */ .elementor-cta { display: grid !important; height: var(--_wnts_cta_height, 100%)! important; .elementor-cta__bg.elementor-bg { background: var(--wnts_cta_bg_color) !important; } } .elementor-cta__content { min-height: var(--_wnts_cta_min_height, unset)! important; padding: var(--_wnts_cta_padding_content, 0)! important; margin: var(--_wnts_cta_margin_content, 0)! important; .elementor-icon-wrapper { display: grid; place-items: center; .elementor-icon { --_wnts_svg_fill: var(--wnts_white); svg { width: var(--wnts_svg_width) !important; height: var(--wnts_svg_height) !important; padding: var(--wnts_cta_svg_padding, 0); * { fill: var(--_wnts_svg_fill) !important; } } } } .elementor-content-item { color: var(--wnts_cta_text_color) !important; font-size: var(--wnts_cta_text_size) !important; font-weight: var(--wnts_cta_text_weight) !important; line-height: 1em !important; letter-spacing: var(--letter_spacing_700); } } } } @layer plus_button { .wnts_plus_button a { background-color: var(--_wnts_plus_button_bg_color, var(--farbe_1_thema_a_orig_hsl)) !important; color: var(--_wnts_plus_button_color, var(--wnts_white)) !important; &:hover { background-color: var(--_wnts_plus_button_hover_bg_color, var(--farbe_1_thema_a_orig_hsl)) !important; color: var(--_wnts_plus_button_hover_color, var(--wnts_white)) !important; @media(width>767px){ background-color: var(--_wnts_plus_button_hover_bg_color, var(--wnts_accent)) !important; border_color: var(--_wnts_plus_button_hover_bg_color, var(--wnts_accent)) !important; } } } } @layer wegweiser_tab { .wnts_wegweiser_tab { --wegweiser_tab_count_col: var(--_wegweiser_tab_count_col, 3); --wegweiser_tab_gap: var(--_wegweiser_tab_gap, 0 1em); --_button_background_color: rgba(var(--farbe_1_thema_a_rgba), 0.05); --_button_background_color_hover: rgba(var(--farbe_1_thema_a_rgba), 0.05); --_button_text_color: var(--wnts_text); --_button_text_color_hover: var(--wnts_text); --_button_border_padding: 1.5em; --wnts_wegweiser_tab_a_padding_inline_start: var(--_wnts_wegweiser_tab_a_padding_inline_start, 0px); --wnts_wegweiser_tab_a_padding_inline_end: var(--_wnts_wegweiser_tab_a_padding_inline_end, 0px); --wnts_wegweiser_tab_a_padding_inline: var(--wnts_wegweiser_tab_a_padding_inline_start) var(--wnts_wegweiser_tab_a_padding_inline_end); --wnts_wegweiser_tab_a_padding_block_start: var(--_wnts_wegweiser_tab_a_padding_block_start, 0px); --wnts_wegweiser_tab_a_padding_block_end: var(--_wnts_wegweiser_tab_a_padding_block_end, 0.2em); --wnts_wegweiser_tab_a_padding_block: var(--wnts_wegweiser_tab_a_padding_block_start ) var(--wnts_wegweiser_tab_a_padding_block_end ); --wnts_wegweiser_tab_a_icon_size: var(--_wnts_wegweiser_tab_a_icon_size, 1.3em ); --wnts_wegweiser_tab_a_icon_distance: var(--_wnts_wegweiser_tab_a_icon_distance, 0.7em ); --wnts_wegweiser_tab_a_icon_color: var(--_wnts_wegweiser_tab_a_icon_color, var(--wnts_accent_light) ); --wnts_wegweiser_tab_a_icon_color_hover: var(--_wnts_wegweiser_tab_a_icon_color_hover, var(--wnts_accent) ); --wnts_wegweiser_tab_a_icon: var(--_wnts_wegweiser_tab_a_icon, url('/wp-content/plugins/wnts-plugin/includes/templates/my_icon_svgs/demo_gemeinde/svg/icon_link.svg') ); @media(width<=1024px){ --_wegweiser_tab_count_col: 1; --_button_border_padding: 1em; } /* @media(width>1024px){ */ .elementor-widget-container .e-n-tabs { display: grid !important; grid-template-columns: repeat(var(--wegweiser_tab_count_col), 1fr); gap: var(--wegweiser_tab_gap) !important; } .e-n-tabs-heading, .e-n-tabs-content { /* display: grid !important; */ display: contents !important; /* grid-template-columns: subgrid !important; grid-column: 1/-1; */ gap: var(--wegweiser_tab_gap) !important; --_button_text_color: var(--farbe_1_thema_a_orig_hsl);; } /* } */ .e-n-tabs-heading > * { /* border-radius: 36px 0 0 !important; */ display: block !important; --n-tabs-heading-display: contents; --_button_border_width: 1px; /* --_button_border_color: var(--farbe_1_thema_a_orig_hsl); */ --_button_border_color: var(--farbe_1_thema_a_orig_hsl); --_button_border_radius: var(--wnts_templates_border_radius_upper); --_button_icon_color_hover: var(--wnts_accent_light); --n-tabs-title-justify-content-toggle: space-between; --n-tabs-title-font-size: var(--font_size_600); --_font_size_text: var(--n-tabs-title-font-size); --_button_text_font_size: var(--n-tabs-title-font-size); background-color: lightgray !important; cursor: default !important; --_wnts_font_weight: var(--font_weight_medium); @media(width<=1024px){ display: flex !important; --n-tabs-title-font-size: var(--font_size_500); &[aria-selected=false] { --_button_border_radius: var(--wnts_templates_border_radius); --_button_margin: 0 0 1em 0; } br { display: none; } } .e-n-tab-icon { @media(width>1024px){ display: none !important; } } } .e-n-tabs-content > * { /* border-radius: 0 0 0 36px !important; */ display: block !important; --_button_border_width: 1px; border-color: var(--farbe_1_thema_a_orig_hsl); --_button_border_radius: var(--wnts_templates_border_radius_lower); background-color: var(--wnts_white) !important; --_color_link: var(--farbe_1_thema_a_orig_hsl); --_color_hover_link: var(--wnts_accent); @media(width<=1024px){ display: flex !important; } nav { display: grid; padding-inline: var(--_button_border_padding); padding-block: var(--_button_border_padding); > ul { display: grid !important; gap: 1em; } a { padding-inline: var(--wnts_wegweiser_tab_a_padding_inline_start) var(--wnts_wegweiser_tab_a_padding_inline_end) !important; padding-block: var(--wnts_wegweiser_tab_a_padding_block_start ) var(--wnts_wegweiser_tab_a_padding_block_end ) !important; margin-left: calc( var(--wnts_wegweiser_tab_a_icon_size) + var(--wnts_wegweiser_tab_a_icon_distance) ); --wnts_animation_line_offset_left: var(--_wnts_animation_line_offset_left, 1em); --_wnts_animation_line_offset_left: 1em; --_wnts_accent_font_weight: var(--font_weight_regular); width: fit-content; transition: 0.6s ease-in-out; &::after { position: absolute; display: grid !important; top: calc( 0px + var(--wnts_wegweiser_tab_a_padding_block_start )); top: 0; bottom: 0; left: calc( 0px - var(--wnts_wegweiser_tab_a_icon_size) - var(--wnts_wegweiser_tab_a_icon_distance) ); right: 0; content: ""; /* display: inline-block; */ width: var(--wnts_wegweiser_tab_a_icon_size); height: var(--wnts_wegweiser_tab_a_icon_size); background-color: var(--wnts_wegweiser_tab_a_icon_color) !important; /* Farbe des Icons */ -webkit-mask-image: var(--wnts_wegweiser_tab_a_icon); /* Für WebKit-Browser */ mask-image: var(--wnts_wegweiser_tab_a_icon); /* Standard */ mask-size: contain; mask-repeat: no-repeat; mask-position: center; /* margin-right: 5px; */ vertical-align: middle; opacity: 1 !important; } &:hover { padding-inline: calc( var(--wnts_wegweiser_tab_a_padding_inline_start) + var(--wnts_animation_line_offset_left)) var(--wnts_wegweiser_tab_a_padding_inline_end) !important; transition: 0.6s ease-in-out; &::after { background-color: var(--wnts_wegweiser_tab_a_icon_color_hover) !important; /* Farbe des Icons */ transition: 0.6s ease-in-out; } } } } } &.elementor-widget-n-tabs .e-n-tabs-content>.e-con { &.e-active { @media(width<=1024px){ margin-bottom: 1em !important; max-height: fit-content; height: 300px !important; /* height: 0px; */ overflow: hidden !important; transition: 1s ease-in-out !important; } } } &.elementor-widget-n-tabs .e-n-tabs-content>.e-con:not(.e-active) { display: grid !important; @media(width<=1024px){ /* display: none !important; */ max-height: fit-content; height: 300px; height: 0px !important; overflow: hidden !important; opacity: 0 !important; /* transition: 1s ease-in-out; */ } } } } @layer important_links { .wnts_footer_1_important_links { a { --_color_link: var(--wnts_white); } } } } @layer specials { [hidden], template { display: none !important; } #header_asp_shortcode_v2 .wnts_button_kontakt_v2 a.elementor-button.elementor-button-link { background-color: blue !important; background-color: var(--farbe_1_thema_a_hsl_orig) !important; } #header_asp_shortcode_v2 .wnts_button_kontakt_v2 a.elementor-button.elementor-button-link:hover { background-color: yellow !important; background-color: var(--e-global-color-accent) !important; } @layer header_safari_fixes { html.safari_mac [data-elementor-type="header"] { --safari_mac_position: var(--_safari_mac_position, relative); position: var(--safari_mac_position) !important; margin-bottom: -60px !important; z-index: 10 !important; left: unset; transform: none !important; } } }