/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */

@font-face {
  font-family: 'Averia Serif Libre', cursive;
  src: url('../fonts/Averia Libre/AveriaSerifLibre-Bold.ttf') format('truetype'),
		url('../fonts/Averia Libre/AveriaSerifLibre-BoldItalic.ttf') format('truetype'),
		url('../fonts/Averia Libre/AveriaSerifLibre-Italic.ttf') format('truetype'),
		url('../fonts/Averia Libre/AveriaSerifLibre-Light.ttf') format('truetype'),
		url('../fonts/Averia Libre/AveriaSerifLibre-LightItalic.ttf') format('truetype'),
		url('../fonts/Averia Libre/AveriaSerifLibre-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  
  font-family: 'Overlock', cursive;
  src: url('../fonts/Overlock/Overlock-Black.ttf') format('truetype'),
		url('../fonts/Overlock/Overlock-BlackItalic.ttf') format('truetype'),
		url('../fonts/Overlock/Overlock-Bold.ttf') format('truetype'),
		url('../fonts/Overlock/Overlock-BoldItalic.ttf') format('truetype'),
		url('../fonts/Overlock/Overlock-Italic.ttf') format('truetype'),
		url('../fonts/Overlock/Overlock-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ############################################################ */
/* allgemein 

#353E01 - dunkelblau
#D8E3F2 - babyblau
#7EAED9 - hellblau
#667312 - graublau
#52B9FF - blau 
#592108 - blau für Links

#353E01  tannengrün
#667312  dunkelgrün
#96A72C  helleres Grün
#89862C  Olivgrün
#592108  rotbraun
#CEEF87  lindgrün für Links

/* ############################################################ */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


html, body {
font-family: 'Overlock', cursive;
font-size:62.5%;
line-height:1.5;
font-weight:normal;
height:100%;
}

body {
font-size:1.6rem;
margin: 0 auto;
color:#000000;								/* Schriftfarbe Hauptext */
font-family: 'Overlock', cursive;
}

/* �berschriften */

h1, h2, h3, h4, h5 {
font-family: 'Averia Serif Libre', cursive;
font-weight:normal;
color:#353E01;								/* Schriftfarbe Überschriften */
}

h1 {
font-size:3.2rem;
line-height: 3.5rem;
margin-top: 0rem;
margin-bottom: 4.5rem;
letter-spacing:.0rem;
}

h2 {
font-size:2.5rem;
line-height: 3rem;
margin-top: 0rem;
margin-bottom: 1rem;
letter-spacing:0rem;
}

h3 {
font-size:1.9rem;
color:#96A72C;								/* Schriftfarbe Ausnahme f�r h3 */
line-height: 2.3rem;
margin-top: 0rem;
margin-bottom: 1rem;
letter-spacing: 0rem;
xtext-transform:uppercase;
}




/* allgemeine links  */

a {background-color:transparent;			/* Hintergundfarbe Link */
color:#592108;								/* Schriftfarbe */
text-decoration: underline;
}

a:hover  {color:#667312;					/* Schriftfarbe */
background-color:transparent;				/* Hintergundfarbe Link */
text-decoration:none;
}


/* quelltext-erkl�rungen - wenn vorhanden */


.infokasten {position:relative;
font-size:1.5rem;
padding:0rem 1rem 2rem 1rem;
color:#CEEF87;									/* Schriftfarbe Extra-Box */
background:#592108;							/* Hintergrundfarbe Extra-Box */
font-family: 'Averia Serif Libre', cursive;
margin:0 auto;
margin-bottom:2rem;
text-align:center;
border:dashed 0.1rem black;
}

.infokasten a{
	background-color:transparent;			/* Hintergundfarbe Link */
	color:#96A72C;								/* Schriftfarbe */
	text-decoration: underline;
}

.infokasten a:hover {
	background-color:transparent;			/* Hintergundfarbe Link */
	color:#FFFFFF;								/* Schriftfarbe */
	text-decoration: none;
}

.infokasten .extra {display:inline-block;position:absolute;left:-1.5rem;top:1.5rem;font-size:1.8rem;
color:#fff;font-weight:bold;background:#353E01;padding:0 .5rem;
transform:rotate(-22deg);
}


/* ############################################################ */
/*  speziell*/
/* ############################################################ */

.container_haupt {
margin:0 auto;
width:100%;padding:0rem;
background:#353E01;    					/* Farbe �u�erster Rand */
}

.wrapper {box-shadow:0rem 0rem .2rem #4F4F4F;
border: solid 1rem #DFDFDF;
margin:0 auto;
width:100%;padding:0rem;
}

/* bilder allgemein -anpassen der gr�sse */
img {max-width: 100%;display:inline-block;
margin:0 auto;
height: auto;
}



/* ############################################################ */
/* bereich kopf */
/* ############################################################ */

.kopf-main {
padding:0;
margin:0 auto;
}

.kopf {display:table;
width:100%;
background:#592108;			/* Farbe "Unser Ausflugsplaner komplett, wenn unterschiedliche Farbe dann copy background .... nach -1A und -1B    */
margin: 0 auto;
padding:0;
}

.kopfbox-1a  {
padding:1rem ;
display:block;
text-align:center;
}

.kopfbox-1b  {
display:block;text-align:center;
padding:1rem;
}

.name {display:block;				/* Eigenschaften Schrift "Unser Ausflugsplaner" */
font-family: 'Overlock', cursive;
font-size:2.6rem;
line-height:2.8rem;
letter-spacing:0.2rem;
color:#96A72C;							/* Schriftfarbe Titel �ber Bild oben*/
}

/*  die icons im kopfbereich */
.kopf .icon-liste .fas,
.kopf .icon-liste .fab,
.kopf .icon-liste .far {
font-size:1.5rem;
line-height:1.5rem;
height:1.5rem;
width:1.5rem;
color:#66827E;
margin:.2rem;
}

.kopf .icon-liste ul {
padding:0;
margin:0;
}

.kopf .icon-liste li {display:inline;
padding:0;
margin:.5rem
}


/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.logo-main {
padding:0;
margin:0 auto;background-image:url(../images/urlaub2025_A.jpg);			/* 1600x400 Pixel */
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

.logo {display:table;width:100%;
margin: 0 auto;
padding:0;
}

.logobox-1a  {
padding:2rem ;
display:none;text-align:center;
color: #FFFFFF;					/* Schriftfarbe Hauptmen� */
}

.logobox-1b  {min-height:32rem;
padding:1rem 1rem 1rem 1rem;
display:block;text-align:right;
}

.seitentitel { background:black;color:white;display:inline-block;
padding:.5rem 1rem .5rem .6rem;
margin-bottom:1rem;
}


/* ############################################################ */
/* bereich content */
/* ############################################################ */

.content-main {
padding: 0;
margin:0;
min-height:40rem;
}

.content {background:#96A72C;
margin: 0 auto;
padding:0;
}

.contentbox-1a {
background:#96A72C;					/* Hintergrundfarbe Haupttext-Box */
padding:4rem 2rem ;
display:block;text-align:left;
color: #FFFFFF;
}

.contentbox-1b  {
background:#667312;	/* Hintergrundfarbe rechte Spalte */
display:block;text-align:left;
padding:4rem 2rem 5rem 2rem ;
color: #CEEF87;							/* Schriftfarbe rechte Spalte */
}

.fotostrecke  {font-size:1.4rem;
display: block;text-align:center;
margin:1rem 0;
padding:0rem 0rem ;
color:#353E01;						/* Schriftfarbe Bildunterschriften */
}

.boxen	{
border-color: #353E01;
background: #667312;
border-radius: 1em;
border-width: medium;
border-style: solid;
padding: 1em;
text-align:center;
color: #FFFFFF
}

.boxen a {font-size:1.5rem;			/* Schriftgr��e Links Button */
min-width: 5em;
text-align: center;
color:#353E01;							/* Schriftfarbe Links Button */
text-decoration:none;
padding:0,5rem;							/* Abstand zwischen den Links */
}

.boxen a:hover {
color:#FFFFFF;							/* Schriftfarbe Hoover Button */
text-shadow:none;
background:transparent;
text-decoration: underline;
}

/* ################################# 3 Spalten ##################################################*/

.cs-grid-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0 -15px;
  background: #89862C;					/* Farbe Tagebuch-Kalender */
}
.cs-grid-col-d-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
  width: 33.33333333%;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 15px;
  text-align: center;
  border-right: 3px solid #353E01;		/* Farbe Tagebuch-Kalender-Trennstriche */
}

/* ################################# 3 Spalten Ende##############################################*/

/* ################################# Button ####################################################*/
.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background: #592108;
		border: solid 1px;
		border-radius: 0;
		color: inherit;
		cursor: pointer;
		display: inline-block;
		font-size: 0.7em;
		font-weight: 900;
		letter-spacing: 2px;
		min-width: 5em;
		padding: 0.5em 0;
		line-height: 2.75em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
}
		
.button:hover {
		background: #CEEF87;
		border-color: inherit;
}
		
.button a {font-size:1.3rem;			/* Schriftgr��e Links Button */
min-width: 5em;
text-align: center;
color:#CEEF87;							/* Schriftfarbe Links Button */
text-decoration:none;
padding:0,5rem;							/* Abstand zwischen den Links */
letter-spacing:.2rem;
}

.button a:hover {
color:#FFFFFF;							/* Schriftfarbe Hoover Button */
text-shadow:none;
background:transparent;
text-decoration: underline;
}
/* ################################# Button Ende ###############################################

/* ################################# Video 854*480 - Gut - Codec H.264 ###############################################*/

.responsive-video {
  max-width: 100%;
  height: auto;
}

video {
  height: auto;
  width: 100%;
}

/* ################################# Video Ende ###############################################*/

/* = = = = =  */
/* BILD-SYSTEM  - mit FLOAT */
/* = = = = = */

/*  bild steht links, text fliesst rechts herum  */
.box-text-re {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:0.5rem;
margin-top:0.5rem;
/*border:solid 1rem #596666;
box-shadow:0 0  2px black; */
}

/*  bild steht rechts, text fliesst links herum  */
.box-text-li {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:0.5rem;
margin-top:0.5rem;
/*border:solid 1rem #596666;
box-shadow:0 0  2px black; */
}

.boxkasten {position:relative;
font-size:1.5rem;
padding:1rem 1rem 1rem 1rem;
color:#FFFFFF;									/* Schriftfarbe Extra-Box */
background:#353E01;							/* Hintergrundfarbe Extra-Box */
font-family: 'Overlock', cursive;
margin:0 0 0 0;
/*margin-bottom:2rem;    */
text-align:justify;
}

.boxkasten a{
	background-color:transparent;			/* Hintergundfarbe Link */
	color:#96A72C;								/* Schriftfarbe */
	text-decoration: underline;
}

.boxkasten a:hover {
	background-color:transparent;			/* Hintergundfarbe Link */
	color:#CEEF87;								/* Schriftfarbe */
	text-decoration: none;
}

.boxkasten .extra {display:inline-block;position:absolute;left:-1.5rem;top:1.5rem;font-size:1.8rem;
color:#fff;font-weight:bold;background:#667312;padding:0 .5rem;
transform:rotate(-22deg);
}

/*#############################css kalenderblatt################################################# */
.kalenderblatt {
 position:relative;
 margin:10px;
 padding:0;
 width:10em;
 float:left;
 text-align:center;
 border:1px solid #999;
 font: 50.01% tahoma , arial,helvetica, sans-serif;
 font-weight:bold;
 letter-spacing:2px;
}

.kalenderblatt span {
 display:block;
}
}

