/* startseite.css - Vintage-Optik der Startseite (wird nur dort geladen).
   Alle Dekorationen liegen als Ebenen HINTER dem Inhalt (z-index) und fangen
   keine Klicks ab. Auf dem Handy sind die meisten Ebenen ausgeblendet. */

/* =====================================================================
   Hero: dunkler Hintergrund mit Plattenladen links, Altstadt und grosser
   Schallplatte rechts. Die Bilder werden an allen Kanten weich ausgeblendet.
   ===================================================================== */
.hero { background: var(--violett-dunkel); }
.hero-ebenen { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-ebene { position: absolute; background-repeat: no-repeat; display: none; }
.hero-innen { z-index: 1; }

.hero-kicker { display: flex; align-items: center; gap: 14px; }
.hero-kicker::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .7; }

@media (min-width: 700px) {
  /* Atmosphaerischer Plattenladen links (warmes Licht, Regale) */
  .hero-laden {
    display: block; inset: 0 40% 0 0; background-size: cover; background-position: 40% 62%;
    opacity: .5; filter: sepia(.4) saturate(1.3) brightness(.85) blur(1.2px);
    -webkit-mask-image: radial-gradient(ellipse 95% 130% at 0% 45%, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 78%);
            mask-image: radial-gradient(ellipse 95% 130% at 0% 45%, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 78%);
  }
  /* Brugger Altstadt an der Aare, im rechten Hintergrund */
  .hero-stadt {
    display: block; left: 36%; right: auto; bottom: 0; width: 64%; height: 100%;
    background-size: contain; background-position: right bottom; opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  }
  /* Grosse, angeschnittene Schallplatte oben rechts */
  .hero-scheibe {
    display: block; top: -190px; right: -310px; width: 780px; height: 780px;
    background-size: 100% 100%; opacity: .95;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
            mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
  }
  .hero-bild { z-index: 1; }
  .hero { min-height: 400px; }
  .hero-innen { padding-top: 54px; padding-bottom: 54px; }
  .hero h1 { font-size: clamp(2.7rem, 5.2vw, 4rem); letter-spacing: -.015em; }
}
/* weicher Uebergang des Heros nach unten (keine harte Kante zum Hintergrund) */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20, 16, 32, .65));
}

/* =====================================================================
   "Neu eingetroffen" als Vintage-Plattenladen-Buehne
   (Creme/Pergament, feine Koernung, Stempel, Rillen, unscharfe Regale)
   ===================================================================== */
.neu-buehne {
  position: relative; isolation: isolate;
  margin: 0 calc(50% - 50vw); padding: 44px calc(50vw - 50%) 56px;
  background: linear-gradient(180deg, #f4ebdd 0%, #f1e3cc 55%, #f4ebdd 100%);
}
.neu-buehne:first-child { margin-top: -20px; }
@media (min-width: 1000px) {
  .neu-buehne { padding-top: 60px; padding-bottom: 80px; }
  .neu-buehne:first-child { margin-top: -44px; }
}
.buehne-ebenen { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.buehne-ebene { position: absolute; background-repeat: no-repeat; }
/* Unten laeuft die Buehne weich in den Seitenhintergrund aus (keine harte Kante) */
.buehne-ebenen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(180deg, rgba(244, 235, 221, 0), #f4ebdd);
}

/* Papierkoernung ueber die ganze Flaeche */
.buehne-koernung { inset: 0; background-repeat: repeat; background-size: 240px 240px; opacity: .55; mix-blend-mode: multiply; }

/* Angedeutete Vinylrillen rechts oben */
.buehne-rillen {
  top: -320px; right: -300px; width: 780px; height: 780px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(73, 54, 45, .11) 0 1px, transparent 1px 8px);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
          mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}
/* Runder Vintage-Stempel links */
.buehne-stempel {
  display: none; top: 46%; left: max(-100px, calc(50% - 790px)); width: 210px; height: 210px;
  background-size: contain; opacity: .2; transform: rotate(-14deg);
}
/* Unscharfe Plattenregale unten links und rechts */
.buehne-regal-l, .buehne-regal-r { display: none; width: 520px; height: 330px; background-size: cover; }
.buehne-regal-l {
  left: -70px; bottom: -50px; background-position: 15% 85%; opacity: .45;
  filter: blur(5px) sepia(.55) saturate(1.2) brightness(1.05);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 30% 70%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 75% at 30% 70%, #000 25%, transparent 72%);
}
.buehne-regal-r {
  right: -70px; bottom: -50px; background-position: 50% 40%; opacity: .4;
  filter: blur(4px) sepia(.6) saturate(1.1) brightness(1.1);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 70% 70%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 75% at 70% 70%, #000 25%, transparent 72%);
}
@media (min-width: 900px) {
  .buehne-stempel, .buehne-regal-l, .buehne-regal-r { display: block; }
}
@media (max-width: 899px) {
  /* Tablet/Handy: nur Koernung und dezente Rillen */
  .buehne-rillen { top: -260px; right: -380px; opacity: .8; }
}

/* Inhalt der Buehne: Titel kraeftiger auf dem warmen Hintergrund */
.neu-buehne .abschnitt-titel { color: var(--violett-dunkel); }
.neu-buehne .abschnitt-link { color: var(--violett-dunkel); }