/* Globale Styles */
:root {
  --primary-color: #1DB954;
  --secondary-color: #191414;
  --text-color: #FFFFFF;
  --background-color: #121212;
  --border-color: #333333;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header und Navigation */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 30px;
}

h1 {
  font-size: 2.5rem;
  color: var(--primary-color);
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin-left: 20px;
}

nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease;
}

nav a:hover, nav a.active {
  color: var(--primary-color);
}

/* Main Content */
main {
  min-height: 70vh;
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--text-color);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--text-color);
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-align: center;
}

.btn.primary {
  background-color: var(--primary-color);
  color: #FFFFFF;
}

.btn.primary:hover {
  background-color: #1ED760;
}

.btn.secondary {
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--text-color);
}

.btn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn.small {
  padding: 5px 10px;
  font-size: 0.9rem;
}

/* Spotify Login Button */
.spotify-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1rem;
  background-color: var(--primary-color);
}

.spotify-login:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='white' d='M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 30.6 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z'%3E%3C/path%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
}

/* Formulare und Einstellungen */
.settings-form {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-row {
  margin-bottom: 15px;
}

.form-row label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-row input[type="checkbox"] {
  margin-right: 10px;
}

.form-row input[type="color"] {
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-right: 10px;
}

.form-row select {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

/* Overlay URL Box */
.overlay-url-section {
  margin-top: 40px;
}

.url-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 5px;
  margin-top: 10px;
}

.url-box code {
  font-family: monospace;
  background-color: var(--secondary-color);
  padding: 10px;
  border-radius: 4px;
  flex-grow: 1;
  user-select: all;
}

/* User Info */
.user-info {
  text-align: center;
  margin: 40px 0;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.button-group {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Login Section */
.login-section {
  text-align: center;
  max-width: 600px;
  margin: 60px auto;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.login-section h2 {
  margin-bottom: 15px;
}

.login-section p {
  margin-bottom: 25px;
  color: #AAAAAA;
}

/* Footer */
footer {
  margin-top: 50px;
  text-align: center;
  color: #777777;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

/* Media Queries für Responsivität */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  
  nav ul {
    margin-top: 15px;
    justify-content: center;
  }
  
  nav li {
    margin: 0 10px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .url-box {
    flex-direction: column;
  }
}

/* Kleiner Text */
.small-text {
  font-size: 0.85em;
  color: #777;
  margin-top: 8px;
}

.small-text a {
  color: #1DB954;
  text-decoration: none;
}

.small-text a:hover {
  text-decoration: underline;
}

/* Größeneinstellungen */
.form-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section h4 {
  margin-bottom: 15px;
  color: var(--text-color);
  font-size: 1.2rem;
}

.size-input {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.size-field {
  flex: 1;
}

.input-with-unit {
  display: flex;
  align-items: center;
}

.input-with-unit input[type="number"] {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.unit {
  margin-left: 5px;
  color: #999;
}

#scroll-speed-value {
  display: inline-block;
  min-width: 25px;
  text-align: right;
  margin-left: 10px;
}

#fixed-size-controls, #text-scroll-controls {
  display: block;
}

/* Media Queries für Responsivität */
@media (max-width: 768px) {
  .size-input {
    flex-direction: column;
    gap: 10px;
  }
}