/*
 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: '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;
	
	}



	
	@font-face {
		font-family: 'homemade';
		src: url('fonts/HomemadeApple-Regular.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: #ffffff;
		--text-color:#242424;
		--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;
overflow-x: hidden;
max-width: 100vw;
}


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


.wp-block-cover__inner-container {position: unset !important;}





.bus2 {
  position: absolute;
  max-width: 33vw;
  left: -33vw; /* startet rechts außerhalb */
  bottom: 20px;
  z-index: 200;
  transform: scale(0.5);
  opacity: 0;
  transition: all 1.5s ease-in-out;
  display: none;
  
}

.bus2.visible {
  left: -130px;
  transform: scale(1);
  opacity: 1;
}



.bus {
  position: absolute;
  max-width: 33vw;
  right: -33vw; /* startet rechts außerhalb */
  bottom: 20px;
  z-index: 200;
  transform: scale(0.5);
  opacity: 0;
  transition: all 1.5s ease-in-out;
}

.bus.visible {
  right: -130px;
  transform: scale(1);
  opacity: 1;
}


main {padding-bottom: 10em;}
.wp-block-button__link {background-color: #cf152d; border-radius:10px; padding:5px 10px; color:white;}

.hero {position: relative;}
.hero::after {position:absolute; 
	bottom:0; left:0; width:100%; 
	height:8vw; 
	content:''; 
	background-image: url('https://lassak-reisen.de/wp-content/uploads/2025/06/wave-1.svg'); background-size: 100% 100%; z-index:0; background-position: 0;}


.custom_headline {
	position: absolute;
	z-index:-1;
	left: -100%;
}

.decals > div h2 {font-size:2em;}
.decals > div {position: relative; padding:1em 1em 4em 1em;}
.decals > div .wp-block-button__link { position: absolute;
  bottom: 1em;
  left: 1em;
  width: 50%;
  height: fit-content;
  left: 25%; }


.big_teaser {
	color:#cf152d;
	font-size:2em;
	font-family:'homemade';
}

.big_teaser P:last-child{
	position: relative;
	right:-5em;
}



.beige {
	background-color: #ffedd5;
}

.neg_marg_top {
	position: relative;
	margin-top:3em;
}


.subheadline {
	margin-top:0;
	font-weight:800;
	font-size:1.1em;
}


.b_bar {
	background-color: #cf152d;
	font-size: calc(var(--base-font-size) - 0.2rem);
	color: white;
	padding:0 0 0 1rem;
	
}


.bbar_icons img {max-width: 30px; max-height: 30px;}
.bbar_icons {background-color: #000000; padding:0.5rem 1em;}
.wp-block-site-logo img {max-width:500px;}
.nav_bar { max-width: 100vw; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
main a {text-decoration: none; color:black; border-bottom: 1px dotted black;}
nav a {font-size: calc(var(--base-font-size) + 0.1rem);}
#modal-1-content > ul > li {padding:2rem; position: relative;}
#modal-1-content > ul > li a:hover {text-decoration: none;}
#modal-1-content > ul > li.current-menu-item a {font-weight: bold;}
#modal-1-content  ul li:after   {
	transition: all 0.5s ease;
	height:0%;
	width:100%;
	position: absolute;
	left:0;
	bottom:0;
	background-color: bisque;
	content:'';
	z-index:-1;
}

#modal-1-content  ul  li:hover::after {
	height:100%;
}


#modal-1-content  ul  li ul li:hover {
	background-color: bisque;
}




ul.center {
	width: fit-content;
	margin: auto;
}








/* REISE CPT */

.trip_headline {background-color: rgba(255,255,255,0.6); padding:1em 2em; width: fit-content; white-space: nowrap; max-width: 95%;}





/* Unterseiten */


.hero-text {
	background: rgba(255,255,255,0.85);
	padding: 1rem 3rem;
    width: fit-content;
    border-radius: 0.5rem;
    color: #000;
	
}

.hero-text p {
	font-size: calc(var(--base-font-size) + 0.2rem);
	margin-top:0;
	color: #cf152d;
	font-weight: bold;
}

.white img {
	border-radius: 0.5rem;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

}

.beige h4 {
	color: #cf152d;
}

.subheadline {
	color: #cf152d;
	font-size: calc(var(--base-font-size) + 0.2rem);
	margin-top:0;
}

.red-text {
	color: #cf152d;
	font-size: calc(var(--base-font-size) + 0.2rem);
}


.download a{
	text-decoration: none;
	color: #cf152d;
	font-weight: bold;
}

