/* CSS Document */
/*
.gammlerball {display: block; max-width: 1000px; margin: auto;}
.gammlerball_text {display: block; width: 450px; float: right;}
*/
body {
background-color: #79c4fd;
	color: #000000;
	font-family: "Avenir Next", "Avenir", sans-serif;
    overflow-x: hidden;
	}
p, th, td {
	font-size: 1em;
	}
/*bildgrößen*/
.bild500x375 {width: 500px; height: 375px;}
.bild375x500 {width: 375px; height: 500px;}
.bild220x270 {width: 220px; height: 270px;}

#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; background-image: url("../punkt.png")!important; background-position: 0 3px!important; background-repeat: no-repeat;}

#attraktionen li {background-image:url("../punkt.png"); background-position: 4px 2px; border: none; margin-bottom: 0;}
#weiteres a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}
	.banner_quer_gastgeber {width: 320px; height: 80px;}
    .gastgeber_links {width:45%; max-width: 500px; margin-bottom: 1em;}
    .gastgeber_links_indexseite {width:90%; max-width: 1000px;}
.verschachtelte_liste {margin-left: 10px; font-size: 0.9em;}

.gastgeber_links ul {
	list-style:none;
	margin: 0 0 0 0;
	padding-left: 0;
}
.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: #cfe6cf;
}
.gastgeber_links a {display: block; width: 90%; padding: 3px; text-decoration: none; color: black;}

.externe_links ul {
	list-style:none;
	margin: 0 0 0 0;
	padding-left: 0;
}
.externe_links {width:45%; max-width: 500px; margin-bottom: 1em;}
.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;}
.externer_link_imtext {border: 1px #006400 solid; border-radius: 3px; padding: 2px 4px 3px 30px; line-height: 2em; background-image: url("../pfeil-extern.png"); background-position: 3px; background-repeat: no-repeat; text-decoration: none!important; color: black;}


.weiterfuehrender_link {width:45%; max-width: 500px; margin-bottom: 1em;}
.weiterfuehrender_link ul {
	list-style:none;
	margin: 0 0 0 0;
	padding-left: 0;
}
.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;}

.weiterfuehrender_link_imtext {border: 1px #006400 solid; border-radius: 3px; padding: 2px 4px 3px 30px; line-height: 2em; background-image: url("../pfeil.png"); background-position: 3px; background-repeat: no-repeat; text-decoration: none!important; color: black;}

.zurueck_link {width:45%; max-width: 500px;}
.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;}



#logo {display: block; float: left; width:160px; height:178px;}
#schwarzwaldlogo {display: block; float: left; width:160px; height:178px;}

#kurorte caption {text-align:left;}
#kurorte td {padding:5px;}
#kurorte th {text-align:left; padding:5px;}

h1 {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1.8em;
	font-weight: bold;
	color: #006400;
	background-color: #EEEEEE;
	text-align: center;
	margin-top: 0.5em;
	}
h2, caption {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #006400;
	}
