/* Default KUNIMUS world base */
    .bodyCDshop {    
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: #000000 url('pic/derKLANGmaster_KUNIMUS_BG_003.jpg') no-repeat center center fixed;
      background-size: cover;
      color:#eeeeee;
      min-height: 100vh;
      display: flex;
      flex-direction: column;     
    }
	
	a {
		color: #5190f5;          /* Textfarbe für ALLE Links */
		text-decoration: none;   /* keine Unterstreichung */
		font-size: 18px;         /* normale Textgröße */
	}

	/* Hover-Effekt für Links */
	a:hover {
		text-decoration: underline; /* beim Überfahren unterstreichen */
	}

    .ktsPC_nav {
      /* background: rgba(34, 34, 34, 0.40); */ /* 40% transparent */
	  background-color: rgba(81, 144, 245, 0.2);
      /*padding:10px;*/
	   padding: 100px auto 0 auto;
      text-align:center;
     /* position:fixed; */
     /* top:0; left:0; right:0; */
     /* z-index:1000; */
    }
    .ktsPC_nav a { color:#5190f5; margin:0 4px; text-decoration:none; font-weight:bold; }
    .ktsPC_nav a:hover { color:#fff; }
    h1 { text-align:center; margin-top:70px; }
    .song-grid {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:20px; padding:1px; margin-top:1px;
    }
    .song-card { background:transparent; border:none; padding:12px; width:150px; text-align:center; } /* breite der Spalten*/
    .song-card img { width:100px; height:100px; object-fit:contain; margin-bottom:8px; cursor: pointer; }
    .song-card h3 { font-size:16px; color:#5190f5; margin:6px 0; }
    .song-card p { font-size:12px; color:#ccc; margin:4px 0; }
    .controls { margin-top:8px; }
	
	.link-btn, .play-btn {
	  font-size: 10px;       /* kleinere Schrift */
	  padding: 3px 6px;     /* kompakter Innenabstand */
	  border-radius: 3px;    /* dezente Rundung */
	  background-color: #5190f5; /* deine Hauptfarbe */
	  color: #000000;
	  cursor: pointer;
	  border: none;
	  
	  /* Leucht-Nebel Schatten */
	box-shadow: 0 0 10px rgba(81, 144, 245, 0.8),
	0 0 20px rgba(81, 144, 245, 0.6),
	0 0 30px rgba(81, 144, 245, 0.4);
	transition: box-shadow 0.3s ease;

	}
	
	.link-btn:hover, .play-btn:hover, .song-card:hover {
	  /* stärkerer weißer Glow beim Hover */
	  box-shadow: 0 0 15px rgba(255,255,255,1),
				  0 0 30px rgba(255,255,255,0.8),
				  0 0 45px rgba(255,255,255,0.6);
	}
  
  /*
  .play-btn { background:#5190f5; border:none; padding:6px 12px; border-radius:4px; cursor:pointer; }
    .play-btn:hover { background:#fff; color:#000; }
    .link-btn { display:inline-block; margin-left:8px; padding:6px 12px; background:#5190f5; color:#000; border-radius:4px; text-decoration:none; font-weight:bold; }
    .link-btn:hover { background:#fff; color:#000; }
*/

	.farbe { color:#5190f5;}
	
	/* Fortschritbalken */
	.music-progress {
	  width: 100%;
	  height: 6px;
	  margin-top: 6px;
	  border-radius: 4px;
	  background: rgba(255,255,255,0.2);
	  -webkit-appearance: none;
	}
	.music-progress::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background: #5190f5;
	  cursor: pointer;
	}
	.music-progress::-moz-range-thumb {
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background: #5190f5;
	  cursor: pointer;
	}

	/* Standard: kein Umbruch sichtbar */
.mobile-break { display: none; }

/* Nur im Portrait-Modus sichtbar */
@media screen and (orientation: portrait) {
  .mobile-break { display: inline; }
}


    /* Newsletter */
	.newsletter {
	  background: rgba(34, 34, 34, 0.40); /* 40% transparent */
	  padding:20px;
	  text-align:center;
	  margin-top:40px;
	  border-radius:8px; /* optional, für weiche Kanten */
	    font-size:14px;   /* optional etwas kleiner */
	}
	
	.newsletter input[type="email"] {
	  padding:8px;
	  width:300px;
	  border-radius:4px;
	  border:none;
	  font-size:16px;   /* nur hier größer */
	}


    .newsletter label {
	  display:inline-block;
	  margin:2px 4px;   /* engerer Abstand */
	  color:#ccc;
	  line-height: 0.8;  /* kleinere Zeilenhöhe */
	  font-size:12px;   /* optional etwas kleiner */
	}

    .newsletter button {
      margin-top:10px; padding:8px 16px;
      background:#5190f5; border:none; border-radius:4px; cursor:pointer;
    }
    .newsletter button:hover { background:#fff; color:#000; }
    #newsletterMessage {
      margin-top:10px; font-weight:bold;
    }
	
	
	/* ================== aside Menu ================== */
	.side-menu {
	  position: fixed;
	  top: 50%;
	  right: 0;
	  /* left: 0; */
	  transform: translateY(-50%); /* zentriert vertikal */
	  background-color: rgba(81, 144, 245, 0.2);
	  border-radius: 8px 0 8px 0;
	  /* border-radius: 0 8px 8px 0; rechte seite */	 
	  z-index: 9999;
	  display: flex;
	  flex-direction: column;
	  overflow: hidden;
	  transition: width 0.4s ease;
	}

	.side-menu.collapsed {
	  width: 12px;
	}

	.side-menu.expanded {
	  width: 80px;
	}

	.menu-toggle {
	  width: 24px; /* Anfasser breite */
	  height: 50px;
	  background-color: rgba(255, 255, 255, 0.3); /* ≈ 30% Weiß-Grau */ /* #FFFFFF + 30% sichtbar */
	  cursor: pointer;
	}

	.menu-content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 16px 8px;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.3s ease;
	}

	.side-menu.expanded .menu-content {
	  opacity: 1;
	  pointer-events: auto;
	}

	.side-menu a {
	  font-size: 20px;
	  text-decoration: none;
	  color: #5190f5;
	  padding: 4px;
	  transition: background-color 0.2s ease, color 0.2s ease;
	}

	.side-menu a:hover {
	  background-color: rgba(255, 255, 255, 0.1);
	  color: #fff;
	  border-radius: 4px;
	}	


	/* Auf kleinen Bildschirmen kleiner machen */
	@media (max-width: 400px) {
	  .side-menu a {
		font-size: 20px;
	  }
	}