/*---------------------------------------*/
/* STYLESHEET www.inspiredbyillusions.de */
/*        Haupt-CSS - alle Browser       */
/*---------------------------------------*/


/*-----------*/
/* CSS RESET */
/*-----------*/

@import url("reset.css");


/*----------------*/
/* SCHRIFTQUELLEN */
/*----------------*/

@font-face { font-family: 'Roboto-IBI';
             src: url('../ttf/RobotoCondensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto-IBI';
             src: url('../ttf/RobotoCondensed-LightItalic.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'Roboto-IBI';
             src: url('../ttf/RobotoCondensed-Bold.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'Roboto-IBI';
             src: url('../ttf/RobotoCondensed-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }


/*------------------*/
/* ZENTRALE FORMATE */
/*------------------*/

html {
  font-size: 12pt;
  overflow: hidden auto;
  scrollbar-color: #161929 #000000;
  width: 100%;
  height: 100%;
  }

  @media (max-width: 66rem) {
    html { font-size: 11pt; }
    }

  @media (max-width: 55rem) {
    html { font-size: 10pt; }
    }

  @media (max-width: 44rem) {
    html { font-size: 9pt; }
    }

  @media (max-width: 33rem) {
    html { font-size: 8pt; }
    }

body {
  font: normal normal 1.3125rem/1.666666em Roboto-IBI, 'Roboto Condensed Light', 'Roboto Condensed', Roboto, 'Open Sans Condensed Light', 'Open Sans Condensed', 'Myriad Pro Condensed', 'Fira Sans Condensed Light', 'Fira Sans Condensed', 'Arial Narrow', 'Open Sans', 'Myriad Pro', 'Noto Sans', Helvetica, Arial, sans-serif;
  font-weight: 350;
  color: #ccc;
  color: rgba(255,255,255,.8);
  text-transform: lowercase;
  text-align: center;
  min-width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  }

em {
  font-weight: bold;
  font-style: italic;
  }
  
strong {
  font-weight: bold;
  }

i, .i {
  font-style: italic;
  }

b, .b {
  font-weight: bold;
  }

h1, h2, h3, h4, h5, h6 {
  color: #eee;
  color: rgba(255,255,255,.9);
  font-weight: bold;
  }

h1, h2 {
  font-size: 1.75rem;
  margin-top:1rem;
  }

h3, h4, h5 {
  font-size: 1.5rem;
  }

h1, h2, h4,
hr, .clear {
  clear: both;
  }

h2, h3, h4, h5, h6,
p,
ul, ol {
  margin: 1rem 0;
  }

  ul ul, ul ol,
  ol ol, ol ul {
    margin: 0 0;
    }

hr {
  border: none;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 1rem 0;
  }

div, td, th, img {
  background: transparent;
  }

img {
  display: block;
  max-height: 90vh;
  max-width: 90vw;
  }

a {
  color: #ccc;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  }
  
a.active {
  color: #fff;
  }

a:hover {
  color: #fff !important;
  text-decoration: underline;
  }

  a.no-link:hover {
    text-decoration: none;
    }


/*-----------------*/
/* HINTERGRUNDBILD */
/*-----------------*/

html {
  background: #000;
  /* background: #000 url(../img/bg.jpg) center center/cover fixed; */
  }

#bg::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  left:-10%;
  top:-10%;
  background-image: url(../img/bg-interferences.jpg);
  animation: bubble 45s ease infinite, turn 180s linear infinite;
  /* background-size: cover; */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: visible;
  scale: 1;
  z-index:-1;
}
#bg {
  background: transparent;
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: 100%;
  height: 100vh;
  width: 100vw;
  top: 0;
  z-index:-1;
  }
  
@keyframes bubble {
  50% { scale: 1.4;}
  100% { scale: 1; }
}
@keyframes turn {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

/*---------------------*/
/* HEADER & NAVIGATION */
/*---------------------*/

header {
  text-align: center;
  margin: 8% auto 0;
  width: 100%;
  }

  header h1 {
    font-size: 4.5rem;
    margin: 0 auto;
    position: relative;
    top: 1.5rem;
    }

    header h1 a, header h1 a:hover {
      color: rgba(255,255,255,0) !important;
      }

  header p {
    color: #999;
    color: rgba(255,255,255,.5);
    font-size: 1.75rem;
    }

    header p#subheader {
      margin: 4.5rem auto 0;
      }

	header p#teaser,
	header p#next-gig {
      margin: 2.25rem auto 0;
      }

  header hr {
    visibility: hidden;
    }

  header img#logo_large {
    min-width: 22rem;
    max-width: 60rem;
    width: 50%;
    margin: 0 auto;
    position: relative;
    left: -1vw;
    }

    @media (max-width: 88rem) {
      header img#logo_large { width: 61.5%; }
      }

    @media (max-width: 44rem) {
      header img#logo_large { width: 80%; }
      }

  header img#logo_small {
    width: 20rem;
    margin: 0 auto;
    }

nav {
  display: none;
  }

  nav ul {
    list-style: none;
    }

    nav ul li {
      float: left;
      margin: 0.2em 1em 0 0
      }

      nav ul li a {
        font-weight: bold;
        color: #3888af;
        }

    /* #homelink { display:none; } */

  .homepage nav ul #homelink a,
  .bandpage nav ul #bandlink a,
  .gigspage nav ul #gigslink a,
  .musicpage nav ul #musiclink a,
  .gallerypage nav ul #gallerylink a,
  .contactpage nav ul #contactlink a {
    color: #808080 !important;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none;
    }