h3 {
	font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #006400;
	padding: 6px 0 6px 0;
}
.kein_rand {
	border: 0;
}
.foto {max-width:100%; height: auto;}
img {max-width: 100%; height: auto;}
.bild_links_300 {
	float: left;
    width: 45%;
    max-width: 500px;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_220 {
	width: 220px;
	float: right;
	text-align: left;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px 2px 2px 22px;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_300 {display: block;
	float: right;
    width: 45%;
    max-width: 500px;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px 2px 2px 22px;
	font-size: 1em;
	font-style: italic;
}
.bild_hochformat_rechts_300 {
	float: right;
    width: 45%;
	max-width: 375px;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px 2px 2px 22px;
	font-size: 1em;
	font-style: italic;
}
.bild_hochformat_links_300 {
	float: left;
    width: 45%;
	max-width: 375px;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px 22px 2px 2px;
	font-size: 1em;
	font-style: italic;
}
.bild_rechts_250 {
	float: right;
	width: 250px;
	margin: auto;
	margin-bottom: 2em;
	padding: 2px 2px 2px 22px;
	font-size: 1em;
	font-style: italic;
}
.bildle {
    display: none;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	border: 0;
	width:0; height:0;
}
input {font-family: Arial, Helvetica, sans-serif; font-size:1.2em;}
select {font-family: Arial, Helvetica, sans-serif; font-size:1.2em;}
.untertitel {
	display: inline;
	float: left;
	margin: 0 1em 0 0;
	padding: 0.2em;
	color: #000000;
	background-color: #A1E1A1;
}
.werbebanner {
	 display: block;
	 border: solid 1px #006600;
	 padding: 2px;
	 background-color:#FFFFFF;
	 min-height: 160px;
	 text-align: left;
	 font-size: 0.85em;
	 margin-bottom: 1em;
}
.empfehlung {
	 display: block;
	 border: solid #006600;
	 border-width: 1px;
	 padding: 2px;
	 background-color:#FFFFFF;
	 width: 154px;
	 min-height: 160px;
	 text-align: left;
	 font-size: 0.85em;
	 margin-bottom: 1em;
}
.werbungunten {
	display: block;
	height: 100%;
	margin-left: 179px;
	margin-right: 179px;
	margin-top: 0.3em;
	border: solid #999999 1px;
	color: #000000;
    background-color: #ffffff;
}
.werbungunten_gastgeber {display: block; height:86px; margin-top: 3em; margin-bottom:3em; border: solid #999999 1px; color: #000000;}
.linksunten {
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 1%;
	width: 47%;
	color: #000000;
}
.rechtsunten {
	display: block;
	float: left;
	padding: 0.2em;
	width: 47%;
	color: #000000;
}
.rechtsunten_gastgeber {
	display: block;
	float: left;
	padding: 0.2em;
	width: 47%;
	color: #000000;
}
#linkehaelfte {
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 1%;
	width: 47%;
	color: #000000;
}
#rechtehaelfte {
	display: block;
	float: left;
	padding: 0.2em;
	width: 47%;
	color: #000000;
}
#linkesdrittel {
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 1%;
	width: 30%;
	color: #000000;
}
#mittleresdrittel {
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 1%;
	width: 30%;
	color: #000000;
}
#rechtesdrittel {
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 1%;
	width: 30%;
	color: #000000;
}
header {
	display: block; position: relative; z-index: 3; background-color: #ffffff;
	height: 178px;
	padding: 0.3em 1em 0.3em 0.3em;
	margin-bottom: 0.5em;
	font-size: 0.8em;
	color: #000000;
	border: solid #999999 1px;
}
.flaggen {display:block; position: absolute; float:right; margin-top: 20px; margin-right: 130px;}
.english_flag  {display:block; width: 48px; height: 24px; position: absolute; right: 350px; top:24px;}
.deutsch_flag  {display:block; width: 48px; height: 24px; position: absolute; right: 420px; top:24px;}

#fusszeile {
	display: block;
	margin-left: 179px;
	color: #000000;
    background-color: #ffffff;
	font-size: 0.8em;
	padding: 0.3em;
	border: solid #999999 1px;
	}
#direkt_zu_gastgeber {
	display: block; position: relative;
	margin-left: 179px;
	color: #000000;
    background-color: #ffffff;
	font-size: 1em;
	padding: 0.3em;
    margin-bottom: 0.3em;
	border: solid #999999 1px;
	}
#direkt_zu_gastgeber a {display: inline; line-height: 2em; padding: 4px 7px 4px 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: #cfe6cf; margin: 10px 10px 0 0;}

#inhalt {
	display: block;
	height: 100%;
	margin-left: 179px;
	padding: 0.3em;
	border: solid #999999 1px;
	color: #000000;
    background-color: #ffffff;
    margin-bottom: 0.3em;
}
#inhalt li {
	margin-bottom: 0.3em;
	font-size: 1em;
}
#inhalt li li {
	margin-bottom: 0.3em;
	margin-top: 0.3em;
	font-size: 1em;
}
#inhaltsverzeichnis {
	display: block;
	position: absolute;
	left: 186px;
	top: 1em;
	padding: 0.3em;
	color: #000000;
}
#inhaltsverzeichnis ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}
#inhaltsverzeichnis li {
	float: left;
	text-align: center;
	font-size:1.1em;
	}
