/* CSS Document */

/*Suchformulare*/
form {font-size: 1.2em;}
form {padding-bottom: 0;}
select {width: 98%; font-size: 1.1em;}
input[type="number"] {width: 98%; font-size: 1.1em;}
input[type="submit"] {width: 98%; font-size: 1em; padding: 6px 0;}
input[type="checkbox"] {width: 20px; height: 20px; position: relative; top:2px;}
input[type="radio"] {width: 20px; height: 20px; position: relative; top:2px;}

#werbeeintrag textarea {display: block; width: 100%; min-height: 5em; margin-left: 0;}
#werbeeintrag input[type="text"] {width:100%; font-size: 1.2em; margin-bottom: 8px;}
#werbeeintrag input[type="number"] {width:100%; font-size: 1.2em; margin-bottom: 8px;}
#werbeeintrag input[type="url"] {width:100%; font-size: 1.2em; margin-bottom: 8px;}
#werbeeintrag input[type="tel"] {width:100%; font-size: 1.2em; margin-bottom: 8px;}
#werbeeintrag input[type="email"] {width:100%; font-size: 1.2em; margin-bottom: 8px;}

/*pauschalen*/
#form1 input, textarea {width:90%; margin-left:1em;}
#form1 input[type="submit"] {font-size: 1em; padding: 6px 0; margin-left: 12px;}


/* fuer tabelle pauschalangebote */

#liste_pauschalen th {display:none;}

#liste_pauschalen td {display:block;}

#liste_pauschalen img {float:right; margin-left:5px; margin-top:6px;}

#liste_pauschalen .preis {border-bottom:1px #006633 solid; margin-bottom:5px; padding-bottom:5px;}

/* Ende Tabelle Pauschalangebote */

/* fuer tabelle kurorte */

#kurorte th {display:none;}

#kurorte td {display:block;}

#kurorte .praedikat {border-bottom:#006633 solid 1px; margin-bottom:5px; padding-bottom:5px;}

#kurorte caption {text-align:left;}

/* Ende Tabelle kurorte */


body {
	background-color: #79c4fd;
	font-family: "Avenir Next", "Avenir", sans-serif;
    overflow-x: hidden;
	}
p, th, td {
	}
p {padding: 0 0.2em 0 0.2em;}
.gastgeber_links ul {
	list-style:none;
	margin: 0 0 1em 0;
	padding: 0em 0.2em 0em 0.2em;
}
.gastgeber_links li {margin-bottom: 0.7em; border-radius: 3px; padding: 4px 4px 4px 35px; background-image: url("../hotel.png"); background-position: 0px; background-repeat: no-repeat; background-color: #b8e095;
}
.gastgeber_links a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}

.externe_links ul {
	list-style:none;
	margin: 0 0 1em 0;
	padding: 0em 0.2em 0em 0.2em;
}
.externe_links li {margin-bottom: 0.7em;  border: 1px #006400 solid; border-radius: 3px; padding: 4px 4px 4px 35px; background-image: url("../pfeil-extern.png"); background-position: 8px; background-repeat: no-repeat;
}
.externe_links a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}

.weiterfuehrender_link ul {
	list-style:none;
	margin: 0 0 0 0;
	padding: 0em 0.2em 0em 0.2em;
}
.weiterfuehrender_link li {margin-bottom: 0.7em;  border: 1px #006400 solid; border-radius: 3px; padding: 4px 4px 4px 35px; background-image: url("../pfeil.png"); background-position: 8px; background-repeat: no-repeat;
}
.weiterfuehrender_link a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}

.zurueck_link ul {
	list-style:none;
	margin: 0 0 0 0;
	padding-left: 0;
}
.zurueck_link li {margin-bottom: 0.7em;  border: 1px #006400 solid; border-radius: 3px; padding: 4px 4px 4px 30px; background-image: url("../pfeil-zurueck.png"); background-position: 8px; background-repeat: no-repeat;
}
.zurueck_link a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}


h1 {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #006400;
	background-color: #EEEEEE;
	padding: 0.3em 0;
	text-align: center;
    margin: 0.3em 0em 0.3em 0em;
	}
h2, caption {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #006400;
	background-color: #EEEEEE;
	padding: 0.3em 0em 0.3em 0.2em;
	}
h3 {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #006400;
	padding: 0.3em 0em 0.3em 0.2em;
	text-decoration: none;
	}