/*----------------*/
/* Inhaltsbereich */
/*----------------*/

main {
  display: block;
  position: relative;
  margin: 4.5rem auto;
  text-align: center;
  }

  main ul li {
    list-style: disc inside;
    }

  main a em, main a strong {
   color: inherit;
   }

figure {
  margin: 0 auto;
  }

section {
  margin: 4.5rem auto;
  }

  section ul {
    margin: 0 auto;
    max-width: 22em;
    }

    section ul li {
      list-style: none;
	 margin-bottom: 1.5rem;
      }

/* .player iframe {
  border: 1.5rem solid rgba(0,0,0,.6) !important;
  border: 1.5rem solid rgba(255,255,255,.1) !important;
  } */

.player figure {
  width: 33vw;
  /* min-width: 370px; */
  max-width: 700px;
  border: 1.5rem solid rgba(0,0,0,.6) !important;
  border: 1.5rem solid rgba(255,255,255,.1) !important;
  border-bottom-width: 1rem !important;
  background: rgba(255,255,255,.1) content-box;
  }
  
  .player img.cover {
    width: 100%;
    /* min-width: 370px; */
    max-width: 700px;
  }

  @media (max-width: 88rem) {
    .player figure { width: 40vw; }
    }

  @media (max-width: 66rem) {
    .player figure { width: 50vw; }
    }

  @media (max-width: 44rem) {
    .player figure { width: 61.5vw; }
    }

  @media (max-width: 33rem) {
    .player figure { width: 80vw; }
    }

video {
  width: 80vw;
  max-width: 540px;
  border: 1.5rem solid rgba(0,0,0,.6) !important;
  border: 1.5rem solid rgba(255,255,255,.1) !important;
  }


/* Klassenformate */

.add {
  color: #808080;
  color: rgba(255,255,255,.5);
  }

.quote {
  font-style: italic;
  }

  .quote .add {
    font-style: normal;
    }

.caps {
  text-transform: uppercase;
  }

.sc {
  font-variant: small-caps;
  }
  
.line {
  text-decoration: underline;
}

.listspace {
  margin: .75rem 0;
  }

.spaced {
  margin: 1.5rem 0;
  }

.box {
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  margin: 1.5rem 0;
  }



/* Spezielle Bereiche */

#notice {
  /* margin: 3rem 0 6rem; */
  margin: 3rem 0;
  font-size: 1.5rem;
  }

  #notice img {
    min-width:11rem;
    max-width:51rem;
    width:50%;
    margin: 3rem auto;
    }

  #notice .add {
    font-size: 1.25rem;
    }

  .noticetitle {
    font-size: 7rem;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.333em;
    color: rgba(255,255,255,.4);
    }

  .noticedate {
    font-size: 10.5rem;
    line-height: 50%;
    }

#shop > p {
  margin-bottom:1.5rem;	
  }

#motto {
  display: table;
  }

  #motto > p {
    background: rgba(255,255,255,.1);
    border: 1px solid #666;
    border-radius: 20em;
    width: 20em;
    height: 20em;
    vertical-align: middle;
    display: table-cell;
    }

#review {
  width: 22em;
  max-width: 22em;
  margin: 0 auto;
  overflow: hidden visible;
  }

  blockquote > svg.citation {
    width: 100%;
  }
  
  #review p.source {
    color: #808080;
    color: rgba(255,255,255,.5);
    text-align: right;
    font-style: italic;
    margin-bottom: 0;
    }

    #review p.source a {
      color: #808080;
      color: rgba(255,255,255,.5);
      }


