:root{
	--background: #ededed;
	--header-footer: #9c9c9c;
	--link: #00248f;
	--border-color: solid #0000ff 2px;
	--box-shadow: #f0f0f0;
	
	--black: #36383f;
	--white: #ffffff;
	--blue: #0000ff;
	
	--bright-gray: #ededed;
	
	--medium-gray: #dddddd;
	
	--dark-gray: #9c9c9c;
	--dark-red: #800000;
	--dark-blue: #0000ff;
	
	--spacer: 1rem;
	--outline: 2px solid var(--dark-red);
}

*{margin: 0; padding: 0; box-sizing: border-box;}
*::before, *::after {box-sizing: border-box;}

body, html {font: Helvetica, Verdana, serif; hyphens: auto; font-size: 21px; background-color: var(--background); scroll-behavior: smooth;}

h1, h2, h3, h4 {color: var(--dark-red); padding-bottom: 10px;}
h1, h2 {text-align: center;}
h3, h4 {text-align: left;}

p {padding-bottom: 22px;}
.p_bold_red {font-weight: bold; color: var(--dark-red);}
hr {margin: 10px; padding: 2px; background-color: var(--dark-gray);}

a {text-decoration: none; color: var(--link); font-weight: bold;}
a:hover {color: var(--dark-red);}

.link {text-decoration: none; color: var(--link); font-weight: bold;}

/* Header-Menü */
.header {background-color: var(--header-footer); box-shadow: 1px 1px 1px 4px var(--box-shadow); width: 100%; z-index: -1;}
.header ul {margin: 0; padding: 0; list-style: none; overflow: hidden;}
.header ul a {display: block; padding: 10px; border-right: 1px solid var(--bright-gray); text-decoration: none; font-weight: bold; color: var(--link);}
.header ul a:hover {background-color: var(--medium-gray); color: var(--dark-red);}
.header a.active {background-color: var(--bright-gray); color: var(--black); border-left: 2px solid var(--dark-gray); border-right: 2px solid var(--dark-gray);}
.header ul li {min-width: 140px; text-align: center;}

/* Hamburger-Menü Anfang*/
.header .menu {clear: both; max-height: 0; transition: max-height .5s ease-out;}
.header .menu-icon {margin: 5px 5px 0 0; padding: 37px 20px; position: relative; float: right; cursor: pointer; border: 3px solid var(--dark-gray); border-radius: 10px;}
.header .menu-icon:hover {background-color: var(--bright-gray);}
.header .menu-icon .nav-icon {background: var(--black); display: block; height: 2px; width: 30px; position: relative; transition: background .2s ease-out;}
.header .menu-icon .nav-icon:before {background: var(--black); content: ""; display: block; height: 100%; width: 100%; position: absolute; transition: all .2s ease-out; top: 5px;}
.header .menu-icon .nav-icon:after {background: var(--black); content: ""; display: block; height: 100%; width: 100%; position: absolute; transition: all .2s ease-out; top: -5px;}
.header .menu-btn {display: none;}
/* Höhe des mobilen Menüs */
.header .menu-btn:checked ~ .menu {max-height: 340px;}
.header .menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before {transform:rotate(-45deg); top: 0;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after {transform:rotate(45deg); top: 0;}
/* Hamburger-Menü Ende*/

/* Top-LOGO */
.top-logo img {height: 90px; padding: 10px 0 5px 35px;}

/* Navigation bar links ausgerichtet */
.navbar a {color: white; width: 200px; padding: 14px 20px; text-decoration: none; text-align: center;}
.navbar a:hover {background-color: #ddd; color: var(--black);}

/* Angaben zu Bildern */
.article-picture {height: auto; margin-bottom: 20px; margin-right: 25px; float: left;}
.container-toppicture {display: block; margin-left: auto; margin-right: auto; height: auto; margin-bottom: 20px;}
.wappen-bild {margin-bottom: 20px; margin-right: 25px; float: left;}
.shadow {box-shadow: 10px 10px 10px gray;}
.laenderwappen {width: auto; max-height: 50px; float: left; margin-right: 15px;}

/* Umfassender Container */
.container {display: flex; flex-wrap: wrap;}
.container ul {padding-left: 50px;}
.two_not_visible, .three_not_visible, .four_not_visible {opacity: 0;}
/* Boxengröße für umfassenden Container - allgemein */
.one, .two, .three, .four {background-color: var(--medium-gray); margin: 1% 1%; padding: 20px;}
.one {flex: 100%;}
.two {flex: 48%;}
.three {flex: 29%;}
.three_bottom {flex: 32%;}
.four {flex: 20%;}

/* Animierter Button */
.btn {display: inline-block; cursor: pointer; text-decoration: none; font-size: inherit; border: 0; line-height: 1; min-width: 100%; padding: 12px 24px; display: flex; justify-content: center; align-items: center;}
.btn-1 {color: var(--dark-red); outline: var(--outline); border: var(--outline); outline-offset: -2px; transition: outline-offset 200ms ease;}
.btn-1:hover, .btn-1:focus {background-color: var(--bright-gray); outline: var(--outline); outline-offset: 2px;}

.footer {background-color: var(--header-footer); padding: 25px; box-shadow: 1px 1px 1px 4px var(--box-shadow); width: 100%; z-index: -1;}

/* Tooltipp */
.tooltip {position: relative; display: inline-block; cursor: pointer; border-bottom: 1px dotted var(--link);}
.tooltiptext {visibility: hidden; width: 180px; background-color: var(--bright-gray); color: var(--black); font-size: 15px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%;
left: 50%; margin-left: -90px; opacity: 0; transition: opacity 0.3s;}
.tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--link) transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}