#inhaltsverzeichnis a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap;
	margin: 0px 3px 10px 0px;
	padding: 0px 3px 0px 3px;
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
	border-bottom: 2px solid #666666;
	border-right: 2px solid #666666;
}
#inhaltsverzeichnis a:hover {
	border-top: 2px solid #666666;
	border-left: 2px solid #666666;
	border-bottom: 1px solid #666666;
	border-right: 1px solid #666666;
}
#spalte_rechts {
	display: block; background-color: white; z-index: 1;
	text-align: center;
	position: absolute;
	width: 160px;
	top: 202px;
	right: 0.5em;
	padding: 0.3em 0.3em 0.3em 0.3em;
	color: #000000;
	border: solid #999999 1px;
}
#weiteres {
	position: absolute;
	top: 202px;
	left: 8px;
	width: 160px;
	padding: 0 0.3em 0.3em 0.3em;
	color: #000000;
    background-color: #ffffff;
	border: solid #999999 1px;
}
#weiteres_startseite {
	position: absolute;
	top: 202px;
	left: 8px;
	width: 160px;
	padding: 0.3em 0.3em 0.1em 0.3em;
	color: #000000;
    background-color: #ffffff;
	border: solid #999999 1px;
}

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

#buttons {display:block; width:100px; position:absolute; top:163px; right:0.3em;}
.deutsch {display:inline; width:40px; margin:0 5px 0 0;}
.english {display:inline; width:40px;}
.g-plusone {display:block; position:relative; border:none; overflow:hidden; width:85px; height:25px;}
.fb-like {border:none; overflow:hidden; width:114px; height:20px; margin-right:74px; bottom:2px;}

.break_both {clear:both;}
.break_left {clear:left;}
.break_right {clear:right}

/* Galerie Vorschau-Bildle */

.kleine_bilder {display:block; width:160px; height:130px; float:left; padding:2px; margin:2px; font-size:0.7em;}

.banner_grafik {display:block; margin-bottom:9px; width:100%;}
.banner_grafik_l {display:block; margin-bottom:9px; width:100%;}
.banner_grafik_r {display:block; margin-bottom:9px; width:100%;}

/* Seiten Titel für mobile Website ausblenden */
#mobil-titel {display:none;}

/* Lupe in Fotos einblenden */
.zoom::before {content: url(/grafiken/lupe.png); position:absolute; margin:5px 0 0 5px;}

/* Formular bei Eintrag-Formularen */

#werbeeintrag textarea {min-width:18em; min-height: 5em; max-width:90%; margin-left:0; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em;}
#werbeeintrag input[type="text"] {min-width:18em; max-width:90%; margin-left:0;}
#werbeeintrag input[type="tel"] {min-width:18em; max-width:90%; margin-left:0;}
#werbeeintrag input[type="email"] {min-width:18em; max-width:90%; margin-left:0;}
#werbeeintrag input[type="number"] {min-width:18em; max-width:90%; margin-left:0;}

/*Neue Nav 2019*/

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: 4;
  
  -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; /* hide this */
  z-index: 6; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #006400;
  border-radius: 3px;
  
  z-index: 4;
  
  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%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
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;
  /* to stop flickering of text in safari */
  
  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;}

#stichwort {
  width: 10em;
  border: none;
  border-bottom: 2px solid #999;
  font-size: 1.4em;
  transition: width 0.5s ease-in-out;
}
 
#stichwort:focus {
  font-size: 1.4em;
  width: 10em;
}

.lupe_farbe {color:#006400;}
.lupe_stichwortsuche {width:26px; height: 24px;}


.banner_vettererhof {margin-right: 0.3em;}
.banner_gruenerwald {margin-right: 0.3em; border-bottom: solid 5px #79c4fd; border-left: solid 5px #79c4fd}
.platz_fuer_banner_gruenerwald {margin-right: 187px;}

/* Für große Bildschirme nicht 100% Breite */
@media (min-width: 1350px) {
    body {width: 1300px; margin: auto;}
    #weiteres {
	position: absolute;
	top: 200px;
    left: inherit;
	width: 160px;
	padding: 0 0.3em 0.3em 0.3em;
	color: #000000;
    background-color: #ffffff;
	border: solid #999999 1px;}
    header {margin-top: 0.5em;}
    #fusszeile {margin-bottom: 0.5em;}
}