#lineup figure {
  display: inline-block;
  margin: 1.5rem;
  max-width: 20%;
  }

  #lineup figure img {
    /* width: 9rem; */
    /* height: 6rem; */
    width: 7.5em;
    height: 5em;
    opacity: .4;
    }

    #lineup figcaption dl dt {
      color: #808080;
      color: rgba(255,255,255,.4);
      margin-top: .5rem;
      }

    @media (max-width: 55rem) {
      #lineup figure { margin: 1.5rem 1rem; }
      }

    @media (max-width: 44rem) {
      #lineup figure { margin: 1.5rem .5rem; }
      #lineup figure img { width: 6em; height: 4em; }
      }

    @media (max-width: 33rem) {
      #lineup figure { margin: 1.5rem 4.5rem; }
      }

    @media (max-width: 28rem) {
      #lineup figure { margin: 1.5rem 3rem; }
      }

#contact img {
  display: inline;
  position: relative;
  text-transform: uppercase;
  margin: 0 2px 0 0;
  top: 4px;
  }

#contact address {
  font-style: normal;
  }

  address i.at-sign {
    font-style: normal;
    }

    address i.at-sign::before {
      content: " @ ";
      }


#gigs {
  }
  
  #giglist {
    display: grid;
    grid-template-columns: repeat(5, auto);
    max-width: 44em;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: .75rem 1.5rem;
    }
    
    #giglist > div {
	 grid-column: 1 / -1;
	 text-align: center;
	 margin: 4.5rem 0 1.5rem;
      }

	 #giglist > div:nth-of-type(1) {
	   margin: 0 0 1.5rem;
	   } 
	 
	   #giglist > div > p {
	     margin: 0;
	     } 

    #giglist > a {
	 grid-column: 1 / -1;
	 display: grid;
	 grid-template-columns: subgrid;
	 grid-template-columns: 2fr 2fr 2fr 5fr 1fr;
      }
	 
	 #giglist > a > span {
	   text-align: left;
	   }
	   #giglist > a > span.gig_flyer {
	     text-align: right;
	     }
	   
	 #giglist a {
        color: #808080;
        color: rgba(255,255,255,.5);
        }

	   #giglist p.active,
	   #giglist a.active {
          color: #ccc;
          color: rgba(255,255,255,.8);
          }

	   #giglist a.inactive:hover {
          color: #808080 !important;
          color: rgba(255,255,255,.5) !important;
		  text-decoration: none !important;
          }


    @media (max-width: 44rem) {
      #giglist,
      #giglist > a,
      #giglist > a > span {
	    display: block;
		text-align:center !important;
	  }
      #giglist > a {
		margin: 0 auto 1.5rem;
      }
      #giglist > a > span:nth-of-type(2),
      #giglist > a > span:nth-of-type(3) {
	    display: revert;
	  }
      #giglist > a > span:nth-of-type(2)::after {
	    content: " • ";
	  }
    }


    @media (max-width: 22rem) {
		.no-linebreaks {
			max-width: 90%;
			margin: 0 auto !important;
		}
		.no-linebreaks > br {
			display: none;
		}
	}

#social {
  /* font-size: 1.125rem; */
  }

  #social p {
    margin: 0 auto;
    }

  #contact a,
  #social a {
    color: #808080;
    color: rgba(255,255,255,.5);
    }

  #social object,
  #social p a svg {
    display: inline-block;
    fill: #fff;
    width: 2rem;
    height: 2rem;
    margin: -.5em .25em;
    opacity: .4;
    }

    #social p a #icon-bandcamp{
      position: relative;
      left: -.5em;
     /* opacity: .7; */
      }

/*     #social-bandcamp a {
      color: #ccc;
      color: rgba(255,255,255,.8);
      } */

  #social p a:hover svg {
    opacity: 1 !important;
    }

  #social p#social-other {
    margin: 1.5rem auto 0;
    }
	
	#social #streaming-platforms {
	  display: block;
	  margin-top: 1.5rem;
	  }

/*  #icon-bandcamp{
    background: transparent url(../img/bandcamp.svg) center center no-repeat;
    } */

/*  #icon-facebook{
    background: transparent url(../img/facebook.svg) center center no-repeat;
    } */

/*  #icon-instagram{
    background: transparent url(../img/instagram.svg) center center no-repeat;
    } */

/*  #icon-youtube{
    background: transparent url(../img/youtube.svg) center center no-repeat;
    } */

/*  #icon-itunes{
    background: transparent url(../img/itunes-note.svg) center center no-repeat;
    } */

/*  #icon-deezer{
    background: transparent url(../img/deezer.svg) center center no-repeat;
    } */

/*  #icon-spotify{
    background: transparent url(../img/spotify.svg) center center no-repeat;
    } */


