/*--------------------------------------------------------------
# Eigene Schrift einbinden
--------------------------------------------------------------*/
@font-face {
  font-family: "MKSansserifMediumTallX";
  src: url("assets/fonts/MKSansserifMediumTallX.woff") format("woff"),
       url("assets/fonts/MKSansserifMediumTallX.eot") format("embedded-opentype"),
       url("assets/fonts/MKSansserifMediumTallX.svg#MKSansserifMediumTallX") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*--------------------------------------------------------------
# Eigene Schrift einbinden – Light
--------------------------------------------------------------*/
@font-face {
  font-family: "MKSansserifLightTallX";
  src: url("assets/fonts/MKSansserifLightTallX.woff") format("woff"),
       url("assets/fonts/MKSansserifLightTallX.eot") format("embedded-opentype"),
       url("assets/fonts/MKSansserifLightTallX.svg#MKSansserifLightTallX") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*--------------------------------------------------------------
# Schriftvariablen
--------------------------------------------------------------*/
:root {
  --default-font: "MKSansserifMediumTallX", sans-serif;
  --heading-font: "MKSansserifMediumTallX", sans-serif;
  --nav-font: "MKSansserifMediumTallX", sans-serif;
  --accent-color: #d4af37;
}

html, body {
	padding:0;
	margin:0;
	background-color:#111;
	color:white;
	font-family: var(--default-font);
	min-height:100%;
	height:100%;
}
main_old {
  position: relative;
  padding-top: 56.2429696287964%; /* e.g., 16:9 image -> 9/16*100 = 56.25% */
  background: url('assets/img/Website Cover Photo.png') center center / cover no-repeat;
  background-size: min(600px, 100%) auto; 
  min-height: 96%;
  max-width: 100vw;
}

main_old2  {
  width: 100%;           /* container width can be whatever fits layout */
  height: 96%;         /* fixed height or based on viewport, e.g., 100vh */
  max-width: 100%;       

  background: url('assets/img/Website Cover Photo.png') center center / cover no-repeat;
  background-repeat: no-repeat;
  background-position: center;     /* center horizontally */
  background-size: auto 100%;      /* full height, width scales automatically */

  /* optional: ensure at least part of the image is visible */
  overflow: hidden;     /* hide overflowing parts if needed */
  min-width: 600px;     /* minimum width of the container */
}

main {
  width: 100%;
  
  /* calculate min height needed to cover viewport width */
  height: max(295px, 100vw / 1.7778); 

  background-image: url('assets/img/Website Cover Photo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%; /* full height, width scales */
  overflow: hidden;
	
}


.container {
	text-align: center;
}
.icon {
	color:var(--accent-color);
	font-size:32px;
}

footer {
  line-height:2;
  vertical-align:center;
  font-family: "MKSansserifLightTallX", sans-serif;
  padding-bottom:20px;
}
.copyright {
	line-height:2;
	font-size:14px;
}

/* --- Social Buttons Footer --- */
.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Abstand zwischen Buttons */
}

/* Einheitliche vertikale Ausrichtung & Hover */
#footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

/* Facebook Icon */
#footer .icon {
  font-size: 30px;               /* gleiche Höhe wie Bandcamp */
  color: var(--accent-color);    /* gold */
}

/* Bandcamp Icon */
#footer .icon-img {
  height: 30px;                  /* gleiche Höhe wie Facebook */
  display: inline-block;
}

/* Hover-Effekt für beide Buttons */
#footer a:hover .icon,
#footer