@charset "UTF-8";
/* CSS Document */

/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Ende CSS Reset */











/* NOTE: Farben */

.grau {
    color:#9c9a8d; /* Grau */
}
.rot {
    color:#e6332a; /* Rot */
}
.weiss {
    color:white;
}

/* NOTE: Typo */
h1 {
    font-size: 1.4em;
    margin:5% 0 -3 0;
    font-weight: 600;
    color:#e6332a;
    margin:0 0 1vw 0;
}
p {
    font-size: 1em;
    line-height: 1.2em;
    text-align: left;
    color:#9c9a8d;
    margin:0 0 1vw 0;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}

a {
    color:#9c9a8d;
}
a:hover {
    color:#e6332a;
}

.links {
    font-size: 1vw;
    color:white;
}
.links a {
    text-decoration : none;   
}





















/* NOTE: Layout-Objekte */
html, #content {
    height:100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    max-width:1080px;
    min-width:769px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%; 
    margin-left: auto;
    margin-right: auto;
}

/* NOTE: Content */
#content {
   
}

.spalten {
    width:33%;
    padding:0 1vw;
}
.logo {
    width:50%;
    margin:10% 25% 10% 25%;
    z-index: 1;
}
img.bild_taenzer {
    width:76%;
    margin:0 12%;
    z-index: 1;
}
#kasten {
    background-color:#9c9a8d; /* Grau */
    height:2%;
    padding:1.8% 1.5% 1.2% 1.5%;
    margin-top:-0.3%;
}
#kasten p, #kasten a {
    color:white;
    border:none;
    z-index: 10;
    font-size: 16px;
}

#kasten a:hover {
    color:#e6332a; /* Rot */
}

#bild {
    margin:0 0 -3px 0;
}

.flex-container {
    /*flex-wrap: nowrap;
    height: 40%;*/
    height:auto;
    width: 100%;
    display: flex;
    align-content: flex-start;
    flex-direction: row;
    z-index: 100;
}





div#myModal.modal div.modal-content p a {
  color:#9c9a8d; /* Grau */
  text-decoration: none;
  cursor: pointer;
    }

div#myModal.modal div.modal-content p a:hover {
  color:#e6332a; /* Rot */
  text-decoration: underline;
    }

div#myModal.modal div.modal-content p {
    margin-left: 21.3pt; 
    text-align: justify; 
    text-justify: inter-ideograph; 
    text-indent: -21.3pt;
}
div#myModal.modal div.modal-content p.impressum {
    margin-left:0pt; 
    text-align: left; 
    text-justify: inter-ideograph; 
    text-indent:0pt;
}
div#myModal.modal div.modal-content .Liste1 {
    margin-left: 21.3pt; 
    text-indent: 0cm; 
}

div#myModal.modal div.modal-content b {
  color:#e6332a; /* Rot */
}

div#myModal.modal div.modal-content h2 {
  color:#e6332a; /* Rot */
    margin:30px 0 0 0;
}


/* NOTE: Popup */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 5vw; /* Location of the box */
  padding-bottom: 5vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(125,125,125,0.3); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color:white;
  margin: 0 5% 15% 5%;
  padding: 5%;
  width: 80%;
  color:#e6332a;
}
.modal-content p {
  margin: auto;
  margin: 3% 0 0 0;
}

/* The Close Button */
.close {
  color:#9c9a8d; /* Grau */
  float: right;
  font-size: 4vw;
  margin:-3% 0 0 0;
}

.close:hover,
.close:focus {
  color:#e6332a;  /* Rot */
  text-decoration: none;
  cursor: pointer;
}
ul  {
    list-style-type: disc;
    margin:1% 0 0 2%;
    }

.mobile_only {
    display:none!important;
}

/* Popup Ende */










































/* NOTE: MOBILE */


@media only screen and (min-width: 481px) {
  /*.mobile_only {
    display: none!important;
    margin:0 0 20vw 0;
  }*/
}
@media only screen and (max-width: 480px) {

/* NOTE: Layout-Objekte (Mobile) */
    
body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    max-width:480px;
    min-width:200px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%; 
    margin-left: auto;
    margin-right: auto;
}
 
    
    
/* NOTE: Typo (Mobile) */
h1 {
    font-size: 7vw;
    margin:5% 0 0 0;
    font-weight: 600;
}
h2 {
    font-size: 6.5vw;
    margin:5% 0 0 0;
    font-weight: 600;
}

p {
    font-size: 5vw;
    line-height: 5.5vw;
    text-align: left;
    padding:1vw 0vw;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}
ul  {
    list-style-type: disc;
    }

    .none_break{
        hyphens: none;
    }   
/*NOTE: Content (Mobile) */


.logo {
    position: fixed;
    top:0;
    width:100%;
    height:130px;
    margin:0 0 0 0;
    padding:7% 15% 5% 15%;
    z-index: 1;
    background-color:white;
    border-bottom: 1px solid #9c9a8d;
    border-bottom-style: solid;
    float:both;
}
div#content.content_container div.logo img {
    width:60%;
    margin:0 5%!important;
    position: fixed;
}

.flex-container {
    display: flex;
    flex-direction: column;
    height:auto;
    z-index: 20;
    width:100%;
    display:block;
    margin:0% 0 8% 0;
    padding:50% 0% 28% 0%;
}

.spalten {
    width:100%;
    padding:0 0%;
}
p, .flex-container h1 {
    padding:0 5% 2.5% 5%;
}
img.bild_taenzer {
    width:100%;
    margin:0 0 10% 0;
}
#kasten {
    position:fixed;
    bottom:0;
    width:100%;
    background-color:#9c9a8d; /* Grau */
    height:40px;
    padding:2% 1.5% 0% 1.5%;
    margin-top:-0.3%;
} 

.button {
    width:27vw;
    float:left;
    margin:4vw 5vw 4vw 3vw;
    padding:0 6vw 0 0;
}
.mail, .links {
    width:100%;
    text-align: center;
    font-size: 4.5vw;
}
.contact {
    text-align: center;
    font-size: 4vw;
    line-height: 4.5vw;
    margin:5vw 0 10vh 0!important;
}
    
/* NOTE: Popup (Mobile) */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5vw; /* Location of the box */
    padding-bottom: 5vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

    
    
/* Modal Content */
.modal-content {
    background-color:white;
    margin: 0 5% 15% 5%;
    padding: 5%;
    width: 80%;
    color:#e6332a; /* Rot */
}
.modal-content p {
    margin: auto;
    margin: 3% 0 0 0;
    padding:0 0 0 0;
    hyphens: auto;
    -webkit-hyphens: auto 4;
    -webkit-hyphenate-limit-chars: auto 4;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 4;
    -ms-hyphenate-limit-lines: 4;
    -moz-hyphens: auto 6; /* seit Firefox 6 */
}
    
div#myModal.modal div.modal-content p a {
    color:#e6332a; /* Rot */
    text-decoration: none;
    cursor: pointer;
}
    
ul {
    list-style-type: disc;
    margin:1% 0 0 2%;
}
    

/* The Close Button */
.close {
  color:#e6332a; /* Rot */
  float: right;
  font-size: 10vw;
  margin:-3% 0 0 70%;
  position:fixed;
}

.close:hover,
.close:focus {
  color:#9c9a8d; /* Grau */
  text-decoration: none;
  cursor: pointer;
}

/* Popup Ende */

}