/*
Theme Name: InselAuszeit 2026
Author: Webherz Agentur
Author URI: www.webherz-agentur.de
Version: 1.0
Date: Oktober 2026
*/



/* ------------------------------------------------------------------------------------------------------------------------------------------ ALLGEMEINES */
@font-face { font-family: "Karla"; src: url("webfonts/Karla-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Karla Italic"; src: url("webfonts/Karla-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Karla Medium"; src: url("webfonts/Karla-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Karla SemiBold"; src: url("webfonts/Karla-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Karla Bold"; src: url("webfonts/Karla-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Karla ExtraBold"; src: url("webfonts/Karla-ExtraBold.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "Caveat"; src: url("webfonts/Caveat-Regular.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "Fraunces"; src: url("webfonts/Fraunces_72pt-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Italic"; src: url("webfonts/Fraunces_72pt-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Light"; src: url("webfonts/Fraunces_72pt-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Light Italic"; src: url("webfonts/Fraunces_72pt-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces BoldItalic"; src: url("webfonts/Fraunces_72pt-Bold") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Bold"; src: url("webfonts/Fraunces_72pt-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Black"; src: url("webfonts/Fraunces_72pt-Black.ttf") format("truetype"); font-display: swap; }

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-display: swap; }

/*background: linear-gradient(to top, rgba(0, 34, 30, 0.88), rgba(0, 34, 30, 0.25) 55%, rgba(0, 34, 30, 0.55));*/


:root { 
	font-size: 18px; 
	--border_radius_low: 5px;
	--layout_gap: 40px;
	--primary_color: #788F35; /* #288650 */
	
	--secundary_color_sand: #F0A686; 
	--secundary_color_mint: #ebeed7; 
	
	--accent_color: #a9bf04; 
	--accent_color_2: #ECD8B4;
	
	--bg_light: #f9f7ee;
	--bg_middle: #cccccc;
	--border_medium_radius: 30px;
	--border_low_radius: 10px;
	/*
    --primary_color: 3 45 56;
	--secundary_color: 0 88 102;
	--accent_color: 255 163 92;
	--accent_color_2: 12 189 198;*/
	--text_color: #333;
}

body {
	font-family: "Karla", sans-serif;
	font-display: swap;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text_color);
	-webkit-hyphens: auto; 
	-moz-hyphens: auto; 
	hyphens: auto; 
	background: #f9f7ee;
}
img { max-width: 100%; height: auto; border: none; }
a { text-decoration: none; color: var(--text_color); transition: all 300ms ease-out; border-bottom: 1px solid transparent; }
p a { border-bottom: 1px solid var(--accent_color); }
footer p a { border-bottom-color: var(--accent_color); }
#credits a { border-bottom-color: transparent; }

::after, ::before { transition: all 0.2s ease-out; }
/*::selection { background: rgba(12,189,198,0.3); color: var(--primary_color); }
.has-secondary-background-color ::selection { background: rgba(12,189,198,0.3); color: #fff; }
.wp-block-cover ::selection, #hero ::selection { background: var(--secundary_color); color: #fff; }*/


/* ------------------------------------------------------------------------------------------------------------------------------------------ SCHRIFT */
p, ul, ol { margin-bottom: 1rem; }
p.special { font-family: "Caveat"; font-size: 3rem; margin-top: 1rem; color: var(--primary_color); line-height: 2.5rem; }
ul.wp-block-social-links { list-style-type: none; }
ul.wp-block-social-links li svg { width: 50px; height: 50px; }
main ul.wp-block-list { list-style-image: url("img/insel-auszeit_li_green.webp"); margin-left: 25px; }

h1, h2, h3, h4, h5, h6 { font-family: "Fraunces Light"; font-weight: normal; margin-bottom: 0.5rem; line-height: 1.2;  }
h1 { font-size: 3.5rem; font-family: "Fraunces Light"; color: var(--primary_color) !important; }
h1 em { font-family: "Fraunces Light Italic"; color: var(--primary_color); }
body.home h1 { color: var(--text_color) !important; font-size: 4.5rem; line-height: 1; margin-bottom: 2.5rem; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }
h2 { font-size: 2rem; color: var(--primary_color); }
body.home h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; font-family: "Fraunces"; }
h4 { font-size: 1.2rem; }
h5 { font-size: 0.8rem; }
.wp-block-heading-preset { text-transform: uppercase; letter-spacing: 2px; font-family: "Karla"; font-size: 0.8rem; margin-bottom: 0.5rem; }

.has-accent-two-background-color .wp-block-heading { color: #333; }

em, i { font-style: normal; font-family: "Karla Italic"; }
.wp-block-heading em, .wp-block-heading i { font-family: "Fraunces Light Italic"; }


/* ------------------------------------------------------------------------------------------------------------------------------------------ BILDER */
.wp-block-image.is-style-rounded img { border-radius: var(--border_medium_radius); box-shadow: 0px 24px 60px -30px rgba(0,0,0,0.4); }
.wp-block-gallery .wp-block-image { border-radius: var(--border_low_radius); overflow: hidden; }
.wp-block-gallery .wp-block-image::after { 
	content: '\f002'; 
	font-family: "Font Awesome 7 Free"; 
	font-weight: 900; 
	font-size: 2rem; 
	color: var(--primary_color); 
	position: absolute; 
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	opacity: 0; 
	text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
.wp-block-gallery .wp-block-image img { border-radius: var(--border_low_radius); position: relative; transition: all 300ms ease-in-out; transform: scale(1); }
.wp-block-gallery .wp-block-image:hover::after { opacity: 1; }
.wp-block-gallery .wp-block-image img:hover { opacity: 0.5; transform: scale(1.05); }



/* ------------------------------------------------------------------------------------------------------------------------------------------ NAVIGATION */
header { position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 999; transition: 300ms ease; color: var(--primary_color); background: #ebeed7; box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.2); }
header.scrolled { height: 60px; }
header #header_inner { width: 90%; max-width: 1640px; margin: 0 auto; display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; height: 100%; }
header #header_inner #logocontainer { margin-right: 2rem; height: 100%; width: auto; }
header #header_inner #logocontainer a { height: 90%; width: auto; }
header #header_inner #logocontainer a img { height: 90%; width: auto; }
header div#phone_ctabtn { display: flex; display: -webkit-flex; align-items: center; }
header div#phone_ctabtn span.phone { position: relative; margin-right: 40px; font-size: 0.9rem; }
header div#phone_ctabtn span.phone::before { content: '\f095'; margin-right: 8px; font-family: "Font Awesome 7 Free"; font-weight: 900; }

ul.navigation, ul.sub-menu { list-style-type: none; margin: 0; padding: 0; }
ul#menu-hauptmenue { display: flex; display: -webkit-flex; align-items: center; }
ul#menu-hauptmenue > li { padding: 0 1rem; position: relative; }
ul#menu-hauptmenue > li > a { border-bottom: 1px solid transparent; }

/* SUBMENÜ */
ul#menu-hauptmenue li > ul.sub-menu { position: absolute; top: 100%; left: 0; max-height: 0px; overflow: hidden; min-width: 250px; transition: max-height 500ms ease-in-out; margin-top: 10px; border-radius: 5px; }
ul#menu-hauptmenue li > ul.sub-menu > li { padding: 0.5rem 1rem; background: #bbc79a; border-radius: 0px; transition: 300ms ease-in-out; }
ul#menu-hauptmenue li > ul.sub-menu > li:hover { background: #788F35; color: #fff; }
ul#menu-hauptmenue li > span i { transform: rotate(0deg); transition: 300ms ease-in; }

/* CURRENT MENÜ */
ul#menu-hauptmenue > li.current-menu-item > a, ul.sub-menu > li.current-menu-item > a, ul#menu-hauptmenue > li.current_page_ancestor > a { color: var(--primary_color); font-family: "Karla SemiBold"; }
ul#menu-hauptmenue > li.current-menu-item > a::before, ul#menu-hauptmenue > li.current_page_ancestor > a::before { content: url("img/insel-auszeit_li_green.webp"); margin-right: 8px; }
ul#menu-hauptmenue li > ul.sub-menu > li.current-menu-item { background: var(--accent_color_2); }



/* ------------------------------------------------------------------------------------------------------------------------------------------ BUTTONS */
.wp-block-buttons { margin-top: 1rem; }
.wp-block-buttons .wp-block-button a.wp-element-button, a.cta { font-size: 0.9rem; padding: 0.5rem 1rem; transition: all 300ms ease-out; display: block; font-family: "Karla SemiBold"; color: var(--primary_color); }
.wp-block-buttons .wp-block-button.is-style-outline a.wp-element-button { border: 1px solid var(--primary_color); }

a.cta { background: var(--secundary_color_sand); color: #364b37; margin-top: 0; border-radius: 9999px; }
.wp-block-button.ext a::after { content: '\f08e'; font-family: "Font Awesome 7 Free"; font-weight: 900; margin-left: 10px; }


/* ------------------------------------------------------------------------------------------------------------------------------------------ DETAILS */
.wp-block-separator { margin: 2rem 0; border: none; height: 1px; background: var(--primary_color); }
.wp-block-cover { padding: 3rem 0; }
.wp-block-columns .has-background { border-radius: var(--border_medium_radius); overflow: hidden; padding: 3rem; }
#zitat .wp-block-cover__inner-container { max-width: 1280px; width: 90%; margin: 0 auto; }
#zitat .has-x-large-font-size { font-size: 3rem !important; max-width: 720px; margin: 0; }

/* WP FORMS */
.wpforms-container .wpforms-field-label, .wp-core-ui div.wpforms-container .wpforms-field-label { font-weight: normal !important; font-family: "Karla SemiBold"; }

/* UNTERSEITEN PREISKACHEL */
#preise h3 { font-size: 2.5rem; }
#preise .wp-block-heading-preset { margin-top: 1.2rem; margin-bottom: 0.25rem; }
#preise .has-accent-two-background-color { border: 2px solid var(--primary_color); transform: scale(1.1); position: relative; overflow: visible; }
#preise .has-accent-two-background-color::before { 
	content: 'BELIEBT'; 
	font-size: 0.8rem; 
	background: var(--primary_color); 
	border: 2px solid var(--primary_color); 
	padding: 0.25rem 1.5rem; 
	text-transform: uppercase; 
	letter-spacing: 1px;
	color: #fff;
	position: absolute; 
	top: 0; left: 50%;
	z-index: 99;
	border-radius: 20px;
	transform: translate(-50%, -50%);
}
#preise p.has-small-font-size { margin-bottom: 0px; }

#cta_section .wp-block-columns .wp-block-columns .wp-block-column { -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }

footer #kontakt > .wp-block-columns > .wp-block-column > .wp-block-columns { width: 90%; max-width: 1280px; margin: 0 auto; padding: 5vh 0; }
.kontakt_info { /*font-size: 1.2rem; line-height: 1.7; letter-spacing: 1px; */flex-direction: column; align-items: flex-start; }
.kontakt_info i { color: var(--accent_color); }
.kontakt_info a { border-color: var(--accent_color); }

#credits { background: transparent; width: 90%; max-width: 1280px; margin: 0 auto; }
#credits .inner { display: flex; display: -webkit-flex; align-content: center; justify-content: space-between; padding: 1rem 0; }
#credits .inner a {  }


/* ------------------------------------------------------------------------------------------------------------------------------------------ LAYOUT */
#pagewrapper { width: 100%; }

.wp-block-columns { gap: 5rem; }
.wp-block-columns { gap: var(--layout_gap); }
main > .wp-block-columns { width: 100%; margin: 7vh 0; padding: 5vh 0; }
main > .wp-block-columns > .wp-block-column > .wp-block-columns { width: 90%; max-width: 1280px; margin: 0 auto; }

/* HERO SECTION */
#hero { padding: 180px 0 70px 0; min-height: 50vh !important; }
#hero .wp-block-cover__inner-container { width: 90%; max-width: 1280px; margin: auto auto 0 auto; }
#hero .wp-block-cover__inner-container p, #hero .wp-block-cover__inner-container h3, #hero .wp-block-cover__inner-container .wp-block-buttons { max-width: 850px; }
body.home #hero .wp-block-cover__inner-container { max-width: 1680px; }
body.home #hero .wp-block-cover__inner-container .wp-block-columns { justify-content: space-between; }

/* UNTERSEITEN ANWENDUNGEN */
body.parent-pageid-100 .wp-block-columns .has-background h3 { font-size: 1.3rem; margin-bottom: 0; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }
body.parent-pageid-100 .wp-block-columns .has-background { align-content: center; }
body.parent-pageid-100 .wp-block-columns .has-background div.has-background { padding: 1.5rem; max-width: 370px; margin: 0 auto; }


/* STARTSEITE ANWENDUNGEN KACHELN */
/*main #anwendungen .wp-block-columns { gap: 0px; }
main #anwendungen .wp-block-columns .wp-block-columns { margin: 0; padding: 0; }
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column p:last-of-type { margin-bottom: 0; } 
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column .wp-block-buttons { position: absolute; bottom: 2rem; left: 2rem; }

main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column 
{ background: linear-gradient(160deg, #233022, #374e39); padding: 2rem; position: relative; border-radius: 0; border-bottom: 1px solid rgba(240,166,134,0.3); border-right: 1px solid rgba(240,166,134,0.3); }
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column:last-of-type { border-right: none !important; }

main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns:first-of-type > .wp-block-column:first-child { border-radius: var(--border_medium_radius) 0 0 0; }
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns:first-of-type > .wp-block-column:last-child { border-radius: 0 var(--border_medium_radius) 0 0; }

main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns:not(:has(~ .wp-block-columns)) > .wp-block-column:first-child { border-radius: 0 0 0 var(--border_medium_radius); border-bottom: none; }
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns:not(:has(~ .wp-block-columns)) > .wp-block-column:last-child { border-radius: 0 0 var(--border_medium_radius) 0; border-bottom: none; }*/

main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column { border: 1px solid rgba(0,0,0,0.2); border-radius: var(--border_low_radius); background: rgba(255,255,255,0.5); padding: 2rem 2rem 5.5rem 2rem; position: relative; }
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column p:last-of-type { margin-bottom: 0; } 
main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column .wp-block-buttons { position: absolute; bottom: 2rem; left: 2rem; right: 2rem; }
p.dauer_preis { font-family: "Karla SemiBold"; font-size: 0.9rem; color: var(--primary_color); }
body.home p.dauer_preis { color: var(--primary_color); }




/* ------------------------------------------------------------------------------------------------------------------------------------------ HOVER */
/* ------------------------------------------------------------------------------------------------------------------------------------------ > 1280px */
@media only screen and (min-width: 1280px) {
	.wp-block-buttons .wp-block-button a.wp-element-button:hover { transform: translateY(-5px); }
	.wp-block-buttons .wp-block-button.is-style-outline a.wp-element-button:hover { transform: translateY(-5px); background: rgba(120,143,53,0.3); color: var(--wp--preset--color--primary) !important }
	.wp-block-buttons .wp-block-button.cta a.wp-element-button:hover, header #phone_ctabtn a.cta:hover { background-color: var(--accent_color) !important; }
	header #phone_ctabtn span.phone:hover { color: var(--accent_color); }
	footer p a:hover { border-bottom: 1px solid var(--accent_color); color: var(--accent_color); }
	#credits .inner a:hover { border-bottom: 1px solid var(--accent_color); color: var(--accent_color); }
	p a:hover { color: var(--accent_color); border-bottom: 1px solid var(--accent_color); }
	
	/* HAUPTMENÜ HOVER */
	ul#menu-hauptmenue > li.current-menu-item > a:hover { opacity: 0.75; }
	ul#menu-hauptmenue > li > a:hover { border-bottom-color: var(--accent_color); }
	ul#menu-hauptmenue li:hover > ul.sub-menu { max-height: 999px; }
	ul#menu-hauptmenue li:hover > span i { transform: rotate(-90deg); }
}




/* ------------------------------------------------------------------------------------------------------------------------------------------ > 1440px */
@media only screen and (max-width: 1440px) {
	
	body.home h1 { font-size: 3rem; }
	p.dauer_preis { margin-bottom: 0.5rem; }
	.wp-block-columns .has-background { padding: 2.3rem; }
	
	main > .wp-block-columns > .wp-block-column > .wp-block-columns { max-width: 1080px; }
	
	/* #ANWENDUNGEN */
	main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column { padding: 1.5rem; }
	main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column .wp-block-buttons { position: unset; }
	
	/* HERO SECTION */
	#hero { min-height: 90vh !important; padding-top: 120px; }
	
	/* BUTTONS */
	.wp-block-buttons .wp-block-button a.wp-element-button, a.cta { padding: 0.25rem 1rem; }
	

}


/* ------------------------------------------------------------------------------------------------------------------------------------------ > 1200px */
@media only screen and (max-width: 1200px) {
		
	h1, h2, h3, h4, h5, h6, body { -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
	h1 { font-size: 2.3rem; }
	body.home h1 { font-size: 3rem; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; margin-bottom: 0.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.76rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.2rem; }
	
	#cta_section > .wp-block-column > .wp-block-columns { flex-direction: column; }
	
	/* LAYOUT & DESIGN */
	main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column { padding: 1rem; }
	main #anwendungen .wp-block-columns > .wp-block-column .wp-block-columns > .wp-block-column .wp-block-buttons { position: unset; }
	.wp-block-columns .has-background { padding: 1.5rem; }
	
	/* NAVIGATION */
	header div#phone_ctabtn { display: none; }
	
	
	button#menubtn { 
		background: var(--accent_color);
		color: var(--text_color);
		padding: 0.75rem 1rem 0.75rem 2rem; 
		border-radius: 5px; 
		text-transform: uppercase; 
		letter-spacing: 1px; 
		font-family: "Karla SemiBold"; 
		font-size: 0.9rem; 
		position: relative;
		border: none;
	}
	button#menubtn i { font-size: 1rem; position: absolute; left: 0.75rem; top: 0.75rem; }
	button#menubtn i.fa-bars, button#menubtn.active i.fa-xmark { opacity: 1; }
	button#menubtn i.fa-xmark, button#menubtn.active i.fa-bars { opacity: 0; }
	
	nav#toplevel-menu { position: absolute; top: 100%; right: -300px; opacity: 0; transition: all 300ms ease-in-out; }
	ul#menu-hauptmenue { flex-direction: column; align-items: flex-start; background: #bbc79a; border-radius: 0 0 0 5px; overflow: hidden; }
	ul#menu-hauptmenue li { padding: 0; position: relative; }
	ul#menu-hauptmenue li a { display: block; }
	ul#menu-hauptmenue > li > a { padding: 0.75rem 1.25rem; }
	ul#menu-hauptmenue > li.menu-item-has-children > a { padding-right: 1.75rem; }
	
	/* ACTIVE MOBILE MENÜ */
	button#menubtn.active { background: var(--secundary_color_sand); }
	nav#toplevel-menu.active { right: 0px; opacity: 1; }
	
	/* CURRENT MENÜ */
	ul#menu-hauptmenue li.current-menu-item, ul#menu-hauptmenue li.current_page_ancestor { 
		background: var(--accent_color); display: block; width: 100%; }
	ul#menu-hauptmenue li.current-menu-item > a, ul#menu-hauptmenue li.current_page_ancestor > a { 
		color: var(--text_color); display: block; }
	ul#menu-hauptmenue > li.current-menu-item > a::before { content: url("img/insel-auszeit_li_white.webp"); }
	ul#menu-hauptmenue > li.current_page_ancestor > a::before { content: ''; display: none; }
	
	/* SUBMENÜ */
	span.submenupointer { display: inline-block; position: absolute; right: 0; top: 0; height: 55px; padding: 0.5rem; z-index: 99; line-height: 40px; }
	ul#menu-hauptmenue li > ul.sub-menu { position: unset; transition: all 0.2s ease-in-out; border-radius: 0px; margin: 0px; }
	ul#menu-hauptmenue li > ul.sub-menu > li { background: var(--secundary_color_mint); }
	ul#menu-hauptmenue li.submenu-open > ul.sub-menu { max-height: 999px; }
	ul#menu-hauptmenue li.submenu-open > span.submenupointer i { transform: rotate(-90deg); }
	
}



/* ------------------------------------------------------------------------------------------------------------------------------------------ > 950 px */
@media only screen and (max-width: 950px) {
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.8rem; }
	h3 { font-size: 1.2rem; }
	h4 { font-size: 1rem; }
	
	main > .wp-block-columns { margin: 1vh 0; }
	
	#zitat { min-height: 400px !important; }
	#zitat .has-x-large-font-size { font-size: 2.2rem !important; }
	
	#credits .inner { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ > 782 px */
@media only screen and (max-width: 782px) {
	
	#hero { padding: 100px 0 30px 0; min-height: 50vh !important; }
	.wp-block-spacer.nombl { display: none; }
	.wp-block-column { order: 2; }
	.wp-block-column.mbl1 { order: 1; }
	
	/*.wp-block-group { flex-direction: column; align-items: flex-start; }*/
}