/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://z.tanzflair.de/font/poppins-other.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://z.tanzflair.de/font/poppins-other.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://z.tanzflair.de/font/poppins-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h4, h5, .Header, .Logo, .Banner, .Mobile, .Desktop, .BildRechts, .BildMitte, .BildLinks, .Inhalt, .Sprechomat, .Fuss, nav, nav a, .Suche, .subbox { border-radius: .5em; }

:root{
	--font-family: Poppins,Arial,serif;
    --background-color: #314453;
    --background-subbox: #DEDEDE;
	--background-head: #000000;
	--background-navi: #000000;
    --background-inhalt: #EEEEEE;
	--background-body: #222121;
    --darker-background-color: #243848;
    --accent-color: gold;
    --text-color: #0e0c0b;
	--navlink-color: gold;
    --navbar-height: 100px;
}
*{
    font-size: 1em;
    font-family: var(--font-family);
}

a { padding: 10px; }
a:link { color: #222121; }
a:visited { color: #222121; }
a:hover { color: #222121; }
a:focus { color: #222121; outline: 1px solid red; }
a:active { color: #222121; }

h1 { font-style: normal; font-size: 1.6em; font-weight: bold; border: 0; padding: 15px 0; }
h2 { font-style: normal; font-size: 1.5em; font-weight: bold; border: 0; padding: 13px 0; }
h3 { font-style: normal; font-size: 1.4em; font-weight: bold; border: 0; padding: 11px 0; }
h4 { font-style: normal; font-size: 1.3em; font-weight: bold; border: 0; padding: 9px 0; }
h5 { font-style: normal; font-size: 1.2em; font-weight: bold; border: 0; padding: 7px 0; }
h6 { font-style: normal; font-size: 1.1em; font-weight: bold; border: 1px solid #222121; padding: 5px 0; }

legend { font-weight: bold; border-left: 2px solid ; }
p, li, td { font-weight:normal; }
th { text-align: center; padding: 3px; font-size: 1.1em; color:#000000; font-weight:bold; border: 1px solid #222121; }

.subbox { flex: 1 1 300px; border:none; padding: 5px; margin: 5px; background-color: var(--background-subbox); }
.subflextable { width:300px; display: flex; flex-direction: row; flex-wrap: wrap; }
.subflexbox { display: flex; flex-direction: row; flex-wrap: wrap; }

.bildboxtext img { BORDER:0; WIDTH: 100%; display: block; }
.bildboxtext span { text-align: left; line-height: 2em; width: 80%; bottom: 0; position: absolute; background-color: #00A5E7; font-size: normal; font-family: Poppins,Arial; font-weight:bold; padding: 0 5px; }
.bildboxtext { WIDTH: 100%; MAX-WIDTH:600px; margin: 0 auto; position: relative; }
.bildbox { flex: 1 1 500px; border: 0; padding: 5px; margin: 5px; }
.bildflexbox { display: flex; flex-direction: row; flex-wrap: wrap; }

.bildtext { position: relative; }
.bildtext span { background-color: hsla(0, 0%, 100%, 0.5); position: absolute; bottom: 0; width: 100%; line-height: 2em; text-align: center; }
.bildtext img { display: block; }

.textbox { flex: 1 1 400PX; border: 0; padding: 5px; margin: 5px; }
.textflexbox { display: flex; flex-direction: row; flex-wrap: wrap; }


DIV#Presse { margin: 15px 15px 15px 15px; padding: 2px 5px 2px 5px; border: 0; min-width: 16em; min-height: 100px; color: #000000; background-color:#DDDDDD; -webkit-box-shadow: 3px 3px 6px #000000; -moz-box-shadow: 3px 3px 6px #000000; box-shadow: 3px 3px 6px #000000; -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000, offx=3, offy=3)"; filter:progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offY=3, offX=3); font-family:'Times New Roman','Courier New',Arial,serif; color:#000000; }
h1#Presse { font-size:small; font-style:normal; font-weight:bold; text-align: center; letter-spacing:0.3em; border: 0; }
h2#Presse { font-size:x-large; font-style:normal; font-weight:bold; text-align: center; letter-spacing:0.1em; border: 0; }
h3#Presse { font-size:large; font-weight:normal; text-align: center; letter-spacing:0.1em; border: 0; }
h4#Presse { font-size:medium; font-weight:bold; text-align: justify; border: 0; }
p#Presse, li#Presse, td#Presse { text-align: justify; }

.Seite { padding: 1 auto; width: 100%; text-align: left; border: 5px; background-color: transparent; }
.Header { display: flex; flex-direction: row; flex-wrap: nowrap; background-color: transparent; }
.Logo { display: none; WIDTH: 100%; MAX-WIDTH: 300px;}
.Banner { display: block; WIDTH: 100%; MAX-WIDTH: 600px; }
.Mobile { display: none; WIDTH: 100%; MAX-WIDTH: 300px;}
.Desktop { display: block; WIDTH: 100%; MAX-WIDTH: 600px; }
.Position { font-size: x-small; color: gold; }
.Position a { color: gold; }

.Content { display: block; }
.Inhalt { min-height: 500px; margin: 1px; padding: 4px 1%; background-color: var(--background-inhalt); }
.Sprechomat { font-size: medium; font-weight:normal; font-style:italic; }

.BildRechts { float: right;  margin: 4px 4px; text-align: justify; font-size: small; }
.BildLinks  { float: left;   margin: 4px 4px; text-align: justify; font-size: small; }
.BildMitte  { align: center; margin: 0 auto;  text-align: center;  font-size: small; }

label, select, input[type=checkbox], input[type=radio], input[type=button], input[type=submit] { cursor: pointer; cursor: hand; }
input, textarea { background: #ddd; }
input:focus, textarea:focus { color: #000; background: #fff; outline: 1px solid red; }

.Suche { padding: 0; border: 0; background-color: transparent; color: gold }
.Fuss { width: 98%; margin: 2px 0; padding: 0; border: 0; text-align: right; font-family: Poppins,Arial; font-size:medium; color: #EEEEEE; font-weight:normal; }
.Fuss a { color: gold; }
.Fussdruck { display: none; }
.Boden { height: 300px; }

.kbdtaste { background: #F7F7F7; background-image:linear-gradient(rgba(255,255,255,.4),rgba(127,127,127,.2)); border-color:#DDDDDD #AAAAAA #888888 #CCCCCC; border-radius:4px; border-style:solid; border-width:1px; padding:0 .4em; text-shadow:0 1px rgba(255,255,255,.5); white-space:nowrap; font-size: 1.1em; font-weight: bold;}
.kbdmenue { background: #777777; padding:0 .4em; white-space:nowrap; font-size: 1.1em; color: #FFFFFF }
.kbdkartei { border-bottom: solid 1px #888888; padding:0 .4em; text-shadow:0 1px rgba(255,255,255,.5); white-space:nowrap; font-size: 1.1em; }
.kbdschalt { background: #F7F7F7; background-image:linear-gradient(rgba(255,255,255,.4),rgba(127,127,127,.2)); border: solid 1px #DDDDDD; border-radius:2px; padding:0 .4em; white-space:nowrap; font-size: 1.1em; }

body { background-color: var(--background-body); }
.abstand { margin: 15px; }
.Team div { width: 250px; height: 250px; background-size: 250px 250px; }
.Team .withHover { display: none; }
.Team:hover .withoutHover { display: none; }
.Team:hover .withHover { display: block; }

#cookiedingsbums { outline: 1px solid #7b92a9; border-top:1px solid #fff; background: #d6e0eb; background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9)); background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6e0eb', endColorstr='#f2f6f9',GradientType=0 ); position:fixed; bottom:0px; z-index:10000; width:100%; line-height:16px; }
div#WichtigeEingaben { display: none; }

.Navi{
    height: var(--navbar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
	background-color: var(--background-navi);
}
.Navi ul{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
	color: var(--navlink-color);
}
.Navi li{
    height: 100%;
    width: 150px;
    text-align: center;
    position: relative;
	border-bottom: 1px solid transparent;
}
.Navi li:hover{
    border-bottom: 1px solid var(--accent-color);
}
.Navi ul a{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
	color: var(--navlink-color);
}
nav .dropdown{
    height: min-content;
    width: 200px;
    background: var(--background-navi);
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: var(--navbar-height);   
}
nav .dropdown li{
    height: 70px;
    width: 100%;
}
nav .dropdown li a{
    justify-content: flex-start;
    padding-left: 30px;
    width: calc(100% - 30px);
}
.Navi li:hover .dropdown{
    display: flex;
}
.Navi input[type="checkbox"]{
    display: none;
}
nav .expandable_li{
/*
    display: flex;
    justify-content: center; 
    align-items: center;
*/
	margin: 0 20% 0 0;
}
.toggle_button{
    width: 30px;
    height: 23px;
    position: absolute;
    top: 25px;
    right: 25px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
.bar{
    height: 4px;
    width: 100%;
    background: var(--navlink-color);
    border-radius: 100px;
    color: transparent;
}

.Suche a  {
	color: gold;
}
.fussknopf {
	padding: 10px;
	text-decoration: none;
	border: 1px solid gold;
	border-radius: 15px;
}
.fussknopf:hover{
	color: black;
	background-color: gold;
}

@media(max-width: 850px){

    .toggle_button{
        display: flex;
    }
    .Navi ul{
        height: min-content;
        width: 100%;
        background-color: var(--background-navi);
        display: none;
        position: absolute;
        top: var(--navbar-height);
    }
    .Navi li{
        height: min-content;
        width: 100%;
    }
    .Navi ul a{
        padding: 30px 0;
    }
    .expandable_li{
        display: block;
		padding: 0 0 10px 0;
    }
    .expandable_li label{
        padding: 30px 0;
        cursor: pointer;
        display: block;
    }
    .expandable_li:hover .dropdown{
        display: none;
    }
    .expandable_li input[type="checkbox"]:checked ~ .dropdown{
        display: block;
    }
    nav .dropdown{
        position: static;
        width: 100%;
    }
    nav .dropdown li{
        padding: 0;
        display: block;
        position: static;
        background: var(--background-navi);

    }
    .dropdown li a{
        width: 100%;
        padding: 0;
        justify-content: center;
    }
    #toggle_button:checked ~ ul{
        display: block;
    }

.Logo { display: block; border: 0; margin: 0; }
.Banner { display: none; }
.Mobile { display: block; border: 0; margin: 0; }
.Desktop { display: none; }
.Content { display: block; }

.Fuss { text-align: center; }
.Boden { height: 5px; }

}