/* Flipbox allgemein */
.inner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d;}
.flip_box:hover .inner {transform: rotateY(180deg);}
.front, .back {position: absolute; width: 100%; height: 100%; border-radius: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

/* Button to Top */
/* Standard-Stil für den Button */
.to-top-button {position: fixed; bottom: 20px; right: 20px; padding: 10px 15px; text-align: center; text-decoration: none; font-weight: bolder; background-color: var(--header-footer); color: var(--dark-blue);
	display: inline-block; font-size: 20px; cursor: pointer; border: 2px solid var(--black); border-radius: 5px; transition: background-color 0.3s ease; border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.to-top-button:hover {background-color: var(--background); color: var(--dark-red); border: 2px solid var(--black);}


@media (max-width: 1010px) {

h1 {font-size: 28px;}
h2 {font-size: 26px;}
h3 {font-size: 24px;}
h4 {font-size: 22px;}

.header ul a {border-bottom: 1px solid var(--bright-gray);}

.container {flex-direction: column;}
.two_not_visible, .three_not_visible, .four_not_visible {margin: 0; padding: 0;}
.three_bottom {border-bottom: 2px solid gray; padding: 10px 0;}

.article-picture, .container-toppicture {max-width: 250px;}
.wappen-bild {max-width: 100px;}

/* Bild-Flipp-Box */ 
.flip_box {width: 200px; height: 111px; perspective: 1000px; margin-left: auto; margin-right: auto; float: left; margin: 8px 20px 10px 5px;}
.back_ausflug_01, .back_ausflug_02, .back_ausflug_03, 
.back_gasthaus_01, .back_gasthaus_02, .back_gasthaus_03, 
.back_stadt_01, .back_stadt_02,
.back_unterkunft_01 {transform: rotateY(180deg);}

/* Ausflugsziele */
.front_ausflug_01 {background: url(../images/ausflugsziele/rheinland-pfalz/deutsches-weintor-small.jpg) 0 0 no-repeat;}
.back_ausflug_01 {background: url(../images/ausflugsziele/rheinland-pfalz/deutsches-weintor-back-small.jpg) 0 0 no-repeat;}
.front_ausflug_02 {background: url(../images/ausflugsziele/baden-wuerttemberg/titisee-neustadt-small.jpg) 0 0 no-repeat;}
.back_ausflug_02 {background: url(../images/ausflugsziele/baden-wuerttemberg/titisee-neustadt-back-small.jpg) 0 0 no-repeat;}
.front_ausflug_03 {background: url(../images/ausflugsziele/rheinland-pfalz/pfaelzer-wald-small.jpg) 0 0 no-repeat;}
.back_ausflug_03 {background: url(../images/ausflugsziele/rheinland-pfalz/pfaelzer-wald-back-small.jpg) 0 0 no-repeat;}

/* Gaststätten */
.front_gasthaus_01 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-gaststube-stichel-fritz-small.jpg) 0 0 no-repeat;}
.back_gasthaus_01 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-gaststube-stichel-fritz-back-small.jpg) 0 0 no-repeat;}
.front_gasthaus_02 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-zur-linde-small.jpg) 0 0 no-repeat;}
.back_gasthaus_02 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-zur-linde-back-small.jpg) 0 0 no-repeat;}
.front_gasthaus_03 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen/weingut-cuntz-und-scheu-small.jpg) 0 0 no-repeat;}
.back_gasthaus_03 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen/#) 0 0 no-repeat;}

/* Städte */
.front_stadt_01 {background: url(../images/staedteziele/hessen/marburg-small.jpg) 0 0 no-repeat;}
.back_stadt_01 {background: url(../images/staedteziele/hessen/marburg-back-small.jpg) 0 0 no-repeat;}
.front_stadt_02 {background: url(../images/staedteziele/hessen/ruedesheim-small.jpg) 0 0 no-repeat;}
.back_stadt_02 {background: url(../images/staedteziele/hessen/ruedesheim-back-small.jpg) 0 0 no-repeat;}

