/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */





/* ############################################################ */

/* allgemein */

/* ############################################################ */



*, *:before, *:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}



html, body {

font-family:'open_sanscondensed_light', arial,helvetica, roboto ,sans-serif;

font-size:62.5%;

line-height:1.5;

}



body {height:100%;

font-size:1.8rem;

margin: 0 auto;

overflow-x:hidden;

color:#C4C4BF;

}





/* ---- überschriften ----- */



h1, h2, h3, h4, h5 {text-align:center;

font-weight:bold;text-transform:none;

}



h2 {color:#D2D1CA;font-family: serif;

font-size:2.8rem;

line-height: 3.5rem;

margin-top: 1rem;

margin-bottom: 3.5rem;

letter-spacing: 0rem;

}



h2:after {display:block;

border-top: 1px solid #BE9F76;

width: 50px;

content: "";margin:0 auto;

margin-top: 2rem;

}





h3 {color:#efefef;

font-size:2.1rem;

line-height: 3rem;

margin-top: 1rem;

margin-bottom:2.5rem;

letter-spacing: -.1rem;

}





/* ----- quelltext-erklärungen - wenn vorhanden ----- */



pre {white-space:pre-wrap;position:relative;

font-size:1.5rem;

font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;

padding:0rem 1rem 2rem 1rem;

margin:4rem auto;

text-align:center;

border:dotted 0.1rem #686868;

background:transparent;

}



pre .extra {display:inline-block;

position:absolute;

left:-1.5rem;top:1.5rem;font-size:1.8rem;

color:#000;font-weight:normal;

background:#fff;padding:0 .5rem;

transform:rotate(-45deg);

}





/*  ----------------------------------------  */

/* allgemeine links */

/*  ----------------------------------------  */



a  {color:#C4C4BF;

text-decoration: underline; }



label a {cursor:pointer; }



a:hover {color:#C4C4BF;

text-decoration: none;

}





/* ############################################################ */

/*  speziell*/

/* ############################################################ */



/* bilder -anpassen der grösse */

img {max-width: 100%;display:block;

margin:0 auto;

height: auto;

border-radius:0rem;

}







/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

/*  GRID-SYSTEM  - für Bilder / Spalten */

/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */



/* ---------- boxen - grundsystem ---------- */



.box {display:inline-block;

text-align:left;

vertical-align:top;

width:100%;

padding: 1rem 1rem;

margin:0  -.25rem -.25rem -.25rem; /* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/

}



.box-1_of_1 ,

.box-1_of_2 ,

.box-1_of_3,

.box-1_of_4,

.box-1_of_5 {width:100%; }





/* ---------- boxen - bilder ---------- */



.bilder  {text-align:center; }

.bilder .box  {padding:.7rem; }

.bilder.single-pic .box {padding:0rem; }



.bilder .box-1_of_1 ,

.bilder .box-1_of_2 ,

.bilder .box-1_of_3,

.bilder .box-1_of_4 {width:100%; }



#gallery .bilder .box  {padding:.5rem; }

#gallery .bilder .box-1_of_2 {width:50%; }

#gallery .bilder .box-1_of_3 {width:33.33%; }

#gallery .bilder .box-1_of_4 {width:50%; }



/*  bei Mausberührung der Bilder, wenn diese verlinkt sind (z.B Lightbox) */

a:hover img {opacity:.8;  filter: blur(2px)  }





/*  ---------- boxen - andere ---------- */



#fuss .box-1_of_1 {width: 100%; }







/* ############################################################ */

/* bereich header */

/* ############################################################ */



header {

background:#808080;

background-image:url(../images/starclubHH.jpg);

background-repeat:no-repeat;

background-position:50% 100%;

background-size:cover;

}



/* fotos auf den unterseiten */

header.primus-pic  {background-image:url(../images/starclubHH.jpg); }

header.secundus-pic {background-image:url(../images/starclubHH.jpg); }

header.tertius-pic  {background-image:url(../images/starclubHH.jpg); }

header.quartus-pic  {background-image:url(../images/starclubHH.jpg); }

header.quintus-pic  {background-image:url(../images/starclubHH.jpg); }

header.sextus-pic  {background-image:url(../images/starclubHH.jpg); }



header .filter {background:rgba(32,52,67,.4); }







/* ############################################################ */

/* bereich logo */

/* ############################################################ */



#logo {

display:table;width:100%;

margin:0 auto;

height:100vh;

padding:0rem 0rem;

}