.download::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right:20px;
	z-index:0;
	width:100%;
	text-align: center;
	content: '\f1c1';
	color: #cf152d;
	font-size: calc(var(--base-font-size) + 1rem);
  }


  .hooklist li {
	list-style: none;
	display: block;
	position: relative;

}

.hooklist li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
	color: #cf152d;
	position: absolute;
	left: -2em;
}

.busgallery > figure {
	flex-grow: 0 !important;
}



/* ACCC */

#pojo-a11y-toolbar {bottom:100px !important;}

body.pojo-a11y-focusable a:focus {outline-color: #ffffff;}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
  font-size: 100%;
  line-height: 1;
  text-decoration: none;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
  font-size: 350%;
  line-height: 0;
}


#pojo-a11y-toolbar.pojo-a11y-toolbar-right {
  right: -300px;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
  border: 1px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
  font-size: 130%;
  width: 300px;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
  right: 300px;
  
}



.information h4::before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; margin-right:1em;}


    
.decals > div {border: 1px solid #cf152d; border-radius:0.5em; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}


.bommeln{
    background: url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'), url('https://lassak-reisen.de/wp-content/uploads/2025/06/bommel.svg'); 
    background-size: 4vw 4vw, 8vw 8vw, 9vw 9vw, 6vw 6vw, 4vw 4vw, 4vw 4vw, 8vw 8vw, 9vw 9vw, 6vw 6vw, 4vw 4vw;
    background-repeat: no-repeat;
    background-position: -1% 2%, 102% 3%, -3% 40%, 6% 48%, 0 52%,78% 44%,103% 51%,-3% 80%,8% 92%,80% 92%;
  }

 .phone {margin-top:1em;} .mail {margin:0;}
  .phone::before {content:'\f095'; font-family: 'Font Awesome 6 Free'; font-weight: 900;  -webkit-font-smoothing: antialiased; margin-right:1em;}
  .mail::before {content:'\f0e0'; font-family: 'Font Awesome 6 Free'; font-weight: 900;  -webkit-font-smoothing: antialiased; margin-right:1em;}
    .adress::before {content:'\f015'; font-family: 'Font Awesome 6 Free'; font-weight: 900;  -webkit-font-smoothing: antialiased; margin-right:1em;}
	  .time::before {content:'\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 900;  -webkit-font-smoothing: antialiased; margin-right:1em;}
	  .fax::before {content:'\f1ac'; font-family: 'Font Awesome 6 Free'; font-weight: 900;  -webkit-font-smoothing: antialiased; margin-right:1em;}






.fahrten > div > div {position: relative;}
.fahrten > div > div .wp-block-cover__inner-container {position: absolute; bottom: 0; width:100%; left:0; padding:3em; box-sizing: border-box; color:white; background-color: rgba(0, 0, 0, 0.6);}
.fahrten > div > div .wp-block-cover__inner-container a {color: white !important;}

footer a {color:white; text-decoration: none; border-bottom: 1px dotted white; }
footer {width:100%; position: relative; background-color: #cf152d; color:white; 	font-size: calc(var(--base-font-size) - 0.2rem);  }
footer::after{content: url('https://lassak-reisen.de/wp-content/uploads/2025/05/land.svg');
  left: 0;
  top: -140px;
  height: 150px;
  position: absolute;
  background-size: 100% 100%;
  width: 100%;
  background-position: bottom;}





.wpcf7-spinner::before {
  content: '';
  position: absolute;
  background-color: #000;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 100%;
  transform-origin: 8px 8px;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: #23282d;
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 24px;
  position: relative;
}






.angebot-formular {
  background: #fde587;
  padding: 30px;
  border-radius: 8px;
  font-family: sans-serif;
max-width:600px;
}


.angebot-formular a {
color:black;text-decoration:none;border-bottom:1px dotted black;}
.angebot-formular h3 {
  margin-bottom: 20px;
}

.angebot-formular label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
}

.angebot-formular input,
.angebot-formular textarea,
.angebot-formular select {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 1.4;       /* gleiche Innenhöhe */
    box-sizing: border-box; /* garantiert volle Breite inkl. padding */
}


.angebot-formular .cf7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.angebot-formular .cf7-col {
  flex: 1;

}

.angebot-formular .submit-button {
  background-color: #d71925;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

.angebot-formular .submit-button:hover {
  background-color: #b81520;
}

.angebot-formular hr {
  margin: 30px 0;
  border: none;
  border-top: 1px solid #ccc;
}



.type-reise {border:1px solid grey; padding:1em; border-radius:5px;}
.type-reise h2 a {color:black; border-bottom: 0;}



@media screen AND (max-width: 1680px) {
#modal-1-content ul {gap:0;}
}


@media screen AND (max-width: 1530px) {
.top_logo {width:300px !important;}
}


@media screen AND (max-width: 1530px) {
#modal-1-content > ul > li { padding:1.5rem;}


.bus {
  max-width: 40vw;
}

.bus.visible {
  right: -100px;
}

}


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


.bus {
  max-width: 45vw;
}

.bus.visible {
  right: -80px;
}


  header > .nav_bar > div {flex-direction: column; gap: 0;}
  .top_logo {margin-top: 1em !important;}
  .big_teaser {font-size:1.5em;}
    .big_teaser p {text-align: center !important;}
    .decals > div h2 {font-size: 1.5em;}
    .decals img {width: 40px !important;
  height: 40px !important;}

}


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


   .big_teaser {font-size:1.3em;}
   .big_teaser P:last-child {right:0}


  .bus {
  max-width: 55vw;
}

.bus.visible {
  right: -80px;
}

  .time {display: none;}
  .b_bar {justify-content: center;}

}


@media screen AND (max-width: 950px) {
  .decals {flex-wrap: wrap !important;}
  .decals > div {flex-basis: 80% !important; max-width: 80%; margin: auto;}
}


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


  nav {margin-top: 1em !important;}
	
		#modal-1::after {
		background-image: url('https://lassak-reisen.de/wp-content/uploads/2025/06/bautzen.jpg');
		background-size: cover;
		background-position: center;
		width:100%;
		height:120%;
		content:'';
		z-index:-1;
		position: absolute;
		left:0;
		top:0;
		opacity:1;
		z-index:-2;
		

	}



  		#modal-1::before {
		background-color: #ffffff;
		width:100%;
		height:120%;
		content:'';
		z-index:-1;
		position: absolute;
		left:0;
		top:0;
		opacity:0.6;
		z-index:-1;
		

	}



	#modal-1-content {width:100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
    overflow: hidden;
	}


	#modal-1-content a {