.kalenderblatt span.jj , .kalenderblatt span.dd , .kalenderblatt span.mm { /* Jahr  Tag  Monat*/
 line-height:20px;
}

.kalenderblatt span.jj {
 background: #667312;
 color:#FFFFFF;
}

.kalenderblatt span.tt { /* Tag */
 line-height:30px;
 font-size:16px;
 background: #FFFFFF;
 color:#667312;
}

.kalenderblatt span.dd , .kalenderblatt span.mm {
 background: #FFFFFF;
 color:#667312;
 }

.kalenderblatt span.zeichen  {
  position:absolute;
  left:-999px;
}

ul {
list-style: disc;
}

/* ##############################css kalenderblatt - ENDE ############################## */ 

/* bilder im inhaltsbereich -anpassen der gr�sse */

.content .wrapper-bild {display:block;
text-align:center;
margin:0 auto;
}

.content .bild-1_of_1 {max-width: 100%; }

.content .bild-1_of_2 {max-width: 100%; }

.content .bild-1_of_3 {max-width: 100%; }



/*===== menu 2  =====  */

.menu2 ,
.menu2  ul,
.menu2  li {
margin: 0;
padding: 0;
border: 0;
font-family: 'Overlock', cursive;
}

.menu2  {width:100%; }

.menu2 ul { display:block;
text-align:left;padding-left:2.2rem;
}