.logo-a  {display:table;width:100%;height:100%;

margin:0 auto;

padding:0rem 2rem;

}





/* logo-object  */



#logo .logo-object {display:table-cell;vertical-align:middle;text-align:center;

padding:2rem 0rem;

}



#logo .name {display:block;color:#D3E2EB;

font-family: serif;

font-weight:bold;

text-shadow:1px 1px 1px rgba(0,0,0,.6);

text-transform:uppercase;

font-size:2.5rem;

letter-spacing:1px;

margin: 0 ;

padding:1rem 0;

}







/* ############################################################ */

/* bereich inhalt */

/* ############################################################ */



main#inhalt {display:block;

background:#213443;

padding:0rem;

text-align:center;

}



main#inhalt .box {text-align:center; }



.inhalt-a {display:inline-block;

width:100%;

margin:2rem 0;

padding:2rem 1.5rem 6rem 1.5rem;

}





/* ----- bildbeschreibung ----- */



article.bildbeschreibung {margin:1.5rem 0;font-size:1.5rem;text-align:center;padding:0 0rem;font-style:italic;}



/* icon bei bildbeschreibung */

.bildbeschreibung:before {position:relative;bottom:-0.2rem;

display:inline-block;

text-align:center;

font-family:'Font Awesome 6 Free';/* - 'Font Awesome 6 Free' for Regular and Solid symbols;

                                     - 'Font Awesome 6 Brands' for Brands symbols. */

font-weight: 900;/*  Weight of the font (mandatory)

                     - 400 for Regular and Brands symbols;

                     - 900 for Solid symbols. */

padding:0;

content:"\f0d8";

color:#C5D7DE;

transform:scale(1.5);

width:2rem;

}







/* ############################################################ */

/* bereich fuss */

/* ############################################################ */



footer {display:table;

height:100%;width:100%;

margin:0 auto;

padding:0rem ;

background:#2f2f2f;

background-image:url(../images/starclubHH.jpg);

background-repeat:no-repeat;

background-position:50% 100%;

background-size:cover;

}



/* fotos auf den unterseiten */

footer.primus-pic  {background-image:url(../images/starclubHH.jpg); }

footer.secundus-pic {background-image:url(../images/starclubHH.jpg); }

footer.tertius-pic  {background-image:url(../images/starclubHH.jpg); }

footer.quartus-pic  {background-image:url(../images/starclubHH.jpg); }

footer.quintus-pic  {background-image:url(../images/starclubHH.jpg); }

footer.sextus-pic  {background-image:url(../images/starclubHH.jpg); }



footer .filter {background:rgba(0,0,0,.5); }



#fuss {display:table;width:100%;height:100vh;

margin: 0 auto;

padding:0;

}



.fuss-a {display:table-cell;vertical-align:bottom;text-align:center;

margin: 0 auto;

padding:2rem 1.5rem;

}



#fuss .box {vertical-align:bottom;padding:.0rem .5rem;

text-align:center;

}







/*  ----------------------------------------  */

/*  die wesentlichen schriftformate für den gesamten footer plus fussmenu */

/*  ----------------------------------------  */



#fuss ,

#fuss a {

color:#fff;

text-shadow:none;

font-weight:normal;

font-size:1.6rem;

text-decoration:none;

}



.fussmenu  ul {text-align:center;list-style: none;padding: 0rem 0;margin: 0;letter-spacing:1px; }