/* Unterkünfte */
.front_unterkunft_01 {background: url(../images/unterkuenfte/bayern/schoellang-haus-neidhart-small.jpg) 0 0 no-repeat;}
.back_unterkunft_01 {background: url(../images/unterkuenfte/bayern/#) 0 0 no-repeat;}

}


@media (min-width: 1011px) {

h1 {font-size: 34px;}
h2 {font-size: 30px;}
h3 {font-size: 26px;}
h4 {font-size: 22px;}

.header li {float: left;}
.header li a {padding: 35px 30px; /* font-size: 19px; */}
.header .menu {clear: none; float: right; max-height: none;}
.header .menu-icon {display: none;}
.header .menu-btn:checked ~ .menu {border-bottom: 0px;}

.article-picture {max-width: 400px;}
.container-toppicture {max-width: 600px;}
.wappen-bild {max-width: 400px;}

/* Bild-Flipp-Box */
.flip_box {width: 400px; height: 222px; perspective: 1000px; margin-left: auto; margin-right: auto; float: left; margin: 8px 20px 10px 5px;}
/* Front - allgemein */
.front_ausflug_01, .back_ausflug_01, .front_ausflug_02, .back_ausflug_02, .front_ausflug_03, .back_ausflug_03, 
.front_gasthaus_01, .back_gasthaus_01, .front_gasthaus_02, .back_gasthaus_02, .front_gasthaus_03, .back_gasthaus_03,
.front_stadt_01, .back_stadt_01, .front_stadt_02, .back_stadt_02, 
.front_unterkunft_01 {display: flex; align-items: center; justify-content: center;}
/* Back allgemein */
.back_ausflug_01, .back_ausflug_02, .back_ausflug_03, 
.back_gasthaus_01, .back_gasthaus_02, .back_gasthaus_03, 
.back_stadt_01, .back_stadt_02,
.back_unterkunft_01	{ transform: rotateY(180deg);}

/* Ausflugsziele */
.front_ausflug_01 {background: url(../images/ausflugsziele/rheinland-pfalz/deutsches-weintor-medium.jpg) 0 0 no-repeat;}
.back_ausflug_01 {background: url(../images/ausflugsziele/rheinland-pfalz/deutsches-weintor-back-medium.jpg) 0 0 no-repeat;}
.front_ausflug_02 {background: url(../images/ausflugsziele/baden-wuerttemberg/titisee-neustadt-medium.jpg) 0 0 no-repeat;}
.back_ausflug_02 {background: url(../images/ausflugsziele/baden-wuerttemberg/titisee-neustadt-back-medium.jpg) 0 0 no-repeat;}
.front_ausflug_03 {background: url(../images/ausflugsziele/rheinland-pfalz/pfaelzer-wald-medium.jpg) 0 0 no-repeat;}
.back_ausflug_03 {background: url(../images/ausflugsziele/rheinland-pfalz/pfaelzer-wald-back-medium.jpg) 0 0 no-repeat;}

/* Gaststätten */
.front_gasthaus_01 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-gaststube-stichel-fritz-medium.jpg) 0 0 no-repeat;}
.back_gasthaus_01 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-gaststube-stichel-fritz-back-medium.jpg) 0 0 no-repeat;}
.front_gasthaus_02 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-zur-linde-medium.jpg) 0 0 no-repeat;}
.back_gasthaus_02 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen-zur-linde-back-medium.jpg) 0 0 no-repeat;}
.front_gasthaus_03 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen/weingut-cuntz-und-scheu-mobil.jpg) 0 0 no-repeat;}
.back_gasthaus_03 {background: url(../images/gaststaetten/rheinland-pfalz/schweigen/#) 0 0 no-repeat;}

/* Städte */
.front_stadt_01 {background: url(../images/staedteziele/hessen/marburg-medium.jpg) 0 0 no-repeat;}
.back_stadt_01 {background: url(../images/staedteziele/hessen/marburg-back-medium.jpg) 0 0 no-repeat;}
.front_stadt_02 {background: url(../images/staedteziele/hessen/ruedesheim-medium.jpg) 0 0 no-repeat;}
.back_stadt_02 {background: url(../images/staedteziele/hessen/ruedesheim-back-medium.jpg) 0 0 no-repeat;}

/* Unterkünfte */
.front_unterkunft_01 {background: url(../images/unterkuenfte/bayern/schoellang-haus-neidhart-medium.jpg) 0 0 no-repeat;}
.back_unterkunft_01 {background: url(../images/unterkuenfte/bayern/#) 0 0 no-repeat;}

}