/* ============================================================
   Motiv — die konzentrischen Ringe vom Kino-Cover.
   Reines CSS, kein Bild, keine zusätzliche Ladezeit.
   Zum Entfernen genügt es, diese Datei nicht einzubinden.
   Überarbeitet 2026-08-24: sitzt jetzt hinter dem Masthead.
   ============================================================ */

.masthead{position:relative;overflow:hidden}

/* Ringe, die rechts aus dem Satzspiegel laufen */
.masthead::before{
  content:"";
  position:absolute;
  top:46%;
  left:78%;
  width:min(88vw,900px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-radial-gradient(
    circle at center,
    var(--accent) 0 1.5px,
    transparent 1.5px 15px
  );
  opacity:.22;
  -webkit-mask-image:radial-gradient(circle at center,#000 36%,transparent 70%);
  mask-image:radial-gradient(circle at center,#000 36%,transparent 70%);
  pointer-events:none;
}

/* Die Pupille in der Mitte, wie auf dem Cover */
.masthead::after{
  content:"";
  position:absolute;
  top:46%;
  left:78%;
  width:11px;
  height:11px;
  margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
  pointer-events:none;
}

/* Kleines Ringzeichen vor jedem Abschnittslabel */
.section-head .label::before,
.bridge .label::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:.65rem;
  vertical-align:.06em;
  border-radius:50%;
  border:1px solid var(--accent);
  opacity:.7;
}

/* Der Übergang zwischen den Bändern bekommt eine feine Doppellinie */
.section--band{
  box-shadow:inset 0 1px 0 var(--paper),inset 0 2px 0 var(--rule);
}

@media (max-width:720px){
  .masthead::before{left:88%;width:132vw;opacity:.14}
  .masthead::after{left:88%}
}