.fussmenu li { display:inline-block; padding:.5rem .5rem}

#fuss li a:hover {color:#fff;text-decoration:none }





/* icons social media */



.fussmenu ul.social li  {display:inline-block;  }

.fussmenu ul.social li i {display:block;font-size:1.5rem;transition:all .3s ease-out;margin-bottom:.3rem; }

.fussmenu ul.social li a:hover i {color:#fff;transform:rotate(360deg) }







/* ############################################################ */

/* M E D I A   Q U E R I E S */

/* CSS Bildschirmabfragen */

/* ############################################################ */



/* ==================================== ab 320 pixel ================================== */

@media (min-width: 320px) {



/* - hinweis -

für die kleinste smartphone-auflösung von 320 pixel benötigen wir KEINE bildschirmabragen (css-media queries),

denn hierfür gilt ja automtisch der gesamte vorstehende quelltext-code  -

weil wir das template ja 'MOBILE-FIRST' angelegt haben.

*/



}





/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {



#logo {height:75vh; }



}





/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {



html {font-size:70%; }



#logo {

height:100vh;

padding:0rem 3rem;

}



main#inhalt .box {text-align:left; }



.bilder .box-1_of_4  {width: 50%; }



}





/* ==================================== ab 580 pixel ================================== */

@media (min-width: 580px) {



#logo {height:65vh; }



article.bildbeschreibung {margin:1.5rem 0;font-size:1.5rem;text-align:center;padding:0 4rem;font-style:italic;}



.bilder .box-1_of_2  {width: 50%; }

#gallery .bilder .box-1_of_4 {width:25%; }

.fuss-a  {width:94%; }



}





/* ==================================== ab 640 pixel ================================== */

@media (min-width: 640px) {



#fuss .box-1_of_2  {width: 50%; }



}





/* ==================================== ab 760 pixel ================================== */

@media (min-width: 760px) {



/* bilder - abgerundet */

img {border-radius:1rem; }



#logo {

height:40vh;

background:radial-gradient(ellipse at 50% 0%,transparent 49.5vw,#213443 1vw);

}



#logo .name {font-size:3rem; }



.logo-a  {width:700px; padding:0rem 5rem; }

.inhalt-a  {width: 700px; padding:4rem 1.5rem; }



.bilder .box-1_of_3  {width: 33.33%;  }



#fuss {height:30vh;

background:radial-gradient(ellipse at 50% 100%,transparent 49.5vw,#213443 1vw);

}



#fuss , #fuss  a {font-size:1.3rem; }



/* Footer-Bild im unteren Teil halbtransparent und oberen Teil volltransparent */

footer .filter {background:linear-gradient(to top,rgba(0,0,0,.7),transparent); }



}





/* ==================================== ab 800 pixel ================================== */

@media (min-width: 800px) {



#logo {height:50vh; }

#fuss {height:50vh; }



}





/* ===================================== ab 960 pixel ================================= */

@media (min-width: 960px) {



#logo {height:60vh; }

#fuss {height:60vh; }



.logo-a  {width: 90%; }

.inhalt-a  {width: 90%; }

.fuss-a  {width:90%; }



.bilder .box-1_of_4  {width: 25%; }

#fuss .box-1_of_3  {width: 33.33%; }



}





/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {



#logo .name {font-size:4rem; }



pre {width:70%; }



}





/* ===================================== ab 1280 pixel ================================= */

@media (min-width: 1280px) {



#logo {height:70vh; }

#fuss {height:90vh; }



.logo-a {width: 78%; }

.inhalt-a  {width: 78%; }

.fuss-a  {width:78%; }



}





/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {



html {font-size:85%; }



}





/* ===================================== ab 1650 pixel ================================= */

@media (min-width: 1650px) {



.logo-a {width: 1250px; }

.inhalt-a  {width: 1250px; }

.fuss-a  {width:1250px; }



}