color: white !important;
    font-size: calc(var(--base-font-size) +0.2em);
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5em;
    width: 100vw;
    display: block;
  }
	

 #modal-1-content > ul > li {padding: 0.5rem !important}

#modal-1-content ul li {align-items: center;}
#modal-1-content > ul > li > a {font-weight: bold; font-size:1.2em !important;}
header nav div > ul > li:last-child a {background-color: transparent; margin-left: 0;}
#modal-1-content > ul > li > ul {padding-top: 0;}
	

	


	#modal-1-content ul {align-items: center;}
	.wp-container-core-group-is-layout-10 {align-items: center;}



    .wp-block-navigation__container {
        display: none; /* Desktop-Menü ausblenden */
    }
    
     .wp-block-navigation__responsive-container-open {
		padding:1em;
        display: block !important; /* Mobiles Menü einblenden */
		transform: scale(2);
		
		

    }
		

	


  	#modal-1-content li::after {display: none;}


      	#modal-1-content > ul > li > a {font-size: 3em; margin-bottom: 0;}
        #modal-1-content > ul > li > ul {padding-top: 0 !important;}

	#modal-1-content {width:100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}


	.wp-block-navigation__responsive-container-close svg {fill: black; transform: scale(1.2);}


#modal-1-content ul {justify-content: center !important; align-items: center;}
	#modal-1-content li {text-align: center; align-items: center !important; justify-content: center;}










  footer > div {flex-direction: column-reverse; width: fit-content; align-items: flex-start; gap:5px; margin: auto;}
    footer div a { font-size: 1.3em;}
  
  h2 {font-size: 1.8rem;}
  .subheadline {
  color: #cf152d;
  font-size: calc(var(--base-font-size) + 0.1rem);
  }

.fax {
display: none;
}

}



@media screen AND (max-width: 781px) {
  h1, h2, h3, h4, p {text-align: center !important;}
  
.wp-block-image {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}
.bus {
  max-width: 75vw;
}

.bus.visible {
  right: -80px;
}
.bus2 {display: none !important;}

/* Ausnahme: wenn ein Vorfahre .decals ist */
.decals .wp-block-image {
  display: block !important;
  justify-content: unset !important;
  width: auto !important;
}

.pic_l {display: flex; flex-direction: column-reverse;}
.wp-block-buttons {justify-content: center;}
.red_form {
  max-width: 500px !important;
  margin: auto !important;
}



}



@media screen AND (max-width: 940px) {
.b_bar > div {flex-direction: column; width: fit-content; align-items: flex-start; gap:5px;}

}



@media screen AND (max-width: 600px) {
 footer div a {font-size:1em;}
 .decals > div h2 {
    font-size: 1.2em;
    font-weight: 800;
  }
 .trip_headline {padding:0.5em; font-size:1.5em;}

}