#photo {
  /* margin: 3rem 0 -3rem; */
  margin: 3rem 0 9rem;
  font-size: 1.5rem;
  }

  #photo img {
    min-width:11rem;
    max-width:51rem;
    width:50%;
    margin: 3rem auto;
    border: 1.5rem solid rgba(0,0,0,.6);
    border: 1.5rem solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.1) content-box;
    }
	
	
/* Home */


/* Band */


/* Gigs */


/* Music */


/* Gallery */


/* Links */


/* Contact */


/* Legal (Impressum & Datenschutzerklärung) */

.legal main {
  min-width: 22em;
  max-width: 44em;
  width: 50%;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  }

  .legal main h2 {
    font-size: 1.25rem;
    margin: 4.5rem auto 1rem;
    }

  .legal main h3 {
    font-size: 1rem;
    margin: 1.5rem auto 0;
    }

  .legal main p {
    margin: 0 0 1rem 0;
    }

    .legal main p.seal {
      margin: 6rem 0;
      padding: 1rem;
      border: 1px solid rgba(255,255,255,.5);
      }

  .legal main #imprint a,
  .legal main #privacy a {
    text-decoration: underline;
    }

  .legal main hr {
    margin: 3rem auto;
    }



/*--------*/
/* FOOTER */
/*--------*/

footer {
  color: rgba(255,255,255,.3);
  font-size: 1rem;
  text-align: right;
  margin: 0;
  }

footer p {
  padding: 1rem 2rem;
  line-height: 1.5;
  }

footer a {
  color: rgba(255,255,255,.3);
  }

footer a img {
  margin: auto -3px auto auto;
  }



/*-----------------*/
/* CAROUSEL SLIDER */
/*-----------------*/

.slide_section > input {
  display: none;
}

.slide_wrapper {
  width: 22em; /* unfortunately width has to be set to some hard value */
  display: flex;
  align-items: center;
}

.slide {
  /* width: 0; */
  margin: 0 100% 0 auto;
}

.slide > blockquote > p {
  margin-top: 0;
}

.slide_content {
  width: 22em;
  /* opacity: 0; */
  /* pointer-events: none; */
  /* transition: opacity .6s; */
  /* max-height: 90vh; */
  /* overflow-y: auto; */
}

@keyframes fade4 {
  0% { transform: translateX(0); opacity: 1; }
  23% { transform: translateX(0); opacity: 1; }
  23.9% { transform: translateX(0); opacity: 0; }
  24% { transform: translateX(-200%); opacity: 0; }
  25% { transform: translateX(-200%); opacity: 1; }
  48% { transform: translateX(-200%); opacity: 1; }
  48.9% { transform: translateX(-200%); opacity: 0; }
  49% { transform: translateX(-400%); opacity: 0; }
  50% { transform: translateX(-400%); opacity: 1; }
  73% { transform: translateX(-400%); opacity: 1; }
  73.9% { transform: translateX(-400%); opacity: 0; }
  74% { transform: translateX(-600%); opacity: 0; }
  75% { transform: translateX(-600%); opacity: 1; }
  98% { transform: translateX(-600%); opacity: 1; }
  98.9% { transform: translateX(-600%); opacity: 0; }
  99% { transform: translateX(-800%); opacity: 0; }
  100% { transform: translateX(-800%); opacity: 1; }
}
@keyframes slide4 {
  0% { transform: translateX(0); }
  23% { transform: translateX(0); }
  25% { transform: translateX(-200%); }
  48% { transform: translateX(-200%); }
  50% { transform: translateX(-400%); }
  73% { transform: translateX(-400%); }
  75% { transform: translateX(-600%); }
  98% { transform: translateX(-600%); }
  100% { transform: translateX(-800%); }
}

.slide_wrapper { animation: fade4 linear 30s infinite; }
/* .slide_wrapper { animation: slide4 ease-in-out 30s infinite; } */
.slide_wrapper:hover { animation-play-state: paused; }

/*
#i_1:checked ~ .slide_wrapper .slide_content1,
#i_2:checked ~ .slide_wrapper .slide_content2,
#i_3:checked ~ .slide_wrapper .slide_content3,
#i_4:checked ~ .slide_wrapper .slide_content4 {
  opacity: 1;
  pointer-events: auto;
}

.slide_controls {
  font-size: small;
  letter-spacing: .25rem;
  display: none;
}

.slide_controls label {
  color: rgba(255,255,255,.4);
  transition-duration: .6s;
  cursor: pointer;
}

#i_1:checked ~ .slide_controls label[for="i_1"],
#i_2:checked ~ .slide_controls label[for="i_2"],
#i_3:checked ~ .slide_controls label[for="i_3"],
#i_4:checked ~ .slide_controls label[for="i_4"] {
  color: rgba(255,255,255,1);
}
*/