/** Sections **/

section {
  /*background: #2e2927;*/
  padding: 25px;
  margin: 5px;
  flex: 0 1 auto; /* grow:0, shrink:1, width:auto */
  display: inline-block; /* makes it only as big as its content */

  max-width: 600px;
  
  text-align: center;
  font-size: x-large;

  border-radius: 5px;
    background-image:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(0, 0, 0, 0.2)
      ),
      url('../img/bg_section.webp');
  box-shadow: 0 2px 6px rgba(0,0,0,1.0);
}

/*Nails*/
section::before{
  content: "";
  position: absolute;

  left: 50%;
  
  width: 25px;
  height: 32px;

  background-image: url('../img/bg_nail.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/*card color*/
.card-color-live{
  background: 
    linear-gradient(
      rgba(255, 0, 0, 0.07),
      rgba(255, 0, 0, 0.07)
    ), /* red overlay with 50% opacity */
    url('../img/bg_section.webp');
}
section.card-color-live h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_live.svg')
    no-repeat center / contain;
}

/* Description */
section.description{
  /*transform: rotate(-1.5deg);*/
  transform: rotate(-1.5deg);
}
section.description::before{
  left: 52%;
  top: -17px;
  transform: rotate(-7deg);
}

/* bandcamp */
section.bandcamp{
  transform: rotate(0.00001deg);
}
section.bandcamp::before{
  left: 47%;
  top: -7px;
  transform: rotate(-3deg);
}
section.bandcamp h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url('../img/logo_bandcamp.svg') no-repeat center / contain;
}

/* twitch */
section.twitch{
  transform: rotate(3deg);
}
section.twitch::before{
  left: 45%;
  top: -11px;
  transform: rotate(-3deg);
}
section.twitch h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_twitch.svg')
    no-repeat center / contain;
}

/* player */
section.player{
  transform: rotate(0.00001deg);
}
section.player::before{
  left: 47%;
  top: -8px;
  transform: rotate(-3deg);
}
section.player h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_player.svg')
    no-repeat center / contain;
}

/* youtube */
section.youtube{
  transform: rotate(-1deg);
}
section.youtube::before{
  left: 47%;
  top: -11px;
  transform: rotate(2deg);
}
section.youtube h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_youtube.svg')
    no-repeat center / contain;
}

/* instagram */
section.instagram{
  transform: rotate(2deg);
}
section.instagram::before{
  left: 49%;
  top: 10px;
  transform: rotate(30deg);
}
section.instagram h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_instagram.svg')
    no-repeat center / contain;
}

/* live */
section.live{
  transform: rotate(-2.7deg);
}
section.live::before{
  left: 52%;
  top: -17px;
  transform: rotate(30deg);
}


/* live spend */
section.spend{
  transform: rotate(0.3deg);
}
section.spend::before{
  left: 48%;
  top: -13px;
  transform: rotate(-15deg);
}

/* live mead */
section.mead{
  transform: rotate(-1.3deg);
}
section.mead::before{
  left: 51%;
  top: -13px;
  transform: rotate(-5deg);
}

/* contact */
section.contact{
  transform: rotate(1deg);
}
section.contact::before{
  left: 47%;
  top: 3px;
  transform: rotate(23deg);
}
section.contact h1::before {
  margin-right: 0.2em;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background:
    url('../img/logo_contact.svg')
    no-repeat center / contain;
}

/****************** impressum *************/
section.impressum {
  position: relative;
  flex: 0 1 auto; /* grow:0, shrink:1, width:auto */
  display: inline-block; /* makes it only as big as its content */

  max-width: 600px;
  
  border-radius: 5px;
  background-image: url('../img/bg_section.webp');
  box-shadow: 0 2px 6px rgba(0,0,0,1.0);
  
  cursor: pointer; /* makes it obvious it's clickable */
  transition: all 0.3s ease;
}
section.impressum::before{
  left: 50%;
  top: -10px;
  transform: rotate(0deg);
}

section.impressum h1::before {
  margin-right: 0.2em;
  content: "§";
  display: inline-block;
  height: 1em;
  width: 1em;
}

.impressum-header {
  font-weight: bold;
}
.impressum-content {
  max-height: 0; /* hidden by default */
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 0; /* no padding when collapsed */

  text-align: left;  
  font-size: medium;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.impressum-content p {
  margin: 0; /* optional: remove default spacing */
}
.impressum-content h2 {
  font-size: large;
}
.impressum-content h3 {
  font-size: large;
}

section.impressum.expanded .impressum-content {
  max-height: none;
  padding: 10px 0; /* show padding when expanded */
}