.menu2 li {
width:100%;
list-style-type: none;
}

.menu2 a {
display : inline;
width : 100%;
text-align:left;
color:#CEEF87;						/* Schriftfarbe Spaltenmen� */
text-decoration: none;
padding:.2rem;
}

.menu2 a:hover {
color:#D8E3F2;							/* Schriftfarbe Hoover Spaltenmen� */
text-shadow:none;
text-decoration: underline;
}

.aktuell a:after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
color:#000000;
padding-left:1rem;
content:"\f00c";  						/* Symbol Haken als aktuell-Anzeiger */
}

/*===== menu 3  =====  */

.menu3 ,
.menu3  ul,
.menu3  li {
margin: 0;
padding: 0;
border: 0;
font-family: 'Overlock', cursive;
}

.menu3  {width:100%; }

.menu3 ul { display:block;
text-align:left;padding-left:2.2rem;
}

.menu3 li {
width:100%;
list-style-type: square;
}

.menu3 a {
display : inline;
width : 100%;
text-align:left;
color:#CEEF87;						/* Schriftfarbe Spaltenmen� */
text-decoration: none;
padding:.2rem;
}

.menu3 a:hover {
color:#D8E3F2;							/* Schriftfarbe Hoover Spaltenmen� */
text-shadow:none;
text-decoration: underline;
}


