:root { --bg:#0e0f13; --fg:#f5f7fb; --card:#171923; --accent:#36e2ff }
  /* Hellgrüner "Soundhunter Records präsentiert"-Link */
.presented-by a {
  color: #90ee90;                  /* hellgrün */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.presented-by a:hover {
  color: #b3ffb3;                  /* noch etwas heller */
  text-shadow: 0 0 6px #90ee90;    /* leuchtender Effekt */
}
	html { scroll-behavior:smooth }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
  }
  .skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .skip-link:focus { position:static; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; border-radius:6px; display:inline-block; margin:8px; }

  /* Vollflächiges Bild als DOM-Element (scharf auf Mobile) */
  .bg-image {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;              /* hinter allem anderen */
    pointer-events: none;     /* blockiert keine Klicks */
    will-change: transform;   /* sanfter beim Scrollen */
  }

  /* Grund-Layout */
  body {
    margin:0;
    background: var(--bg);    /* nur Farbe, Bild kommt über .bg-image */
    color: var(--fg);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height: 1.5;
  }

  /* Dezentes Twinkle-Overlay */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(255,255,255,0.45) 1px, transparent 1.2px),
      radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1.2px);
    background-size: 120px 120px, 180px 180px;
    background-position: 0 0, 60px 60px;
    mix-blend-mode: screen;
    opacity: 0.18;
    animation: twinkle 7s ease-in-out infinite alternate, drift 120s linear infinite alternate;
  }
  @keyframes twinkle { from { opacity: 0.12; filter: brightness(0.9); } to { opacity: 0.22; filter: brightness(1.1); } }
  @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }

  @media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

  /* Mobile Feinjustierung */
  @media (max-width: 480px) {
    body::after {
      opacity: 0.12;
      animation: twinkle 9s ease-in-out infinite alternate, drift 160s linear infinite alternate;
    }
  }

  header { text-align:center; padding:48px 20px 24px; background-color: rgba(14,15,19,0.6); border-radius: 8px; margin: 20px; }
  h1 { margin:0 0 10px; font-size:clamp(28px,4vw,44px) }
  .subtitle { opacity:.85 }

  .whatsapp-btn { display:inline-block; background-color:#25D366; color:white; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:bold; margin-top:10px; }
  .whatsapp-btn:hover { background-color:#1ebe5b; }
  .whatsapp-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

  .grid { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; padding:12px 20px 32px; max-width:1200px; margin:0 auto }
  a.card { display:block; width:min(220px,25vw); min-width:160px; background:var(--card); border-radius:14px; text-decoration:none; color:var(--fg); overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition:transform .2s, box-shadow .2s }
  a.card:hover, a.card:focus { transform:translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.5); outline:none }
  a.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .thumb { display:block; width:100%; height:auto; }

  section { padding:72px 18px; max-width:900px; margin:0 auto; background-color: rgba(14,15,19,0.6); border-radius: 8px; margin-bottom: 20px; }
  section h2 { font-size:clamp(22px,3vw,34px); margin:0 0 8px }
  .toplink { display:inline-block; margin-top:10px; color:var(--accent) }

  /* Social links */
  .social { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
  .social a { color: var(--fg); opacity:0.9; text-decoration:none; background: rgba(54,226,255,0.15); padding:6px 10px; border-radius:6px; font-size:0.95rem; }
  .social a:hover { opacity:1; background: rgba(54,226,255,0.25); }

  footer { text-align:center; padding:32px 10px; opacity:.85; font-size:.9rem; background-color: rgba(14,15,19,0.6); border-radius: 8px; margin: 20px; }
  footer a { color:var(--accent); margin:0 8px; text-decoration:none }
  footer a:hover { text-decoration:underline }

  @media (max-width: 360px){ a.card { min-width:100%; } }

  /* Intro-Text im Header */
  .intro-text { 
    max-width: 900px; 
    margin: 12px auto 0; 
    line-height: 1.7; 
    opacity: 0.95;
  }
  .intro-text p { margin: 0 0 12px; }

  /* Einheitliche Buttons */
  .btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
  .btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  .btn:hover { transform: translateY(-1px); }

  .btn--whatsapp { background-color: #25D366; }
  .btn--whatsapp:hover { background-color: #1ebe5b; }

  .btn--spotify { background-color: #1DB954; }

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

  /* Toplink optisch etwas stärker */
  .toplink { display:inline-block; margin-top:20px; color:var(--accent); font-weight:600; }

  .buchen-btn { display:inline-block; margin-top:10px; }


/* Shared additions for multi-page layout */
.container { max-width: 1000px; margin: 0 auto; padding: 24px; background-color: rgba(14,15,19,0.6); border-radius: 8px;}
.page-header { text-align:center; padding:48px 20px 24px; background-color: rgba(14,15,19,0.6); border-radius: 8px; margin:20px; }
.site-nav { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin: 8px 0 0; }
.site-nav a { color: var(--fg); text-decoration:none; background: rgba(54,226,255,0.15); padding:6px 10px; border-radius:6px; font-weight:600; }
.site-nav a:hover { background: rgba(54,226,255,0.25); }
main.page { padding: 24px 18px 72px; max-width: 900px; margin: 0 auto; }
.backlink { display:block; margin-top:12px; color:var(--accent); font-weight:600; text-decoration:none; }
.backlink:hover { text-decoration: underline; }
.small.muted { opacity: .85; font-size: .95rem; line-height: 1.65; }
h1.page-title { margin: 0 0 8px; font-size: clamp(28px, 4vw, 44px); }
h2.page-subtitle { margin: 0; opacity: .85; font-weight: 500; }
footer.global { text-align:center; padding:32px 10px; opacity:.85; font-size:.9rem; background-color: rgba(14,15,19,0.6); border-radius: 8px; margin: 20px; }
footer.global a { color: var(--accent); margin: 0 8px; text-decoration:none; }
footer.global a:hover { text-decoration: underline; }

/* Aktiver Menüpunkt */




/* Active nav item */


/* Dropdown for Projekte */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  background: rgba(54,226,255,0.15);
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.nav-dropdown[open] summary { background: rgba(54,226,255,0.25); }
.nav-dropdown summary::-webkit-details-marker { display: none; }

.nav-dropdown .menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 8px;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
}
.nav-dropdown .menu a {
  background: transparent;
  padding: 8px 10px;
  border-radius: 6px;
}
.nav-dropdown .menu a:hover {
  background: rgba(54,226,255,0.18);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: .95;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: .7; }



/* Active nav item underline instead of outline */
.site-nav a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}

/* Improve dropdown on mobile */
.nav-dropdown summary {
  display: inline-block;
}
/* Text in Hauptinhalten linksbündig */
main.page, 
main.page p, 
main.page h2, 
main.page h3, 
main.page h4 {
  text-align: left;
}
.inline-logo {
  float: left;             /* Bild links, Text rechts daneben */
  max-width: 200px;        /* maximale Breite am Desktop */
  width: 100%;             /* passt sich dem Handy an */
  height: auto;            /* behält Proportionen */
  margin: 0 16px 12px 0;   /* Abstand zum Text */
}
@media (max-width: 600px) {
  .inline-logo {
    float: none;           /* auf kleinen Displays nicht neben dem Text */
    display: block;
    margin: 0 auto 16px;   /* Bild zentriert über dem Text */
  }
}