/*
 Theme Name:   2023 child
 Description:  Child Theme
 Author:       
 Template:     twentytwentythree
 Version:      1.0
 Text Domain:  2023-child2
*/

@viewport {
	width: device-width;	
	zoom: 1;	
	}


	:root {
		--base-font-size: 16px;
	}



	@font-face {
		font-family: 'cor';
		src: url('fonts/Corinthia-Regular.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@font-face {
		font-family: 'jos';
		src: url('fonts/JosefinSans-VariableFont_wght.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}



	@font-face {
		font-family: 'cor_b';
		src: url('fonts/Corinthia-Bold.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	


	@font-face {
		font-family: 'ssp_r';
		src: url('fonts/SourceSansPro-Regular.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	
	@font-face {
		font-family: 'ssp_b';
		src: url('fonts/SourceSansPro-Bold.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	@font-face {
		font-family: 'ssp_l';
		src: url('fonts/SourceSansPro-Light.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@font-face {
		font-family: 'os';
		src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@media (prefers-color-scheme: dark) {
		:root {
			--bg-color: #000000;
			--text-color: #ffffff;
		}
	}



	
	:root {
		
		--bg-color: #EFE4D1;
		--text-color:#005F6A;
		--base-font-size: 18px;
		

   }
	
	html {
		max-width: 100%;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}


	

body {				
font-family: 'ssp_r';	
background: var(--bg-color);;
color:var(--text-color);
font-size: var(--base-font-size);
padding: 0 !important;
}


body > .wp-site-blocks {
	padding:0;
}


.usernav {
	background-color: #A9C6A0;
}

.usernav .social_icons {color:black; font-size: calc(var(--base-font-size) + 0.8em);}
.language-switcher {display: flex; list-style: none; gap:10px; padding:0; top:-2px; position: relative;}
.language-switcher img {width:auto !important; height:14px !important;}

/* BBAR */
.b_bar
{
	
	padding: 0.5rem;
	  padding-right: 0.5rem;
	  padding-left: 0.5rem;
	gap: 0.5rem;
	justify-content: left;
	display: flex;
	width: fit-content;
}


.b_bar img { 
	max-width:30px;
	filter: brightness(0);
	}
	
	.b_bar figure:first-child {
		margin-right:3rem;
	}
	
	
.navigation {position:relative; min-height: 110px;}
.navigation .menu_logo {position:absolute; left:10px;}

header {position:relative; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; z-index:999;}
p, li {font-size: calc(var(--base-font-size) + 0.1em);}
nav a {
	font-size: calc(var(--base-font-size) + 0.3em);
	text-transform: uppercase;
	font-family: 'ssp_r';
}

.navigation{
	border-top: 1px solid #A9C6A0;
	border-bottom: 1px solid #A9C6A0;
	padding: 0.5em;
}


.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	background: rgba(255,255,255,0.8);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}

.wp-block-navigation__submenu-container li {white-space: nowrap;}
.wp-block-navigation__submenu-container li a:hover {text-decoration: none;}

.wp-block-navigation__submenu-container li:hover {background-color: rgba(169, 198, 160,0.5); width: 100%; }



/* Basis-Navigation */
.menu {
	display: flex;
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
  }
  
  .menu > li {
	position: relative;
  }
  
  .menu > li > a {
	font-size: calc(var(--wp--preset--font-size--base, 1rem) + 0.3em);
	text-transform: uppercase;
	font-family: 'ssp_r', sans-serif;
	text-decoration: none !important;
	padding: 0.5em 0;
	display: inline-block;
  }
  
  /* Hover-Effekt */
  .menu > li > a:hover {
	text-decoration: underline;
  }
  
  /* Submenü-Container */
  .menu li ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0.5em 0;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	min-width: 200px;
	z-index: 99;
  }
  
  .menu li:hover > ul.sub-menu {
	display: block;
  }
  
  /* Submenü-Elemente */
  .menu li ul.sub-menu li {
	display: block;
	white-space: nowrap;
  }
  
  .menu li ul.sub-menu li a {
	display: block;
	padding: 0.5em 1em;
	text-decoration: none;
	color: inherit;
	font-size: 1rem;
  }
  
  .menu li ul.sub-menu li:hover {
	background-color: rgba(169, 198, 160, 0.3);
  }
  
  /* Optional: Border/Trenner */
  .navigation {
	border-top: 1px solid #A9C6A0;
	border-bottom: 1px solid #A9C6A0;
	padding: 0.5em 0;
  }
  
/* ▼ Pfeil hinter Menüpunkten mit Submenü */
.menu-item-has-children > a::after {
	content: " ▼";
	font-size: 0.7em;
	margin-left: 0.3em;
	opacity: 0.7;
	transition: transform 0.2s ease;
  }
  
  /* Optional: Pfeil dreht sich beim Hover */
  .menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
	opacity: 1;
  }
  



  /* Basis-Layout */
.menu {
	display: flex;
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
  }
  
  /* Submenü verstecken */
  .menu li ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border-radius: 10px;
	padding: 0.5em 0;
	z-index: 100;
  }
  
  .menu li:hover > ul.sub-menu {
	display: block;
  }
  
  /* Burger-Button */
  .burger-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 2em;
	cursor: pointer;
	margin: 1em auto;
  }

  .burger-navigation p {display: none;}
  
  /* Responsive Styles ab 800px und kleiner */
  @media (max-width: 800px) {

	
	.burger-toggle {
	  display: block;
	  text-align: center;
	  margin:0;
	}
  
	.menu {
	  display: none;
	  flex-direction: column;
	  align-items: center;
	  background: rgba(255,255,255,1);
	  padding: 1em;
	  border-radius: 10px;
	  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	  text-align: center;
	}
  
	.menu.active {
	  display: flex;
	  position: absolute;
	  width:100%;
	  left:0;
	}
  
	.menu > li > a {
	  font-weight: bold;
	  font-size: 1.2em;
	  padding: 0.5em;
	  display: block;
	  text-align: center;
	}
  
	.menu li ul.sub-menu {
	  position: static;
	  display: block;
	  padding: 0;
	  box-shadow: none;
	  background: none;
	}
  
	.menu li ul.sub-menu li a {
	  font-weight: normal;
	  font-size: 1em;
	  padding: 0.3em 0;
	}

	.menu-item-has-children > a::after {display: none;}
  }
  


  .footer-navigation-wrapper ul {list-style: none; display: flex; width: fit-content;}  
  .footer-navigation-wrapper ul li::before {content:'|'; margin-right:10px;}
  .footer-navigation-wrapper ul li {margin-left:10px; }
  .footer-navigation-wrapper ul li a {font-size:calc(var(--base-font-size) - 2px);}


.wp-block-cover h1 {font-family: 'cor_b'; font-size:calc(var(--base-font-size) + 2em); color:black;     hyphens: none;            /* Keine automatischen Trennungen */
    -webkit-hyphens: none;    /* Safari/Chrome */
    -ms-hyphens: none;        /* Internet Explorer */ }
h2, h2, h3 {hyphens: auto;}
.wp-block-cover p  {color: black; margin-top:0;}


.wp-block-cover .wp-block-cover__inner-container {color: inherit;   width: 100%;  z-index: 1;  max-width: fit-content;  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+66,ffffff+100&0+0,0.9+66,0.9+100 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.9) 66%,rgba(255,255,255,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	  border-radius:20px;  padding:1em 3em;}



/* Country Menü */

.coutry_menu a {
	background-color: #A9C6A0; color:#005F6A; font-size:calc(var(--base-font-size) + 0.1em); padding:1em 2em; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}



.mwl__metadata h2 {display: none;}
.mwl__metadata .caption {font-size:calc(var(--base-font-size) + 0.2em);}


.country_description {background-color: #A9C6A0; color:#003f45; font-size:calc(var(--base-font-size) + 0.1em);}
.country_description img {box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; border:10px solid #EFE4D1; height:100%;}


.kindermenue{font-size:1.2em; justify-content: center;}

/* Language */

.language-switcher a{
	text-decoration: none;
	font-size:calc(var(--base-font-size) + 0.1em);
}

.language-switcher li:first-child{
position: relative;
padding-right: 0.2em;
}

.language-switcher li:first-child::after{
	position: absolute;
	content: '|';
	font-size:calc(var(--base-font-size) + 0.1em);
	bottom: 1px;
	padding-left: 0.3em;
	}



/* Logo */

.logo {
	position: relative;
}

.logo::after {
	position: absolute;
	content: 'Reisinn';
	font-family: 'jos';
	font-size:calc(var(--base-font-size) + 0.4em);
	color: #000000;
	bottom: -0.5em;
	left: 35%;
}

/*Gallerie*/

/* Galerie-Wrapper: Grid-Layout */
.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
  }
  
  /* Bild-Container */
  .wp-block-gallery figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1; /* Quadratisch */
	overflow: hidden;
  }
  
  /* Bilder auf gleichen Ausschnitt bringen */
  .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }
  
  /* Caption ausblenden */
  .wp-block-gallery figcaption {
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	width: 100%;
	padding: 10px;
	text-align: center;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Bei Hover Caption einblenden */
  .wp-block-gallery figure:hover figcaption {
	opacity: 1;
	transform: translateY(0);
  }



/* Search */

.wp-block-search__inside-wrapper{
	background-color: white;
	border:0;
	border-radius: 15px;
	font-size: 0.8em;

}

.usernav form input {font-size:calc(var(--base-font-size) - 2px); padding-left: 1em;}
.wp-block-search__inside-wrapper .wp-block-search__button{ padding: 0;

}

.wp-block-search__button { background-color: white;}
.wp-block-search__button svg {
	height: 1em;
	fill: #A9C6A0;
}


 /* SOCIAL BAR */

 #social_bar {
    position:fixed;
    top:25%;
    right:0;
   
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #A9C6A0;
    padding:0.5em 0em;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    z-index:999;
    transition: all 1s ease;
    
  }
  
  #social_bar div {
    padding:0.7em;
    font-size:1.3em;
    text-align: center;
  }
  
  #social_bar div a {
    color: #FFF;
  }
  

  .from_bottom, .from_left, .from_right, .from_top, .from_behind {
    opacity: 0;
}


.animate-after-load {opacity: 0; transform: translateX(-100px); transition: opacity 1s ease-out, transform 1s ease-out;}
.animate-after-load-start {opacity: 1; transform: translateX(0);}

ol {margin-left: 2em;}




.reiseziele-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}
.reiseziel-box {
	flex: 1 0 calc(25% - 15px); /* 4 Spalten */
	min-height: 200px;
	background-size: cover;
	background-position: center;
	position: relative;
	text-decoration: none;
	color: white;
	display: flex;
	align-items: flex-end;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	border-radius: 10px;
	transition: transform 0.3s ease;
	box-sizing:border-box;
}
.reiseziel-box:hover {
	transform: scale(1.03);
}
.reiseziel-title {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px 15px;
	border-radius: 5px;
	font-weight: bold;
}

@media (max-width: 1024px) {
	.reiseziel-box { flex: 1 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
	.reiseziel-box { flex: 1 0 100%; }
}



input[type="submit"] {
	padding:
  1em !important;
	color: white;
	margin-top: 1em;
	width: 100% !important;
	margin-bottom: 0 !important;	
  background: #005F6A;
  }




footer {
	border-top: 1px solid #A9C6A0;
	padding: 0.5em;
}


.footer-menu {padding:0;}
footer a {
	text-decoration: none;
	color: #005F6A;
}

.footer-navigation-wrapper ul li:first-child::before {display:none;}

.footer-navigation-wrapper ul {
	list-style:
  none;
	display: flex;
	width: fit-content;
	margin:
  0;
  }

  .footer-navigation-wrapper {
	display: flex;
  justify-content: center;
  max-width: 100vw;
  margin-top: 0;
  gap:0;
  }




/* DARKMODE */

body.dark {
	background-color: #121212;
	color: white;
  }
  
  body.dark img:not(.usernav img) {
	filter: brightness(0.8); /* oder z.B. grayscale(20%) contrast(0.9) */
  }

  .dark .usernav {
	background-color: #4C4D4B;
  }

  .dark .usernav img, .dark .usernav i {filter: brightness(1); color:white;}  


  .dark a {color:white;}

  .dark .menu li ul.sub-menu {background-color: #003f45; color:white;}
.dark .kindermenue a {background-color: #003f45 !important;}
.dark .country_description {background-color: #003f45;}
.dark .country_description * {color:white;}
.dark #social_bar {background-color: black;}

@media screen AND (max-width: 780px) {

}

@media screen AND (max-width: 700px) {
	.usernav {flex-direction:column;}

}



@media screen AND (max-width: 490px) {
.footer-navigation-wrapper ul {
  list-style: none;
  display: flex;
  width: fit-content;
  margin: 0;
  flex-direction: column;
}
	
	.footer-navigation-wrapper ul li:first-child::before {display:unset;}
	
}