.kein_rand {
	border: 0;
}
.bild_links_300 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_220 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_300 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bild_hochformat_rechts_300 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bild_hochformat_links_300 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_250 {
	margin-bottom: 20px;
	padding: 0.2em;
	font-size: 1em;
	font-style: italic;
}
.bildle {
	display: none;
	margin: 0px;
	padding: 0px;
	border: 0;
}
.stichwortformular {
	color: #000000;
	background-color: #A1E1A1;
	padding:0.3em;
	margin-bottom:0.3em;
	margin-top:0.3em;
}
.empfehlung {
	 display: block;
	 border: solid #006600;
	 border-width: 1px;
	 padding: 2px;
	 background-color:#FFFFFF;
	 text-align: left;
	 font-size: 0.85em;
	 margin-bottom: 1em;
}
.werbungunten {
	display: block;
	color: #000000;
	background-color: #FFFFFF;
	font-size:1em;
}
.linksunten {
	display: block;
	padding: 0.2em;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
.rechtsunten {
	display: block;
	padding: 0.2em;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
#linkehaelfte {
	display: block;
	padding: 0em;
	color: #000000;
	background-color: #FFFFFF;
}
#rechtehaelfte {
	display: block;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
#linkesdrittel {
	display: block;
	padding: 0.2em;
	color: #000000;
	background-color: #FFFFFF;
}
#mittleresdrittel {
	display: block;
	padding: 0.2em;
	color: #000000;
	background-color: #FFFFFF;
}
#rechtesdrittel {
	display: block;
	padding: 0.2em;
	color: #000000;
	background-color: #FFFFFF;
}
header {
	display:block;
    position: relative;
	margin-bottom: 0.3em;
	background-color: #FFFFFF;
	height: 60px;
    border-radius: 5px;
    z-index: 10;
}
.english_flag  {display:none; position: absolute;}
.deutsch_flag  {display:none; position: absolute;}
#fusszeile {
	display: block; position: relative; top:-6px;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 0.8em;
	padding: 0.6em 0.3em 0.3em 0.3em;
    border-radius: 5px;
	}
#direkt_zu_gastgeber {
	display: block; position: relative; top:-9px;
	color: #000000;
    background-color: #ffffff;
	font-size: 0.8em;
	padding: 0 0 0.3em 0.3em;
    margin-bottom: 0.3em;
    border-radius: 5px;
	}
  #direkt_zu_gastgeber a {display: inline-block; line-height: 2em; padding: 1px 7px 1px 35px; text-decoration: none; color: black; border: 0; border-radius: 3px; background-image: url("../hotel.png"); background-position: 0px; background-repeat: no-repeat; background-color: #b8e095; margin: 10px 10px 2px 0;}

#inhalt {
	display: block;
	background-color: #FFFFFF;
	padding:0.3em 0;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
    border-radius: 5px;
}
#inhalt li {
	margin-bottom: 0.3em;
}
#inhalt li li {
	margin-bottom: 0.3em;
	margin-top: 0.3em;
	font-size: 1em;
}
#stichwortsuche {
	display: block;
	text-align:center;
	margin-bottom:0.3em;
	margin-top:0.3em;
	font-size: 0.8em;
	font-weight: bold;
}
#spalte_rechts {
	padding: 0.6em 0.3em 0.3em 0.3em;
	background-color: #FFFFFF;
    border-radius: 5px;
}
#weiteres {
	display:block;
	padding: 0.2em;
	margin-bottom:0.3em;
	margin-top:0.3em;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
#weiteres_startseite {
	display:block;
	padding: 0.2em;
	margin-bottom:0.3em;
	margin-top:0.3em;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
#weiteres ul {
	list-style:none;
	margin: 0 0 0 0;
	padding-left: 0;
}
#weiteres li {margin-bottom: 0.7em;  border: 1px #006400 solid; border-radius: 3px; padding: 4px 4px 4px 30px; background-image: url("../pfeil.png"); background-position: 8px; background-repeat: no-repeat;
}
.attraktionen li {margin-bottom: 0!important;  border: none!important; border-radius: 3px; padding: 4px 4px 4px 30px; background-image: url("../punkt.png")!important; background-position: 8px; background-repeat: no-repeat;}
#attraktionen li {background-image:url("../punkt.png"); background-position: 4px; border: none; margin-bottom: 0;}
#weiteres a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}
#weiteres ul ul {
	font-size: 0.8em;
	margin-top: 1em;
}
.verschachtelte_liste {margin-left: 10px; font-size: 1em;}

.pfeilliste ul {
	list-style-image: url(../pfeil.gif);
	margin: 0 0 0 15px;
	padding-left: 0;
}
.pfeilliste li {
	padding-bottom: 0.4em;
}
.zentriert {
	text-align: center; margin: auto;
}
#unten {
	display: block;
	color: #000000;
	background-color: #FFFFFF;
	padding: 0.3em;
}

.break_both {clear:both; margin-top:0.6em;}
.break_left {clear:left;}
.break_right {clear:right}

/* Ab hier die Änderungen für mobile Site */

#buttons {display:block; float:right; text-align:right; max-width:150px;}
.g-plusone {display:block; border:none; overflow:hidden; width:85px; height:25px;}
.fb-like {display:block; border:none; overflow:hidden; width:120px; height:25px; margin-right:30px; margin-top:5px;}