.aktuell a:after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
color:#FFFFFF;
padding-left:1rem;
content:"\f00c";  						/* Symbol Haken als aktuell-Anzeiger */
}


/* ############################################################ */
/* bereich fusstop */
/* ############################################################ */


.fusstop-main {display:table;width:100%;
padding:0;
margin:0 auto;
color:#fff;
font-size:1.5rem;
line-height:1.7rem;
}

.fusstop {display:table;width:100%;
background:#4f4343;
margin: 0 auto;
padding:0 ;
background-image:url(../images/urlaub2025.jpg);		/* Fusszeilen Bild - 1.600x400 Pixel*/
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

.fusstopbox-1a  {display:block;
background:rgba(40,94,140,.5);
text-align:center;
padding:3rem 1rem ;
}

.fusstopbox-1b  {
display:none;
text-align:center;
padding:3rem 1rem;
}


/*  die icons im fusstopbox-1a  */

.fusstopbox-1a .icon-liste .fas,
.fusstopbox-1a .icon-liste .fab,
.fusstopbox-1a .icon-liste .far {
width:3rem;
line-height:2rem;
color:#fff;
text-shadow: 0 -1px 1px #104B10, 0 1px 1px #104B10;
}

.fusstopbox-1a .icon-liste ul {
padding:0rem;
margin:0;
}

.fusstopbox-1a .icon-liste li {list-style:none;
padding:0rem;
margin:0;
}




/* ############################################################ */
/* bereich fuss */
/* ############################################################ */


.fuss-main {color:#CEEF87;background:#592108;					/* Schrift- und Hintergrundfarbe letzte Zeile */
margin:0 auto;
}

.fuss {display:table;width:100%;
margin: 0rem auto;
padding: 0rem;
}

.fuss-main a {
text-decoration:none;
}

.fussbox-1a  {display:block;
text-align:center;
padding:4rem .5rem 0rem .5rem ;
}

.fussbox-1b  {display:block;
text-align:center;
padding:0rem .5rem 4rem .5rem ;
}

.fussname {display:block;
font-family: 'Overlock', cursive;
text-align:center;
padding:.5rem;
font-size:1.2rem;
line-height:1.5rem;
letter-spacing:0.1rem;
color:#CEEF87;								/* Schriftfarbe Copyright */
}



/* ############################################################ */
/* bereich fussmenu */
/* ############################################################ */


.fussmenu  {width:100%;margin:0 auto;
}

.fussmenu ul {padding:0;margin:0}

.fussmenu li { display:inline;list-style: none;
width:100%;
margin-left:0rem;
padding-left:.5rem;
padding-right:.5rem;
}

.fussmenu a {font-size:1.7rem;			/* Schriftgr��e Links Fusszeile */
width : 100%;
text-align:left;
color:#CEEF87;							/* Schriftfarbe Links Fusszeile */
text-decoration:none;
padding:5rem;							/* Abstand zwischen den Links */
letter-spacing:.2rem;
}

.fussmenu a:hover {
color:#96A72C;							/* Schriftfarbe Hoover Fusszeile */
text-shadow:none;
background:transparent;
text-decoration: underline;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S - BILDSCHIRMABFRAGEN*/
/* ############################################################ */


/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

.container_haupt {padding:2rem 0rem; }

.wrapper {width:90vw;border: solid 1rem #89862C; }					/* Rahmenfarbe Wrapper (zwischen �u�erer Rand und Textfeld)  */


}

html {
font-size:55%;														/* Schriftgr��e Haupttext */
}


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {


.content .bild-1_of_1 {max-width: 80%; }

.content .bild-1_of_2 {max-width: 80%; }

.content .bild-1_of_3 {max-width: 80%; }

/* - - - - -   BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re ,
.content .box-text-li {width: 80%; }
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */

}


/* ==================================== ab 550 pixel ================================== */
@media (min-width: 550px) {

.contentbox-1a ,.contentbox-1b   {
padding:4rem;
}


}


/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {

/* - - - - -   BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re ,
.content .box-text-li
{
width: 50%;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */

}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

html {
font-size:68%;
}

.kopf {height:10rem; }


.kopfbox-1a  {width:65%;
display:table-cell;vertical-align:bottom;
}

.kopfbox-1b  {background:rgba(255,255,255,.6);
width:35%;
display:table-cell;vertical-align:bottom;
}

.content .bild-1_of_1 {max-width: 90%; }

.content .bild-1_of_2 {max-width: 90%; }

.content .bild-1_of_3 {max-width: 90%; }


}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {font-size:70%;}

.wrapper {
width:92vw;
}

.kopfbox-1a  {text-align:right; }

.seitentitel { display:none }

.logo { height:30rem; }

.logobox-1a  {width:65%;
display:table-cell;vertical-align:middle;
}

.logobox-1b  {width:35%;
display:table-cell;vertical-align:middle;
background:rgba(40,94,140,.5);
}

.contentbox-1a  {width:65%;text-align:left;
padding:4rem 2rem 6rem 3rem ;
display:table-cell;vertical-align:top;
}

.contentbox-1b  {width:35%;padding:2rem 1rem 2rem 2rem ;
display:table-cell;vertical-align:top;
font-size:1.3rem;
}

.contentbox-1b h3 {
font-size:1.6rem;
line-height: 1.9rem;
}


.content img {margin:.1rem; }

.content .bild-1_of_1 {max-width: 90%; }

.content .bild-1_of_2 {max-width: 45%; }

.content .bild-1_of_3 {max-width: 31%; }

.fusstopbox-1a  {width:65%;
display:table-cell;vertical-align:middle;
}

.fusstopbox-1b  {width:35%;
display:table-cell;vertical-align:middle;
}

.fusstop {height:20rem; }

/* - - - - - BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re {width: 30%;
float:left;
text-align:justify;
margin-right:2rem;
margin-bottom:0.5rem;
margin-top:0.5rem;
}

.content .box-text-li {width: 30%;
float:right;
text-align:justify;
margin-left:2rem;
margin-bottom:0.5rem;
margin-top:0.5rem;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */

}


/* ==================================== ab 800 pixel ================================== */
@media (min-width: 800px) {

html {font-size:78%;}

}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

html {
font-size:80%;}


.kopfbox-1a , .logobox-1a , .contentbox-1a,.fusstopbox-1a  {width:70%; }

.kopfbox-1b , .logobox-1b , .contentbox-1b,.fusstopbox-1b  {width:30%; }

/* - - - - -  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re {
margin-right:3rem;
margin-bottom:0.5rem;
margin-top:0.5rem;
}

.content .box-text-li{
margin-left:3rem;
margin-bottom:0.5rem;
margin-top:0.5rem;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */

}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

.wrapper {width:90vw; }

}


/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

html {font-size:72%; }

}


/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html {font-size:80%; }

.wrapper {width:80vw; }

}


/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */