.footer-right a, a[href^="mailto:"] {
    color: #ff9800;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
a[href^="mailto:"]:hover {
    color: #fff;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #181818;
    color: #f0f0f0;
}
header {
    background: #222;
    padding: 20px 0;
    text-align: center;
}
header h1 {
    margin: 0;
    font-size: 2.5em;
    letter-spacing: 2px;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}
nav a {
    color: #f0f0f0;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
nav a:hover {
    color: #ff9800;
}
main {
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}
footer {
    background: #222;
    padding: 15px 0;
    margin-top: 40px;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-left {
    color: #f0f0f0;
    font-size: 1em;
}
.footer-right {
    text-align: right;
}
.footer-right a {
    color: #ff9800;
    text-decoration: none;
    margin-left: 10px;
    font-weight: bold;
    transition: color 0.2s;
}
.footer-right a:hover {
    color: #fff;
}
.header-mit-grafik {
    position: relative;
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: url('../img/logo.png') center center no-repeat;
    background-size: cover;
    /* Optional: dunkler Overlay für bessere Lesbarkeit */
}
.header-mit-grafik::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
.header-inhalt, .band-logo-header {
    position: relative;
    z-index: 2;
}
.band-logo-header {
    display: none; /* Logo als Hintergrund, daher Bild ausblenden */
}
.topbar {
    width: 100%;
    background: #111;
    color: #fff;
    padding: 8px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.1em;
}
.social-links {
    display: flex;
    gap: 16px;
    margin-right: 24px;
}
.social-links a {
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 1.3em;
}
.social-links .fa-facebook-f   { color: #1877f3; }
.social-links .fa-instagram    { color: #e4405f; }
.social-links .fa-youtube      { color: #ff0000; }
.social-links .fa-tiktok {
    color: #fff;
    background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 0 0 2px #000, 0 0 6px #25f4ee;
}
.social-links .fa-bandcamp     { color: #629aa9; }
.social-links .fa-spotify      { color: #1db954; }
.social-links .fa-amazon       { color: #ff9900; }
.social-links .fa-apple        { color: #a2aaad; }
.social-links .fa-itunes-note  { color: #fa2a55; }
.social-links .fa-envelope     { color: #fff; }
.social-links a:hover i {
    opacity: 0.7;
}
.navbar {
    width: 100%;
    background: #181818;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-bottom: 2px solid #222;
    position: relative;
    z-index: 10;
}
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}
.navbar li {
    display: inline-block;
}
.navbar a {
    display: block;
    padding: 18px 20px;
    color: #f0f0f0;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
    border-radius: 4px 4px 0 0;
}
.navbar a:hover,
.navbar a.active {
    background: #222;
    color: #ff9800;
}