.deutsch {display:inline; width:30px; margin:3px 3px 0 0;}
.english {display:inline; width:30px; margin-right:3px;}

img {max-width:100%; height:auto;}

.untertitel {
	display:block;
}

#inhaltsverzeichnis {
	display: block;
	background-color: #FFFFFF;
	padding: 0.3em;
	margin-bottom:0.3em;
	margin-top:0.3em;
	color: #000000;
}
#inhaltsverzeichnis ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}
#inhaltsverzeichnis li {
	text-align: left;
	}
#inhaltsverzeichnis a {
	display: block;
	background-color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap;
	margin: 0px 0 3px 0px;
	padding: 3px;
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
	border-bottom: 2px solid #666666;
	border-right: 2px solid #666666;
}
#logo {width:45px; margin:6px;}
#schwarzwaldlogo {width:45px; margin:6px; float: left;}

.werbebanner {
	 display: block;
	 border: solid #006600;
	 border-width: 1px;
	 padding: 2px;
	 background-color:#FFFFFF;
	 max-width:258px;
	 text-align: left;
	 font-size: 0.85em;
	 margin-bottom: 1em;
}
.werbungunten {
	display: block;
	color: #000000;
	background-color: #FFFFFF;
    border-radius: 5px;
}
.werbungunten_gastgeber {display: block; margin-bottom:0.2em; color: #000000; background-color: #FFFFFF; border-radius: 5px;}
/* Galerie Vorschau-Bildle */

.small_images {display:block; max-width:120px; height:120px; overflow:hidden; float:left; padding:2px; margin:2px; font-size:1em;}

/*Banner Startseite u.a. */
.banner_grafik {display:block; width: 43%; max-width: 160px; float:left; margin-bottom:15px; margin-right:15px;}
.banner_grafik_l {display:block; width: 47%; float:left; margin-bottom:15px; margin-right:15px;}
.banner_grafik_r {display:block; width: 47%; float:right; margin-bottom:15px;}

/*Banner quer Startseite */
.banner_quer {display: block; width: 234px; height: 60px; margin: auto;}

/* für Blog */

#content {background-color: #FFFFFF; padding:0 3px 0 3px;}

/* Seiten Titel wird nur auf mobiler Website angezeigt */
#mobil-titel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #008000;
	text-align: center;
	text-shadow: 0 -2px 2px #FFFFFF, 0 2px 2px #666666;
}
/* Bilder im Blog anpassen*/
.wp-caption {font-style:italic; font-size:0.9em; text-align:left; max-width:100%; height:auto;}
.alignright {margin-left:0;}
#commentform textarea {
	max-width: 100%;
	padding: 2px;
	}

/* Formular bei Pauschalen*/


/* Formular bei Eintrag-Formularen */


/*Neue Navigation 2019*/
nav {
}

nav a
{
  font-family: "Avenir Next", "Avenir", sans-serif;
  text-decoration: none;
  color: #232323;
  width:100%; display: block; padding: 7px 0 7px 5px; border-top: 1px solid #006400;
  transition: color 0.3s ease;
}

.letzte_menu_item {border-bottom: 1px solid #006400;}

nav a:hover
{
  color:#006400; background-color: white;
}

#menuToggle
{
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  
  z-index: 2;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0;
  z-index: 4;
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #006400;
  border-radius: 3px;
  
  z-index: 2;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

nav #menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

nav #menu
{
  position: absolute; display: none;
  width: 250px;
  margin: -100px 0 0 0;
  padding: 20px;
  padding-top: 125px;
  right: -100px;
  background: rgba(220,220,220,0.95);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
nav #menu li
{
  padding: 0;
  font-size: 18px;
}
#menuToggle input:checked ~ #menu
{display: block;}

#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}
/*Stichwortformular*/
#stichwortsuche_schwarzwald {display: block; float: right; margin-right: 80px; margin-top: 18px; width: 50%; text-align: right;}

#stichwort {position: relative; top: -4px;
  width: 75%;
  border: none;
  border-bottom: 2px solid #999;
  font-size: 1.1em;
  transition: width 0.5s ease-in-out;
}
 
#stichwort:focus {
  width: 75%;
    font-size: 1.1em;
}

#keyword {position: relative; top: -4px;
  width: 75%;
  border: none;
  border-bottom: 2px solid #999;
  font-size: 1.1em;
  transition: width 0.5s ease-in-out;
}
 
#keyword:focus {
  width: 75%;
    font-size: 1.1em;
}

.lupe_farbe {color:#006400;}

@media (max-width:500px) {
    .bild_hochformat_rechts_300 img {width: 100%;}
    .bild_hochformat_links_300 img {width: 100%;}
}